HTML
Ruud Koortens – Informatica Lyceum Sancta Maria – Instruct
HTML 1 HTML-bestanden maken 1.1 Elementen en tags 1.2 Een simpel HTML-bestand 1.2.1 Hyperlinks 1.2.2 URL Relatieve URL’s 1.2.3 Koppen en alinea’s 1.2.4 Witruimte 1.2.5 Lijsten Ongeordende lijst Geordende lijst Definitielijst 1.2.6 Speciale tekens 1.2.7 Commentaar 1.3 Afbeeldingen invoegen 1.3.1 Afbeeldingen als hyperlink 1.3.2 Image maps 1.3.3 Bestandsformaten Compressie GIF PNG JPEG Het juiste bestandsformaat 1.4 Eenvoudige tabellen 1.4.1 Koppen 1.4.2 Cellen samenvoegen Horizontaal samenvoegen Verticaal samenvoegen 1.4.3 Grootte Grootte van de tabel Grootte van een cel 1.5 Frames 1.5.1 Eenvoudige framesets Aantal en grootte van frames 1.5.2 Uitgebreide framesets 1.5.3 Alternatief voor framesets 1.5.4 Frames en hyperlinks 1.5.5 Framesets verwijderen
1
Deel 2 1.6 Style sheets 1.6.1 Klassen 1.6.2 Externe style sheets 1.6.3 Tekst Lettertype Uitlijning Kleur Tekst Hyperlinks 2 JavaScript 2.1 Een simpel script 2.1.1 Functies Parameters Return-waarde 2.1.2 Variabelen Bewerkingen op teksten Bewerkingen op getallen 2.1.3 Opdrachten buiten de functie 2.2 Events 2.3 Objecten 2.3.1 Het window-object 2.3.2 Het document-object 2.4 Externe scripts 2.4.1 Scripts van anderen gebruiken 2.5 Het ontwerp 2.5.1 Compositie Basiselementen Frames Tabellen 2.5.2 Lettertypen Families Variaties Lettertypen kiezen 2.5.3 Kleuren Kleurentheorie Kleuren samenstellen Kleuren op internet Kleurenschema’s 2.5.4 Doelgroep Inhoud Webbrowsers Technologie 2.5.5 Structuur Navigatie Positie Afbeeldingen
2
3 De website op het internet 3.1 Meta-informatie 3.2 Webruimte 3.3 FTP 3.4 Zoekmachines 3.4.1 AltaVista 3.4.2 Yahoo! 3.4.3 Ilse
Er bestaan allerlei programma’s waarmee je webpagina’s kunt maken, zogeheten webpublishing-programma’s. Bekende namen op dit gebied zijn Microsoft FrontPage, Macromedia Dreamweaver en Adobe GoLive. De producenten van deze pakketten beweren allemaal dat je met hun product in een mum van tijd een website in elkaar kunt zetten. Laat je hierdoor niet misleiden! Met Windows Kladblok en kennis van HTML heb je nog altijd de krachtigste gereedschappen in handen om een mooie en overzichtelijke webpagina te maken. In deze verdiepingsstof komen de belangrijkste zaken van HTML aan de orde.
1 HTML-bestanden maken Een HTML-bestand maak je op dezelfde manier als een tekstbestand: je opent een programma waarmee je teksten kunt typen en je slaat de gemaakte tekst op als een tekstbestand. Alleen, om aan te geven dat je een HTML-bestand hebt getypt, geef je het bestand de extensie .htm in plaats van .txt. Het eenvoudigste programma voor het invoeren van tekst is Windows Kladblok. Het is geïnstalleerd op elke pc waar Windows op draait.
1.1 Elementen en tags Een HTML-document is meer dan alleen maar een tekst. Tenslotte betekent de afkorting HTML: HyperText Markup Language en daarmee wordt aangegeven dat het om een opmaaktaal gaat. Met HTML kun je de opmaak van je tekst bepalen en allerlei objecten invoegen. Dit doe je door bepaalde codes te gebruiken; deze codes noemen we elementen. De meeste elementen bestaan uit twee tags. De eerste tag geeft het begin van een element aan en de tweede het einde. Om bijvoorbeeld duidelijk te maken dat een document een HTML-document is, zet je aan het begin de tag en aan het einde . Niet alle elementen bestaan uit twee tags, sommige hebben alleen een begintag. Je kunt bijvoorbeeld een horizontale lijn in je tekst zetten met het element
. Hierbij heb je geen eindtag nodig; sterker nog, je mag zelfs geen eindtag gebruiken.
1.2 Een simpel HTML-bestand We gaan nu een uiterst eenvoudig HTML-bestand invoeren. Typ de volgende tekst in Windows Kladblok en sla het bestand op als simpel.htm. Open het bestand daarna in je webbrowser.
3
<TITLE>Een simpel HTML-bestand. Hier komt de tekst te staan.
Zo ziet ons HTML-bestand er uit in de browser Internet Explorer. In dit voorbeeld maken we gebruik van vier elementen. Elk HTML-document moet op z’n minst deze vier elementen bevatten. We bekijken ze stuk voor stuk. Het -element omsluit altijd een HTML-document: hiermee geef je het begin en het einde van het HTML-document aan. Als je HTML schrijft, moet je document dus altijd beginnen met en het moet eindigen met . Het -element is bedoeld om informatie over het document te geven. Wat in dit gedeelte vermeld staat, krijg je niet in de browser te zien. Browsers gebruiken het om het document goed weer te kunnen geven en zoekmachines herkennen een document aan de hand van deze tekst. <TITLE> Het <TITLE>-element bevat de titel van een document. Deze titel komt op de titelbalk van de webbrowser te staan. Binnen het -element staat alle informatie die je door de webbrowser wilt 4
laten weergeven. In het voorbeeld is dat een korte tekst, maar later zul je zien dat je hier ook links, koppen, tabellen, afbeeldingen en nog meer kunt plaatsen. 1.2.1 Hyperlinks Eén van de belangrijkste voordelen van webpagina’s boven boeken is de mogelijkheid om hyperlinks te gebruiken. Een hyperlink – vaak kortweg link genoemd – verwijst naar een andere webpagina. Door op de hyperlink te klikken open je deze webpagina automatisch. Een hyperlink maak je met het element
…. <TITLE>Voorbeeld van een hyperlink Klik
hier voor een voorbeeld van een simpele webpagina.
Zo ziet de hyperlink er uit in Internet Explorer. In bovenstaand voorbeeld staat het woord ‘hier’ tussen de begin- en de eindtag. Hierdoor wordt dat woord een hyperlink. 1.2.2 URL
5
Waarnaar de hyperlink verwijst, wordt in de begintag aangegeven met een zogenoemde parameter. Deze parameter heeft de naam HREF, een samentrekking van de woorden hyperlink reference. Door middel van het =-teken geven we de parameter een waarde. Zo’n waarde zetten we tussen dubbele aanhalingstekens (“). De waarde die je meegeeft aan de HREF-parameter is een zogeheten URL: een Uniform Resource Locator. Elk bestand op het World Wide Web – of dat nu een HTMLdocument, een afbeelding, een videofragment of een programma is – heeft zijn eigen URL. Met een URL kun je dus verwijzen naar een bestand op het World Wide Web. Elke URL bestaat uit drie delen: De naam van het protocol dat nodig is om de bron op te vragen. De webbrowser wil weten welk protocol hij moet gebruiken voor de bron die je opgeeft. Voor HTMLdocumenten is dit http, voor binaire bestanden is dit ftp en voor e-mail is dit mailto. De naam van de machine waar de bron zich bevindt. Deze bestaat uit drie gedeelten, elk gescheiden door een punt. Het eerste deel is meestal www, het tweede deel is een unieke naam en het derde deel is een aanduiding van het soort website of van het land van herkomst van de website, bijvoorbeeld .com, .org of .nl. Dit laatste noemen we wel de domeinnaam. De naam van de bron zelf, gegeven als een padnaam. Dit is de bestandsnaam van de bron, zoals je die ook in Windows kent. De bestandsnaam wordt gegeven met het volledige pad, dus met de naam van de map ervoor.
Relatieve URL’s Het is niet altijd nodig om een volledige URL op te geven. Ook in ons voorbeeld wordt slechts een deel van de URL genoemd. Er is in zo’n geval sprake van een relatieve URL. Bij een relatieve URL begint de browser te zoeken in de map waarin het document staat. Stel dat je het bovenstaande bestand link.htm hebt opgeslagen in http://www.mijndomein.nl/voorbeeld/link.htm. De relatieve URL ‘simpel.htm’ neemt dan de domeinnaam en het pad van het document waar hij in staat en plakt daar ‘simpel.htm’ aan vast. Je krijgt dan: http://www.mijndomein.nl/voorbeeld/simpel.htm. Als je de relatieve URL laat beginnen met een pad, dan wordt ook het hele pad van de oorspronkelijke URL vervangen. Stel dat je vanuit het document http://www.mijndomein.nl/voorbeeld/link.htm de relatieve URL ‘/begin/simpel.htm’ opvraagt, dan luidt de volledige URL van je link: http://www.mijndomein.nl/begin/simpel.htm. Je kunt de slash (/) aan het begin van het pad ook weglaten. In dat geval wordt het oorspronkelijke pad niet vervangen maar aangevuld. Stel dat je vanuit het document http://www.mijndomein.nl/voorbeeld/link.htm de relatieve URL ‘begin/simpel.htm’ opvraagt, dan luidt de volledige URL van je link: http://www.domeinnaam.nl/voorbeeld/begin/simpel.htm. 1.2.3 Koppen en alinea’s Net als in veel andere documenten wordt tekst in een HTML-document verdeeld in koppen en alinea’s. Een kop bevat de titel of de subtitel van een tekst. Een alinea bestaat uit een aantal regels tekst die bij elkaar horen. Koppen markeer je met het element
,wat staat voor Heading 1. De webbrowser zet de kop automatisch op zijn eigen regel. Als je de webpagina ook nog wilt voorzien 6
van subkoppen, kun je het -element gebruiken. Een subkop van een subkop kun je weer aangeven met . Dit gaat zo door tot en met . Om aan te geven welke zinnen tot een alinea behoren, zet je al die zinnen binnen het
-element.
staat voor Paragraph, het Engelse woord voor alinea. Alinea’s worden door de webbrowser automatisch gescheiden door een witregel.
<TITLE>Koppen en alinea’s
Koppen en alinea’s
In een HTML-document zijn koppen en alinea’s op een duidelijke manier van elkaar gescheiden.
Koppen
Koppen kun je gebruiken om je tekst een titel te geven. Op die manier weet de lezer meteen waar de tekst over gaat.
Je kunt ook subkoppen gebruiken om stukjes in je tekst titels te geven. HTML ondersteunt koppen tot en met het zesde niveau.
Alinea’s
In de alinea’s staat het verhaal dat je wilt vertellen. De webbrowser scheidt alinea’s van elkaar door er een witregel tussen te plaatsen.
7
Hier zie je hoe Internet Explorer omgaat met koppen, subkoppen en alinea’s. 1.2.4 Witruimte Inmiddels zul je wel gemerkt hebben dat HTML een wat aparte manier heeft om met witregels om te gaan. Je zou misschien verwachten dat als jij een witregel in je broncode hebt staan, je die ook in de webbrowser te zien krijgt. Dit is echter niet zo. Elke keer als je op de <Enter>-toets drukt, voeg je een harde return in in je document. De webbrowser beschouwt alle harde returns als spaties. Van meerdere spaties achter elkaar maakt hij één spatie. Al die spaties en harde returns die de webbrowser niet laat zien, maar die wel in je code staan, noem je witruimte. Dit zijn alle spaties, tabs en harde returns die niet horen bij de tekst zoals die uiteindelijk op je webpagina komt. Deze witruimte kun je heel goed gebruiken om je broncode er netter uit te laten zien. <TITLE>Witruimte
In de staan heel
broncode veel spaties,
tabs
en harde returns 8
die de webbrowser niet
weergeeft.
Alle witruimte uit de broncode is verdwenen. Het komt wel eens voor dat je toch een harde return wilt invoegen in je document. Dit kun je doen met het element
, dat geen eindtag kent.
staat voor Break. <TITLE>Volgende regel
Je kunt geen regeleinde op een webpagina zetten door een harde return in de broncode te zetten, want de webbrowser beschouwt dit als witruimte. Toch kun je in HTML wel naar de volgende regel springen.
In de praktijk zul je dit maar weinig doen, want als je naar een nieuwe regel springt, heb je doorgaans te maken met een nieuwe alinea.
9
Dankzij het
-element kun je een regeleinde invoegen. Let erop dat je
niet gebruikt om alineascheidingen aan te geven. Dit kun je beter doen door elke alinea tussen
en
te zetten. Je zult het
-element in HTML-documenten dan ook niet vaak nodig hebben. 1.2.5 Lijsten Om teksten overzichtelijk te houden zijn niet alleen koppen en alinea’s maar ook lijsten van belang. HTML ken drie verschillende soorten lijsten: de ongeordende lijst, de geordende lijst en de definitielijst.
Ongeordende lijst Een ongeordende lijst gebruik je voor opsommingen zonder specifieke volgorde. Zo’n lijst plaats je binnen het
-element, waarbij elk onderdeel van de lijst wordt voorafgegaan door het - -element. Dit laatste element kent geen eindtag.