HTML KISS-proof. ( Keep It Simply Stupid)

Transcriptie

1 HTML KISS-proof ( Keep It Simply Stupid) Een stap-voor-stap minicursus basisvaardigheden HTML. Voor diegenen onder ons die graag een HTML-homepage willen maken, snel resultaat willen, maar er nog helemaal niets van weten. Ingrid Lundahl Fons Vitae Lyceum Amsterdam 1

2 VOORWOORD Om te beginnen heb je een goede HTML-editor nodig. Het gewone Windows kladblok werkt 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 1stPage. Een editor met ongekende mogelijkheden en nog gebruikersvriendelijk ook. (Je kunt 1stPage downloaden vanaf de Informatica-site) Aan het eind van deze basiscursus vindt je een beknopte handleiding voor deze editor. 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. De site blijft altijd een simpel, statisch uiterlijk houden. Veel aardige, nuttige of verfraaiende HTMLelementen 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 zelf 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 JavaScript 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. Het intikken van de code is inderdaad een tijdrovend werkje. Lees in de handleiding van 1stPage hoe je het programma op verantwoorde wijze code kunt laten genereren 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. Als dat allemaal is gelukt en wil je meer dan vind je op de Informatica-site links naar uitgebreidere cursussen. Ook het programma 1stPage heeft een zeer uitgebreide HTML-gids die je kunt raadplegen. 2

3 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 <tag> hebben en een sluit-tag </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.) <html> <head> <title> naam </title> </head> <body> </body> </html> Toelichting bij code links: De eerste tag <html> geeft aan dat het om een HTML document gaat, de laatste </html> geeft het einde aan. Tussen <head> en </head> 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 <title> en </title> komt de naam van de desbetreffende pagina. Ook deze is niet zichtbaar op je homepage. Maar wel herkenbaar voor de browser. Tussen <body> en </body> 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. 3

4 EEN EERSTE BEGIN Tik tussen de body-tags een regel tekst. Zie onder. <body> Welkom op mijn Homepage </body> Vergeet niet op te slaan Bekijk het resultaat. (In de meeste editors kun je switchen tussen een preview-scherm en een editscherm.) Staat de tekst er inderdaad? Een beetje saai nog hè. Maar daar gaan we wat aan doen. We gaan stap voor stap de tekst centreren, vet en groter maken. VET MAKEN <body> Welkom op mijn Homepage </body> Bekijk het resultaat in de browser. Is de tekst inderdaad vet? OK. Sla je werk op. Dan gaan we nu centreren. CENTREREN <center> </center> <body> <center> welkom op mijn Homepage </center> </body> Let op!!!!! Zorg altijd dat de tags in symmetrische vorm rond de tekst staan. Dus bij de eerste begin-tag hoort de laatste sluit-tag <tag1><tag2> tekst </tag2></tag1> 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 schuin gedrukte tekst maken. Probeer maar. ITALIC schuin 4

5 LETTERTYPE GROTER OF KLEINER MAKEN In HTML lopen de lettergroottes van 1 tot 7. 1 komt overeen met lettergrootte 8, 2 met lettergrootte 10, 3 met lettergrootte 12, enz. <body> <center> Welkom op mijn Homepage </center> <body><center> Welkom op mijn Homepage </center> </body> </body> Merk op dat je de tags onder elkaar kunt zetten, of een aantal naast elkaar. Bovenstaande voorbeelden geven hetzelfde resultaat. Maar rechts is erg rommelig en fouten opsporen wordt dan lastig. Zorg er altijd voor dat de HTML-code overzichtelijk en leesbaar blijft. Fouten zijn dan sneller op te sporen en veranderingen makkelijker aan brengen. Voor de browser maakt het niet uit. Die leest gewoon alles achter elkaar. Bekijk het resultaat. Probeer de volgende opdracht eens te maken. OPDRACHT : Probeer het volgende eens, de W en de H hebben size 7, de rest van de letters hebben size 4 Welkom op mijn Homepage Zo kan je allerlei speelse dingen doen met tekst. Van groot naar klein laten aflopen, van klein naar groot laten oplopen of wat je zelf maar kunt bedenken. Dat laat ik geheel aan jouw fantasie over. 5

