HTML KISS-proof ( Keep It Simply Stupid) Een stap-voor-stap minicursus basisvaardigheden HTML. Voor diegenen die graag een HTML-homepage willen maken, snel resultaat willen, maar er nog helemaal niets van weten.

2

KISS

KISS

3

VOORWOORD Om te beginnen heb je een goede HTML-editor nodig. Met het gewone Windows kladblok gaat ook prima, maar is een beetje omslachtig. Zeker als je voor het eerst een HTML-page gaat maken. Op het Internet zijn diverse (gratis) HTML-editors te vinden die je kunt downloaden. Uitgeroepen tot de allerbeste editor is 1stPage2006 van www.Evrsoft.com . Een editor met ongekende mogelijkheden en nog gebruikersvriendelijk ook. De light versie is gratis. Maar dat is meer dan genoeg. Voor de voorbeelden in deze lesbrief heb ik van dit programma gebruik gemaakt. En dan zijn er natuurlijk ook de zogenaamde WYSIWYG (What You See Is What You Get) websitegenerators zoals bijvoorbeeld FrontPage en Dreamweaver. Deze programma’s pretenderen dat iedereen een website kan bouwen zonder enige kennis van HTML. Don’t you believe it. Voordeel van dit soort programma’s is wel dat je er op een zelfde manier in kunt werken als in een tekstverwerker. Je ziet dus wat je aan het doen bent. Dit voordeel weegt echter niet op tegen de vele nadelen die deze programma’s met zich meebrengen. Nadeel is dat je niet ziet wat er achter de schermen gebeurt en veel niet in de hand hebt. De site blijft altijd een simpel, statisch uiterlijk houden. Veel aardige, nuttige of verfraaiende HTML-elementen kunnen in een WYSIWYG-scherm niet worden gebruikt. Deze moeten echt tussen de code ingetikt worden. Maar dat vereist toch enige kennis van HTML. Verder genereren deze WYSIWYG programma’s een enorme rotzooi in de code. Deze rotzooi zorgt er voor dat je site niet lekker werkt en in sommige browsers zelfs vast kan lopen. En eenmaal met je site op het internet blijkt dat je toch niet helemaal krijgt wat je in gedachte had. Afbeeldingen staan niet op de juiste plaats of ontbreken helemaal, teksten staan niet waar je ze gewild had, enzovoort. Natuurlijk is die rotzooi wel weer goed te krijgen, maar dat vereist toch ook weer kennis van HTML. Je moet immers wel weten wat je weg kunt halen en wat moet blijven. Verder wordt tegenwoordig veel gebruik gemaakt van CSS en PHP om de site een dynamisch uiterlijk te geven. Zonder kennis van HTML moet je daar niet eens aan beginnen. Met andere woorden: Een allereerste vereiste voor het maken van een goed werkende website is dus iets van HTML afweten. Je kunt alleen maar een goed werkende website maken als je begrijpt waar codes voor staan, waar ze moeten staan en wat ze doen. De grootste fout die vaak wordt gemaakt is dat men teveel in één keer wil. Doordat je (nog) niet goed weet waar je mee bezig bent, wordt het een zooitje. Begin heel eenvoudig, stap voor stap, en breid je homepage langzaam uit. Je hoeft echt niet alles te weten. Professionele webbouwers weten ook niet alles. Maar als je eenmaal de basisvaardigheden bezit, en je weet hoe de HTML-code van een homepage in elkaar steekt, is het niet zo moeilijk meer om naar wat complexere codes te kijken. Deze lesbrief is dan ook geen ingewikkelde cursus HTML maar alleen de allereerste basisbegrippen. Genoeg om een simpele, maar toch mooie site te maken.

4

KISS

WAT IS HTML HTML is geen programmeertaal maar een verzameling opmaakcodes die aan tekst worden toegevoegd. Deze opmaakcodes worden ook wel tags genoemd. Alle browsers begrijpen deze codes. Wanneer een browser zo’n tekst met HTML-codes inleest zal hij de pagina vormgeven aan de hand van de codes die hij dus begrijpt en zal uitvoeren.

DE CODES (TAGS) Een HTML-tag herken je aan de tekens

< en >.

Over het algemeen moet je aangeven wanneer een tag begint en wanneer deze eindigt. (Er zijn enkele uitzonderingen.) Met andere woorden: De browser moet weten wanneer een stuk tekst vet, schuin, onderstreept, enz. moet worden, waar dat moet beginnen en waar dat moet eindigen. Dus moeten we een begin-tag hebben en een sluit-tag De slash in de sluit-tag geeft aan dat de opmaakopdracht beëindigt moet worden. Tussen die twee tags komt dan een stuk(je) tekst. Het is belangrijk dat je de tags altijd paarsgewijs invoert en bij de sluit-tag meteen een slash zet. Zo voorkom je dat je het vergeet en onnodig tijd verspilt met het zoeken naar fouten. BEGINNEN Maak een nieuwe map. Geef deze map bijvoorbeeld de naam: ‘mijnWeb’. Zorg dat altijd alles wat je in je homepage gebruikt in deze map zit. En meer niet. Dus de HTML-pages en afbeeldingen. Dat is zeer belangrijk. Open de HTML-editor. Tik om te beginnen onderstaande code (links) in. (In de meeste editors staat deze code al als je een nieuwe pagina begint.)

