Op deze pagina zal ik proberen de basis van HTML uit te leggen. Het doel van deze pagina is om te zorgen dat de eenvoudigste en meestgebruikte HTML bekend te maken. Ik focus hierbij op de inhoud van de pagina en niet zozeer op de 'head'-sectie. Het is uitdrukkelijk géén doelstelling om te leren vanaf een leeg HTML-bestand een pagina op te bouwen; het gaat vooral om de vaardigheid om een zeer eenvoudig bestaand stuk HTML te begrijpen en aan te passen.
HTML-pagina's hebben een eenvoudige basisopbouw. De hieronder gegeven code kun je als gegeven beschouwen, bij het bewerken van HTML-pagina's heb je eigenlijk alleen te maken met de code tussen <body> en </body> en met de titel van de pagina, die hieronder meteen aan bod komt. Kijk even goed naar het volgende voorbeeld, maak jezelf even bekend met hoe HTML eruit ziet. Het is niet nodig dit stukje meteen helemaal te begrijpen. Je kunt later altijd nog terugkijken.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="charset=windows-1252"> <title> Titel van de pagina </title> </head> <body> De inhoud van de pagina komt hier <!-- dit is commentaar --> </body> </html> |
Deze regel maakt voor de browser duidelijk dat we HTML 4.01 spreken.
(even opgebroken in twee regels voor de leesbaarheid)
Alle HTML code komt tussen <html> en </html> te staan.
Binnen <head> .. </head> staat algemene informatie over de pagina.
Hier wordt bijvoorbeeld aangegeven welke 'character set' (dat is een soort lijst met
alle letters en andere tekens) we gebruiken in de HTML-code. Chinese tekens zullen
met deze 'charset' bijvoorbeeld niet werken, maar áççèñtën op letters werken prima.
Binnen <title> .. </title> staat de tekst die bovenaan het venster
komt te staan. Deze tekst komt niet op de pagina zelf te staan.
Verder komen verwijzingen naar <script>s en Cascading <Style>Sheets
(CSS, daarmee wordt het uiterlijk van de pagina beïnvloed) ook hier te staan.
Binnen <body> .. </body> komt de daadwerkelijk zichtbare inhoud van de pagina.
In die inhoud worden natuurlijk weer veel andere tags gebruikt.
Commentaar staat tussen <!-- en --> en wordt genegeerd bij
het verwerken van de pagina. Het komt niet zichtbaar op de pagina.
|
Het bovenstaande zegt je misschien helemaal niets. Dat is niet erg, omdat je er bij het bewerken van een bestaande pagina niets mee te maken hebt. Voordat we verder gaan met de inhoud van zo'n HTML-pagina, is het dan ook belangrijk eerst wat algemene feitjes en termen op een rijtje te hebben. Als je (delen van) dit onderdeel niet begrijpt, kun je waarschijnlijk wel wat extra uitleg gebruiken. Je kunt goed toetsen of je het onderstaande hebt begrepen, als je de bovenstaande HTML al wat meer begint te begrijpen na het lezen van dit blok.
Om HTML-code voor mensen leesbaar te houden, wordt (net zoals in het voorbeeld hierboven)
vaak inspringing (in dit geval met tabs) gebruikt. Als je alle tabs en nieuwe regels weghaalt,
is het resultaat echter precies hetzelfde. Verder blijkt meteen dat de kleiner dan/groter dan-tekens
worden gebruikt om HTML tags aan te duiden. Onthoud:
-Tabs, spaties en nieuwe regels direct naast tags verdwijnen.
-Tabs, spaties en nieuwe regels tussen normale ('platte') tekst veranderen in één enkele spatie.
-Gebruik géén < en >, behalve voor tags. Ook het &-teken is niet toegestaan (zie 'Entities' hoe je deze tekens dan in HTML zet).
Om bovengenoemde tekens op een pagina te zetten heb je zogeheten entities nodig.
Een HTML-entity ziet er als volgt uit: &naam_van_entity;
Dit verklaart waarom & niet mag worden gebruikt. In plaats daarvan gebruik je &
(amp staat voor 'amperstand', de officiële naam van het &-teken). De kleiner dan en groter dan-tekens zijn
< en > (Lower Than, Greater Than).
Het verdient de voorkeur ook tekens als éöÿ enzovoorts in entities uit te drukken. Voor de 'character set' (zie bovenstaand voorbeeld) windows-1252 is dat echter niet nodig.
Daarom gebruiken we voor het gemak die. Een wat uitgebreidere lijst van entities vind je op W3Schools.
Soms (onder hopelijk uitzonderlijke gevallen, want het is NIET bepaald netjes!) wil je meerdere spaties naast elkaar te zetten.
De spatie heeft dan ook zijn eigen entity: . Dat staat voor 'non-breaking space'. Zo'n spatie wordt altijd weergegeven.
HTML bestaat uit 'tags'. <html> is bijvoorbeeld de HTML-tag. </html> is de bijbehorende 'sluit-tag': hiermee eindigt de HTML-tag.
'html' is hierin het 'element'. Andere elementen zijn bijvoorbeeld head, meta, title, body, table, form,...
Een lijst van elementen kun je vinden in de HTML 4.01 Specificatie.
De voornaamste zullen hier aan bod komen. Van elementen waarachter een 'D' op de lijst staat is het de bedoeling dat je ze niet gebruikt, deze zijn verouderd.
Van alle in deze korte introductie genoemde elementen zal ik alleen 'meta' niet uitleggen, omdat dit element hiervoor te ingewikkeld is.
Als je nieuwsgierig bent, zoek je hem op in de specificatie.
Een 'attribute' is een eigenschap (met een bepaalde waarde) van zo'n element. De in het eerste voorbeeld gegeven tags hebben allemaal
geen noemenswaardige attributen. Als voorbeeld gebruik ik even het 'a' element. Die 'a' staat voor 'anchor',
oftewel 'anker'. Met een <a>-tag kun je links maken waar bezoekers op kunnen klikken.
Een link naar Google kun je voorstellen als: <a href="https://www.google.nl">Ga naar Google!</a>
De tekst 'Ga naar Google!' wordt dan tekst waar je op kunt klikken, de link verwijst naar 'https://www.google.nl'.
Zo'n link kan trouwens ook afbeeldingen (het 'img' element) omvatten.
Daarover straks meer. Attributen vind je hier.
Deze lijst is vooral nuttig om te kijken wat een bepaald attribuut, dat je tegen komt maar niet kent, betekent. De attributen die bij een bepaald
element gebruikt kunnen worden, staan immers vermeld bij de lijst met elementen.
Op een pagina gebruik je natuurlijk nog een hoop andere elementen. De voornaamste komen hier aan bod. Met deze elementen kun je een redelijke pagina in elkaar zetten.
'Inline tags' zijn elementen waarvan de inhoud op dezelfde regel blijft staan als de tekst eromheen. Onthoud dat alle volgende HTML altijd binnen de <body>-tag behoort te staan.
Ik <a href="https://www.google.nl">ga naar Google</a>. Ik <a href="htmlintro.html" target="_blank">open een nieuw venster</a>. <span class="belangrijk">Deze tekst wordt erg opvallend.</span> <span style="color: red">Deze tekst wordt rood.</span> <span style="color: red" class="groot">Dit wordt groot en rood.</span> Dit is de 13<sup>e</sup> etage. H<sub>2</sub>O is de scheikundige notatie van een watermolecuul. CO<sub>3</sub><sup>2-</sup> is carbonaat. |
Het 'a'-element maakt van zijn inhoud een link. Als er op wordt geklikt,
geeft het 'href'-attribuut de bestemming aan. 'target' geeft aan waar
de link moet worden geopend.
De waarde '_blank' betekent dat een nieuw venster (of tabblad) wordt geopend.
Andere waarden verwijzen naar frames, hoe dit werkt komt verder niet aan bod.
LET OP: Strikt gezien is het 'target'-attribuut NIET toegestaan.
Het 'span'-element doet op zichzelf niets met de tekst die er in staat.
Het wordt gebruikt om een bepaalde stijl ('class' verwijst naar bepaald
blok in de CSS stylesheet) toe te passen. 'style' bevat losse CSS (stijl)
informatie. Beiden zijn ook toepasbaar op veel andere elementen.
Het 'sup'-element maakt van tekst superscript (de tekst komt hoog op de regel).
Het 'sub'-element maakt van tekst subscript (de tekst komt laag op de regel).
|
Headers (kopteksten) zijn (sub-)titels die op je pagina verschijnen als op een bepaalde manier opgemaakte tekst.
Standaard worden ze vetgedrukt en met grote letters weergegeven en wordt er een bepaalde ruimte erboven en eronder
(de marge) leeg gehouden. Uiteraard kan de opmaak met CSS worden aangepast. Er bestaan 6 header-elementen: 'h1' tot
en met 'h6', in volgorde van aflopende grootte en opvallendheid.
Div's (gemaakt met <div>-tags) zijn rechthoekige 'doosjes' die (met inhoud en al) op een bepaalde plaats op de pagina
komen te staan. Met behulp van CSS kan de positie van een div worden bepaald.
De volgende elementen maken allemaal zo'n 'box'. Hun voornaamste verschil is hoe ze eruit komen te zien. Ironisch genoeg
kun je ze met behulp van CSS er hetzelfde uit laten zien. Desalniettemin is het aan te raden de verschillende elementen
uitsluitend te gebruiken waarvoor ze bedoeld zijn.
<h1>Hogeschool Leiden</h1> <h2>Cluster techniek</h2> <h3>Bio-informatica</h3> <p>Dit is een alinea.</p> <p style="text-align: center"> Deze alinea komt in het midden van het beeld. </p> <div class="navigatie"> Dit blok moet aan de linkerkant komen. Hier zou je dan links naar andere pagina's op de website zetten. </div> <div class="footer">©2009 Jerry</div> |
De elementen 'h1' tot en met 'h6' vormen zoals gezegd de headers. Hun stijl is (net zoals bij alle andere elementen) volledig aan te passen met CSS. Ze worden gebruikt bij (tussen-)koppen op een pagina. Alinea's, aangeduid met het element 'p' (paragraph), worden (tenzij anders vermeld in de CSS) weergegeven met lege ruimte (een marge, ziet eruit als een witregel) aan de onderzijde. Div's worden vooral gebruikt in combinatie met het 'class'- attribuut. In de CSS wordt dan bijvoorbeeld bepaald dat Div- elementen met class="footer" altijd helemaal onderaan op de pagina moeten komen en een klein lettertype moeten hebben. Bij div's die elkaar overlappen, bepaalt de toegepaste CSS bijvoor- beeld of inhoud over elkaar heen komt of uit elkaar wordt gehouden. |
Het is inmiddels duidelijk geworden dat je met nieuwe regels in HTML code geen nieuwe regels op de pagina maakt. Daar is een element voor: het 'br'-element.
Verder kan het van pas komen een horizontale lijn te zetten tussen twee stukken tekst. En afbeeldingen zijn natuurlijk onmisbaar!
Hier komen drie elementen die je niet hoeft te sluiten.
Regel 1<br> Regel 2<br> Regel 3 <hr> <hr class="kort"> <img src="plaatje.gif" alt="Plaatje"> |
Het element 'br' werkt heel simpel: waar het wordt gebruikt, wordt een nieuwe regel ingevoegd. Het is dus niet nodig elke regel in een alinea te zetten om ze onder elkaar te krijgen. 'hr' is al even eenvoudig: op deze plaats verschijnt een hori- zontale lijn. Met CSS kun je de kleur, de lengte e.d. aanpassen. Op de plaats van een <img>-tag komt een afbeelding te staan. 'src' geeft de locatie (source) van de afbeelding aan, 'alt' een alternatieve tekst voor als het plaatje niet kon worden weergegeven. |
Tabellen zijn wat lastiger om te maken, maar kunnen zeker van pas komen. De opbouw werkt als volgt.
-De gehele tabel wordt omsloten door een <table>-tag.
-Daarbinnen komen de rijen, deze worden omsloten door <tr>-tags ('table row').
-Elke rij heeft een aantal cellen, die worden vertegenwoordigd door <th>- en <td>-tags ('table header' en 'table data').
Laten we daar eerst eens naar gaan kijken. Je merkt meteen dat je veel code nodig hebt voor een kleine tabel.
<table border="1"> <tr> <th>Kolom 1</th> <th>Kolom 2</th> <th>Kolom 3</th> <th>Kolom 4</th> </tr> <tr> <td>Rij 1, kol 1</td> <td>Rij 1, kol 2</td> <td>Rij 1, kol 3</td> <td>Rij 1, kol 4</td> </tr> <tr> <td>Rij 2, kol 1</td> <td>Rij 2, kol 2</td> <td>Rij 2, kol 3</td> <td>Rij 2, kol 4</td> </tr> <tr> <td>Rij 3, kol 1</td> <td>Rij 3, kol 2</td> <td>Rij 3, kol 3</td> <td>Rij 3, kol 4</td> </tr> <tr> <td>Rij 4, kol 1</td> <td>Rij 4, kol 2</td> <td>Rij 4, kol 3</td> <td>Rij 4, kol 4</td> </tr> </table> |
|
Nu gaan we het wat lastiger maken: we willen een aantal cellen samenvoegen. Dat doen we door van de linksbovenste cel van de cellen die we willen samenvoegen hun 'colspan' of 'rowspan' aan te geven. Deze attributen geven aan over hoeveel kolommen of rijen de cel moet worden uitgerekt. Het is verder heel moeilijk om uit te leggen wat hier gebeurt, kijk er maar eens goed naar. Als je het na even goed te hebben gekeken nog niet begrijpt, is het misschien beter om hier voorlopig maar geen aandacht aan te besteden.
<table border="1"> <tr> <th>Kolom 1</th> <th>Kolom 2</th> <th>Kolom 3</th> <th>Kolom 4</th> </tr> <tr> <td colspan="2">Rij 1, kol 1-2</td> <td>Rij 1, kol 3</td> <td>Rij 1, kol 4</td> </tr> <tr> <td>Rij 2, kol 1</td> <td>Rij 2, kol 2</td> <td>Rij 2, kol 3</td> <td rowspan="2">Rij 2-3, kol 4</td> </tr> <tr> <td>Rij 3, kol 1</td> <td rowspan="2" colspan="2">Rij 3-4, kol 2-3</td> </tr> <tr> <td>Rij 4, kol 1</td> <td>Rij 4, kol 4</td> </tr> </table> |
-Op rij 1 zie je dat we de eerste twee kolommen samenvoegen. Er staan dus ook maar drie td's in de eerste rij. -Op rij 2 voegen we de cel in de vierde kolom samen met de cel eronder (dus die in rij 3, kolom 4). -Op rij 3 maken we eerst de cel voor kolom 1 en daarna een cel die kolommen 2 en 3 van zowel rij 3 als rij 4 vult. De cel in kolom 4 is al met rij 2 samengevoegd. -Op rij 4 hoeven we alleen nog de cellen voor kolom 1 en kolom 4 te geven, kolommen 2 en 3 zijn immers al samengevoegd tot de grote cel die we bij rij 3 maakten. |
|||||||||||||||||
Nogmaals, als je dit soort kunstjes met tabellen niet meteen begrijpt: laat het rusten. Mocht je het ooit nodig hebben, dan kun je je er altijd nog in verdiepen.
Waarschijnlijk ben je na een enkele keer doorlezen wel bekend met de principes waarop HTML werkt, maar zul je nog lang niet alles wat hier is uitgelegd begrijpen. Kijk het eventueel nog eens door, maar verzeker je jezelf er vooral van dat je nu in ieder geval weet hoe HTML eruit ziet. Je kunt deze pagina altijd nog eens bekijken om te zien hoe iets nu precies zat.
Ten slotte nog één klein dingetje: er is veel verwezen naar Cascading StyleSheets (CSS). Hoe zien die er nu uit? Misschien heb je wat aan het volgende voorbeeld. Met CSS hebt je bar weinig te maken als je een bestaande pagina bewerkt, maar misschien helpt het je beter te begrijpen wat zo'n 'class' attribuut nu eigenlijk doet. Voor de betekenis van deze 'properties' kijk je hier.
.belangrijk{
font-size: large;
font-weight: bold;
background-color: yellow;
border: 1px solid red
}
.groot{
font-size: x-large
}
.footer{
position: fixed;
bottom: 0px
}
hr.kort{
width: 50%
}