6 LETTERTYPE VERANDEREN Eerst even dit: Kies altijd voor een lettertype dat duidelijk leesbaar is. Vergeet niet dat van een scherm aflezen altijd lastiger is dan van een stuk papier. Neem ook niet al teveel verschillende lettertypen op één page. Dat geeft een rommelige en onoverzichtelijke indruk. Gebruik verder niet een al te onbekend exotisch lettertype. Hoe mooi je die zelf ook vind. De kans is groot dat de persoon die jouw homepage bekijkt dat lettertype niet heeft. De browser (van die persoon) gaat dan op zoek naar een ander lettertype dat alfabetisch gezien het dichtst bij ligt. Dan kan het resultaat wel eens enorm tegenvallen. Laten we nu het lettertype van de homepage veranderen in bijvoorbeeld arial. Bekijk dan het resultaat weer in de browser <body> <center> Welkom op mijn Homepage </center> </body> Merk op dat we tweemaal een font bewerking hebben uitgevoerd, dus moeten er ook twee font-sluit-tags in de code worden geplaatst. We hebben nu een aantal tekstbewerkingen gedaan. We zetten ze nog even op een rijtje. En voegen onderstrepen er aan toe. opmaak begin-tag sluit-tag tekst centreren <center> </center> vet (bold) schuin (italic) onderstrepen lettergrootte lettertype 6

7 We gaan nu een tweede stukje tekst invoeren. Laten we zeggen twee regels. Verzin maar wat. <body> <center> Welkom op mijn Homepage </center> Hier komt de tekst van regel 1 Hier komt de tekst van regel 2 </body> Bekijk het resultaat in de browser. Oeps, dat is toch niet helemaal wat we in gedachten hadden. Dat komt omdat de browser alles achter elkaar doorleest en een ENTER kent hij niet. We moeten dus duidelijk aangeven wanneer we op een nieuwe regel willen beginnen. En ook als we een regel witruimte willen. Zie onderstaande code en pas jouw code aan. Bekijk daarna het resultaat weer in de browser. <body> <center> welkom op mijn Homepage </center> hier komt de tekst van regel 1 hier komt de tekst van regel 2 </body> geeft aan dat je een nieuwe alinea wilt beginnen. (of een regel witruimte) achter een stukje tekst geeft aan dat je een nieuwe regel wilt beginnen. Deze tags hoeven niet gesloten te worden. Dit noemen we open tags. Het is niet fout als je ze wel sluit. Pas nu in de code de lay-out en de tekst aan zoals jij het wilt hebben. In de volgende oefening gaan we wat kleur aanbrengen. 7

8 FONT KLEUREN (tekst kleuren) In HTML worden HEX-decimale getallen gebruikt om kleuren aan te geven. Zie hiervoor de kleurentabellen op de Informatica-site. deze tekst is groen deze tekst is rood Vergeet ook hier niet een sluit-tag te plaatsen. Uiteraard zie je het resultaat pas in de browser. rood groen blauw Deze code zal in de browser als volgt worden weergegeven: roodgroenblauw Dit is natuurlijk erg veel code voor zo n klein stukje tekst. Maar met selecteren, kopiëren (Ctrl_C) en plakken (Ctrl_V) gaat het heel snel. Bedenk daarom altijd van te voren hoe je wilt dat een stukje tekst er uit moet komen te zien. Af en toe nadenken kan een hoop tikwerk besparen. Merk op dat er geen spaties staan tussen de gekleurde woordjes. Spaties tussen de woorden van een stukje tekst worden door de browser wel gelezen, maar een spatie na een tag of voor een sluit-tag niet. Die moet je zelf in code aangeven. De HTML-code voor een spatie is: (zonder tag-haken en let op de punt_komma) ACHTERGRONDKLEUR <body bgcolor= FF0000 > Kleur voor de achtergrond geven we aan in de body. Zie boven. Je hoeft hier geen sluit-tag te geven. Als het goed is heb je die namelijk al. Hoe je een afbeelding als achtergrond kan gebruiken lees je verderop in deze cursus. 8

9 EEN AFBEELDING PLAATSEN Afbeeldingen op een website plaatsen vraagt altijd om grote nauwkeurigheid. 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 heeft allerlei oorzaken waar ik nu niet over ga uitbreiden. Als je je echter strikt aan de volgende regels houdt kan het bijna niet misgaan: Bedenk van tevoren welke afbeeldingen je wilt gebruiken. Alleen jpg en gif 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 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. 9