Toelichting bij de code: De eerste tag geeft aan dat het om een HTML document gaat, de laatste geeft het einde aan. Tussen en kun je eventuele informatie over het document kwijt. Deze informatie is alleen te lezen door de browser en is dus niet zichtbaar op je homepage. Tussen komt de naam van de desbetreffende pagina. Ook deze is niet zichtbaar op je homepage. Maar wel herkenbaar voor de browser. Tussen en komen alle codes van je homepage. Dus alles wat tussen deze tags staat is zichtbaar op je homepage. Sla deze eerste pagina op als index.html in de daarvoor bestemde map. Maak er een goede gewoonte van om alles wat je doet meteen op te slaan. Dat kan veel leed voorkomen.

5

KISS EEN EERSTE PAGE Tik tussen de body-tags een regel tekst. In een website zal dit er als volgt uitzien. Standaard zwart lettertype, witte achtergrond.

In de meeste editors kun je switchen tussen een preview-scherm, om het resultaat te bekijken, en een edit-scherm om te bewerken. Dat ziet er een beetje saai uit. Je kunt echter van alles aan het uiterlijk van de tekst veranderen. Centreren, vet, schuin of onderstrepen, groter of kleiner maken, van kleur veranderen of zelfs het lettertype wijzigen.

CENTREREN ……

en VET MAKEN ……

Je mag de tags verticaal of horizontaal om de tekst plaatsen. Voor de browser maakt dat niet uit, die leest gewoon alles achter elkaar. Je kunt zoveel tags om tekst heen gebruiken als nodig is. Zorg er echter voor dat de code altijd goed leesbaar blijft. Dat wil zeggen: zorg ervoor dat de code niet horizontaal van het scherm ‘loopt’.

Ook dat maakt voor de browser niet uit, maar bij eventuele foutopsporing of aanpassingen is het heel vervelend als je voortdurend horizontaal moet scrollen. Er moet in één oogopslag duidelijk zijn welke tags bij elkaar horen. LET OP ! Verder moeten tags altijd symmetrisch om de tekst staan. Dat wil dus zeggen dat de eerste begin-tag hoort bij de laatste sluit-tag.

tekst tekst tekst Bekijk bij alles wat je doet steeds het resultaat. Als dat goed is sla je op en ga je verder. Met de volgende tags kun je cursieve tekst maken of tekst onderlijnen.

ITALIC …… UNDERLINE ……

6

KISS

STANDAARD INSTELLINGEN VOOR JE HTML_DOCUMENT Voordat je aan je homepage begint moet je eerst nadenken over de achtergrondkleur, de letterkleur, de lettergrootte en het lettertype. Daarbij moet je niet alleen uitgaan van wat jezelf erg mooi vindt, maar ook wat prettig leesbaar is. Een zachte lichte achtergrond en een donkere contrasterende kleur is prettiger lezen dan een donkere achtergrond met lichte letters. Wees ook voorzichtig met fel rood, zowel voor achtergrond als voor de letterkleur. Rood maakt onrustig en gaat snel irriteren. Bezoekers van je homepage haken dan snel af. ACHTERGROND De achtergrondkleur geven we aan binnen de body-tag. Kleuren in HTML worden aangegeven met HEXA-decimale getallen. Je kunt hiervoor een kleurentabel raadplegen. Onder andere te vinden op de informaticasite.

Het hexa-decimale getal wordt voorafgegaan door een # en staat tussen dubbele quotes. Hier is gekozen voor een ivoorkleurige achtergrond.

LETTERTYPE, LETTERGROOTTE, LETTERKLEUR. Wees altijd voorzichtig met het kiezen van een lettertype. Windows lettertype. Als je voor een exotisch lettertype kiest van jouw homepage dit lettertype niet heeft. De browser vervangend lettertype. De browser weet echter niet wat resultaat wel eens heel erg tegenvallen.

Kies bij voorkeur een standaard is de kans groot dat de bezoeker zal dan op zoek gaan naar een mooi of lelijk is. Dan kan het

FONT-TAGS Voor de attributen lettergrootte, letterkleur of lettertype gebruiken we de zogenaamde FONTtags.

Lettergrootte …… In HTML loopt de lettergrootte van 1 t/m 7. Waarbij 1 het kleinst is en 7 het grootst. Zie onder.

KISS Letterkleur …… Let op het # bij gebruik van een hexa-decimaal getal om een kleur aan te geven .

