Listed - deel 1
Wat is de startpagina van jouw browser? Google? Een blanco pagina? Netvibes? Misschien kunnen we er eens wat anders van maken. Een todo-lijstje bijvoorbeeld.
Simpelweg HTML
We gaan beginnen met een simpele HTML-pagina die een overzicht biedt van de openstaande taken. Open dus je favoriete editor. Notepad, Wordpad, Crimson Editor, Vi of nog wat anders.
Het eerste dat we in een HTML-pagina plaatsen is de document type declaration.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Een document type declaration plaats je om aan een browser te zeggen dat je de standaard gespecifieerd in de doctype gebruikt. In dit geval dus de strikte HTML 4.01 standaard. Als je dit weglaat hangt het van de browser af op welke manier het document wordt behandeld. Dit kan verschillen van browser tot browser en, geloof me, we willen niet dat dit gebeurt.
Na de doctype voegen we het volgende toe:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Listed</title>
</head>
<body>
</body>
</html>
HTML bestaat uit een heleboel elementen die worden voorgesteld met behulp van tags. Zo hebben we het html element dat wordt voorgesteld door <html> en </html> tags. De eerste tag opent het html element, de tweede tag sluit het html element. Deze tags worden niet getoond als we de pagina bekijken. Ze dienen enkel om structuur aan de inhoud te geven, bijvoorbeeld:
- door een stuk tekst te omsluiten met
ptags maken we duidelijk dat dat stukje tekst een paragraaf is. - door een stuk tekst te omsluiten met
abbrtags maken we duidelijk dat dat stukje tekst een afkorting (abbreviation) is
Binnen het html element zijn er 2 belangrijke elementen: head en body. Binnen het head element kunnen we allerlei informatie over het document opgeven. Zo hebben we in bovenstaande code een title element dat de titel van het document bevat. Deze titel zal door zowat iedere browser gebruikt worden in de titlebar van de browser.
De inhoud van het body element is hetgene dat we het vaakst zullen aanpassen. Deze inhoud is wat je te zien krijgt als je naar de pagina surft.
Sla je huidige document op als index.html (als je Notepad gebruikt, kies in het "Opslaan als" dialoogvenster dan "Alle bestanden" in plaats van "Tekstdocumenten (*.txt)"). Open je browser en kies uit het menu de optie "Openen" of iets gelijkaardigs en open het bestand dat je zonet hebt opgeslagen. Als alles goed is krijg je een lege pagina te zien en komt de titel in je browser overeen met de tekst tussen de title tags.
Inhoud toevoegen
Aan een lege pagina hebben we niet veel, dus het wordt tijd om wat inhoud toe te voegen. Laten we beginnen met een titel toe te voegen. Vaak zal de titel in de inhoud overeenkomen met de titel van het document, dus als titel gebruiken we Listed. Maar welk HTML element laat ons toe om te zeggen "Dit is een titel"? title? Ja, maar deze kunnen we enkel gebruiken binnen de head tags en we willen nu inhoud toevoegen en dit moet gebeuren binnen de body tags.
Gelukkig zijn er de elementen h1, h2, h3, …, h6. De h staat voor header (of titel), het cijfer geeft het niveau van de header aan: hoe hoger het cijfer, hoe lager het niveau. Voor een titel die voor de hele pagina geldt, kiezen we dus voor h1. Als je ooit met een tekstverwerker als Microsoft Word hebt gewerkt, mag dit niet onbekend in de oren klinken. In Word heb je immers een gelijkaardig concept: Kop 1, Kop 2, Kop 3, … Nu wordt de body dus:
<body>
<h1>Listed</h1>
</body>
Sla je document weer op en herlaadt de pagina in je browser. Je zou nu in grote letters het woord Listed moeten zien staan.
Het lijstje zelf
In HTML hebben we ook elementen die helpen om een lijst voor te stellen. Het ul element laat toe om een ongeordende lijst weer te geven (unordered list). Een item uit de lijst wordt voorgesteld met behulp van het li element. De code:
<body>
<h1>Listed</h1>
<ul>
<li>een item uit de lijst</li>
<li>een ander item uit de lijst</li>
</ul>
</body>
Opslaan, herladen en je ziet nu een mooi lijstje. Stel dat je er een geordende lijst van wilt maken. Dan gebruik je gewoon het ol (ordered list) element in plaats van het ul element. Wil je meer elementen leren kennen? Bekijk dan het overzicht van alle toegestane elementen op W3 Schools.
Het lijstje onderhouden
Om je todo-lijstje te onderhouden kan je nu je document openen en een item aan de lijst toevoegen. Waarschijnlijk zal je dit snel beu worden, dus gaan we in een volgend deel een heleboel dingen toevoegen die je toelaten je lijstje op een makkelijke manier te onderhouden. Maar het eerste dat we de volgende keer gaan doen is er voor zorgen dat we een wat aantrekkelijkere pagina te zien krijgen.
Dit artikel werd opgenomen in ontwikkeling, webdesign.
[…] In het vorige deel hebben we er voor gezorgd dat we een HTML-pagina hebben die een todo-lijstje weergeeft. Momenteel ziet het er maar pover uit, dus we gaan de pagina wat aanpassen. […]
[…] In deel 1 hebben we een HTML-pagina gemaakt met een todo-lijstje. In deel 2 hebben we een CSS bestand met wat code aan de pagina gelinkt. In deel 3 gaan we voor meer opmaak zorgen. […]