10 Code voor het plaatsen van een afbeelding <img border= 0 src= naam.xxx width= height= > img border= 0 geeft aan of er een randje om het plaatje moet, 0 betekent geen randje. src= naam.gif de source van het plaatje. In plaats van gif kan er natuurlijk ook jpg staan. 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? - Controleer of je de code goed hebt ingetikt. Een veel gemaakte fout is om scr 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. 10

11 AFBEELDING ALS ACHTERGROND GEBRUIKEN Ook hier geldt dat het om jpg of gif gaat. En natuurlijk moet je ook hier zorgen dat het plaatje in de goede map zit. Op een gewoon geplaatste afbeelding kan je niet schrijven. Als je van de afbeelding achtergrond maakt dan is het 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 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 rommelige indruk geeft. Zie voorbeeld hieronder. Ook is tekst over een afbeelding vaak heel slecht te lezen. Als je toch een afbeelding wilt, bewerk deze dan eerst in een daarvoor bestemd programma. IrfanView bijvoorbeeld. 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. Dus ook hier geldt weer: Denk altijd eerst goed na wat je precies wilt. Het plaatsen van een achtergrondje gebeurt net als met achtergrondkleur ook in de body. <body background= naamvanplaatje.gif > (of jpg) 11

12 LINKS MAKEN Er bestaan verschillende links: Een link naar een vorige/volgende pagina in 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 adres. 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 heel goed of alle links 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 Zet de code op de plaats waar je de link wilt hebben. Dus waar het woordje volgende moet komen te staan. <a href="page2.html"> volgende </a> Op de tweede pagina kan dan een link komen naar de eerste pagina. Deze pagina was opgeslagen als index.html weet je nog. <a href="index.html"> vorige </a> 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 (middelste regel hieronder in voorbeeld) en zet daar omheen de link code. In het voorbeeld onder elkaar vanwege de ruimte, maar kan ook naast elkaar. Maakt niets uit. <a href="page2.html"> <img border= 0 src= blarr.gif width= 20 height= 20 > </a> Voor een link naar de bovenzijde van de huidige pagina vul je achter href de naam van de huidige pagina in. 12

13 Een link maken naar een ander Internetadres Gaat bijna op dezelfde manier als de andere links. Nu komt er echter een URL (=internet adres) achter a href. Vergeet niet de Anders zal de link niet werken. Bijvoorbeeld <a href=" "> teksttekst </a> 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 adres Als tekst bijvoorbeeld: stuur me een aangeklikt wordt kan er een aan jou gericht worden verstuurd. En ook dit kun je natuurlijk met een plaatje doen. <a href="mailto: naam@provider.nl "> stuur me een </a> TABELLEN Tabellen zijn heel belangrijk in een website. Nagenoeg alle sites die je op internet tegenkomt bestaan voornamelijk uit (onzichtbare) tabellen. In HTML is het altijd moeilijk 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 maak ik een tabel van twee rijen en drie kolommen 13

14 tr = table row, td = table data <table border="1"> een tabel beginnen lijndikte = 1 pixel <tr> begin de eerste rij <td width="100"> tekst1a </td> eerste kolom breedte = 100 pixels <td width="200"> tekst1b </td> tweede kolom breedte = 200 pixels <td width="300"> tekst1c </td> derde kolom breedte = 300 pixels </tr> einde eerste rij begin tweede rij <tr> eerste kolom breedte = 100 pixels <td width="100"> tekst2a </td> tweede kolom breedte = 200 pixels <td width="200"> tekst2b </td> derde kolom breedte = 300 pixels <td width="300"> tekst2c </td> einde tweede rij </tr> afsluiten tabel </table> De tabel zal er in de browser als volgt uitzien: tekst1a tekst1b tekst1c tekst2a tekst2b tekst2c Zorg wel dat 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 de bezoeker. Neem dan border=0. In een tabel kun je alle bewerkingen die je tot nu toe hebt geleerd toepassen. Dat doe je tussen <td width=" "> hier kun je alle bewerkingen toepassen </td> 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. <center> <table border="0"> <tr> <td width="a"> </td> <td width="b"> </td> <td width="c"> </td> </tr> <tr> <td width="a"> </td> <td width="b"> </td> <td width="c"> </td> </tr> </center> </table> 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. De tabel hiernaast is gecentreerd en heeft drie kolommen. Vergeet niet de tabel af te sluiten. Vergeet ook niet dat cellen die onder elkaar komen dezelfde afmetingen moeten hebben. Zie a, b en c in het voorbeeld. 14

