HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl HTML Les 1: Introductie HTML
Inhoud module 1 Les 4: Les 1: Les 5 en 6: Les 2: Les 7: Les 3: Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl 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 Les 4: Formulieren Les 5 en 6: Maak een website in XHTML Les 7: Toets
Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl 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 - h.v.eeuwijk@unit-ict.nl 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 <html> Vrijwel alle tags worden eerst geopend, <title> dan volgt er tekst (in dit geval de titel van de pagina) en daarna wordt de tag gesloten, </title> De twee tags vormen dan samen 1 HTML element <tag>content</tag> <title>Pagina 1</title>
HTML Syntax Let op: Niet alle HTML tags worden gesloten Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl 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 <br/>
Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl Minimale tags Alle HTML pagina’s moeten een minimale set van tag’s bevatten, namelijk: <!DOCTYPE>, <html>, <head> en <body> een minimale HTML pagina bevat dus de volgende elementen: <!DOCTYPE> <html> <head> <title> Hier komt de titel </title> </head> <body> Alle content komt hier </body> </html>
Minimale tags Element Beschrijving <!DOCTYPE> Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl Minimale tags Element Beschrijving <!DOCTYPE> Vertelt de browser welke tag sets hij kan verwachten <html> </html> Omkadert de hele HTML pagina <head> </head> Hier kun je alle informatie voor een pagina kwijt bijvoorbeeld de tags <link>, <meta>, <script> en <title> <body> </body> Omkadert alle content die je wilt laten zien in je browser scherm <title> </title> Hierin kun je een titel aangeven die helemaal boven in je browser verschijnt, de <title> tag staat altijd in het <head> element
<tag attribuut=“waarde”>tekst</tag> Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl 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. <tag attribuut=“waarde”>tekst</tag>
Tekst elementen Met de volgende tags kun je teksten in HTML opmaken: Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl 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 <h1>heading tekst</h1> <p>tekst</p>
<blockquote>tekst</blockquote> Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl 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 <blockquote>tekst</blockquote> <br/>
Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl 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 http:// voor de URL zet <a href=“URL”>tekst</a> <a href=“http://www.google.nl/”>tekst</a>
Tekst elementen Met de “b” tag kun je tekst dikgedrukt maken Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl 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 <b>tekst</b> <i>tekst</i> <sub>tekst</sub> <sup>tekst</sup> <big>tekst</big> <small>tekst</small>
Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl 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 <p>mijn favoriete kleur is <del>groen</del><ins>blauw</ins></p> <hr/> <em>benadrukte tekst</em> <strong>strong tekst</strong>
Bestandsstructuur website Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl Bestandsstructuur website Wanneer je een website gaat maken werk je altijd met de volgende mappenstructuur: Website naam images index.html
Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl 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 blog 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 h.v.eeuwijk@unit-ict.nl
Bronnen en verwijzingen Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl Bronnen en verwijzingen HTML Pro Quick Guide app W3 Schools Volg mij op twitter @hveeuwijk