Deze cursus is geschreven ter vervanging van de eerste twee les-stencils over HTML die we sinds 1997 op de PCW gebruikten. 'HTML voor beginners' helpt je een eind op weg met het maken van je eigen website. Het is de bedoeling dat je deze pagina's met en zonder begeleiding kunt gebruiken. Als je bezoeker bent en je wilt webpagina's leren maken, dan kun je deze pagina's van begin tot eind doorlezen. Als je begeleider bent, kun je dit stencil gebruiken om ideeën op te doen voor het overdragen van HTML-kennis. Eerste uitgave, Roeland Kok, januari 2005
1. WAT IS HTML? HTML betekent 'Hypertext Markup Language'. Bijna alle pagina's op het Internet zijn opgemaakt met behulp van HTML-code. Het maken van webpagina's lijkt een klein beetje op programmeren: met behulp van codes (die we voortaan tags zullen noemen) zeg je tegen de browser hoe hij de tekst en plaatjes op de website moet weergeven. Een browser is het programma waarmee je pagina's bekijkt op Internet. Wij gebruiken de browser 'Firefox' en onder Windows is 'Internet Explorer' een bekende browser. Er zijn verschillende manieren om een website te maken. De eenvoudigste manier is het gebruik van een programma dat lijkt op een tekstverwerker. Daarin type je gewoon alle tekst en je sleept er alle plaatjes op de goede plek en het programma maakt er zelf HTML-code van. De andere manier is om zelf de code te schrijven. Deze manier gebruiken wij op de PCW. Dit doen we, omdat we vinden dat je daar het meeste van leert. Dit soort dingen leren is heel gaaf en erg bruikbaar voor later. In het begin zal het misschien een beetje vreemd voor je zijn allemaal. Dat is niet raar, want het is nieuw. Nieuwe dingen moet je vaak leren beheersen. Als het in het begin niet erg makkelijk gaat, hou dan gewoon vol en vraag vooral een van de begeleiders om even te helpen. Daar zijn we voor! Alle begeleiders hebben kennis van webpagina's maken, dus iedereen kan je helpen.
2. KENNISMAKEN MET DE PROGRAMMA'S
We gebruiken twee belangrijke programma's, waarvan je een korte uitleg krijgt, voordat we beginnen met het echte werk. Lees dit aandachtig en probeer alles goed te begrijpen. 2.1 De browser: Firefox Met Firefox kun je de webpagina's op het Internet bekijken, dus ook de pagina's die je zelf maakt. Het programma is niet moeilijk te gebruiken en werkt bijna hetzelfde als je misschien gewend bent van Internet Explorer. Firefox is wat handiger in gebruik en werkt ook goed op de computers op de PCW. Firefox kun je starten door boven in het scherm op 'Applications' te drukken, vervolgens naar het woord 'Internet' te gaan en daarna te klikken op 'Mozilla Firefox'. Als je het programma niet kunt vinden, dan moet je even een begeleider vragen of hij je kan helpen. Als het programma gestart is, ziet het er ongeveer zo uit (waarschijnlijk met een andere webpagina, maar dat is niet van belang nu):
Figuur 1: De Firefox Browser
Je moet een aantal dingen weten om Firefox goed te kunnen gebruiken. Het belangrijkste is dat je weet hoe je de knoppenbalk kunt gebruiken en hoe je naar een website kunt surfen. De knoppenbalk heeft een aantal standaard-knoppen: 'back', 'forward', 'reload', 'stop' en 'home'. Na de knoppen volgt de adresbalk en een knop om naar het ingetypte adres te surfen. Tot slot zie je een zoekbalk.
Een overzicht van de functies van de knoppen en balken: Back
Met deze knop ga je terug naar de vorige pagina die je bezocht hebt. Erg handig als je heel veel pagina's bezoekt, maar weer een of meerdere stappen terug wilt doen.
Forward
Hiermee ga je naar de volgende pagina. Deze knop kun je alleen gebruiken als je met de back-knop een stapje terug hebt gedaan.
Reload
Met deze knop kun je de webpagina opnieuw laden. Dit kan handig zijn als je iets hebt veranderd en je wilt de veranderingen zien.
Stop
Als een pagina heel lang aan het laden is en je wilt eigenlijk niet verder laden, dan kun je op deze knop drukken. 'Stop met laden!'
Home
Vaak is een startpagina ingesteld op de webbrowser. Met deze knop kun je teruggaan naar de startpagina die op jouw computer is ingesteld.
Adresbalk
In de adresbalk kun je het adres van de pagina intypen die je wilt bezoeken. Bijvoorbeeld: http://aerv.nl/ - de pagina van de PCW.
Zoekbalk
Met behulp van de zoekbalk kun je zoeken naar van alles, zoals plaatjes, websites, nieuws. Je typt in wat je zoekt en na een druk op enter gaat de webbrowser naar een zoekpagina en zoekt het voor je op.
Probeer een beetje vertrouwd te raken met Firefox, als je dat nog niet was. Als je straks je webpagina wilt laden, moet je even hulp vragen aan een van de begeleiders, want het kan per computer verschillen waar je je pagina's bewaart. 2.2 De editor: Bluefish Een editor is een programma waarmee je tekst kunt schrijven en opslaan op de computer. Omdat HTML puur tekst is, kunnen we een HTML-editor gebruiken om de code te schrijven en op te slaan. Je kunt eigenlijk alle tekst-editors gebruiken om webpagina's te maken, zoals 'kladblok' (in Windows) of 'gedit' (in Linux), maar het handigste is om een speciale editor te gebruiken. Op de PCW hebben we gekozen voor 'Bluefish', omdat deze allemaal handige hulpjes biedt bij het maken van je eigen webpagina's. Er zijn veel meer speciale web-editors, maar we houden het bij dit programma.
Figuur 2: De Bluefish Editor
Het programma is minder ingewikkeld dan het er misschien uitziet. Het bestaat uit een aantal hoofdonderdelen. Ten eerste zie je bovenin een menubalk. Hier kun je alle mogelijkheden van het programma mee oproepen. Kijk maar eens rond in het menu, heel veel dingen zullen je waarschijnlijk nog weinig tot niks zeggen, maar je hoeft ook niet gelijk alles te begrijpen om aan de slag te kunnen. Onder de menubalk is er een knoppenbalk. Hierop staan knoppen die je kunt gebruiken om snel dingen te kunnen doen, zoals je pagina bewaren ('Save'), een pagina te openen ('Open') en een nieuwe pagina te maken ('New'). Onder de knoppenbalk is een balk waar je heel veel functies van webpagina's kan oproepen. Je ziet onder anderen de 'Quick bar', de 'Standard bar' en de 'Fonts'. Deze doen er nu nog niet veel toe, die leer je vanzelf gebruiken. Een tip die je nu alvast krijgt: als je een beetje handigheid krijgt in het maken van webpagina's, moet je maar eens op onderzoek uit gaan wat betreft de mogelijkheden van Bluefish. Dan zul je snel zien waarom we dit programma hebben gekozen. Links van het Bluefish venster zie je een aantal 'mapjes' staan met namen, via deze mapjes kun je snel bestanden op je harde schijf in het programma laden. Het belangrijkste deel van het Bluefish programma is het 'tekst-venster', waar je de HTML-code gaat schrijven straks. Het is gewoon een veld met regelnummers waar je in kunt typen. Probeer maar eens wat. Elke nieuwe regel krijgt een nieuw nummer. Zo kun je later eenvoudig delen van je website weer terugvinden.
Figuur 3: Bluefish in actie!
Okee, we hebben nu de belangrijkste programma's besproken die we gaan gebruiken. Ga je nu mee naar de mooie wereld van webpagina's? Het gaat gaaf worden, want straks kun je jezelf de trotse eigenaar van een eigen plek op het wereldwijde Internet noemen!
3. EEN EERSTE BEGIN Voordat we beginnen: alles wat je leert moet je af en toe voor jezelf herhalen, zo onthou je alles het beste. Dingen die je niet snapt kun je vragen aan een van de begeleiders. Ze zijn ervoor om je verder op weg te helpen. 3.1 Opbouw van een webpagina Een webpagina is opgebouwd uit HTML-code, ook wel tags geheten. Tags kun je herkennen aan de punthaken die er omheen staan. Elke tag heeft een eigen betekenis. In deze cursus leer je de belangrijkste tags gebruiken. Laten we eens kijken hoe een eenvoudige webpagina er uit kan zien, van code zien leer je het meeste. Type de volgende code eens in:
Mijn eerste pagina Welkom
Hallo, dit is mijn allereerste webpagina die ik gemaakt heb op de PCW!
Het lijkt een beetje vreemd he? Laten we eerst even kijken wat deze code doet, dan gaan we het daarna stap voor stap bekijken. Druk eens op het 'wereldbol-knopje' in Bluefish. Het programma start Firefox voor je op en laat een pagina zien.
Figuur 4: De code weergeven als webpagina
Probeer eens uit te vinden hoe de pagina in elkaar zit. Herken je dingen van de code in de webpagina zoals Firefox hem laat zien? Waar staat de tekst 'Mijn eerste pagina'? Wat is er met het woord 'Welkom' gebeurd?
Laten we eens stap voor stap door de code gaan en uitvinden wat het allemaal betekent. Code
Betekenis
Met deze tag vertel je de browser (Firefox) dat hier de webpagina begint.
Mijn eerste pagina
Deze tags werken samen om een titel te geven aan de webpagina. Met de head-tag geef je aan dat we in de kop van de pagina bezig zijn, waar we met de title-tag een titel opgeven. Zie je dat na de titel er twee bijna gelijke tags staan? en . Dit zijn sluit-tags. Bijna alle tags die je gebruikt, moet je weer afsluiten. Aan het eind van de titel, sluiten we dus netjes af. Aan het eind van de kop (head) ook.
Hier zeg je: 'hier begint de echte inhoud van de pagina' – deze inhoud, de echte pagina dus, noemen we de body.
Welkom
De h1-tag is een 'header'-tag. Daarmee kun je grote kopteksten maken, tekst in een groter lettertype die er echt uitspringt. Je kunt het vergelijken met de kop die je in boeken (en in deze cursus) aan het begin van elk hoofdstuk ziet. Alles wat tussen
en
staat, wordt groot weergegeven op de webpagina. Je hebt ook h2, h3, h4, enzovoort. Hoe hoger het getal (tot 8) des te kleiner de kop wordt.
Hallo, dit is mijn allereerste webpagina die ik gemaakt heb op de PCW!
Met de p-tag kun je gewone tekst schrijven in je webpagina. Alle teksten die je wil schrijven, moet je dus tussen
en
zetten.
Je hebt net geleerd dat je bijna alle tags moet afsluiten. Zo ook de body-tag. We geven met deze code aan dat we aan het eind van de pagina-inhoud zijn gekomen.