15 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. Op de volgende pagina zie je nog een voorbeeld van een tabel en het gebruik van verschillende achtergrondkleuren. 15

16 Boven zie je weer een stukje schermafdruk van een html-page met een tabel van drie rijen en twee kolommen. Onder zie je de bijbehorende code, bekijk de roodgenummerde opmerkingen. <html> <head> <title>voorbeeld tabel</title> </head> 1<body bgcolor="#cccccc"> 2<center> 3<table border="0" width="50%" bgcolor="#999999"> 4<tr> <td width="50%">1</td> <td width="50%">4</td> </tr> 5<tr> <td width="50%" bgcolor="#ff0000">2</td> <td width="50%" bgcolor="#00ff00">5</td> </tr> 6<tr> <td width="50%">3</td> <td width="50%">6</td> </tr> 7</table> 8</center> </body> </html> 1. Een lichtgrijze achtergrond voor de pagina 2. De tabel centreren 3. Geen rand, 50% van de pagina, achtergrond van tabel donkergrijs 4. Eerste rij, verdeeld in twee cellen ieder 50%, lettertype en grootte 5. Tweede rij, cel-1 rode achtergrond, cel-4 groene achtergrond. 6. Derde rij 7. Tabel afsluiten 8. Centreren afsluiten. 16

17 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 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 punten: 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 webje dat totaal nergens over gaat. Bedenk vooraf hoe je site er uit moet gaan zien. Maak een schets op papier met indelingen. 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 circusgebeuren van. Bezoekers van je site haken dan al snel af. 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. 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. Bekijk je site in diverse browser-afmetingen. Als je jouw site hebt gemaakt op een computer met een schermresolutie van 1024x768 dan kan het resultaat wel eens enorm tegenvallen op een scherm van 800x600 (Waar toch nog veel mensen mee werken.) De pagina wordt dan als het ware in elkaar gedrukt, waardoor tekst en afbeeldingen schots en scheef door elkaar gaan staan. 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. 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. Zie voor veel meer HTML: Dan wens ik je veel plezier en succes bij het maken van een schitterende website. 17

18 Beknopte Handleiding 1stPage Zoals je in de basiscursus HTML kunt lezen heb je voor het maken van een website een HTMLeditor nodig. 1stPage is een zeer goede en krachtige editor. Dit is een zeer beknopte handleiding. Om alle mogelijkheden van dit programma te beschrijven zou een handleiding van enkele honderden pagina s nodig zijn. Deze handleiding is slechts bedoeld om een begin te maken met je website. Al werkend met het programma leer je snel genoeg de mogelijkheden kennen. Het eindeloos intikken van de codes is een vervelend karweitje. Daarom geef ik ook wat handigheidjes die een hoop tikwerk kunnen besparen. Handigheidjes waarbij het programma op zeer verantwoorde wijze de code zelf genereert. In tegenstelling tot een WYSIWYG programma heb je het echter allemaal zelf in de hand. Je kunt op ieder gewenst moment de code aanpassen. Verschillende code-typen worden in verschillende kleuren weergegeven. Dus kun je altijd alles snel terugvinden. Maar het blijft belangrijk dat je precies weet waarmee je bezig bent. Als je nog helemaal niets van HTML afweet gebruik dan de basis-cursus naast deze handleiding. 18

19 Open het programma in de expert-mode Je ziet dat de basiscode al in het editor scherm staat. Je kunt de linkerzijkant van het scherm weghalen door op het minuscuul kleine schermpje onder het rode kruisje te klikken. Zo heb je een mooi overzichtelijk scherm. 19

