Download
1 / 16
160 likes | 349 Views
HTML. Les 1: Introductie HTML. Inhoud module 1. Les 4: Formulieren Les 5 en 6: Maak een website in XHTML Les 7: Toets. Les 1: Introductie HTML HTML Syntax Minimale tag set Tekst elementen Les 2: Introductie XHTML HTML links Meerdere pagina’s HTML images
E N D
Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl HTML Les 1: Introductie HTML
Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl Inhoud module 1 • Les 4: • Formulieren • Les 5 en 6: • Maak een website in XHTML • Les 7: • Toets • Les 1: • Introductie HTML • HTML Syntax • Minimale tag set • Tekst elementen • Les 2: • Introductie XHTML • HTML links • Meerdere pagina’s • HTML images • Ordered/Unorderedlists • Les 3: • Tabellen
Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl HTML introductie • HTML staat voor HyperTextMarkupLanguage 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>
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>
Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl Minimale tags
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>
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>
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>
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>
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: index.html Website naam images
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
Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl Bronnen en verwijzingen • HTML Pro Quick Guide app • W3 Schools • Volgmij op twitter @hveeuwijk