Lettertype …… Merk op dat er twee lettertypen zijn aangegeven. Meer dan twee is ook toegestaan. Dat hoeft echter niet, maar stel dat de bezoeker van je site het lettertype verdana niet bezit, dan kiest de browser automatisch voor arial. (of een eventuele volgende als de browser arial ook niet kan vinden.) Deze drie attributen in één keer Je kunt vooraf bepalen wat het standaard lettertype van je page moet zijn, daarbij ook de kleur en grootte. Deze drie FONT-attributen kunnen binnen één FONT-tag worden geplaatst. Je hebt dan maar één sluittag nodig. Waar nodig kun je altijd één van deze drie instellingen lokaal veranderen.

……

Een voorbeeld van het gebruik van FONT-tags. De code en hoe het er uit zal zien. Binnen de body-tag de achtergrondkleur. Dan in één FONT-tag het lettertype, kleur en grootte. Onderaan afgesloten. Zie voorbeeld. Tussen de tekst een lokale verandering. Een afwijkende kleur en cursief. Let op dat deze FONT-tag goed wordt afgesloten. De browser moet immers weten wanneer deze verandering moet stoppen en het standaard weer verder gaat. Zo kun je tussen de standaard instellingen allerlei gewenste veranderingen aanbrengen.




(zie ook blz. 8) In de code van het voorbeeld zie je een aantal malen
aan het eind van een stukje tekst. Deze tag is een ENTER in HTML. Deze zorgt er dus voor dat een zin op een nieuwe regel begint. Deze tag hoeft niet te worden afgesloten. Als je het wel doet is het niet fout.

7

8

KISS

Met wat je nu hebt geleerd kun je al een aardige homepage maken. In ieder geval een KOP bovenaan je page. Je kunt enkele speelse dingen uithalen met de tekst. Zie een paar voorbeelden onder. En misschien heb je zelf nog veel betere ideeën.

Welkom op mijn Homepage Welkom op mijn Homepage Welkom op mijn Homepage

Welkom op mijn Homepage WELKOMMOKLEW

OK, best veel werk, maar je wilt toch dat je homepage iets bijzonders wordt. Probeer maar eens wat.

Probeer eens twee regels tekst in te tikken, zie code onder, en bekijk het resultaat in de browser.

Oeps…, dat is toch niet helemaal wat je in gedachten had. De browser kent deze ENTER niet leest de tekst achter elkaar door. Er moet dus duidelijk worden aangegeven wanneer we op een nieuwe regel willen beginnen. HTML heeft daartoe twee verschillende tags




Deze heb je al gezien in het vorige voorbeeld. Dit is een zogenaamde open tag en hoeft niet te worden afgesloten.

(paragraph) geeft aan dat je een nieuwe alinea wilt beginnen, of een regel witruimte. Deze tag moet wel netjes worden afgesloten Probeer beide tags in je stukje code en zie zelf het verschil.

9

KISS EEN AFBEELDING PLAATSEN Afbeeldingen op een website plaatsen vraagt altijd om grote zorgvuldigheid. Als je website nog in je eigen computer op de harde schijf staat lijkt het allemaal nog redelijk goed te gaan. Staat je site eenmaal op het internet, blijkt dat (sommige) afbeeldingen niet worden weergegeven. Dat kan diverse oorzaken hebben. Daarover straks meer. Als je je strikt aan de volgende regels houdt kan het bijna niet misgaan: ƒ

Bedenk van tevoren welke afbeeldingen je wilt gebruiken. Alleen jpg, gif en png afbeeldingen zijn geschikt voor het internet.

ƒ

Zorg dat deze afbeeldingen in je web-map staan.

ƒ

Zorg dat de naam van het plaatje helemaal met kleine letters is geschreven (heel belangrijk), als dat niet zo is wijzig dan de naam. Ook spaties of andere tekens mogen niet in de naam voorkomen.

ƒ

Kijk bij eigenschappen naar de afmetingen van de afbeelding. Deze moet je in de code invullen.

ƒ

Als de afmetingen te groot zijn pas deze dan aan in bijvoorbeeld het programma IrfanView. Dan blijven in ieder geval de verhoudingen goed.

ƒ

Zorg dat de bestandsgrootte van de afbeelding niet te groot is. Is dat wel zo, doe daar dan wat aan in IrfanView. Lees ook het lesmateriaal over opslagformaten op de website.

Code voor het plaatsen van een afbeelding.

img border=”0”

wil zeggen, geen randje om de afbeelding. “1” betekent dat er een randje van 1 pixel rondom de afbeelding moet komen.

src=”naam.xxx”

naam van het plaatje, xxx staat voor jpg, gif of png

width

breedte van de afbeelding in pixels

height hoogte van de afbeelding in pixels

10

KISS