20 Geef je webpagina een titel tussen de title-tags en sla je werk op in een map. Denk erom dat alles wat met deze site te maken heeft in dezelfde map opgeslagen wordt. Ook de afbeeldingen. Nu kun je tussen de body-tags je website maken. Raadpleeg daarvoor de HTML cursus. Je kunt switchen tussen de Edit en Preview tabbladen. Zo kun je steeds zien hoe jouw page eruit komt te zien. Voor een tweede pagina ga je naar File en kiest voor New Web Document. (Of CTRL+N) Geef de tweede pagina een naam en sla deze op in de daarvoor bestemde map. Hoe je een link maakt van de ene naar de andere pagina kun je lezen in de HTML cursus. Onderaan het editorscherm zie je nu je tweede pagina. Je kunt switchen tussen diverse pagina s om deze te bewerken. 20

21 Het wordt echter onoverzichtelijk als je tussen teveel pagina s kan switchen. Neem alleen die pagina s die je wilt bewerken. Haal daartoe het linker deel van het scherm weer tevoorschijn. Zoek in het bovenste deel de gewenste map en klik deze aan. De bestanden in deze map komen nu in het onderste deel te staan. Door dubbel te klikken roep je de gewenste pagina( s) op. Zo, je hebt nu een begin gemaakt van een website. Op de volgende pagina s lees je hoe je het programma zelf code kunt laten genereren. 21

22 Pagina-layout Als je weet hoe je pagina er uit moet komen te zien ga dan naar Format op de menubalk en kies voor Document Properties. Daar kun je al je wensen wat betreft kleuren invullen. Als je een afbeelding als achtergrond wil kan dat hier ook. Voor de tekstkleuren kun je het kleine paletje aanklikken en een kleur uitkiezen. Zelf invullen kan ook. Zie de informatica-site voor de hex-decimale getallen voor kleuren. Na het invullen klik je op de knop Apply. Het programma zet zelf dan de code in je document. Dat scheelt dus heel wat tikwerk. Tekst-Layout Als je tussentijds toch iets aan de tekst wilt veranderen ga dan weer naar Format op de menubalk en kies nu voor Font. Vul daar de gewenste opties en en klik op OK. Het programma zet zelf dan weer de code in je document. Zie volgende bladzijde. 22

23 Boven zie je hoe het programma de code zelf heeft neergezet. Het enige wat je zelf moet doen is op de juiste plaats de tekst in te typen. Afbeelding invoegen Zorg eerst dat de afbeelding in je webmap staat. Belangrijk! Ga dan naar Insert op de menubalk en kies voor Image Het volgende venster verschijnt. Zoek in het venster rechts de afbeelding die je op je pagina wilt hebben en vul de gewenste opties in. Ook nu zal het programma zelf de code genereren. Zo zijn er nog meer opties die je behoorlijk wat tikwerk kunnen besparen omdat het programma automatisch de code genereert. Op de afbeelding linksboven zie je ook de optie Special Character Symbols. Het venster links verschijnt dan. Klik op het gewenste teken. 23

24 Tags invoeren. Dit venster spreekt voor zichzelf. Ook hier kun je weer veel tikwerk besparen door een van de volgende tags te kiezen. Op een gegeven moment weet je de sneltoetsen wel uit je hoofd. Waarbij ik nog even opmerk dat Anchor staat voor een link-tag en de Non breaking spac voor een gewone spatie. In de cursus staat dat de code voor een spatie &nbsp is. Het programma zet deze code automatisch neer met de sneltoetsen Ctrl+Spatiebalk. Tabellen Tot slot het invoeren van tabellen. Toch ook een vervelend tikwerkje. Het programma doet het in een wenk voor je. Kies voor Insert op de menubalk en dan Tables. Het volgende venster verschijnt Vul de gewenste afmetingen in. LET OP! Het enige foutje dat ik in het programma heb kunnen ontdekken is dat hier Width en Height omgewisseld zijn. Je hoeft het %-vakje niet aan te vinken. Dan worden de afmetingen in pixels weergegeven. Klik dan op het tabblad Extended 24

25 Vul ook hier de gewenste opties in. En klik op OK. Je zult zien dat het programma ook hier weer keurig de code heeft neergezet in je document. Je moet zelf natuurlijk invulling aan de tabel geven. Dat kunnen afbeeldingen zijn of tekst. Zie ook de HTML cursus. 25