Informaticasite van het Lauwers College te Buitenpost                 © R.J. van der Beek
 

  1.1 De basis

HTML is de afkorting van HyperText Markup Language.

Als je een internetpagina wilt maken dan moet je HTML gebruiken.

Een HTML-document bestaat voor een groot deel uit gewone tekst en verder nog een aantal speciale codes die tussen haken gezet moeten worden : HTML-tags.
 Deze HTML-tags zijn codes die de browser laten weten wat deze met de tekst moet doen.
Tags zijn altijd voorzien van een beginhaakje (<) en een eindhaakje (>).
Je moet er wel om denken dat er geen spatie tussen het beginhaakje en de eerste letter geplaatst mag worden.

Er zijn veel programma's waarmee je heel gemakkelijk een home-page kunt maken zonder dat je iets van HTML af hoeft te weten.
Je kunt bijv. een tekst in WORD intypen, en die tekst als HTML-document opslaan.
Dan worden al die codes er bij gezet zonder dat je er iets speciaals voor hoeft te doen.
Ook heb je een heel aantal programma's die speciaal voor het maken van HTML-pagina's bedoeld zijn, bijv. FRONTPAGE en DREAMWEAVER, COFFEECUP en HOTDOG.

Maar je kunt HTML het beste leren door Notepad (dat is hetzelfde als KLADBLOK) te gebruiken.
Op die manier krijg je echt inzicht in de codes en kun je ook home-pages van anderen wijzigen voor eigen gebruik.

Het eerste HTML-document
De opbouw van een HTML-document ziet er altijd als volgt uit:

<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>Een homepage maken valt best mee
Alles wat je hier intikt, dus tussen de body-begin en eindtag, is zichtbaar </body>
</html>

De HTML-pagina start altijd met de tag <html> en sluit met </html>.
Alle tekst die buiten deze tags staat, wordt niet zichtbaar.
Denk er goed om dat een code niet goed werkt als er een begin- of eindhaakje mist.

Behalve de tags <html></html> bezit een webdocument ook altijd de tags <head></head>, <title></title> en <body></body>.
Tussen de <head>-tags komt alle extra informatie te staan over het document en de titel, die tussen de tags <title> en </title> wordt gezet.
Die titel verschijnt in de titelbalk, als je het document met een browser bekijkt

Het 'zichtbare document' met al haar tekst, afbeeldingen enz. dus waar het om draait, wordt geplaatst tussen de tags <body> en </body>.