Bekijk steeds het resultaat in de browser. Als de afmetingen van de afbeelding je niet bevallen pas deze dan aan. Zorg wel dat de verhoudingen blijven kloppen. Anders krijg je onderstaand effect. Daarom kan je beter de afmetingen in een beeldbewerkings-programma wijzigen.

te breed

verhoudingen goed

te smal

HELP ! De afbeelding staat er niet.

ƒ

Controleer of de afbeelding zich wel in de juiste map bevindt. In je web-map dus.

ƒ

Controleer of je de naam wel juist hebt overgenomen. Zijn het allemaal kleine lettertjes, Zowel de naam van het plaatje als in de code? Het kan zijn dat het in je eigen computer wel goed werd weergegeven. De server van je provider werkt echter met het besturingssysteem Linux. Dit besturingssysteem maakt onderscheid tussen hoofd- en kleine letters, Windows op jouw computer maakt geen onderscheid.

ƒ

Controleer of je de code goed hebt ingetikt. Een veel gemaakte fout is om scr (van source) te schrijven in plaats van src. Let daar ook op.

ƒ

Controleer of de code wel op de juiste plaats staat. Dus tussen de body-tags.

ƒ

Is de extensie van de afbeelding goed weergegeven ? JPG, GIF of PNG. Dat wil zeggen: heb je bijvoorbeeld niet JPG ingevuld terwijl het GIF moet zijn ?

ƒ

Is de afbeelding niet veel te groot ? Zowel qua afmetingen als bestandsgrootte.

Als de bestandsgrootte te groot is duurt het heel lang eer de afbeelding ingeladen is op je website, dat wil zeggen voordat hij zichtbaar wordt. Het lijkt dan of de afbeelding niet wordt weergegeven. Bezoekers van je site haken hier beslist op af. Ga je zelf maar na. Probeer de bestandsgrootte te verkleinen. Bedenk dat afbeeldingen er over het algemeen ter illustratie staan. De gemiddelde bezoeker zal slecht een zeer vluchtige blik op de afbeelding werpen. Deze mag dus best iets minder, maar wel acceptabel, van kwaliteit zijn. Als de afmeting te groot is moet je deze echt in een daarvoor bestemd programma verkleinen. Als je dat alleen in je HTML-code doet wordt de afbeelding wel verkleind weergegeven maar het is en blijft een (te) grote afbeelding. En dus duurt het te lang voordat de afbeelding te voorschijn komt op de site.

11

KISS AFBEELDING ALS ACHTERGROND GEBRUIKEN

Voor een achtergrond is een JPG of een GIF het meest geschikt. Het moet bij voorkeur zo klein mogelijk zijn qua bestandsgrootte. Natuurlijk moet je ook hier zorgen dat de afbeelding in de goede map zit. Op een ‘gewoon’ geplaatste afbeelding kan je niet schrijven. Als je van de afbeelding achtergrond maakt dan is deze wel overschrijfbaar. Je kunt er zelfs andere afbeeldingen over heen plaatsen. Je moet wel een paar dingen bedenken: Als je zomaar een plaatje neemt, met een willekeurige afmeting, dan wordt de achtergrond van het scherm daar mee opgevuld. Dat wil zeggen: het plaatje wordt net zo vaak gekopieerd tot de hele achtergrond opgevuld is. Dan kan het gebeuren dat rechts en onder in het scherm de afbeelding maar gedeeltelijk wordt weergegeven. Hetgeen een zeer rommelige indruk geeft. Zie voorbeeld onder. Dit kan je ook niet echt voorkomen. Moderne schermen variëren tegenwoordig van 10 inch tot breedbeeldschermen van dik in de 20 inch. Daar kan je dus geen rekening mee houden. Je kunt wel zorgen dat je achtergrond zo rustig mogelijk overkomt. Verder is tekst over een afbeelding vaak heel slecht te lezen. Als je toch een afbeelding wilt is het aan te bevelen deze te bewerken in een daarvoor bestemd programma. Bijvoorbeeld IrfanView. Onder zie je een voorbeeldje van een embossed plaatje.

Tekst tekst tekst tekst Tekst tekst tekst tekst

Tekst tekst tekst tekst Tekst tekst tekst tekst

Dit is slechts een simpel voorbeeldje. Maar tekst over het rechterachtergrondje zal heel wat beter te lezen zijn dan tekst over het linkerachtergrondje. Ook hier geldt weer: Denk altijd eerst goed na wat je precies wilt. Het plaatsen van een achtergrondje gebeurt net als met achtergrondkleur ook binnen de bodytag. In de code onder staat xxx weer voor JPG of GIF

12

KISS

LINKS MAKEN Er bestaan verschillende links:

ƒ

Een link naar een vorige/volgende pagina binnen je eigen website. Dit kan via tekst of een plaatje.

ƒ

