HTML/Printversie

Uit Wikibooks

Deel I: Inleiding

Dit deel van het boek zal optreden als een inleiding. Er zal nog geen echte code worden aangemaakt, maar enkele fundamentele denkwijzen zullen wel worden uitgelegd.

[bewerken] De inhoud van dit deel

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?
Klik dan hier om te kijken van welke gebruikers u nog toestemming nodig heeft.

1. Geschiedenis van HTML

De geschiedenis van HTML ging in de eerste jaren hand in hand met de ontwikkeling van webbrowsers. De belangrijkste spelers daarin waren de concurrerende browsers van Netscape en Microsoft. Met elke uitgebrachte browserversie werd de HTML uitgebreid of aangepast. De organisatie W3C werd opgericht door Tim Berners-Lee, met het doel om standaarden vast te stellen, maar moest regelmatig constateren dat de standaard waaraan gewerkt werd, inmiddels achterhaald was.

HTML werd in 1991 bedacht en ontwikkeld door Tim Berners-Lee om wetenschappelijke documenten van het CERN in Genève gemakkelijker toegankelijk te maken. Hij ontwikkelde ook de eerste webbrowser, WorldWideWeb genaamd. In 1993 werd de webbrowser Mosaic ontwikkeld door het NCSA, die als eerste grafische elementen in HTML ondersteunde. Op basis daarvan ontstond in 1994 Netscape Navigator. Met de komst van deze beide browsers werd het World Wide Web echt populair. Beide browsers voegden elementen toe aan de oorspronkelijke HTML. Kort daarop mengde Microsoft zich in de strijd met een eigen webbrowser.

De eerste officiële specificatie van HTML door de W3C organisatie was HTML 2.0, geaccepteerd in september 1995. Eerder was er gewerkt aan uitbreiding van de oorspronkelijke standaard onder de naam HTML+ (gepubliceerd in november 1993). Al vóór de officiële acceptatie van HTML 2.0, werd er de volgende specificatie (HTML 3.0) voorbereid. Deze specificatie werd achterhaald door het uitkomen van Netscape versie 3 en het voorstel werd in september 1995 verlaten. Het werk werd voortgezet in HTML versie 3.2, dat de naam "Wilbur" meekreeg. Wilbur werd geaccepteerd in januari 1997. In december 1997 werd de HTML 4.0 specificatie geaccepteerd, waarop nog enkele kleine correcties zijn aangebracht in HTML 4.01 (geaccepteerd in december 1999).

De HTML 4.01 specificatie is bedoeld als de laatste specificatie van HTML. Verdere ontwikkeling van de standaard vindt plaats als XHTML (daarover later meer) en in de ontwikkeling van stylesheets en JavaScript.

De verschillende specificaties zijn grotendeels "backward compatible" en moderne browsers kunnen documenten met oudere specificaties goed weergeven. Een aantal tags die ooit door browserproducenten zijn bedacht, zijn echter nooit in de specificaties terecht gekomen, en worden ook niet door alle moderne browsers ondersteund.

[bewerken] Meer informatie