Oefening 1

  • Maak een HTML-document met een titel en tekst zoals hierboven.
    Doe dat als volgt :
    Start Kladblok (via Start, Programma's, Bureau-accessoires).
    Typ de tekst voor het html-document in (of selecteer de html-tekst hierboven, druk op Ctrl/C, ga naar kladblok, en druk dan op Ctrl/V).
    Sla die tekst dan op onder de naam TEST.HTM (vergeet HTM niet !)

    Sluit Kladblok dan af, start de Verkenner, en zoek het bestand TEST.HTM, dat je net gemaakt hebt, op.
    Dubbelklik dan op de naam van dat bestand, dan wordt het geopend met een browser, waarschijnlijk Internet Explorer of Firefox.
    Dan zie je het document in de browser verschijnen.

    Wil je nog iets aan de html-tekst veranderen, dan kan dat natuurlijk m.b.v. Kladblok.
    Maar je kunt in Internet Explorer ook klikken op Beeld, en dan op Bron.
    Dan zie je tekst in Kladblok verschijnen.
    Verander wat je wilt, sla het op, sluit Kladblok af, en klik op vernieuwen in Internet Explorer.

Oefening 2

  • Maak een tweede html-document.
    Zorg er nu voor dat de titel wordt: Mijn tweede homepage
    Na de body-tag tik je een verhaaltje in dat je leuk vindt.

    Je doet dat op dezelfde manier als boven: start Kladblok en typ de tekst voor het html-document in.
    Sla die tekst dan op onder de naam TEST2.HTM (vergeet HTM niet !) in dezelfde map als hierboven


    Sluit Kladblok dan of, en bekijk ook dat HTML-document met je browser door op de naam van het bestand te dubbelklikken.

    Succes er mee.

  1.2 De Opmaak

Met behulp van verschillende tags kun je variëren in grootte en stijl en kleur van het lettertype.

  1.3 De <H1...H6> tag voor koppen

Er bestaan zes koppen (headings). De grootste kop wordt aangegeven met H1 en de kleinste kop met H6.
Wil je een grote kop maken, dan gebruik je de tags <h1> en </h1>.

Als je <h1>Dit is een H1-kop. </h1> invoert dan ziet het er zo uit:

Dit is een H1-kop.

Als je <h3>Dit is een H3-kop. </h3> invoert dan ziet het er zo uit:

Dit is een H3-kop.

Als je <h6>Dit is een H6-kop. </h6> invoert dan ziet het er zo uit:
Dit is een H6-kop.
Je kunt er ook nog voor zorgen dat zo'n kop in het midden van het venster verschijnt.
Je moet dan het align-attribuut gebruiken (een attribuut is een toevoeging).
Als je <h1  align= "center"> Gecentreerd </h1> invoert dan ziet het er zo uit:

Gecentreerd

I.p.v. "center" kun je ook "left" of "right" of "justify" gebruiken.

Hetzelfde resultaat krijg je met de volgende code:
<center> <h1> Gecentreerd </h1> </center>

  1.4 De <HR> tag

Met de HR tag maak je horizontale lijnen. Deze lijnen hebben geen eindtag.
Je kunt kenmerken aan die horizontale lijn toevoegen, attributen noem je dat.
Zoals width="n" (pixel breedte) of width="...%" om een bepaald percentage van het scherm aan te geven.
Met size="n" kun je de dikte van de lijn bepalen.
Met noshade schakel je de schaduw van de lijn uit.
Met align="left" geef je aan dat de lijn aan de linkerkant van het venster staat. Ook kan align="right" en align="center" Voorbeelden:
<hr width="50">
<hr width="50%">
<hr size="20">
<hr size="20" noshade>
Deze codes kunnen ook worden gecombineerd: <hr width="50%" size="10" noshade align="right">

  1.5 De <br>-tag en de <p>-tag

Dit kun je vergelijken met de ENTER knop.
Deze tag heeft net zoals de <HR> tag geen sluittag.
De tag <br> is zeer belangrijk, hij zorgt er voor dat de volgende tekst op een nieuwe regel begint.
Als je geen <br>-tags gebruikt, dan zal alle tekst in het HTML document achter elkaar worden gezet.
Een aantal van BR-tags achter elkaar, levert witregels op.

De <p> tag
Een nieuwe alinea creëer je door de <p> tag te gebruiken.
Deze tag hoef je niet af te sluiten met de eindtag </p> , maar het mag wel.
Deze tag heeft bijna het zelfde gevolg als de <br>-tag, maar hij zorgt voor meer witruimte voordat de nieuwe alinea begint.
Je kunt ook het align-attribuut gebruiken bij de p-tag.
<p  align= "center"> heeft tot gevolg dat de alinea gecentreerd wordt: de tekst verschijnt in het midden van de alinea. Je moet dan wel de eindtag van de p-tag gebruiken om aan te geven waar het centreren stopt.
I.p.v. "center" kun je ook "left" of "right" of "justify" gebruiken.

  1.6 Vet, cursief en onderstreept

Als je wilt dat een stukje tekst vet wordt afgedrukt dan zet je het tussen de tags <b> en </b>
Als je het volgende invoert: Dit is <b> vetgedrukt </b> invoert, dan verschijnt er:
Dit is vetgedrukt

Als je wilt dat een stukje tekst cursief wordt afgedrukt dan zet je het tussen de tags <i> en </i>
Als je het volgende invoert: Dit is <i> cursief </i> invoert, dan verschijnt er:
Dit is cursief

Als je wilt dat een stukje tekst onderstreept wordt dan zet je het tussen de tags <u> en </u>
Als je het volgende invoert: Dit is <u> onderstreept </u> invoert, dan verschijnt er:
Dit is onderstreept

Je kunt er ook voor zorgen dat een stukje tekst vet, cursief en onderstreept wordt, dan zet je de drie tags <b> en <i> en <u> achter elkaar.
Als je het volgende invoert: Dit is <b> <i> <u> vet en cursief en onderstreept </u> </i> </b> invoert, dan verschijnt er:
Dit is vet en cursief en onderstreept

  1.7 Lettertype

Met de font-tag kun je het lettertype veranderen, maar ook de kleur en de grootte van de letters.
Het attribuut om de grootte mee aan te geven is size.
De waarden variëren van 1 tot en met 7, waarbij 1 de kleinste is en 7 de grootste.

Als je het volgende invoert:
<font size="1">size 1</font>
<font size="3">size 3</font>
<font size="7">size 7</font>

 dan ziet het er zo uit:
size 1
size 3
size 7
De font-tag kent verder het attribuut face.
Met face kun je het lettertype veranderen.
Dit lettertype moet wel aanwezig zijn op de computer van de gebruiker, anders werkt het niet.
Wil je bijvoorbeeld het lettertype "Comic Sans" gebruiken dan gebruik je de volgende code:

Als je het volgende invoert:
 <font face="Comic Sans MS">Dit is Comic Sans</font>
 dan ziet het er zo uit:
 Dit is Comic Sans

  1.8 Kleur

Als je de kleur van de tekens wilt veranderen dan gebruik je het attribuut: color.
Als je bijvoorbeeld een stuk tekst groen wilt hebben doe je dat als volgt:

<font color="green">Deze tekst is groen</font>
 en dat ziet er dan zo uit:
 Deze tekst is groen.

 Als je het volgende invoert:
 <font size="5" color=""#0000ff"" face="arial">En je kunt de attributen ook combineren!</font>
dan ziet het er zo uit:
 En je kunt de attributen ook combineren

Er is nog veel meer mogelijk met kleuren, ga daarvoor naar het gedeelte over kleuren.

Probeer straks maar eens even wat dingetjes uit met de font tag.

Oefening 3

Open m.b.v. Kladblok, of een andere rekstverwerker, het html-document TEST.HTM, dat je bij de vorige oefening hebt gemaakt.
Voeg dingen aan het HTML document toe, gebruik daarbij de <p>, <br>, <hr> en <h> tags.
Zorg er voor dat je document met kleurtjes en lettertypen wordt verfraaid.

Sla het bestand op, en bekijk het met een browser.

  1.9 Links maken

Je weet natuurlijk dat er, als je op een link klikt, een andere pagina verschijnt.

Om een link te kunnen maken, moet je wel iets van Uniform Resource Locators (URL) weten.
URL's zijn Internet-adressen die door de browser worden gebruikt om iets te kunnen vinden op het Internet.
Een URL is opgebouwd uit een protocol-code, een computeradres en de plaats en naam van een bestand.
De bekendste en meest voorkomende protocollen zijn http en ftp.

Bij 'ftp' en 'http' komen na de naam van het protocol een dubbele punt en twee 'slashes' (//) te staan.
Om een link te kunnen maken heb je verder de 'anchor tag' (<a>) nodig.

  1.10 Externe link

Een voorbeeld: je wilt een link maken op je pagina naar de site www.microsoft.com
Je typt de volgende HTML-code in:
<a href="http://www.microsoft.com"> naar de site van Microsoft </a>.
Het zinnetje naar de site van microsoft, dat tussen de tags staat wordt in de browser automatisch blauw en onderstreept,
en als je daar dan op klikt dan wordt de pagina getoond waarvan de URL op de stippeltjes bij href="......" staat.

Met de volgende HTML-code:
<a href="mailto:rjvdbeek@lc.nl"> email mij </a>.
worden de woorden email mij in de browser blauw en onderstreept, en als je daar dan op klikt dan wordt er automatisch een email-programma gestart, en het emailadres achter mailto is al ingevuld.

  1.11 Melding op de statusbalk

Als je met de muis over een hyperlink gaat dan verschijnt normaal op de statusbalk de URL van die link.
Als je dat niet wilt, of je wilt een andere melding dan kun je dat zo doen:
<a href="http://www.microsoft.com" onMouseOver="window.status='hier staat lekker niks'; return true;" onMouseOut="window.status=''; return true;"> Microsoft </a>.

Ga maar eens over de link hier onder (niet klikken), en kijk wat er op de statusbalk (onderaan) staat:
naar de site van Microsoft.

  1.12 Melding in een tekstbalk

Je kunt er ook voor zorgen dat, als je met de muis over een hyperlink gaat, er een tekstbalk verschijnt met een bepaalde tekst. Dan moet je het attribuut title gebruiken
Kijk maar naar het voorbeeld hier onder:
<a href="http://www.microsoft.com" title="Dit is een tekstbalk"> naar de site van Microsoft </a>.

Zet de muis maar eens op de link hier onder (niet klikken), en kijk wat er gebeurt:
naar de site van Microsoft.

  1.13 Interne links

We hebben al de link naar een andere webpagina behandeld.
Maar het is ook handig om een link binnen je eigen webpagina aan te brengen.

De benodigdheden voor het maken van een interne link

Om een link te maken binnen een pagina zijn er twee dingen nodig.
Ten eerste het zogenaamde anker en ten tweede een link.

Het anker kun je vergelijken met een plaatsnaambord. Dat is waar je moet zijn, de bestemming.
Je hebt daarvoor de tag <a> en het attribuut 'name' nodig. De code voor het maken van een anker ziet er dan als volgt uit:

<a name="...">.....</a>

 De link brengt je in één keer naar de plaats van bestemming, naar het anker. Voor de link maak je gebruik van de tag <a> en het attribuut 'href'. Een link ziet er zo uit:

<a href="#...">......</a>

 De link weet waar hij moet zijn, omdat hij dezelfde naam als het anker in zich heeft. De tekst die tussen <a href> en </a> staat, is 'klikbaar'.

Een voorbeeld...

Hieronder zie je een inhoudsopgave.

Inhoudsopgave
Les 1: Start cursus
Les 2: Tekst opmaken
Les 3: Links maken
Les 4: Afbeeldingen

Onder deze inhoudsopgave staat de inhoud van de lessen.

Les 1: Start cursus





En veertig regels verderop...

Les 2: Tekst opmaken





En veertig regels verderop...

Les 3: Links maken





En veertig regels verderop...

Les 4: Afbeeldingen


Een interne link aanbrengen

Om te voorkomen dat de lezer moet scrollen van de inhoudsopgave naar Les 2, breng je een interne link aan.
Voeg daarvoor als eerste een anker toe aan het begin van Les 2.
Je moet die plaats aangeven met een naam, bijvoorbeeld met "les2".
Zorg er dus voor dat er het volgende staat : <a name="les2">Les 2 Tekst opmaken</a>

 Nu kun je de link maken in de inhoudsopgave naar les 2. Je moet dezelfde tekst tussen de "...." zetten. Aangezien je in het anker tussen "....." 'les2' hebt ingevuld, vul je dat nu weer in. Het enige verschil is een #-teken ervoor.
<a href="#les2">Les 2 Tekst opmaken</a>

Oefening 4

Open m.b.v. Kladblok, of een andere rekstverwerker, het html-document TEST.HTM, dat je bij de vorige oefening hebt gemaakt.
Voeg dan in de broncode een link toe naar de tweede homepage "TEST2.HTM", die je in de tweede oefening gemaakt hebt.
(de naam van dat bestand is "TEST2.HTM" dus je krijgt o.a. href="TEST2.HTM", zorg er wel voor dat TEST.HTM en TEST2.HTM in de zelfde map staan)

Sla het bestand op, en bekijk het met een browser. En probeer of de link werkt.

Oefening 5

Maak in de tweede homepage (TEST2.HTM) een koppeling naar het eerste document (TEST.HTM)
Als je het goed doet dan kun je tussen die twee pagina's heen en weer surfen.
Maak ook een interne link.
En zorg er voor dat er een tekstbalk verschijnt als je met de muis op zo'n link gaat staan.

Sla het bestand op, en bekijk het met een browser. En probeer of de link werkt.

 1.14 Plaatjes

Als je een plaatje wilt opnemen in je homepage dan heb je de HTML-tag <img> (img staat voor image') nodig.
Deze tag combineer je met het attribuut 'src' (src staat voor source), en achter src moet je de naam van het bestand met het plaatje zetten
Om een plaatje in te voeren in een HTML-pagina heb je dus de volgende code nodig:

<img src="bestandsnaam">

Zorg dat het plaatje in dezelfde map staat als het HTML-document.
Anders wordt het plaatje niet weergegeven.

  1.15 Uitlijnen

Je kunt weer attributen toevoegen aan de tag <img>.
Er zijn attributen om te bepalen waar een afbeelding komt te staan.

  • align=".."
    Hiermee kan de plaats van het plaatje ten opzichte van de tekst worden bepaald. Gekozen kan worden uit:
    • align="top"
       Hierbij komt de eerste tekstregel (de bovenkant van de letter h) op dezelfde hoogte als de bovenkant van de afbeelding.
    • align="texttop"
       Hierbij komt de eerste tekstregel (de bovenkant van de letter m) op dezelfde hoogte als de bovenkant van de afbeelding.
    • align="middle"
       De tekstregel (de onderkant van de letter m) wordt uitgelijnd met het midden van de afbeelding.
    • align="bottom" of align="baseline"
       De onderkant van de tekst (van de letter m) komt op dezelfde hoogte als de onderkant van de afbeelding.
    • align="absbottom"
       De onderkant van de tekst (van de letter g) komt op dezelfde hoogte als de onderkant van de afbeelding.
    • align="right"
       De afbeelding wordt rechts uitgelijnd.
    • align="left"
      De afbeelding wordt links uitgelijnd.
    • align="center"
       De afbeelding wordt in het midden geplaatst.

  • width=".."
    Hiermee kan de breedte in pixels van een plaatje worden opgegeven.

  • height=".."
    Hiermee kan de hoogte in pixels van een plaatje worden opgegeven.

    Als je width en height gebruikt kan de browser bij het inladen van een pagina bepalen welke ruimte er moet worden gereserveerd voor de afbeeldingen. Hierdoor kan de pagina sneller worden geladen.

  • alt="alternatieve tekst"
    Hiermee kun je er voor zorgen dat er een bepaalde tekst in het kader verschijnt als het plaatje er om de een of andere reden niet in verschijnt.

  1.16 Witruimte creëren

Je kunt met behulp van attributen ook bepalen hoeveel witruimte er tussen de afbeelding en de tekst zit.
Met het attribuut HSPACE bepaal je hoeveel witruimte er zit tussen de tekst en de afbeelding aan de linker en/of rechter kant.
Met het attribuut VSPACE creëer je witruimte boven en onder het plaatje.

Als je de volgende HTML-code invoert:
<img src="world.gif" width="180" height="116" hspace="40" vspace="40" align="left">

dan ziet het er uit zoals je hier links ziet.
Bij het plaatje hieronder is geen HSPACE en VSPACE toegevoegd, zie je het verschil ?
Daar staat de tekst aan de rechterkant dichter bij het plaatje.
En de tekst onder het plaatje staat ook dichterbij.

<br clear=all>
Wereldbol Als de tekst die bij een afbeelding hoort kleiner is dan de hoogte van de afbeelding, dan kun je het best na de tekst de tag <br clear="all"> toevoegen.
Als je daarna met de tekst verder gaat, maar die hoort niet meer bij de afbeelding, dan komt die tekst ook niet naast de afbeelding. Dat is hier ook gebeurd, zodat de volgende regel onder de foto komt en niet er naast.
Deze tekst komt onder het plaatje doordat de tag <br clear=all> is toegevoegd.

  1.17 Een plaatje als achtergrond

Wil je een plaatje als achtergrond, dan moet je dat op de volgende manier in de <body>-tag opnemen:

<body background="world.gif">

Het plaatje wordt dan automatisch herhaald.
M.b.v. stylesheets kun je instellen hoe dat gaat.

 1.18 Verticale lijn

Een horizontale lijn kun je maken met <hr>
Er is geen speciale code voor een verticale lijn. Als je toch een verticale lijn in je homepage wilt hebben dan maak je gewoon een afbeelding van een verticale lijn.
De lijn kan heel kort zijn, want m.b.v. "height" kun je precies opgeven hoe lang de lijn moet zijn.
De code voor het lijntje links van deze alinea is:
<img src="vertlijn.jpg" width="6" height="60" align="left">

Oefening 6

Klik eerst met de rechter muisknop op het plaatje hierboven
Dan krijg je een menu, waar o.a. bijstaat : opslaan
Sla het plaatje dan op onder de naam WORLD.GIF in de map waarin je ook TEST1.HTM en TEST2.HTM hebt opgeslagen.

Open m.b.v. Kladblok, of een andere rekstverwerker, het html-document TEST.HTM, dat je bij de vorige oefening hebt gemaakt.
Voeg dan html-code toe zodat er een plaatje met een wereldbol verschijnt.
De naam van het plaatje is natuurlijk WORLD.GIF en het zit in dezelfde map als de rest.

Sla het bestand op, en bekijk het met een browser. Als het goed is zie je het plaatje verschijnen.