Een link naar de bovenzijde van de huidige pagina. Als je pagina erg lang is dan is het wel zo vriendelijk om een linkje naar boven te maken. Dat spaart de bezoeker naar boven scrollen. Over het algemeen doet men dat niet graag.

ƒ

Van een stukje tekst of een plaatje een link maken naar een andere website.

ƒ

Van een stukje tekst of een plaatje een link maken naar je e-mail adres.

ƒ

Een link naar een bepaald woord, onderwerp of object op de huidige pagina.

Als je een link maakt en deze in de browser bekijkt ga er dan met de cursor overheen. Je zult zien, als de link goed is, dat de cursor in een handje veranderd. Dan kan de link aangeklikt worden. Controleer altijd goed of alle links goed werken en ook inderdaad naar het goede adres gaan. Een link maken naar de volgende/vorige page van je eigen website Stel je hebt een tweede pagina gemaakt en deze heb je opgeslagen als : page2.html Op de eerste pagina komt dan een link naar de tweede pagina, op de tweede pagina natuurlijk weer een link terug naar de eerste. Zet de code op de plaats waar je de link wilt hebben. Dus waar het woordje ‘volgende’ moet komen te staan.

volgende Op de tweede pagina kan dan een link komen naar de eerste pagina. Deze pagina was opgeslagen als index.html weet je nog.

vorige Ook met een klein gifplaatje kun je een link maken naar bijvoorbeeld de volgende pagina. (Op internet zijn genoeg van dit soort kleine plaatjes te vinden.) De naam van dit plaatje is : blarr.gif Zet dan eerst het plaatje op de gewenste plaats en zet daar omheen de link code. In het voorbeeld onder elkaar vanwege de ruimte, maar kan ook naast elkaar. Maakt niets uit.

Een link naar de bovenkant van de huidige pagina Voor een link naar de bovenzijde van de huidige pagina vul je achter href de naam van de huidige pagina in.

13

KISS

Een link maken naar een ander Internetadres Gaat nagenoeg op dezelfde manier als vorige links. Nu komt er echter een URL (=internet adres) achter a href. Vergeet niet de http:// Anders zal de link niet werken. Voorbeeld

teksttekst Ook dit kan natuurlijk met een plaatje. In plaatst van tekst komt dan de code van het plaatje. Zie voorbeeld boven. Een link maken naar je e-mail adres Als tekst bijvoorbeeld: ‘stuur me een e-mail’ aangeklikt wordt kan er een e-mail aan jou gericht worden verstuurd. En ook dit kun je natuurlijk ook met een plaatje doen.

stuur me een e-mail Een link naar een plekje op de huidige pagina. Soms kan het handig zijn de bezoeker naar een bepaalde paragraaf op de huidige pagina te verwijzen. Daarvoor moet je het deel waar naar toegelinkt kan worden markeren en op een andere plek maak je dan de link die naar het gemarkeerde deel verwijst.

Hier komt alinea1

Het deel waar naar toegelinkt worden, wordt gemarkeerd met ‘linknaam’.

kan een

Ga naar de eerste alinea

De verwijzing naar het gemarkeerde deel. Vergeet # niet.

OPMAAK VAN DE LINKS Standaard hebben links altijd dezelfde kleur. Blauw als ze nog nooit zijn gebruik, paars als ze gebruikt zijn. Deze kleuren kun je echter zelf aanpassen. Ook dat doe je binnen de body-tag. Bedenk dat je een link hebt, een vlink (visited link) en een alink (actieve link). Ze mogen alle drie verschillend van kleur zijn of alle drie dezelfde kleur. Het is maar wat jezelf mooi vindt en wat goed bij de lay-out van je site past.

Uiteraard kun je links ook vet of cursief maken. En natuurlijk kun je voor links ook het lettertype of de lettergrootte aanpassen.

14

KISS

TABELLEN Tabellen zijn heel belangrijk in een website. Nagenoeg alle pure HTML-sites die je op internet tegenkomt bestaan voornamelijk uit (onzichtbare) tabellen. In HTML is het altijd moeilijk, zo niet onmogelijk, plaatjes of tekst op de juiste plaats te krijgen. Bijvoorbeeld als je een paar stukjes tekst naast elkaar wilt zetten of een paar kleine afbeeldingen naast elkaar wilt plaatsen. Een tabel is een enorm handig hulpmiddel om je lay-out te bepalen. En het houdt de boel ook nog lekker bij elkaar. In het volgende voorbeeld zie je een tabel van twee rijen en drie kolommen. tr = table row, td = tabel data

In de table-tag: De tablerand is 1 pixel in de kleur middengrijs. De tabelbreedte beslaat 50 % van het scherm. De breedte kan ook in pixels worden ingesteld. Maar met alle verschillende schermafmetingen, waar we het eerder over hebben gehad, is in procenten beter. De breedte die wordt weergegeven is uiteindelijk de volledige breedte ten opzichte van de celbreedte. Dat wil zeggen: In de tag van de tabelrij zie je dat er drie cellen zijn gedefinieerd. Deze zijn respectievelijk 20-, 35-, en 45 % van de volledige tabelbreedte. Het resultaat zie je onder.

