De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

HTML Les 1: Introductie HTML Webdesign module 1 - les 1 -

Verwante presentaties


Presentatie over: "HTML Les 1: Introductie HTML Webdesign module 1 - les 1 -"— Transcript van de presentatie:

1 HTML Les 1: Introductie HTML Webdesign module 1 - les 1 -

2 Inhoud module 1 Les 1: Introductie HTML HTML Syntax Minimale tag set Tekst elementen Les 2: Introductie XHTML HTML links Meerdere pagina’s HTML images Ordered/Unordered lists Les 3: Tabellen Webdesign module 1 - les 1 - Les 4: Formulieren Les 5 en 6: Maak een website in XHTML Les 7: Toets

3 HTML introductie HTML staat voor HyperText Markup Language en is de taal waarin we webpagina’s schrijven. De pagina’s bestaan uit “Markup” tags en gewone tekst De structuur van een HTML pagina bestaat uit drie onderdelen: DOCTYPE HEAD BODY Vertelt je browser welke HTML-versie je gebruikt Bevat bijvoorbeeld de “title tag” van je HTML pagina Hierin plaats je alle content die je wel wilt laten zien Webdesign module 1 - les 1 -

4 HTML Syntax HTML kent een aantal regels, ook wel de HTML Syntax genoemd Deze Syntax bepaald hoe we de HTML code schrijven HTML tags zijn trefwoorden tussen brackets Vrijwel alle tags worden eerst geopend, dan volgt er tekst (in dit geval de titel van de pagina) en daarna wordt de tag gesloten, De twee tags vormen dan samen 1 HTML element content Pagina 1 Webdesign module 1 - les 1 -

5 HTML Syntax Let op: Niet alle HTML tags worden gesloten Sommige tags staan niet om content heen en sluiten zichzelf meteen af; Bijvoorbeeld de tag om een witregel toe te voegen Webdesign module 1 - les 1 -

6 Minimale tags Alle HTML pagina’s moeten een minimale set van tag’s bevatten, namelijk:,, en een minimale HTML pagina bevat dus de volgende elementen: Hier komt de titel Alle content komt hier Hier komt de titel Alle content komt hier Webdesign module 1 - les 1 -

7 Minimale tags ElementBeschrijving Vertelt de browser welke tag sets hij kan verwachten Omkadert de hele HTML pagina Hier kun je alle informatie voor een pagina kwijt bijvoorbeeld de tags,, en Omkadert alle content die je wilt laten zien in je browser scherm Hierin kun je een titel aangeven die helemaal boven in je browser verschijnt, de tag staat altijd in het element Webdesign module 1 - les 1 -

8 Attributen en waarden Veel tags hebben nog meer opties die je kunt aanpassen. Deze opties heten attributen en je kunt ze aanpassen in de openingstag en de waarde van het attribuut staat altijd tussen aanhalingstekens. tekst Webdesign module 1 - les 1 -

9 Tekst elementen Met de volgende tags kun je teksten in HTML opmaken: Met de “h1” tag kun je een heading (titel) aangeven in je tekst, de tag loopt van h1 t/m h6, h1 is de grootste titel en h6 de kleinste. Tekst in een h1 tag wordt altijd dikgedrukt Met de “p” tag kun je een paragraaf aanduiden, er komt automatisch een witregel boven en onder de paragraaf heading tekst tekst Webdesign module 1 - les 1 -

10 Tekst elementen Met de “blockquote” tag kun je een quote/citaat beschrijven, een blockquote staat altijd een stuk van de kantlijn af Met de “break” tag kun je een witregel toevoegen (een enter), de break tag sluit je meteen af tekst Webdesign module 1 - les 1 -

11 Tekst elementen Met de “a” tag kun je een hyperlink toevoegen, dit kan een link zijn naar een document, een andere HTML pagina of een gedeelte in de pagina zelf Zorg dat je bij een link naar een webpagina altijd voor de URL zet tekst Webdesign module 1 - les 1 -

12 Tekst elementen Met de “b” tag kun je tekst dikgedrukt maken Met de “i” tag kun je tekst schuingedrukt maken Met de “sub” en “sup” tag kun je tekst in sub- of supscript weergeven Met de “big” en “small” tag kun je tekst groter of kleiner weergeven tekst Webdesign module 1 - les 1 -

13 Tekst elementen Met de “del” tag kun je tekst doorstrepen en met de “ins” tag kun je laten zien wat ervoor in de plaatst komt Met de “hr” tag kun je een horizontale lijn toevoegen Met de “em” tag kun je tekst benadrukken (wordt ook schuingedrukt) Met de “strong” tag wordt tekst ook dikgedrukt mijn favoriete kleur is groen blauw benadrukte tekst strong tekst Webdesign module 1 - les 1 -

14 Bestandsstructuur website Wanneer je een website gaat maken werk je altijd met de volgende mappenstructuur: Website naamimages index.html Webdesign module 1 - les 1 -

15 Opdracht 1 Download Notepad ++ (voor Windows) of Textwrangler (voor Mac) en maak hiermee je eerste HTML pagina. Gebruik de minimale tag set uit deze presentatie, deze kun je terugvinden op mijn blogNotepad ++Textwranglerblog Je slaat het bestand op als HTML bestand (.html) Op de pagina schrijf je kort iets over jezelf en je gebruikt alle tags die in deze presentatie staan Als je de opdracht af hebt stuur je het.html bestand naar Webdesign module 1 - les 1 -

16 Bronnen en verwijzingen HTML Pro Quick Guide app W3 Schools Volg mij op twitter Webdesign module 1 - les 1 -


Download ppt "HTML Les 1: Introductie HTML Webdesign module 1 - les 1 -"

Verwante presentaties


Ads door Google