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: <html> <head><title>mijn eerste pagina</title></head> <body> <h1>welkom</h1> <p>hallo, dit is mijn allereerste webpagina die ik gemaakt heb op de PCW!</p> </body> </html> 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 <html> Met deze tag vertel je de browser (Firefox) dat hier de webpagina begint. <head><title>mijn eerste pagina</title> </head> 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? </title> en </head>. 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. <body> Hier zeg je: 'hier begint de echte inhoud van de pagina' deze inhoud, de echte pagina dus, noemen we de body. <h1>welkom</h1> 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 <h1> en </h1> 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. <p>hallo, dit is mijn allereerste webpagina die ik gemaakt heb op de PCW!</p> Met de p-tag kun je gewone tekst schrijven in je webpagina. Alle teksten die je wil schrijven, moet je dus tussen <p> en </p> zetten. </body> 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. </html> En tot slot sluiten we de allereerste tag, de html-tag af. Zo weet de browser dat hier de volledige webpagina stopt. 3.2 Eigenschappen van tags Lees het nog eens rustig over als je nog niet alles begrijpt. Het leuke aan tags is dat je er vaak meer mee kunt dan je misschien zou denken. Je kunt aan veel tags enkele eigenschappen meegeven. We nemen als voorbeeld de body-tag. De body-tag geeft aan dat je begint aan de inhoud van de webpagina. Een
pagina heeft vaak bepaalde eigenschappen, waaronder de kleur van de letters en de kleur of afbeelding op de achtergrond. Door de body-tag eigenschappen mee te geven, kunnen we de pagina naar eigen wens aanpassen. Stel, we willen de pagina een gele kleur geven en gebruik maken van donkerblauwe letters. We gaan dan de body-tag aanpassen. Doe maar mee: Oorspronkelijke tag: Verander deze in: <body> <body bgcolor= yellow text= navy > Kun je al Engels praten of lezen? Zo ja, dan zou je waarschijnlijk al 'yellow' hebben herkend als de kleur geel. 'navy' is donkerblauw. Sla je pagina eens op ('Save' in Bluefish) en druk op de reload-knop in Firefox. Je ziet nu dat de achtergrondkleur geel is geworden en de letters blauw. 'bgcolor' is een afkorting van 'background color', wat Engels is voor achtergrondkleur. Het woordje 'text' is het Nederlandse tekst. Snap je al hoe het werkt? Je kunt in plaats van yellow en navy ook een hoop andere kleuren gebruiken. In het kadertje hiernaast zie je alle basiskleuren die je kunt gebruiken in je webpagina. Er zijn nog veel meer kleuren te gebruiken, maar deze zijn het makkelijkst te onthouden. Als je meer ervaring met HTML hebt, kun je zelf op zoek gaan naar een manier om meer kleuren te gebruiken in je pagina. 3.3 Plaatjes gebruiken Als je op Internet wat leuke plaatjes hebt gevonden die je graag op je website wil plaatsen, kan dat met een speciale 'image'-tag. Image is Engels voor 'afbeelding'. Op Internet worden plaatjes meestal opgeslagen als bestand dat eindigt op.jpg,.png of.gif. Zoek maar eens een leuk plaatje. Weet je niet hoe, vraag het dan aan een begeleider. Sla het plaatje op in de map waar ook je beginnende webpagina staat. In het voorbeeld dat we gaan maken gebruiken we een plaatje van een lieve pinguïn. Het plaatje heet 'plaatje.jpg'. We gaan nu de html-code aanpassen. We voegen na de regel met de p-tags en voor de regel met de afsluitende body-tag de volgende code in: KLEUREN IN HTML yellow geel fuchsia paars red rood aqua lichtblauw lime felgroen blue blauw olive olijfgeel purple donkerpaars maroon donkerrood teal tegelblauw green donkergroen navy donkerblauw white wit black zwart gray donkergrijs silver lichtgrijs <img src= plaatje.jpg > De afkorting 'img' betekent 'image' (afbeelding dus) en de letters 'src' betekenen 'source'. Source is het Engelse woord voor 'bron'. De bron geeft aan welk plaatje geladen moet worden. In ons voorbeeld zie je dat we plaatje.jpg opgeven. Zorg dat het plaatje dat je wilt gebruiken bestaat en dat je de naam goed schrijft. Hoofdletters en kleine letters moeten ook gelijk zijn aan de naam van het plaatje op schijf. Kom je er niet uit, vraag dan hulp van een begeleider. Als je klaar bent met de code invoeren, druk je weer op 'Save' in Bluefish en daarna op de reload-knop in Firefox. Je ziet als het goed is nu het plaatje onder de tekst van je eerste pagina! (Omdat je misschien hebt gespeeld met de kleur-eigenschappen van de body-tag, kunnen de kleuren op je scherm anders zijn. Verder heb je waarschijnlijk een ander plaatje gekozen, ook dat is anders dus.) Aan jou de opdracht om eens wat leuke plaatjes op je pagina te zetten, lekker oefenen en de pagina mooi maken!