Waar je wel voor moet zorgen is dat de cellen die onder elkaar staan dezelfde afmetingen hebben. De hoogte van de tabel hoeft niet te worden aangegeven. Deze past zich vanzelf aan. Over het algemeen wil je niet dat de tabel zichtbaar is voor bezoekers. Neem dan border=”0”.

KISS

15

In een tabel kun je alle bewerkingen die je tot nu toe hebt geleerd toepassen. Dat doe je tussen de tags, hier kun je alle tot nu toe geleerde fonteigenschappen toepassen. Maar ook afbeeldingen en links kunnen netjes gepositioneerd worden. Het is al een aantal malen gezegd, maar ook hier geldt weer: Bedenk van te voren wat je wilt. Wat moet waar komen, op welke plaats welk plaatje, op welke plaats welk tekst. Handig is het om dan eerst de tabel te maken en daarna pas de tekst en opmaak in te voeren. Een tabel maken gaat razendsnel met kopiëren en plakken. Een rij hoef je maar eenmaal in te tikken en daarna net zovaak kopiëren als nodig is. Misschien nog iets meer. Wat niet nodig is kan later worden weggehaald. Vergeet niet de tabel af te sluiten. In onderstaand voorbeeld zie je een deel van een schermafdruk van een homepage. Hier is goed te zien hoe gebruik is gemaakt van tabellen.

Boven heb ik de tabellen nog border=1 gegeven om de indeling te laten zien.

Hier het resultaat dat de bezoeker van de website te zien zal krijgen.

16

KISS

Het samenvoegen van tabelcellen kunnen we bewerkstelligen met “rowspan” of “colspan” Met rowspan kun je een paar cellen verticaal (hoogte van een aantal rijen) samenvoegen Met colspan kun je een paar cellen horizontaal (breedte van een aantal kolommen) samenvoegen

Hier zie je een gewone ‘kale’ tabel 4 kolommen en 5 rijen. Er doen zich echter vaak situaties voor waarbij één cel de ruimte van meerdere rijen of kolommen moet innemen. In het voorbeeld op de volgende bladzijde kun je zien hoe een tabel opgemaakt kan worden.

celspacing wil zeggen: ruimte tussen de cellen. celpadding wil zeggen: ruimte tussen tekst en de celborder.

17

KISS De tabel van de vorige pagina gaan we aanpassen tot het volgende voorbeeld Let op de rowspan en colspan instellingen.

De opmaak van de tabel. Rode rand met dikte 5. Breedte 50% van het scherm. Ruimte tussen de cellen 5 pixels. Zachtgele achtergrond.

De eerste cel neemt de ruimte in van 5 rijen. (Omspant 5 rijen) Omdat de eerste kolom één cel is geworden moet de eerste cel van de tweede rij, de eerste cel van de derde rij, enz , verwijderd worden.

De laatste twee cellen samengevoegd. Deze cel neemt de ruimte in van de breedte van 2 kolommen.

2

Om dit helemaal goed te doorgronden moet je hier zelf maar eens mee aan de slag.

18

KISS

OPMAAK VAN GROTE STUKKEN TEKST. Uiteindelijk willen we in een HTML-document min of meer dezelfde opmaaktoepassingen kunnen doen als in bijvoorbeeld een WORD-document. Denk daarbij aan speciale tekens, kopteksten, uitlijnen, inspringen, opsommingslijsten en horizontale lijnen. TEKENS Het euro teken. Als je in je tekst het euroteken nodig hebt kun je niet zondermeer dezelfde combinatie gebruiken die je ook in WORD gebruikt. In plaats daarvan gebruik je de tekenreeks € of € (vergeet de puntkomma niet). De laatste wordt nog niet door alle browsers gelezen. Spatie Spaties in een tekst worden door een browser gewoon gelezen. Spaties aan het begin of eind vanje tekst echter niet. Ook spaties in je code worden niet gelezen. Als je daar een spatie wenst moet je een code voor gebruiken:   Als in je tekst tekens voorkomen die in HTML een bepaalde betekenis hebben moet je deze tekens maskeren. Vooral het kleiner dan teken (<) kan de browser behoorlijk in de war brengen. Hij zal denken dat er een HTML-tag volgt. De volgende tekens kunnen als volgt worden gemaskeerd:

<

vervangen door de tekenreeks

<

>

vervangen door de tekenreeks

>

&

vervangen door de tekenreeks

&

“

vervangen door de tekenreeks

"

Hier zie je wat toepassingen van de tekens. Let op de spaties in regel 11. De

zorgt voor een regel witruimte tussen de regels.

Weergave van bovenstaande code

