HTML/Basiscursus/De basis
Uit Wikibooks
|
|
|
Inhoudsopgave
|
Dan zijn we nu aanbeland op het gedeelte waar het echt gaat beginnen: uw eerste regels HTML.
Inhoud |
[bewerken] Element
Een HTML-document is grotendeels opgebouwd uit elementen. U bent de term "element" al een aantal keren tegen gekomen, evenals de term "tag". Een element heeft de volgende opbouw: starttag inhoud eindtag.
Een starttag is van de vorm: <tagnaam> en de bijbehorende eindtag heeft de vorm: </tagnaam>.
Een starttag geeft het begin aan van een element. Met een starttag geeft u aan om wat voor element het gaat: een paragraaf, een lijst, enzovoorts. Als voorbeeld nemen we een element waarin u een gebruikte afkorting, laten we zeggen FAQ, wilt uitschrijven: dit kan met een abbr-tag. U zet dus voor uw afkorting de begintag: <abbr>. Aan het einde van de afkorting zetten we de bijbehorende eindtag: </abbr>. U heeft nu dus het element: <abbr>FAQ</abbr>.
Nu willen we FAQ uitschrijven. Dit kan doordat we een attribuutwaarde doorgeven door middel van een attribuut. In dit geval heet het attribuut "title" en is de attribuutwaarde "Frequently Asked Questions". U krijgt dan een constructie als de volgende:
- <abbr title="Frequently Asked Questions">FAQ</abbr>. Let op de manier waarop een attribuut wordt toegevoegd: attribuutnaam="attribuutwaarde".
Wel, dat was het, u kunt nu uw eerste pagina maken.
[bewerken] Een eerste pagina
Laten we een eerste blik werpen op een lege HTML-pagina. Geen zorgen, ieder onderdeel wordt nog apart uitgelegd.
HTML-code:Een lege HTML-pagina
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Een eerste pagina</title> </head> <body> </body> </html>
Zoals u ziet heeft ieder element een begin- en een eindtag. Ook kunt u zien dat elementen "genest" kunnen worden: elementen in elementen. Zo maakt het title-element deel uit van het head-element, dat op zijn beurt weer in het html-element is genesteld.
Zoals u ziet is er gebruik gemaakt van een aantal regeleindes en witregels. Merk op dat dit in HTML niets uitmaakt: u had ook alles op een regel kunnen plaatsen.
[bewerken] Doctype
Elk HTML-document zou moeten beginnen met een document type declaration. Er zijn namelijk drie "smaken" HTML 4.01, sommige staan tags toe die andere doctypes niet toestaan.
- HTML 4.01 Strict
- Dit is de versie waarin de meeste nadruk is gelegd op structuur. Een aantal elementen die specifiek waren bedoeld voor opmaak zijn uit deze versie weggelaten.
- HTML 4.01 Transitional
- Deze versie bevat alle elementen uit de strict-versie, maar bevat bovendien enkele afgekeurde elementen. Deze versie is derhalve wat "losser" in vergelijking met HTML 4.01 Strict. Ook vervalt de nadruk op structuur enigzins in deze versie, en wordt er de mogelijkheid gegeven ook via HTML de opmaak te bepalen, in plaats van via CSS.
- HTML 4.01 Frameset
- Dit is een variant op de transitional-versie, speciaal bedoeld voor documenten waarin gebruik wordt gemaakt van frames.
De verschillende versies gebruiken respectievelijk de volgende doctypes:
HTML-code:De drie DTD's voor HTML 4.01: Strict, Transitional en Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Er bestaat de mogelijkheid om een eigen doctype te maken, dit valt echter buiten de leercurve van dit module.
Ook XHTML heeft Strict, Transitional en Frameset doctypes, alleen dan voor XHTML:
XHTML-code:De drie DTD's voor XHTML 1.0: Strict, Transitional en Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
[bewerken] Html-tag
Na de doctype komt de html-tag die het begin van het werkelijke html-document aanduidt. Het document eindigt met een html-eindtag.
[bewerken] Head-tag
Zoals u kunt zien bestaat een HTML-pagina uit twee "gedeelten": het head-gedeelte en het body-gedeelte. Het head-gedeelte bevat vooral meta-data: gegevens over het document. Zo kunt u een titel opgeven, die vaak in een browser wordt weergegeven in de titelbalk van het browserscherm, door middel van het title-element, maar ook door middel van meta-tags informatie doorgeven over de auteur of de copyright-situatie.
[bewerken] Body-tag
In het body-gedeelte staat de eigenlijke inhoud van een document. In dit gedeelte zult u het meeste aan uw pagina's werken.
[bewerken] Opslaan
Goed, dat was het dan. U kunt nu de pagina opslaan als bestandsnaam.html, u kunt ook de extensie .htm gebruiken. Wanneer u nu de pagina bezoekt met uw browser, zult u zien dat we een compleet lege pagina hebben (omdat er nog niks tussen de body-tags staat), maar dat er wel een titel is.
[bewerken] Toekomstige overstap naar XHTML
In HTML bestaan er ook tags die geen tekst markeren, en dus niet hoeven te worden afgesloten. In XHTML daarentegen is dit wel verplicht. De <img> tag (daarover later meer) bijvoorbeeld hoeft niet afgesloten te worden in HTML, maar in XHTML wordt het <img></img> (zonder waarden ertussen), of u plaatst een slash (/) voor het einde van de losse tag, dus <img/>. De laatste manier verdient de voorkeur. Sommige browsers ondersteunen dit echter zo slecht, dat u voor de extra slash een spatie moet zetten, dus <img />. Dan bestaat er in HTML nog de gewoonte om tags met hoofdletters te schrijven, in XHTML is dit echter verboden, daarom wordt het afgeraden om dit nu al te doen. Ook attributen worden weleens zonder de dubbele aanhalingstekens (") geschreven; ook dit is in XHTML verboden.
[bewerken] Meer informatie
- A List Apart over doctypes (Engels)
 |
Deze pagina is vrijgegeven onder de GNU Free Documentation License (GFDL) en nog niet onder CC-BY-SA. Klik hier voor meer informatie.
Wilt u deze tekst gebruiken onder de Creative Commons CC-BY-SA licentie? |