De website van het W3C (Engels)
Beschrijving van het HTML formaat uit 1992 door W3C (Engels)
Specificatie van HTML+ door W3C (Engels)
Beschrijving van het HTML+ formaat door W3C (Engels)
De HTML 2.0 specificatie, Request for Comments nr. 1866 (Engels)
Ontwerp van HTML 3.0 (Engels)
De HTML 3.2 specificatie, genaamd "Wilbur" (Engels)
De HTML 4.01 specificatie (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?
Klik dan hier om te kijken van welke gebruikers u nog toestemming nodig heeft.

2. Toekomst van HTML

Nadat HTML 4.01 werd hergeformuleerd in XHTML 1.0 (hierover later meer), verwachtte bijna iedereen dat het was afgelopen met de HTML-serie. XHTML was opeens "the way to go", een visie die wordt gesteund door het feit dat W3C afziet van verdere ontwikkeling van de HTML-standaard. Toch is niet alle ontwikkeling gestaakt.

[bewerken] Web Applications 1.0 of "HTML 5"

Zo ontwikkelt het WHATWG (Web Hypertext Application Technology Working Group) aan een nieuwe standaard genaamd "Web Applications". Aan versie 1.0 van Web Applications, informeel bekend als HTML 5, wordt nog steeds gewerkt. Het doel is dat dit later als vervolg kan optreden in de HTML-serie en de XHTML-serie. De bedoeling van de werkgroep is dan ook om een stabiele versie van het document op te sturen naar het W3C, zodat het een officiële standaard kan worden. Het plan is dat Web Forms, dat al verder is ontwikkeld, een onderdeel gaat vormen van Web Applications. Het is echter de vraag of concurrerende standaarden wel zo goed zijn voor het web.

[bewerken] Web Forms

Web Forms, wederom van WHATWG, is bedoeld om het voor HTML'ers en XHTML'ers makkelijker te maken om professionele formulieren te maken. De ontwikkeling verkeert inmiddels in een vergevorderde fase.

[bewerken] Web Controls

Ook werkt het WHATWG aan Web Controls 1.0. De bedoeling is om aan JavaScript en CSS functionaliteiten toe te voegen die het mogelijk maken om geavanceerde opmaak toe te kunnen passen op webprogramma's. De ontwikkeling verkeert nog in de beginfase, omdat eerst op andere projecten moet worden gewacht.

[bewerken] Meer informatie

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?
Klik dan hier om te kijken van welke gebruikers u nog toestemming nodig heeft.

3. Over XHTML

Zoals eerder al werd verteld, kwam er na de HTML 4.01-specificatie geen nieuwe HTML-specificatie, maar werd er begonnen aan XHTML (eXtensible HyperText Markup Language). De eerste versies van XHTML zijn simpelweg bedoeld om HTML in een XML-vorm te gieten zodat de HTML-taal in de toekomst gemakkelijk uitbreidbaar (eXtensible) wordt.

[bewerken] XHTML versus HTML

De XML-vorm van XHTML heeft enkele consequenties. Zo mag een XHTML-browser niet te "vergevingsgezind" zijn. Hiermee wordt bedoeld dat zodra er een (grove) fout in de XHTML-code staat, de browser moet stoppen met het verwerken van de pagina en in plaats daarvan een foutmelding moet geven. Dit in tegenstelling tot HTML, waarbij een browser mag "gokken" wat er bedoeld wordt met de foute code. De vergevingsgezindheid bij HTML zorgde ervoor dat er bij fouten in de code verschillen ontstonden tussen browsers en er steeds meer foute code op het WWW kwam. XHTML rekent hiermee dus af, maar de keerzijde is dus dat uw site niet meer werkt wanneer u een fout maakt.

Een ander punt is dat XHTML nog niet wordt ondersteund door de belangrijkste browser: Microsofts Internet Explorer (vanaf nu MSIE). Wanneer XHTML wordt verstuurd met het correcte MIME-type (application/xhtml+xml), dan zal MSIE het als een bestand aanbieden om te downloaden, in plaats van het gewoon te laten zien. Vaak wordt daarom XHTML nog verstuurd als text/html, waardoor het eenvoudigweg als HTML wordt verwerkt. Door het MIME-type dus te veranderen kunt u XHTML in MSIE laten werken, maar dan vallen de extra mogelijkheden die XHTML biedt weg en kunt u net zo goed weer HTML gaan gebruiken.

[bewerken] Dus... XHTML of HTML?

Waarschijnlijk doet u er het beste aan te wachten, in ieder geval tot MSIE XHTML volledig ondersteunt. Wanneer de tijd eenmaal daar is, kunt u altijd nog "de overstap" maken, die overigens erg eenvoudig is, mits u zich aan enkele regels houdt, maar daarover later meer. HTML is er en zal er ook blijven, HTML is grotendeels ondersteund en zal ook ondersteund blijven, uw HTML-pagina's zullen blijven werken. Denk eraan: XHTML is de opvolger van HTML, niet de vervanger.

[bewerken] Meer informatie

XHTML 1.0 W3C aanbeveling (Engels)
Sending XHTML as text/html considered harmful (Engels)
Over de XHTML-ondersteuning van MSIE (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?
Klik dan hier om te kijken van welke gebruikers u nog toestemming nodig heeft.

4. Semantiek

[bewerken] Wat is semantiek

Zo staat het op het Wikipedia NL-artikel over semantiek:

De semantiek houdt zich bezig met de betekenis van symbolen (zoals de woorden in een taal).

In HTML geeft de semantiek de structuur van een document aan. Het gaat daarbij niet om de semantiek van de inhoud van het document, maar om de betekenis voor de weergave van de onderdelen van het document. Opdat een user agent de structuur goed kan weergeven, moet deze structuur ook duidelijk in het document aangegeven zijn.

Zo zullen onderdelen van een document die een verschillende rol spelen, als zodanig moeten worden aangegeven. Het is dus niet voldoende dat het weergegeven resultaat (bij de meeste browsers) goed is, nee die goede weergave moet z'n oorzaak vinden in de correcte semantiek van de gebruikte HTML.

Een heel eenvoudig voorbeeld is het gebruik van een rijtje =-tekens om een dubbele lijn aan te geven. Daardoor ontstaat een dubbele betekenis van het =-teken. Een semantische fout. Of nog eenvoudiger het gebruik van het koppelteken "-" als minteken in berekeningen. Weergegeven door een browser zien we geen verschil, maar vanwege de verschillende betekenis (semantiek), moet in de code onderscheid gemaakt worden, dus aparte tekens.

Wanneer u een menu wilt maken (feitelijk dus een lijst met links), moet u dat ook beschrijven als een lijst, en niet als bijvoorbeeld een tabel.

[bewerken] Het nut van semantiek

Uit het bovenstaande blijkt al wel het belang van een goede semantiek in de HTML-code. Het zal blijken dat u een lijst en een tabel er bij weergave precies hetzelfde kunt laten uitzien. Toch is het van belang semantisch onderscheid te maken en de lijst ook als een lijst en de tabel als een tabel te definiëren. Mocht een eenvoudige browser niet de mogelijkheden hebben voor de gewenste weergave, dan zal hij de lijst als een lijst behandelen en niet als tabel. Of als u later het uiterlijk van tabellen wat wil veranderen hoeft u niet bang te zijn dat ook uw lijsten er anders gaan uit zien.

Zo zijn er nog meer voordelen. User agents begrijpen beter wat u bedoelt, waardoor het surfen voor (visueel) gehandicapten makkelijker wordt. Ook zal uw website toegankelijker zijn voor mensen met een tekstbrowser, zoals Lynx. Daarnaast wordt ook voor u het werken makkelijker: u weet meteen met wat voor een informatie u van doen heeft.

Semantiek speelt een steeds grotere rol, wanneer u uw site hoog in de zoekresultaten van zoekmachines wilt hebben. Zo zal er waarschijnlijk meer waarde worden gehecht aan de inhoud van een kop, dan aan de waarde van bijvoorbeeld een gewone paragraaf.

[bewerken] Meer informatie

Semantiek - Waarom zou je? (Nederlands)
Naar Voren over semantiek (Nederlands)
Rikkert Koppes over semantiek in "Do you smurf what I smurf?" (Engels)
Brainstorms and Raves over semantiek (Engels)
Het klassieke artikel The Semantic Web (Engels)
Discussie op Gathering of Tweakers over het semantische web met als deelonderwerp de semantiek in de HTML (Nederlands)
Wikipedia EN over het semantisch web (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?
Klik dan hier om te kijken van welke gebruikers u nog toestemming nodig heeft.

5. Scheiding tussen structuur en opmaak

Wanneer u uw auto een andere kleur wilt geven, maar de auto zelf wilt houden, kunt u de auto laten overspuiten. U geeft dan dezelfde structuur een andere opmaak. Dit is mogelijk omdat de structuur en de opmaak zijn gescheiden: de opmaak vormt als het ware een laag over de structuur heen, maar zit niet in de structuur genesteld, waardoor u eenvoudig een andere opmaak kunt laten toepassen.

Zo kan het ook met websites gaan. Het HTML-document beschrijft de structuur door aan te geven wat de diverse onderdelen, zoals titels, subtitels, paragrafen, voetnoten lijsten enz., voor betekenis hebben, maar laat de opmaak, dus hoe de onderdelen uiteindelijk weergegeven worden, over aan een of meer zogenaamde "style sheets", waarin de opmaak van de onderdelen vastgelegd is. Deze "style sheets", aangeduid met de naam CSS, van Cascading Style Sheets, zijn aparte bestanden, waarnaar in het HTML-document wordt verwezen, en die een eigen syntax hebben.

Wanneer u dan uw website een nieuwe stijl geeft, hoeft u alleen het CSS-bestand te veranderen. Sterker nog, wanneer u een apart CSS-bestand aanmaakt en daar naar toe verwijst vanaf al uw HTML-bestanden, dan hoeft u slechts één bestand te wijzigen in plaats van alle HTML-bestanden.

HTML biedt echter wel de mogelijkheid om een opmaak te realiseren zonder de tussenkomst van CSS. Herinnert u zich nog wat er is gezegd over semantiek? Dan zult u waarschijnlijk wel begrijpen dat schuin gedrukt een slechtere beschrijving is dan nadruk. Semantisch gezien moet het gebruik van HTML om een opmaak te realiseren vermeden worden. Bovendien kan het gebruik van CSS u een hoop tijd schelen.

Dit is tevens de reden waarom dit boek de opmaakmogelijkheden binnen HTML slechts oppervlakkig zal beschrijven: er is immers een veel beter alternatief. Over hoe u een CSS-bestand "bevestigt" aan een HTML-pagina, krijgt u later uitleg.

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?
Klik dan hier om te kijken van welke gebruikers u nog toestemming nodig heeft.

6. Over dit boek

[bewerken] Doelstelling

De makers van dit boek hebben zichzelf tot doel gesteld een correcte cursus voor HTML te maken. Hierbij zal de nadruk worden gelegd op semantiek en de daarmee samenhangende scheiding van structuur en opmaak. In dit boek zijn geen opgaven opgenomen. De ervaring leert immers dat veel mensen HTML beginnen te leren om een eigen site te maken; aan een heleboel kleine opgave-sites hebt u dan niets.

Verder is het de bedoeling geweest dat mensen die op zoek zijn naar informatie over een bepaald aspect van HTML, dit meteen kunnen vinden. Er is daarom gestreefd naar het behandelen van verschillende onderwerpen op verschillende pagina's.

[bewerken] Hoe dit boek te gebruiken

Op iedere pagina van dit boek is een klein menu opgenomen, waarmee u eenvoudig kunt navigeren door de cursus. Verder zijn alle pagina's verzameld in de categorie "HTML", zodat u ook daar op zoek kunt gaan naar de gezochte informatie.

Daarnaast bevat deze cursus twee handige appendices: een bevat informatie over alle tags en een ander is een verklarende woordenlijst.

[bewerken] Zelf wijzigen

Iedere pagina in dit boek kunt u ook zelf aanpassen. Wanneer u een fout (inhoudelijke fouten, maar ook spel-, typ- of grammaticafouten) aantreft, wordt u er toe aangemoedigd die fout te verbeteren. Wanneer u niet zeker bent of de inhoud wel klopt, kunt u in overleg treden op de overlegpagina (zie bovenkant) van die pagina.

Denk er aan dat de overlegpagina is bedoeld om te overleggen over een pagina, en niet om uw HTML-probleem op tafel te gooien in de verwachting van een oplossing. Er is veel over HTML te vinden op het Internet, maar ook in bibliotheken, en van u wordt verwacht dat u gebruik maakt van deze informatiebronnen. Als u vragen hebt, kunt u deze stellen op discussieforums op internet. Vaak zijn op de pagina's in dit boek links opgenomen naar plaatsen waar meer informatie te halen is; neem deze mee in uw zoektocht naar de oplossing van uw probleem.

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?
Klik dan hier om te kijken van welke gebruikers u nog toestemming nodig heeft.

Deel II: Basiscursus

Nu we de inleiding hebben gezien waar we vooral spraken over de geschiedenis en achtergrond van HTML, gaan we nu aan het echte werk beginnen. In dit deel zullen we de basis van HTML bespreken. Sommige zaken zullen we niet bespreken omdat het overbodig, veel te moeilijk of te gedetailleerd is. Meestal zul je die zaken wel terug vinden in de delen geavanceerd of appendices. Regelmatig komen de nieuwe regels van XHTML aan bod, je mag die regels negeren maar het wordt sterk aangeraden om ze toch te volgen zodat je geen "slechte" gewoontes aanleert.

[bewerken] De inhoud van dit deel

4. Opmaak

Via bepaalde elementen en attributen kun je de inhoud van jouw pagina mooi opmaken. Tegenwoordig zijn veel van deze elementen of attributen verouderd in HTML en worden ze zelfs niet meer ondersteund in XHTML. In plaats van die te gebruiken wordt er aangeraden om CSS te gebruiken. In dit hoofdstuk zullen we enkele van deze elementen en attributen bekijken en tonen hoe je CSS kunt toepassen. We geven telkens ook de waarschuwing welke je wel mag gebruiken en welke niet.

[bewerken] Lettertype, grootte en kleur

Er zijn 2 manieren om het lettertype, grootte en kleur aan te passen. Dit kan via de attributen van een bepaald element of via CSS. Ook kun je via elementen bepalen welke teksten welke opmaak krijgen. Zo kun je dankzij body al de inhoud van een webpagina dezelfde opmaak geven of kun je bij hele kleine stukjes specifieke opmaak geven dankzij span.

[bewerken] font en span

zie ook font en span voor meer informatie.

Vroeger wanneer er aan hele kleine stukjes tekst (maar ook aan hele grote) opmaak moest veranderd worden werd er font gebruikt. Dit kon makkelijk worden gedaan dankzij zijn attributen

HTML-code:Tekst opmaken met font.

<font size="4" color="red" face="times new roman">
Dit is grote rode tekst in times new roman.
</font>

Dit is grote rode tekst in times new roman.

Dankzij de attributen size, color en face kon je respectievelijk de grootte, kleur en lettertype van je tekst aanpassen. Bij de attribuut size moet je een getal van 1 tot 7 geven, bij color de naam of code van een kleur en bij face een lettertype. Jammer genoeg is dit element ondertussen verouderd en wordt het nietmeer ondersteund door XHTML. Vrijwele alle browsers ondersteunen nog dit element maar het is echter aangeraden om het niet meer te gebruiken. Nu moet je als je kleine stukjes tekst andere opmaak wilt geven het element span gebruiken. Deze heeft echter die attributen niet en moet je de tekst opmaken op een andere manier. Dit gebeurt via CSS of de style attribuut.

HTML-code:Tekst opmaken met span.

Dit is de CSS-code.

span {
     font-size: 19px;
     color: red;
     font-family: times new roman;
}

Dit is de HTML-code.

<span>
Dit is grote rode tekst in times new roman.
</span>

Dit is grote rode tekst in times new roman.

Met span kun je dus evenveel bereiken als font let wel op dat bij font-size andere regels gelden dan bij de size van font. Bij font-size wordt de grootte van de tekst opgegeven in pixels of punten. Als je nog niet vertrouwd bent met CSS kun je ook de CSS code plaatsen bij een attribuut van span namelijk de attribuut style.

HTML-code:Tekst opmaken met span.

<span style="font-size: 18px; color: red; font-family: times new roman;">
Dit is grote rode tekst in times new roman.
</span>

Dit geeft exact hetzelfde resultaat.

[bewerken] Nadruk leggen

Als we op tekst nadruk willen leggen moet deze tekst in het oog springen. Tegenwoordig worden daarvoor de elementen em en strong gebruikt. Naast deze elementen zijn er nog i, b en u. Deze zijn echter verouderd en het is af te raden om deze nog te gebruiken.

[bewerken] em

De em staat voor het engelse emphasis wat staat voor het woord nadruk. Met dit element kun je dus nadruk leggen op stukjes tekst.

HTML-code:Nadruk leggen op tekst via em

<em>Ik wil nadruk leggen op deze tekst</em>

Ik wil nadruk leggen op deze tekst

Meestal wordt de tekst dan schuin afgedrukt, maar dat is zeker niet altijd zo. Er kunnen browsers zijn die iets anders met de tekst doen of het element em kan via CSS zijn aangepast.

HTML-code:em aagepast via CSS

em { font-weight: bold; }

Via CSS kan er bijvoorbeeld gekozen zijn om alle stukjes tekst die ingesloten zijn door het element em vet te laten tonen. em wordt gezien als de beste vervanging voor het element i. Dus als je i gebruikt hebt, kun je die beter vervangen door em.

[bewerken] strong

De strong staat eigenlijk voor strong emphasis oftewel in het Nederlands sterke nadruk. Dit betekent dus dat de tekst die wordt omringd door het element strong dat die nog meer in het oog moeten springen dan de tekst met het element em.

HTML-code:Nadruk leggen op tekst via strong

<strong>Ik wil sterker nadruk leggen op deze tekst</strong>

Ik wil sterker nadruk leggen op deze tekst

Meestal wordt deze tekst dan vet gezet. Dit geldt niet altijd zoals bij het element em. Doordat de tekst vet wordt afgedrukt wordt het gezien als de beste vervanging voor het element b. Je kunt ook strong aanpassen dankzij CSS, zoals bijvoorbeeld de lettergrootte te veranderen.

HTML-code:strong aagepast via CSS

strong { font-size: 20px; }

[bewerken] italic(i), bold(b), underline(u)

De elementen i(italic), b(bold) en u(underline) staan respectivelijk voor cursief, vet en onderstreept. De elementen i en b zijn nog niet verouderd en zullen nog worden ondersteund door de verschillende webbrowsers. Er wordt echter sterk afgeraden om ze nog te gebruiken. Voor het element i wordt aangeraden om em te gebruiken en voor b wordt strong aangeraden.

Het element u is echter wel verouderd en mag dus niet echt meer gebruikt worden bij HTML pagina's. Het wordt wel nog ondersteund. Er wordt sowieso afgeraden om tekst te onderstrepen, dit is om te voorkomen dat gebruikers onderstreepte tekst zullen aanzien als links. Wil je toch tekst onderstrepen gebruik hiervoor dan liever CSS zoals in het volgende voorbeeld.

HTML-code:Tekst onderstrepen via CSS.

em { text-decoration: underline; }

[bewerken] CSS(Cascading Style Sheets)

5. Afbeeldingen en objecten

Dit hoofdstuk gaat over het gebruik van afbeeldingen en objecten.

[bewerken] Afbeeldingen

Zie ook het img element voor meer informatie.

Om een afbeelding te tonen op een webpagina is er niet veel nodig. Je hebt gewoon het element img en zijne attributen src en alt nodig en een URL naar een afbeelding. Het alt attribuut is bedoeld als tekst die screenreaders kunnen weergeven voor personen met slecht zicht. Verder dient het ook als alternatieve tekst die wordt getoond wanneer de afbeelding niet kan worden geladen.

HTML-code:Afbeeldingen

<img src="afbeelding.jpg" alt="Alternatieve tekst voor de afbeelding.">

Bij het attribuut src gelden dezelfde regels als bij het attribuut href van het a element(zie ). Je kunt via de attributen height en width respectievelijk de hoogte en de breedte van een afbeelding bepalen. Dit kan op twee manieren: m.b.v. een waarde in pixels of een waarde in percenten. Als je pixels gebruikt geef je precies aan hoe breed en hoe hoog de afbeelding mag zijn. De browser weet dan ook hoeveel ruimte er moet worden vrijgehouden en zal later, bij het effectief tonen van de afbeelding, de pagina niet moeten herschikken. Wanneer je een procentuele waarde geeft, bepaalt hij de grootte op basis van de werkelijke grootte van de afbeelding x jouw percent. Wanneer een afbeelding 200 pixels breed was en je een waarde van "50%" geeft zal hij half zo breed zijn, geef je 200% zal hij dubbel zo breed zijn.

HTML-code:Afbeeldingen

<img src="afbeelding.jpg" height="100px" width="100px" alt="Alternatieve tekst voor de afbeelding.">
<img src="afbeelding.jpg" height="50%" width="200%" alt="Alternatieve tekst voor de afbeelding.">

[bewerken] Afbeelding als link gebruiken

Om een afbeelding als link te gebruiken moet je het simpel weg in een a element verwerken.

HTML-code:Afbeeldingen

<a href="eenpagina.html"><img src="afbeelding.jpg" alt="Alternatieve tekst voor de afbeelding."></a>

[bewerken] Het gebruiken van maps

Zie ook het map element voor meer informatie.

[bewerken] Het aanmaken van maps

[bewerken] Het toepassen van maps

[bewerken] Overige attributen

[bewerken] XHTML

Let er op dat je bij XHTML de tag moet afsluiten.

HTML-code:Afbeeldingen

<img src="afbeelding.jpg" alt="Alternatieve tekst voor de afbeelding." />

De tag afsluiten doe je door achteraan een schuine streep toe te voegen("/").

[bewerken] Objecten

8. Citeren

HTML bevat enkele elementen die dienen voor stukjes tekst te citeren. In dit hoofdstuk worden deze elementen uitgelegd

[bewerken] Korte citaten

Korte citaten, citaten die in een zin of tekst zijn verwerkt, worden aangeduid met het element q.

HTML-code:Een korte citaat.

Descartes zei ooit <q>cogito, ergo sum</q>.

Vaak wordt zo'n citaat schuin afgedrukt. Normaal zou een browser automatisch aanhalingstekens moeten plaatsen bij deze korte citaat. Firefox doet dit maar Internet Explorer niet. Je kunt ook een verwijzing maken naar een webpagina vanwaar je de citaat vandaan hebt gehaald of een webpagina met extra informatie. Dit gebeurt met het attribuut cite

HTML-code:Een korte citaat.

<q cite="http://nl.wikiquote.org/wiki/Ren%C3%A9_Descartes">cogito, ergo sum</q>

Je moet dus als waarde een URL opgeven.

[bewerken] Lange citaten

Voor lange citaten bestaat er blockquote. Meestal springt de tekst in als je het in een blockquote zet.

HTML-code:Een lange citaat.

<blockquote cite="http://nl.wikiquote.org/wiki/Karl_Marx">
Religieus lijden is tegelijkertijd de uitdrukking van een echt lijden 
en een protest tegen een echt lijden. Religie is de verzuchting van 
het onderdrukte wezen, het hart van een harteloze wereld, en de ziel 
van zielloze omstandigheden. Het is de opium van het volk.
</blockquote>

Net zoals q kun je dus ook cite gebruiken. Cite gebruikt hier dezelfde regels. In XHTML is het verplicht om de inhoud van blockquote nog eens te zetten in een p element.

HTML-code:Een lange citaat.

<blockquote cite="http://nl.wikiquote.org/wiki/Karl_Marx">
<p>Religieus lijden is tegelijkertijd de uitdrukking van een echt lijden 
en een protest tegen een echt lijden.Religie is de verzuchting van 
het onderdrukte wezen, het hart van een harteloze wereld, en de ziel 
van zielloze omstandigheden. Het is de opium van het volk.</p>
</blockquote>

[bewerken] Het element cite

Het element cite is een alternatief voor het attribuut cite en dient om de bron van de citaat aan te geven of van wie die citaat komt. In tegenstelling tot de attribuut wordt de inhoud van het element cite wel getoond op het scherm.

HTML-code:Het element cite.

<p>
<cite>Karl Marx zei ooit:</cite>
</p>
 
<blockquote>
<p>Religieus lijden is tegelijkertijd de uitdrukking van een echt lijden 
en een protest tegen een echt lijden.Religie is de verzuchting van 
het onderdrukte wezen, het hart van een harteloze wereld, en de ziel 
van zielloze omstandigheden. Het is de opium van het volk.</p>
</blockquote>
 
<p>
bron: <cite><a href="http://nl.wikiquote.org/wiki/Karl_Marx">Wikiquote</a></cite>
</p>

Deel III: Geavanceerd

Dit onderdeel van het boek is eerder voor gevorderden die zicht willen bezig houden met gespecialiseerde zaken.

[bewerken] De inhoud van dit deel

1. MIME-types

De MIME-specificatie (Multipurpose Internet Mail Extensions) is voorgesteld in 1992 om te zorgen dat niet-ASCII-bestanden via e-mail konden worden verstuurd, tegenwoordig wordt het ook gebruikt door het HTTP-protocol. Omdat de ASCII-standaard bestaat uit de standaard West-Europese en Amerikaanse karakters, is het logisch dat het niet kon worden gebruikt om afbeeldingen of ander materiaal beschikbaar te stellen.

Nu zijn er een aantal verschillende MIME-types, waarmee u een bestand of een deel van een bestand kunt aanleveren aan een bezoeker. De belangrijkste types die bij dit boek horen worden hieronder behandeld.

text/plain: Gewone tekstdocumenten verstuurt u door middel van dit MIME-type. Hiermee worden geen MS Word-documenten bedoeld, maar gewone, "platte" ASCII-teksten.

text/html: HTML-bestanden verstuurt u door middel van dit MIME-type. Vaak wordt dit automatisch gedaan door uw webserver.

text/css: CSS-bestanden verstuurt u door middel van dit MIME-type. Vaak wordt dit automatisch gedaan door uw webserver.

image/png: PNG-afbeeldingen verstuurt u door middel van dit MIME-type. Vaak wordt dit automatisch gedaan door uw webserver.

image/gif: GIF-afbeeldingen verstuurt u door middel van dit MIME-type. Vaak wordt dit automatisch gedaan door uw webserver.

image/jpeg: JPEG-afbeeldingen verstuurt u door middel van dit MIME-type. Vaak wordt dit automatisch gedaan door uw webserver.

application/xhtml+xml: Met dit MIME-type zou een XHTML-document verstuurd moeten worden; in de praktijk gebeurt dit echter nog vaak met text/html omdat anders uw browser het bestand als download zal aanbieden.

[bewerken] Javascript, een verhaal apart

application/x-javascript: Met dit MIME-type wordt javascript vaak verstuurd door de webserver.

text/javascript: Dit wordt vaak als MIME-type aangegeven in het type-atribuut van het script-element maar is eigenlijk incorrect.

text/ecmascript: Deze minder vaak gebruikte variant wordt vooral aangehangen door de "SVG-ers".

Vaak wordt een javascript aangeboden als application/x-javascript, terwijl het als text/javascript wordt aangegeven in de script-tag. Dit heeft twee redenen: in de HTML-specificatie wordt het gebruik van text/javascript aangemoedigd en MSIE ondersteunt geen javascript wanneer het in de script-tag wordt aangegeven als application/x-javascript. Het maakt voor de browser echter vreemd genoeg geen verschil dat de server het verstuurt als application/x-javascript.

[bewerken] Meer informatie

Wikipedia EN over MIME (Engels)
Het Wikipedia NL-artikel Inline image geeft een opmerkelijke mogelijkheid met de MIME-types weer (Nederlands)
Een overzicht met alle MIME-types (Engels)
tekst Request for Comments 1521 (Engels)
Anne van Kesteren over een MIME-type voor javascript (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?
Klik dan hier om te kijken van welke gebruikers u nog toestemming nodig heeft.

2. Specificaties

Volgens de specificatie werken is natuurlijk niet makkelijk, maar het resultaat mag er wel wezen.
Bijvoorbeeld dat je pagina veel stablieler is. En natuurlijk minder code.

[bewerken] Hoe?

De specificatie voor de W3C luidt als volgt:

Er moet wel:

Er moet staan welke versie van HTML wordt gebruikt;
Er moet staan welke codering wordt gebruikt (utf-8 enz.);
Er moet staan welke DTD (zie volgende) in een DOCTYPE-tag.
Tenslotte is een <head> </head>-tag verplicht.

Er moet niet:

Er mogen geen opmaakelementen inzitten (zoals <b></b>);
Er mogen geen ontbrekende eind-tags zijn (als </script>);
Alle open tags mogen niet open (als <input>);
Tenslotte mag er geen PHP staan (<?php ### ?>).

[bewerken] Voorbeeld

Voorbeeld komt later...

[bewerken] Externe links

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?
Klik dan hier om te kijken van welke gebruikers u nog toestemming nodig heeft.

3. Document Type Definitions

[bewerken] Document Type Definition (DTD)

Een HTML-document behoort (nog voor de <HTML> tag) met een DOCTYPE-regel te beginnen. Aan de hand van deze regel kan de browser opmaken met welke HTML-variant hij te maken heeft. In HTML 4.01 zijn er drie mogelijkheden:

strict, alleen aanbevolen HTML-codes mogen gebruikt worden
loose, alle aanbevolen HTML-codes mogen gebruikt worden plus de de afgeraden ('deprecated') codes. Dit is bedoeld om een overgangssituatie te scheppen bij de invoering van HTML 4.01. Deze afgeraden codes hebben veelal te maken met de opmaak van de webpagina.
frameset, deze variant wordt gebruikt bij het maken van frames.

Hieronder volgen de drie mogelijke DOCTYPE's. Kopieer en plak deze boven aan het HTML-document. Gebruik in nieuwe documenten bij voorkeur de strict DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd">

In bestaande documenten kunt u beter de loose DOCTYPE gebruiken:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
              "http://www.w3.org/TR/html4/loose.dtd">

In een frameset wordt altijd de frameset DOCTYPE gebruikt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
              "http://www.w3.org/TR/html4/frameset.dtd">

[bewerken] DTD voor XHTML

Voor XHTML bestaan dezelfde 3 mogelijkheden alleen is loose vervangen door Transitional. En natuurlijk zit er een verschil in, dat aangegeeft dat om een XHTML document gaat, en geen HTML.

De Strict DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

De Transitional DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

De Frameset DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Voor bestanden met frames is XHTML Frameset noodzakelijk. Voor nieuwe of bestaande documenten die u naar XHTML omzet, is het het makkelijkst om XHTML Transitional, aangezien XHTML Strict alle atributen die opmaak regelen als fouten markeert (de opmaak moet geheel met CSS). Als je toch XHTML Strict wil gebruiken moet je er voor zorgen dat alle opmaak door een CSS document geregeld wordt.

[bewerken] Meer informatie

De officiële specificatie (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?
Klik dan hier om te kijken van welke gebruikers u nog toestemming nodig heeft.

4. Character sets en HTML Entities

Charset staat voor 'character set' in het engels. Bedoeld wordt de verzameling van alle tekens die in een document gebruikt kunnen worden. Het gaat om tekens zoals letters, cijfers, symbolen en karakters uit diverse talen. Een 'character set' hoeft niet alle tekens te bevatten. De meeste 'character sets' alleen de meest gebruikte tekens. Dit geld niet voor de Unicode 'character set'. Unicode is speciaal ontworpen om alle tekens die op de wereld gebruikt worden, te bevatten. HTML gaat er vanuit dat de browser alle Unicode tekens moet kunnen afbeelden.

'Charset' wordt bij HTML ook in de betekenis gebruikt van 'character encoding'. Het gaat hierbij om hoe de tekens in de computer gecodeerd worden. Dit is noodzakelijk omdat een computer intern alleen met getallen werkt en niet met tekens. Zo wordt het euro-teken (€) in een bepaalde charset in de computer gecodeerd als 128 en in een andere charset als 164. In weer een andere charset bestaat dat teken niet eens. Hoewel de browser zelf Unicode gebruikt, hoeft de webpagina niet gecodeerd te worden als Unicode. De browser moet dan de webpagina vertalen van de ene codering naar Unicode codering. Dit vertalen is alleen mogelijk wanneer de browser weet volgens welke charset de webpagina gecodeerd is. Welke charset gebruikt mogen worden in webpagina's en hoe ze exact heten wordt bepaald door het IANA, een instituut die dit soort zaken regelt op het internet.

[bewerken] Coderen van de charset

De charset kan op twee plekken gecodeerd worden: op de webserver en in het html-document. Bij het openen van een webpagina kan de webserver charset informatie meesturen. Deze is voor de gebruiker onzichtbaar maar de browser maakt er wel gebruik van. Hoe de charset op een webserver gecodeerd wordt verschilt van webserver tot webserver. In de meeste webservers kan dat per file, per extensie of per directory gebeuren. Er kan ook een algemene standaard charset gecodeerd worden. Of een webserver charset informatie meestuurt, kun je controleren via http check websites (zoals [1]). Geef op voor welke url je dit wilt weten en zoek vervolgens naar een regel met de termen Content-Type: en charset=. Als deze ontbreekt dan wordt er geen charset informatie meegestuurd.

De charset kan ook in het html-document opgenomen worden. Wanneer de charset op de webserver gecodeerd wordt, dan heeft het codering van de charset geen effect meer. Toch is het zinnig om wel een charset in het html-document op te nemen voor het geval de webpagina gedownload wordt en daarna als file in de browser geopend wordt. Want dan is er geen webserver meer die de charset kan bepalen.

Het coderen van de charset in html gaat als volgt. Voeg direct na de '<head>'-tag een '<meta ....>'-tag in, bijvoorbeeld:

HTML-code:coderen van een charset

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">

[bewerken] Welke charset

De regel welke charset gecodeerd moet worden is eenvoudig. De uitvoering is iets moeilijker. Gelukkig hoeft het coderen van een verkeerde charset niet altijd rampzalig te zijn. Het wordt pas een probleem wanneer er bijzondere tekens gebruikt worden, tekens die veelal niet op het toetsenbord staan, tekens zoals: à á â è é ë €.

Wanneer je het html-document in bepaald programma bewerkt en vervolgens opslaat dan zal het programma voor het opslaan een bepaalde charset gebruiken. De juiste charset is de charset die het programma gebruikt om het html-document op te slaan. Het probleem is dat het bij de meeste programma's niet duidelijk is met welke charset er opgeslagen wordt. Een vuistregel is dat bij de meeste nederlandse Windows programma's wordt charset Windows-1252 gebruikt wordt en bij de meeste nederlandse Unix/Linux-programma's charset ISO-8859-1. Sommige geavanceerde programma's geven de mogelijkheid om te kiezen welke charset gebruikt wordt. In dat geval kun je kiezen welke charset de webpagina moet gebruiken.

Of de juiste charset gebruikt wordt kun je controleren door tekens zoals à á â è é ë € in de html code te kopieren en plakken. Sluit het html-document en open het document opnieuw. Open het document ook via een browser vanaf de website. De tekens moeten zowel in de editor als in de browser identiek zijn.

[bewerken] HTML Entities

Wanneer een bepaalde charset een bepaalde teken niet kan weergeven, kan er ook gebruik gemaakt worden van zogenaamde HTML Entities. Met een bepaalde tekenreeks wordt een bepaald teken gecodeerd. Zo staat € voor het euro-teken (€). En < en > staan voor '<' en '>'. Deze laatste twee zijn belangrijk omdat de '<' en de '>' normaal een html-tag aangeeft en niet zo maar als tekst gebruikt mag worden.

De tekens kunnen ook met een getal of een hexadecimaal getal aangegeven worden. In Unicode heeft elk teken een getal toegewezen gekregen. Dit getal moet dan gebruikt worden. Zo kan de euro-teken (€) ook als € of als € aangegeven worden.

[bewerken] Belangrijke charsets

ISO-8859-1 is een charset die heel veel gebruikt wordt voor west-europese talen. Het bevat de letters 'a' t/m 'z', de cijfers en diverse symbolen. Het bevat ook letters met accenten zoals: à á â è é ë. Het bevat geen euro-teken (€).
ISO-8859-15 is een aanpassing op de voorgaande charset. Enkele minder gebruikt symbolen zijn vervangen door veel gevraagde symbolen. Het bevat wel het euro-teken (€).
Windows-1252 is gebaseerd op de ISO-8859-1 en is uitgebreid met veel gevraagde symbolen zoals het euro-teken (€).
Shift_JIS is een voorbeeld van een veel gebruikte japanse charset met tekens zoals 日本語. Zo zijn er voor vele talen aparte charsets ontwikkeld.
UTF-8 is een zogenaamde Unicode charset. Met de Unicode charset kan vrijwel elk symbool van elke taal op de wereld geproduceerd kunnen worden. Op dit moment zijn bijna honderdduizend tekens gedefinieerd. Er zijn ook andere Unicode charsets zoals UTF-16 en UTF-32 maar deze worden in HTML vrijwel nooit gebruikt.

[bewerken] Meer informatie

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?
Klik dan hier om te kijken van welke gebruikers u nog toestemming nodig heeft.

HTML/Appendices/Printversie

HTML/Printversie

Uit Wikibooks

[bewerken] De inhoud van dit deel

[bewerken] Meer informatie

[bewerken] Web Applications 1.0 of "HTML 5"

[bewerken] Web Forms

[bewerken] Web Controls

[bewerken] Meer informatie

[bewerken] XHTML versus HTML

[bewerken] Dus... XHTML of HTML?

[bewerken] Meer informatie

[bewerken] Wat is semantiek

[bewerken] Het nut van semantiek

[bewerken] Meer informatie

[bewerken] Doelstelling

[bewerken] Hoe dit boek te gebruiken

[bewerken] Zelf wijzigen

[bewerken] De inhoud van dit deel

[bewerken] Lettertype, grootte en kleur

[bewerken] font en span

[bewerken] Nadruk leggen

[bewerken] em

[bewerken] strong

[bewerken] italic(i), bold(b), underline(u)

[bewerken] CSS(Cascading Style Sheets)

[bewerken] Afbeeldingen

[bewerken] Afbeelding als link gebruiken

[bewerken] Het gebruiken van maps

[bewerken] Het aanmaken van maps

[bewerken] Het toepassen van maps

[bewerken] Overige attributen

[bewerken] XHTML

[bewerken] Objecten

[bewerken] Korte citaten

[bewerken] Lange citaten

[bewerken] Het element cite

[bewerken] De inhoud van dit deel

[bewerken] Javascript, een verhaal apart

[bewerken] Meer informatie

[bewerken] Hoe?

[bewerken] Voorbeeld

[bewerken] Externe links

[bewerken] Document Type Definition (DTD)

[bewerken] DTD voor XHTML

[bewerken] Meer informatie

[bewerken] Coderen van de charset

[bewerken] Welke charset

[bewerken] HTML Entities

[bewerken] Belangrijke charsets

[bewerken] Meer informatie

Weergaven

Persoonlijke instellingen

Navigatie

Zoeken

zusterprojecten

Afdrukken/exporteren

Hulpmiddelen