LES 18 HTML Editor: de eerste stappen · 3. Bij Als kunt u kiezen tussen Kleur (zie afbeelding...

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 stan-daard 3.2. Zoals u zult vaststellen, is HTML niet eens echt moeilijk.

VenstersU 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

Les 18222

3. De opbouw van het scherm zal u bekend voorkomen. In de gereed-schapsbalk 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.

HTMLWat is de taak van HTML? Hebt u HTML eigenlijk nodig om een web-pagina te publiceren?

U denkt waarschijnlijk dat u zonder HTML geen webpagina kunt publi-ceren, 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 be-langrijk 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. Al-leen dan weet u honderd procent zeker dat alle gebrui-kers de pagina kunnen bekijken.

223HTML Editor: de eerste stappen

De eerste tagsHTML is opgebouwd uit tags. Een opdracht in HTML is dan ook eenvoudig te herkennen. HTML-opdrachten staan namelijk altijd tussen spitse <haak-jes>.

De opdrachten tussen deze haakjes zorgen ervoor dat de browser de web-pagina 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 opge-treden zijn. Dat betekent dus dat de maagdelijk witte pagina van afbeelding 18.1 misschien redelijk wat HTML code verbergt. Wilt u het even controle-ren?

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”>

Les 18224

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 stan-daard bij HTML, heeft momenteel al standaard 4.01 bereikt.

<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. Daar-om 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 pa-gina 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)”>

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 gege-nereerd worden als u deze regel weglaat en gewoon begint met de tag <HTML>.


<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 paginaWe 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.

Les 18226

2. U krijgt eerst de paginagrootte te zien. Die wilt u in dit geval niet wij-zigen. 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 an-dere computer met een andere resolutie wel het geval zijn.

Resolutie De resolutie wordt weergegeven in pixels, oftewel punten die naast en onder elkaar worden weer-gegeven. 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 Afbeel-ding (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.


AFBEELDING 18.6 Hier hebben we een afbeelding uit les 13 als achter-grond 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 mis-schien 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.

Les 18228

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 on-zichtbaar.

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.


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 uit-gelegd 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.

Les 18230

Centreren U hoeft geen tekst te selecteren om deze te centreren. Het is voldoende om het invoegpunt in de re-gel te plaatsen om de hele regel (of alinea) te centreren.

AFBEELDING 18.12 De titel en subtitel.

AfbeeldingenTekst alleen is op een webpagina niet voldoende. U wilt natuurlijk ook af-beeldingen toevoegen.

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.

Afbeeldingen en auteursrecht Op zoek naar afbeel-dingen die u zonder problemen op uw webpagina kunt gebruiken? Zoek voor het beste resultaat op de term free webdesign.


AFBEELDING 18.13 Een afbeelding invoeren.

4. Hiermee bent u nog niet klaar: u moet namelijk nog wat extra infor-matie 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 opge-ven.

6. Klik op het tabblad Afbeelding.

URL Uniform Resource Locator, oftewel het webadres van een pagina of site.

Les 18232

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 pre-cies 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.


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.

ConclusieDit 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.

LES 18 HTML Editor: de eerste stappen · 3. Bij Als kunt u kiezen tussen Kleur (zie afbeelding...

Documents

Transcript of LES 18 HTML Editor: de eerste stappen · 3. Bij Als kunt u kiezen tussen Kleur (zie afbeelding...