Basistags
- Gegevens
- Categorie: HTML Basiscursus
Door de <head> en de <body> tussen <html>-tags te plaatsen, hebben we de basisstructuur van de webpagina. Tussen <body> en </body> komt de inhoud die we op internet willen laten zien.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Mijn eerste pagina</title>
</head>
<body>
Inhoud van de webpagina
</body>
</html>
Paragraph
De tekst die we intypen wordt netjes allemaal achter elkaar geplaatst. Of je nou één spatie tussen woorden hebt of meerdere, of zelfs hele blanco regels, de tekst wordt netjes achter elkaar geplakt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Mijn tweede pagina</title>
</head>
<body>
Deze tekst wordt
allemaal achter elkaar op één regel
geplakt
</body>
</html>
Om alinea's te onderscheiden wordt de paragraph tag gebruikt:
<p>willekeurige tekst</p>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Mijn derde pagina</title>
</head>
<body>
<p>tekst in de eerste alinea</p>
<p>dit is de tweede alinea. Als het doorloopt op de tweede regel, blijft het dezelfde alinea. Pas als ik afsluit met / en p wordt de alinea beëindigd en gaan we verder met de derde alinea</p>
<p>Dit is de derde alinea</p>
</body>
</html>
Break
Maar wat nou als je direct onder de regel wilt beginnen en geen witregel ertussen wilt hebben? Om dat te realiseren zet je op de plek waar je de regel wilt af'breken' de 'break' tag. <br />
De volgende regel maakt nog wel deel uit van dezelfde paragraph. De 'break' is ook een beetje bijzonder, omdat het geen begin of eindtag heeft, maar opzichzelf staat. Er zijn nog andere tags die ook op deze manier werken, maar die komen we nog tegen in de volgende hoofdstukken. De XHTML versie vereist wel dat de 'break' tag met een slash (schuine streep) wordt afgesloten, omdat het geen closingtag heeft. Voor een goede werking in verschillende browsers; vergeet die schuine streep dus niet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Mijn vierde pagina</title>
</head>
<body>
<p>tekst in de eerste alinea</p>
<p>Jantje zag eens pruimen hangen<br />
O, als eieren zo groot<br/>
't Scheen dan Jan ze wou gaan plukken<br/>
Schoon z'n vader 't hem verbood</p>
<p>Hier is, zei hij, noch mijn vader<br />
Noch de tuinman, die het ziet:<br />
Aan een boom, zo vol geladen,<br />
Mist men vijf, zes pruimen niet.</p>
<p>Maar ik wil gehoorzaam wezen,<br />
En niet plukken; ik loop heen.<br />
Zou ik om een hand vol pruimen<br />
Ongehoorzaam wezen? Neen !</p>
</body>
</html>
Headings
Natuurlijk willen we onze teksten titels mee geven. Ook graag titels van verschillende lagen. Zo moet de naam van de site extra groot zijn en subalinea's mogen wel kleiner. Een heading wordt aangegeven met <h1> tot en met <h6>, waarbij de <h1> het grootst is en <h6> het kleinst.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Spatie
Zoals gezegd zet HTML alles netjes achter elkaar tot de volgende tag. Het maakt niet uit hoeveel witruimte je daarbij gebruikt. Wil je om wat voor reden ook méér spaties tussen bepaalde woorden, gebruik de 'non-breaking-space code: &nbsp;. Let er op dat je opent met het 'en'-symbooltje (&) en sluit met de 'punt-komma' (;).
Dit wordt bijvoorbeeld gebruikt bij het weergeven van prijzen. Als je een gewone spatie tussen het euroteken en de prijs houdt, kan het zijn dat het eurosymbool nog op de ene regel staat, terwijl het getal op de volgende regel komt. Wanneer je het in HTML als volgt weergeeft: &euro;&nbsp;4,95; (Het eurosymbool heeft ook een eigen code) wordt valuta-symbool en prijs als geheel gezien en blijft het intakt.
Comments (aantekeningen)
Het kan voorkomen dat je in de html-code enkele opmerkingen of aantekeningen wilt maken die niet voor de gebruiker zichtbaar mogen zijn.
Dit kun je doen door het plaatsen van <!-- vóór en --> achter de tekst
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Mijn vijfde pagina</title>
</head>
<body>
<!-- inhoud -->
<h1>Gedichten</h1>
<h2>De pruimeboom</h2>
<p>Jantje zag eens pruimen hangen,<br />
O! als eijeren zo groot.<br />
't Scheen, dat Jantje wou gaan plukken,<br />
Schoon zijn vader 't hem verbood.</p>
<p>Hier is, zei hij, noch mijn vader,<br />
Noch de tuinman, die het ziet:<br />
Aan een boom, zo vol geladen,<br />
mist men vijf zes pruimen niet.</p>
<p>Maar ik wil gehoorzaam wezen,<br />
En niet plukken: ik loop heen.<br />
Zou ik, om een hand vol pruimen,<br />
Ongehoorzaam wezen? Neen.</p>
<p>Voord ging Jantje: maar zijn vader,<br />
Die hem stil beluisterd had,<br />
Kwam hem in het loopen tegen,<br />
Voor aan op het middelpad.</p>
<p>Kom mijn Jantje! zei de vader,<br />
Kom mijn kleine hartedief!<br />
Nu zal ik u pruimen plukken;<br />
Nu heeft vader Jantje lief.</p>
<p>Daarop ging Papa aan 't schudden<br />
Jantje raapte schielijk op;<br />
Jantje kreeg zijn hoed vol pruimen,<br />
En liep heen op een galop. Onze Titel</p>
<!-- niet zichtbaar
<h2>ander gedicht</h2>
<p>1,2,3,4, hoedje van, hoedje van<br />
1,2,3,4 hoedje van papier<br />
Als het hoedje dan niet past<br />
Zet 'm in een glazen kast</p>
-->
</body>
</html>
Met de tags die we nu behandeld hebben, ben je al in staat een duidelijk gestructureerde webpagina te maken.
Samenvatting:
| Tag: | Omschrijving: |
|---|---|
| <p>..</p> | Paragraaf |
| <br /> | Break = nieuwe regel |
| <h1 t/m 6>..</h1 t/m 6> | Heading |
| <!-- ... --> | Comment - opmerking |