KISS

19

KOPTEKSTEN Een tekst heeft een titel ofwel een kop en eventuele tussenkopjes. HTML heeft hiertoe speciale tags op zes verschillende niveaus.

t/m

. Nummer 1 geeft de grootste letter weer en nummer 6 de kleinste. (zie voorbeeld) Ook bij deze tags horen natuurlijk sluittags. Let op dat het nummer bij begin en sluittag hetzelfde zijn. Iedere kop vormt in feite een nieuwe alinea, dat wil zeggen dat voor en na de koppen geen alinea markeringen nodig zijn. (

…

) Voor de opmaak van de kop, zoals kleur en lettertype, gelden de gewone HTML-regels. En koptekst is altijd bold (vet).

Kopteksten van groot naar klein. Let op dat bij de font-size 1 het kleinst is terwijl dat bij koppen de grootste letter geeft.

20

KISS

KOPTEKSTEN UITLIJNEN Als je niets aangeeft worden koppen links uitgelijnd. Koppen centreren of rechts uitlijnen behoort eveneens tot de mogelijkheden. Zie voorbeeld voor de code.

BLOKQUOTES Een stuk tekst geplaatst tussen blokquotes springt een stukje in. Dat staat vaak netter dan dat de tekst uiterst links begint.

21

KISS LIJSTEN (Opsommingstekens) In een ongeordende lijst

(ul=unordened list) worden alle items voorafgegaan door een opsommingsteken (bullet). In een geordende lijst nummers.


(ol=ordened list) worden de opgesomde items voorafgegaan door

De ongeordende lijst

Merk op dat je het kopje ook onder de
-tag kunt zetten. Dat ziet er dan als volgt uit.

22

KISS

De geordende lijst

Net als bij de ongeordendelijst kan het kopje hier ook onder de
-tag worden gezet.

Een geneste lijst Ook een genste lijst behoort tot de mogelijkheden. Dat wil zeggen: een opsommingslistje binnen een ongeordende lijst. Zie voorbeeld.

23

KISS Een definitie lijst

Een definietielist is een soort geneste lijst maar dan zonder bullets.

dl = definitionlist, dt = definition title, dd = definition data

HORIZONTALE LIJNEN Je kunt je zo voorstellen dat je een horizontale lijn in je tekst wilt plaatsen. Misschien ter verfraaiing, als scheidingslijn tussen twee stukken tekst of onder een kop. Dit kun je doen met de tag



---



Deze tag hoeft niet te worden afgesloten

Verder kun je de lijntag een aantal attributen meegeven zoals lengte width (in pixels of procenten) , dikte (size) of kleur. Je moet hier maar eens mee experimenteren.

24

KISS

ENKELE AARDIGE HTML-ELEMENTEN Lichtkrant Met het element MARQUEE kun je een lichtkrant op je homepage zetten. Dat wil zeggen een klein stukje tekst dat horizontaal over je scherm scrolt .

<marquee>

tekst tekst tekst



Preformatted Met behulp van het PRE element kan tekst in een vaste opmaak (preformatted) worden opgenomen, zonder dat de browser daar iets aan mag veranderen. Bijvoorbeeld als je iets in een heel klein tabelletje wilt opnemen, maar geen echte tabel wilt gebruiken. Daarbij maakt HTML gebruik van een niet-proportioneel font. De meeste mensen zullen hun keuze laten vallen op een proportioneel lettertype. Dat wil zeggen dat de letter ‘w’ meer ruimte in beslag zal nemen dan de letter ‘ i ’ . Ofwel iedere letter heeft zo z’n eigen ruimte nodig. Er is echter nog een tweede font-catagorie die in HTML kan worden aangesproken: de nietproportionele fonts. Van zo’n lettertype is de ruimte voor elke letter en leesteken precies het zelfde, inclusief de spatie en de punt. Zo’n niet-proportioneel font is dan ook heel geschikt om tekens recht onder elkaar uit te lijnen. Dat kan bijvoorbeeld voor een kleine tabel zeer geschikt zijn of voor het uitlijnen van een reeks getallen onder elkaar. De HTML-tags die hier zorg voor dragen zijn:

<pre> Merk op dat er geen
-tags of spatie-codes gebruikt zijn. Het PRE-element dwingt de browser enters en spaties te lezen. Over de -tag wordt natuurlijk wel heen gelezen.

Typemachine Tekst





KISS Tabel opschrift Met het CAPTION-element geef je een tabel een bijschrift.

Als attribuut kun je de caption een verticale uitlijning geven, top of bottom. De caption moet net onder de TABLE-tag komen. Het staat mooi als je voor het opschrift de Typewriter letters gebruikt.

Het fijne van dit element is dat het bijschrift altijd netjes uitgelijnd boven de tabel blijft staan. Onverschillig waar je de tabel neer zet of op wat voor scherm je het bekijkt.

