LES 18 HTML Editor: de eerste stappen In deze les leert u werken met HTML Editor. Daarbij geven we tevens een inleiding tot HTML. Hoewel op dit moment HTML versie 4.01 in gebruik is, maakt de HTML Editor van OpenOffice nog gebruik van de iets oudere standaard 3.2. Zoals u zult vaststellen, is HTML niet eens echt moeilijk. Vensters U Start OpenOffice HTML Editor als volgt: 1. Selecteer in het menu Start het onderdeel Programma s. 2. Selecteer OpenOffice.org 1.0.1 en klik op OpenOffice.org HTML Editor. AFBEELDING 18.1 HTML Editor van OpenOffice.org
222 Les 18 3. De opbouw van het scherm zal u bekend voorkomen. In de gereedschapsbalk links treft u een aantal zaken aan die u kunnen helpen bij het maken van een HTML-pagina en waarvan een aantal later in deze les of gedurende de volgende les zeker aan bod zal komen. HTML Wat is de taak van HTML? Hebt u HTML eigenlijk nodig om een webpagina te publiceren? U denkt waarschijnlijk dat u zonder HTML geen webpagina kunt publiceren, maar toch is dat goed mogelijk. Probeer in Kladblok maar eens een tekst te schrijven. Bewaar dit bestand vervolgens als tekst.html en open het in een browser. AFBEELDING 18.2 Links Kladblok, rechts de HTML-versie. Eén ding valt u ongetwijfeld meteen op: terwijl er in het linkervenster een zekere vormgeving te herkennen is (er is een titel en twee tekstblokken), valt dit onderscheid in de browser volledig weg. Dit komt doordat de browser de ingevoerde Enter-tekens negeert. Hij plaatst alle tekst gewoon achter elkaar, alsof het één doorlopende tekst betreft. Nu ziet u ook waarom HTML belangrijk is. HTML geeft namelijk vorm aan een pagina. Het zorgt ervoor dat de pagina door de browser geopend wordt zoals u ongeveer bedoeld hebt. Ongeveer? Inderdaad: de vormgeving kan verschillen, al naargelang u Internet Explorer 6, Netscape 7 of Opera 7 gebruikt. Het is dan ook belangrijk dat u alle drie de browsers gebruikt om uw HTML-pagina te bekijken. Alleen dan weet u honderd procent zeker dat alle gebruikers de pagina kunnen bekijken.
HTML Editor: de eerste stappen 223 De eerste tags HTML is opgebouwd uit tags. Een opdracht in HTML is dan ook eenvoudig te herkennen. HTML-opdrachten staan namelijk altijd tussen spitse <haakjes>. De opdrachten tussen deze haakjes zorgen ervoor dat de browser de webpagina weergeeft zoals dat door de ontwikkelaar bedoeld is. Dat hierbij enkele beperkingen kunnen optreden (al naargelang de gebruikte browser), hebt u al in een vorige paragraaf van deze les kunnen lezen. De tags zelf worden nooit weergegeven in de browser, tenzij er fouten opgetreden zijn. Dat betekent dus dat de maagdelijk witte pagina van afbeelding 18.1 misschien redelijk wat HTML code verbergt. Wilt u het even controleren? 1. Klik in het menu Beeld op de opdracht HTML - brontekst. AFBEELDING 18.3 De HTML-code die verborgen zit achter een witte pagina. 2. Inderdaad: de witte pagina van afbeelding 18.1 is niet zo maagdelijk wit als u wellicht dacht. Om de code een beetje te kunnen begrijpen, halen we deze uit elkaar in kleine stukjes. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2//EN >
224 Les 18 Iedere HTML-pagina hoort met deze regel te beginnen. Deze geeft namelijk de HTML-versie aan. HTML Editor maakt nog gebruik van versie 3.2. Het W3C, de overkoepelende organisatie die instaat voor onder meer de standaard bij HTML, heeft momenteel al standaard 4.01 bereikt. DOCTYPE Deze regel mag u gerust weglaten. Deze vertelt de browser om welke HTML-pagina het gaat. Om conform de standaard te werken, hoort deze opdracht aanwezig te zijn, maar er zal geen foutmelding gegenereerd worden als u deze regel weglaat en gewoon begint met de tag <HTML>. <HTML> Hier geeft u aan dat u in HTML begint te programmeren. Als u het laatste gedeelte van de desbetreffende pagina bekijkt, zult u merken dat deze tag herhaald wordt: </HTML>. Het enige verschil is de schuine streep, oftewel de slash. Deze schuine streep geeft aan dat de tag afgesloten wordt. Sommige tags moeten namelijk afgesloten worden om aan te geven dat de opdracht beëindigd wordt. Daarom spreken we van een begintag <HTML> en een eindtag </HTML>. Vergelijk het maar met een tekstverwerker. Als u een tekst vet weergeeft, moet u aangeven waar dat vet moet beginnen en waar het moet eindigen. Doet u dit niet, dan zou de hele tekst vet worden en valt de bedoelde tekst niet meer op. <HEAD> Net als een brief bestaat een webpagina ook uit twee delen. Enerzijds is er de kop, die in een brief de adresgegevens bevat. In een HTML-pagina bevindt zich hier vergelijkbare informatie. Zo kunt u hier de titel van uw pagina in kwijt, weergegeven tussen de tags <TITLE></TITLE>. <META HTTP-EQUIV= CONTENT-TYPE CONTENT= text/html; charset=windows-1252 > <META NAME= GENERATOR CONTENT= OpenOffice.org 1.0.1 (Win32) >
HTML Editor: de eerste stappen 225 <META NAME= AUTHOR CONTENT= Peter D Hollander > <META NAME= CREATED CONTENT= 20021024;13424774 > <META NAME= CHANGED CONTENT= 16010101;0 > Deze meta-informatie wordt gebruikt om zoekmachines te vertellen wat het onderwerp van uw website is. De waarde van metatags is in de loop van de jaren kleiner geworden, maar u kunt ze toch nog steeds goed gebruiken als u zich wilt aanmelden bij sites zoals Google. U kunt er naast sleutelwoorden ook de identiteit van de webmaster in kwijt. Hebt u een omschrijving van uw website, dan kunt u die er eveneens in plaatsen. </HEAD> <BODY> Eerst sluit u de <HEAD>-tag af om vervolgens de body van de webpagina weer te geven. Dit is de informatie die daadwerkelijk zichtbaar zal zijn voor gebruikers en zal straks, onder aan de webpagina, weer afgesloten moeten worden: </BODY> </HTML> Uw eerste pagina We willen eerst een achtergrond kiezen voor onze pagina. 1. Klik in het menu Opmaak op Pagina. AFBEELDING 18.4 De pagina-instellingen van HTML Editor.
226 Les 18 2. U krijgt eerst de paginagrootte te zien. Die wilt u in dit geval niet wijzigen. Klik op het tabblad Achtergrond. Paginagrootte Waarom past u de paginagrootte niet aan? Omdat dit weinig zin heeft. Op internet is de grootte van een pagina minder belangrijk, omdat alles afhangt van de grootte van het browservenster van de bezoeker. Terwijl iemand op de ene computer niet hoeft te scrollen om de hele pagina te zien, kan dit op de andere computer met een andere resolutie wel het geval zijn. Resolutie De resolutie wordt weergegeven in pixels, oftewel punten die naast en onder elkaar worden weergegeven. De gebruikelijkste resoluties zijn 800 600, 1024 768 en 1280 1024. AFBEELDING 18.5 Een achtergrondkleur wordt het snelst geladen. 3. Bij Als kunt u kiezen tussen Kleur (zie afbeelding 18.5) en Afbeelding (zie afbeelding 18.6). Een afbeelding kan mooi zijn, maar deze moet gedownload worden, en dat duurt uiteraard iets langer. Een kleur is eenvoudiger, op voorwaarde dat u geen te felle kleur kiest.
HTML Editor: de eerste stappen 227 AFBEELDING 18.6 Hier hebben we een afbeelding uit les 13 als achtergrond gekozen. Contrast Kiest u een achtergrondkleur, zorg er dan voor dat de kleur van de tekst voldoende contrasteert. Anders is de kans groot dat de pagina onleesbaar wordt. 4. U kunt het best Kleur kiezen. Kies een kleur, bijvoorbeeld zwart, door erop te klikken. Zwart Zwart heeft het voordeel dat eventuele fouten heel gemakkelijk te verbergen zijn en dat u met een lichte kleur of zelfs met wit als tekstkleur kunt werken. 5. Klik op OK. 6. Zoals het hoort, begint u deze pagina met een titel. Voer bijvoorbeeld in: Dorodomanda, Een Schaduw In Een Schaduwrijk Land. 7. Help! Hoewel u tekst ingevoerd hebt, ziet u deze niet. Hebt u misschien iets verkeerd gedaan? Het antwoord is kort maar krachtig: ja. Standaard wordt er namelijk met zwarte tekst gewerkt. Aangezien de achtergrond ook zwart is, begrijpt u meteen het probleem.
228 Les 18 AFBEELDING 18.7 Alleen de rode kronkellijn van de spellingcontrole geeft aan dat er hier iets zou kunnen staan. 8. Selecteer eerst de tekst; u weet dat deze op de eerste regel staat. AFBEELDING 18.8 De tekst is al geselecteerd, maar is nog steeds onzichtbaar. 9. Klik vervolgens op het pictogram Tekenkleur en houd de muisknop ingedrukt totdat u het venster van afbeelding 18.9 ziet. AFBEELDING 18.9 Maar dat is snel aangepast. 10. Selecteer nu een kleur en maak de selectie vervolgens ongedaan.
HTML Editor: de eerste stappen 229 AFBEELDING 18.10 Nog niet helemaal wat het zijn moet, maar toch leesbaar. 11. Dit is wel leesbaar. Alleen wilt u natuurlijk dat de titel iets groter weergegeven wordt. Ook dat is geen probleem. 12. Open het dialoogvenster Alinea-opmaakprofielen zoals we dat uitgelegd hebben in het begin van dit boek (in de eerste les over Writer). Selecteer vervolgens Dorodomanda en dubbelklik op Kop 1. Vergeet niet de kleur weer aan te passen, anders verdwijnt het woord opnieuw in de achtergrond! 13. Centreer de titel. AFBEELDING 18.11 Dit is een mooi begin. 14. Nu nog de subtitel. Selecteer deze, dubbelklik op Kop 4, pas ook nog de kleur aan en centreer deze eveneens. 15. U ziet meteen het verschil in grootte. Kop 1 is het grootst, Kop 6 het kleinst. In de taal HTML wordt dat weergegeven door de tags <Hx>kopgrootte</Hx>, waarbij x een cijfer is tussen 1 en 6.
230 Les 18 Centreren U hoeft geen tekst te selecteren om deze te centreren. Het is voldoende om het invoegpunt in de regel te plaatsen om de hele regel (of alinea) te centreren. AFBEELDING 18.12 De titel en subtitel. Afbeeldingen Tekst alleen is op een webpagina niet voldoende. U wilt natuurlijk ook afbeeldingen toevoegen. Afbeeldingen en auteursrecht Op zoek naar afbeeldingen die u zonder problemen op uw webpagina kunt gebruiken? Zoek voor het beste resultaat op de term free webdesign. 1. Druk achter de subtitel enkele malen op Enter. 2. Klik in het menu Invoegen op Afbeelding. 3. Kies een afbeelding en klik op Openen. De afbeelding wordt meteen ingevoegd.
HTML Editor: de eerste stappen 231 AFBEELDING 18.13 Een afbeelding invoeren. 4. Hiermee bent u nog niet klaar: u moet namelijk nog wat extra informatie toevoegen. Dubbelklik op de afbeelding. AFBEELDING 18.14 Het dialoogvenster Afbeelding. 5. Zoals u ziet, kunt u hier een URL of link naar een andere pagina opgeven. 6. Klik op het tabblad Afbeelding. URL Uniform Resource Locator, oftewel het webadres van een pagina of site.
232 Les 18 AFBEELDING 18.15 De verwijzing naar de vaste schijf is niet optimaal. 7. Kijk even naar het onderdeel Koppeling. Hoewel deze koppeling correct is voor wie op zijn vaste schijf werkt, is dit niet echt handig wanneer u online bent. Het beste is dan ook er voor te zorgen dat de afbeelding zich in een afzonderlijke map met afbeeldingen bevindt, in de map waarin u de pagina opgeslagen hebt. Waarom? Anders wordt er, wanneer deze pagina gepubliceerd wordt, een afbeelding gezocht die zich op de D:-schijf bevindt. De kans dat deze afbeelding zich precies op die plek bevindt, is uitermate klein. 8. Klik ook op de tab Overige. AFBEELDING 18.16 De alternatieve tekst voor wanneer de afbeelding niet zichtbaar is.
HTML Editor: de eerste stappen 233 9. Hier bevinden zich de naam en de alternatieve tekst. Zorg dat deze ingevuld worden: zo ziet de gebruiker die om de een of andere reden geen afbeelding geladen heeft, toch meteen of hij iets gemist heeft. Conclusie Dit is het eerste gedeelte van de snelcursus HTML. In de volgende les leert u hoe u een hyperlink maakt en krijgt u uitleg over de mogelijkheden die tabellen u bieden bij de vormgeving van een webpagina.