Subscript en superscript Ook dit is mogelijk in HTML. Dit behoeft natuurlijk geen verdere uitleg.

25

26

KISS

Je hebt nu genoeg geleerd om een fraaie homepage te maken. Wil je complexere toestanden uithalen zorg dan dat je eerst goed begrijpt wat je tot nu toe hebt geleerd. Dan kun je daarna altijd een uitgebreide HTML-handleiding raadplegen. Met de kennis die je nu bezit zal dat geen probleem meer zijn. Dan tot slot nog een paar zeer belangrijke tips:

ƒ

Als je een website maakt, zorg dan dat je ook echt iets te vertellen hebt. Er is al genoeg rotzooi op het WWW te vinden en niemand zit te wachten op het zoveel duizendste rotzooiwebje dat totaal nergens over gaat. Het is prima als je alleen voor vrienden en kenissen een homepage wilt maken om met hen je interesses te delen , maar dan nog moet er wel zorg aan worden besteed.

ƒ

Bedenk vooraf hoe je site er uit moet gaan zien. Maak een schets op papier met indelingen. Hoe moet het er uit zien? Heb je een tabel nodig ? Zo ja, hoe groot ? Welke kleuren wil je gaan gebruiken, zoek daarvan vast de nummers op in een HTML-kleurentabel. Zet afbeeldingen die je wilt gebruiken vast in de daarvoor bestemde map. Pas de afmetingen van de afbeeldingen eventueel aan. Dat bespaart een hoop werk en gerommel in de code.

ƒ

Zorg dat kleuren, tekst en afbeeldingen mooi met elkaar harmoniëren. Maak er geen spetterend, knetterend, bont circusgebeuren van. Bezoekers van je site haken dan al snel af. Probeer een goede balans te vinden tussen afbeeldingen en de hoeveelheid tekst.

ƒ

Wees voorzichtig met het gebruik van bewegende onderdelen. Gebruik dat soort dingen alleen als ze functioneel zijn. Bewegende onderdelen zijn over het algemeen alleen maar leuk voor de maker zelf. Een gelikt uitziend Flash-introotje is heel leuk, maar na twee keer heeft je bezoeker het wel gezien. Een skip-intro is alleen maar een noodzakelijk kwaad. Bij een goede website gaat het voornamelijk om de inhoud en niet om de webmasterkunstjes van de maker. En zet alsjeblieft geen achtergrond muziekje op je site. Je bent vast zelf ook wel eens van een site afgevlucht omdat je verplicht zo’n irritant deuntje moest aanhoren.

ƒ

Zorg dat de bestandsgrootte van afbeeldingen zo klein mogelijk zijn. Het inladen van te grote bestanden gaat erg traag. Dat vereist nogal wat geduld van je bezoeker. Ga er van uit dat de gemiddelde bezoeker dat geduld niet heeft. Ga maar bij jezelf na. Nooit afgehaakt omdat het inladen eindeloos duurde ? Zie ook het lesmateriaal op de Informatica-site.

ƒ

Bekijk je site in diverse browsers. Browsers zijn helaas nog steeds niet compatibel. Als webonderdelen in de ene browser prima werken wil dat nog niet zeggen dat dit in een andere browser ook zo is. Dat geldt vooral voor bewegende onderdelen. Ook kleuren zien er in de ene browser beter uit dan in de andere. De basisvaardigheden van deze cursus zullen in alle browsers werken. Als je meer HTML-toepassingen wilt ga dan eerst na of deze wel in de meest bekende browsers werken. Goede handleidingen of boeken geven dat wel aan.

ƒ

Bekijk je site in diverse browser-afmetingen. Als je jouw site hebt gemaakt op een computer met een schermresolutie van 1024x768 of nog hoger, dan kan het resultaat wel eens enorm tegenvallen op een scherm met een mindere resolutie. De pagina wordt dan als het ware in elkaar gedrukt, waardoor tekst en afbeeldingen schots en scheef door elkaar gaan staan. Probeer om die reden zoveel mogelijk met procenten te werken in plaats van pixels.

KISS

27

ƒ

Lettertype Gebruik altijd een standaard lettertype van Windows. Een mooi exotisch lettertype is leuk, maar als de bezoeker van je site dit lettertype niet bezit dan zoekt de computer een vervangend lettertype. Dat kan zeer tegenvallende resultaten geven. Als je een opschrift wil in een zeer apart lettertype, maak er dan een plaatje van en zet deze in een eencellige tabel. Deze truc wordt veel toegepast en valt dan ook niet op. Zeker niet als de achtergrond van dat plaatje dezelfde kleur heeft.

ƒ

Loop altijd heel kritisch alle links na. Het is heel irritant als links op een site niet werken. Daar heb je vast zelf ook ervaringen mee.

Dan wens ik je veel plezier en succes bij het maken van een schitterende website

28

KISS