cursus 1: HTML voor beginners

Les 4


Aanhaling en definitie


Ik ga nu een paar opmaak-tags aan je voorstellen. Eerst de blockquote-tags (to quote = aanhalen). De blockquote-tags vergroten de linker en de rechter marge op de pagina.

Behalve den man, die de Sarphatistraat de mooiste plek van Europa vond heb ik nooit een wonderlijke kerel gekend dan den uitvreter.

Nescio
<body>
<blockquote>
Behalve den man, die de Sarphatistraat de mooiste plek van Europa vond heb ik nooit een wonderlijke kerel gekend dan den uitvreter.<br><br>

Nescio
</blockquote>
<body>

De defenition-list-tags, <dl> en </dl> (dl = defenition list = lijst met defenieties), vormen een ander paar opmaak-tags. Bij dit paar horen nog nog twee tags <dt> (dt = defenition title = het begrip dat gedefinieerd moet worden) en <dd> (dd = defenition data = defenitie van het begrip).

Duck, Donald
Hoofdpersoon in veel strips en films van van Walt Disney.
Zielknijper, Zebedeus
Bekende psychiater en psychoanalyticus uit de Tom Poes strips van Marten Toonder.
<body>
<dl>
<dt><b>Duck, Donald</b>
<dd>Hoofdpersoon in veel strips en films van van Walt Disney.
<dt><b>Zielknijper, Zebedeus</b>
<dd>Bekende psychiater en psychoanalyticus uit de Tom Poes strips van Marten Toonder.
</dl>
<body>


Handige lijsten


HTML beschikt ook over de mogelijkheid om lijsten te maken. Daarvoor hebben we de beschikking over de tags voor de geordende lijst, <ol> en </ol> (ol = ordered list = geordende lijst) en de tags voor de ongeordende lijst, <ul> en </ul> (ul = unordered list = ongeordende lijst). Bij beide lijsten hoort ook nog de list-tag <li>.
We maken eerst een geordende lijst.

Wat wil ik van Sinterklaas?
  1. Een rode Ferrari
  2. Een snelle speedboat
  3. Een huis in Palm Beach
  4. Een reis om de wereld
  5. Pamela Anderson
  6. ...
<body>
Wat wil ik van Sinterklaas?
<ol>
<li>Een rode Ferrari
<li>Een snelle speedboat
<li>Een huis in Palm Beach
<li>Een reis om de wereld
<li>Pamela Anderson
<li>...
</ol>
<body>

Bij de geordende lijst kun je er ook voor kiezen om met letters te werken. Je gebruikt dan de optie type="A" (hoofdletters), de optie type="a" (kleine letters) of de optie type="I" (Romeinse cijfers). Bijvoorbeeld:

Wat wil ik van Sinterklaas?
  1. Een rode Ferrari
  2. Een snelle speedboat
  3. Een huis in Palm Beach
  4. Een reis om de wereld
  5. Pamela Anderson
  6. ...
<body>
Wat wil ik van Sinterklaas?
<ol type="I">
<li>Een rode Ferrari
<li>Een snelle speedboat
<li>Een huis in Palm Beach
<li>Een reis om de wereld
<li>Pamela Anderson
<li>...
</ol>
<body>

Het enige wat moet gebeuren om van een geordende lijst een ongeordende lijst te maken is het vervangen van de tags <ol> en </ol> door de tags <ul> en </ul>.

Wat wil ik van Sinterklaas?
  • Een rode Ferrari
  • Een snelle speedboat
  • Een huis in Palm Beach
  • Een reis om de wereld
  • Pamela Anderson
  • ...
<body>
Wat wil ik van Sinterklaas?
<ul>
<li>Een rode Ferrari
<li>Een snelle speedboat
<li>Een huis in Palm Beach
<li>Een reis om de wereld
<li>Pamela Anderson
<li>...
</ul>
<body>

Bij de ongeordende lijst kun je de stippen vervangen door vierkantjes met behulp van de optie type="square" of door cirkeltjes met de optie type="circle". Bijvoorbeeld:

Wat wil ik van Sinterklaas?
  • Een rode Ferrari
  • Een snelle speedboat
  • Een huis in Palm Beach
  • Een reis om de wereld
  • Pamela Anderson
  • ...
<body>
Wat wil ik van Sinterklaas?
<ul type="circle">
<li>Een rode Ferrari
<li>Een snelle speedboat
<li>Een huis in Palm Beach
<li>Een reis om de wereld
<li>Pamela Anderson
<li>...
</ul>
<body>


Horizontale lijnen


Een ander handig aardigheidje is de horizontale lijn. Je gebruikt daarvoor de tag <hr> (hr = horizontal rule = horizontale lijn).
De tag <hr> kent vier opties:

  1. width Hiermee kan kan ingesteld worden hoe breed deze lijn mag worden. De breedte kan ingesteld worden in pixels en in procenten. Als de optie weggelaten wordt, dan komt de lijn over de volle breedte.
  2. align Hiermee kan de lijn links of rechts worden uitgelijnd of worden gecentreerd.
  3. size Hiermee wordt de dikte van de lijn ingesteld in pixels.
  4. noshade Als deze optie wordt toegevoegd wordt de lijn massief.

    Het verschil tussen pixels en punten bij de width-optie:







    <body>
    <hr width="20%">
    <hr width="60%">
    <hr width="100"%>
    <hr width="20">
    <hr width="60">
    <hr width="100">
    <body>

    Hierbij betekent width="20%" dat de lijn 20% van de breedte van het beeldscherm in beslag neemt en width="20" dat de lijn 20 pixels (beeldpuntjes) breed is.
    Je zie dat de standaardoptie voor align centreren is. We gebruiken nu ook de andere twee mogelijkheden voor de optie align:





    <body>
    <hr width="60%" align="left">
    <hr width="60%">
    <hr width="60%" align="center">
    <hr width="60%" align="right">
    <body>

    Je ziet dat geen optie align of align="center" hetzelfde resultaat oplevert.
    We kunnen ook de optie size (de dikte van de lijn) aanpassen. De standaardwaarde voor deze optie is 1. Ook wordt bekeken wat de optie noshade oplevert.







    <body>
    <hr width="60%" size=2>
    <hr width="60%" size=4>
    <hr width="60%" size=8>
    <hr width="60%" size=2 noshade>
    <hr width="60%" size=4 noshade>
    <hr width="60%" size=8 noshade>
    <body>



    Koppen op pagina's


    We beginnen, zoals het hoort, bij het begin, namelijk met het zetten van een koptekst boven je pagina. Daarvoor gebruiken we de heading-tags <h1> tot en met <h6>.
    Daarbij is 1 het grootst en 6, hoe kan het ook anders, het kleinst.

    Dit is nou een koptekst.

    En dit is de tekst die de paragraaf verder moet vullen!
    Wat hier verder stast is dus inhoudelijk totaal niet van belang.
    Maar ja, een paragraaf zonder tekst is ook weer zo vreemd.
    <body>
    <h3>Dit is nou een koptekst.</h3>
    En dit is de tekst die de paragraaf verder moet vullen!<br>
    Wat hier verder stast is dus inhoudelijk totaal niet van belang.<br>
    Maar ja, een paragraaf zonder tekst is ook weer zo vreemd.
    </body>

    Je ziet dat de koptekst dus automatisch vet wordt weergegeven. Ook komt na de eind tag automatisch een <BR>. Het bespaart je dus afzonderlijke tags voor de grootte, het vet weergeven en een nieuwe regel. Da's maar goed ook anders zou deze tag volkomen overbodig zijn.
    De heading-tags kennen de optie align. Standaard is align = "left" (en die kun je dus weglaten). Verder kun je gebruiken align="center" en align="right".
    Hieronder zie je een voorbeeld van de verschillende koppen met de mogelijke opties.

    Dit is een schreeuwende kop!

    Dit is een grote kop!

    Dit is een normale kop!

    Dit is een bescheiden kop!

    Dit is een kleine kop!
    Is dit nog wel een kop?
    <body>
    <h1>Dit is een schreeuwende kop!</h1>
    <h2 align="center">Dit is een grote kop!</h2>
    <h3 align="right">Dit is een normale kop!</h3>
    <h4>Dit is een bescheiden kop!</h4>
    <h5 align="center">Dit is een kleine kop!</h5>
    <h6 align="right">Is dit nog wel een kop?</h6>
    </body>



    Doorstrepen


    Als je een typefout maakt kun je natuurlijk de backspace-toets gebruiken en dan overnieuw typen maar je kunt ook aan de wereld laten zien dat je slecht typt en je fouten gewoon doorstrepen. Daarvoor gebruiken we de de strike-out-tag <S>.

    Mijn spelling laat te wesnen wensen over.
    <body>
    Mijn spelling laat te <S>wesnen</S> wensen over.
    </body>


    Knipperen en schuiven

    Ik heb het al eens gehad over het verschil tussen Internet Explorer en Netscape. Hier volgen twee tags, waarbij de eerste alleen werkt voor mensen die Netscape gebruiken en de tweede werkt alleen met Internet Explorer.
    Je kunt je lezers (met Netscape) op hun zenuwen werken door de <blink> tag te gebruiken. Daarmee kun je tekst laten knipperen. Persoonlijk zie ik er het nut niet zo van in maar het bestaat en daarom vertel ik het. Deze funktie werkt overigens alleen in Netscape. Mensen die met Internet Explorer werken zien gewoon een normale tekst.

    Deze tekst knippert
    <blink>Deze tekst knippert</blink>

    Voor de Internet Explorer gebruikers Is er de mogelijkheid om een tekst als een soort lichtkrant over het scherm te laten schuiven.

    Deze tekst schuift als een soort lichtkrant door het beeld!
    <marquee>Deze tekst schuift als een soort lichtkrant door het beeld!</marquee>

    Wil je er zeker van zijn dat je tekst in beide browsers de aandacht krijgt, dan zet je er gewoon beide tags omheen. Knippert ie niet, dan schuift ie!


    subschrift en superschrift


    De volgende tags kun je gebruiken om tekst in superscript of in subscript te zetten. In de volgende code zie je een voorbeeld van het gebruik van subscript.

    2C8H18+ 25O2 --> 16CO2 + 18H2O

    <body>
    2C<sub>8</sub>H<sub>18</sub>+ 25O<sub>2</sub> -->
    16CO<sub>2</sub> + 18H<sub>2</sub>O
    </body>

    Dit is zo'n beetje de duurste chemische reaktie uit het dagelijks leven, nl. de verbranding van benzine.
    Het voorbeeld voor superscript hou ik iets korter.

    E=mc2
    <body>
    E=mc<sup>2</sup>
    </body>

    ... de beroemde formule van Albert Einstein.


    Relatieve fontgrootte en basisfont


    We hebben het gehad over de fontgrootte, die je in kunt stellen door de optie size="x" van de font-tag te gebruiken. Hierbij kun je voor x kiezen uit de cijfers 1 tot en met 7.
    Als je voor je hele document een bepaald soort lettertype, letterkleur of lettergrootte wilt gebruiken, dan kun je gebruik maken van de tag <basefont>. Om bijvoorbeeld de basisfontgrootte je hele document op 5 in te stellen, zet je direct na de body-tag de tag <basefont size="5">.
    Wil je in je hele document dat het lettertype geel wordt, dan voeg je aan de basefonttag de optie color toe: <basefont size="5" color="yellow">.

    Als je een basefont hebt ingesteld dan kun je met <font size="+x"> het font x stappen groter maken dan de basisfontgrootte.
    Met <font size="-y"> maak je het lettertype y stappen kleiner.


    Plaatjes om op te klikken


    Een funktie waar je heel leuke dingen mee kunt doen is de imagemap. Een imagemap is een plaatje waarop de verschillende vlakken heb gedefinieerd die allemaal een link naar een ander document zijn. Het plaatje dat we hiervoor gebruiken zie je hiernaast. Sla het op als map.gif.
    We gaan stap voor stap een imagemap aanmaken.
    Om te beginnen definieren we een map:

    <map>
    </map>

    Vervolgens geven we de map een naam:

    <map name="keuze">
    </map>

    Nu gaan we de vlakken definieren die we kunnen aanklikken. Voor de locatie van de vlakken gebruiken we coördinaten met als eenheid de welbekende pixel. Voor de plaatsen van diverse coördinaten kijken we even naar de afbeelding hiernaast.
    Een korte uitleg is misschien wel op z'n plaats. Het plaatje is 500 pixels breed en 200 pixels hoog. Anders dan bij wiskunde staat de oorsprong (0,0) linksboven. De rechteronderhoek heeft dus als coördinaten (500,200).
    Je kunt hier dus makkelijk uithalen welke coördinaten je de vier vlakken moet geven. Je hoeft alleen de coördinaten van de linkerbovenhoek en van de rechteronderhoek te geven. Die twee punten zijn genoeg om een rechthoek te tekenen.
    Voor het definieren van polygonen geef je de coördinaten van alle punten op en voor circels geef je de coördinaten van het middelpunt en de straal in pixels op. We houden het hier even bij rechthoeken, omdat je die het meest zult gebruiken.

    We zullen bovenstaand verhaal eens omzetten in htmll code. We doen het stap voor stap....
    Eerst definieren we een vlak.

    <map name="keuze">
    <area>
    </map>
    Geef als optie op welke vorm je het vlak wilt geven...

    <map name="keuze">
    <area shape="rect">
    </map>

    'rect' = rectangle = rechthoek
    Voor een cirkel gebruik je de optie circle en voor de polygoon (veelhoek) gebruik je poly.
    De volgende code bevat de coördinaten van de rechthoek linksboven.

    <map name="keuze">
    <area shape="rect" coords="0,0,250,100">
    </map>

    Je hebt nu dus twee punten opgegeven, te weten (0,0) en (250,100). Je kunt je coördinaten gewoon achter elkaar typen. De browser weet zelf dan wel dat het achereenvolgens om de x- en de y-coördinaten van de linkerbovenhoek en de x- en de y-coördinaten van de rechteronderhoek gaat.
    De laatste optie die we moeten specificeren is het document waar het vlak naar toe moet verwijzen, de link dus.

    <map name="keuze">
    <area shape="rect" coords="0,0,250,100" href="les01.html">
    </map>

    Nu kun je op dezelfde manier de overige drie vlakken definieren...

    <map name="keuze">
    <area shape="rect" coords="0,0,250,100" href="les01.html">
    <area shape="rect" coords="250,0,500,100" href="les02.html">
    <area shape="rect" coords="0,100,250,200" href="les03.html">
    <area shape="rect" coords="250,100,500,200" href="les04.html">
    </map>

    We hebben nu een image en we hebben een map maar dat betekent nog niet dat je een imagemap hebt. We zijn dus duidelijk nog niet klaar met ons verhaal.We moeten nog even opgeven dat het plaatje map.gif de map keuze moet gebruiken die we net gemaakt hebben.

    <img src="map.gif" usemap="#keuze">

    De volledige code voor de imagemap is dus:

    <map name="keuze">
    <area shape="rect" coords="0,0,250,100" href="les01.html">
    <area shape="rect" coords="250,0,500,100" href="les02.html">
    <area shape="rect" coords="0,100,250,200" href="les03.html">
    <area shape="rect" coords="250,100,500,200" href="les04.html">
    </map>
    <img src="map.gif" usemap="#keuze">

    Als je wilt kun je voor de volledigheid nog even het blauwe kader weghalen en je imagemap centeren...

    <map name="keuze">
    <area shape="rect" coords="0,0,250,100" href="les01.html">
    <area shape="rect" coords="250,0,500,100" href="les02.html">
    <area shape="rect" coords="0,100,250,200" href="les03.html">
    <area shape="rect" coords="250,100,500,200" href="les04.html">
    </map>
    <center><img src="map.gif" usemap="#keuze" border="0"></center>

    Dat was het, je hebt nu een imagemap gemaakt.
    Als je je lezers vooraf duidelijk wilt maken dat het plaatje dat er aankomt een imagemap is kun je in de <img>-tag de optie alt="xxxxxxx" gebruiken.

    <img src="map.gif" usemap="#keuze" border="0" alt="Imagemap"></center>

    Je kunt deze optie trouwens altijd gebruiken om commentaar bij je plaatjes te zetten. Als de lezer dan met zijn muis over het plaatje gaat, kan hij dat commentaar lezen. Hij ziet het maar een paar seconden, dus citeer niet het hele boek als je alleen de omslag afbeeldt.
    Als je met de muis over een imagemap met commentaar gaat zie je het commentaar niet als je met de muis op een link staat. In het voorbeeld dat we net gemaakt hebben, hebben we het hele plaatje klikbaar gemaakt. Je zult dus alleen commmentaar kunnen lezen als het plaatje nog niet geladen is.


    Commentaar


    De laatste tag die we gaan bespreken geeft de mogelijkheid om commentaar in je pagina op te nemen. Hiermee kun je opmerkingen in je tekst plaatsen die niet op het scherm van de browser verschijnen.

    Een opmerking kan overal in het document geplaatst worden en de browser negeert alles wat tussen de haken staat. Je kunt verborgen boodschappen in je document zetten, geheugensteuntjes aan jezelf, of boodschappen aan degene die de broncode van je homepage bekijkt.
    <body>
    <!--Dit is een opmerking-->
    Een opmerking kan overal in het document geplaatst worden
    en de browser negeert alles wat tussen de haken staat.
    Je kunt verborgen boodschappen in je document zetten,
    <!--De groeten aan moeder!--> geheugensteuntjes aan jezelf,
    <!--Op tijd naar bed--> of boodschappen aan degene die de
    broncode van je homepage bekijkt. <!--Kopieer iets van mij
    en je kunt een kunstgebit bestellen!-->

    <body>

    Om het nog even helemaal duidelijk te maken, de opmerking begint met <!-- en eindigt met -->
    Je kunt zelfs andere HTML-tags tussen de haken zetten en ze worden genegeerd. De browser blijft alles negeren tot hij een --> tegenkomt.


    Nog even iets over editors


    Ik heb in het begin mijn mening over HTML-editors gegeven. Volgens mij zijn de beste editors niet die grote flitsend uitziende editors (je weet wel, programma's die beloven dat je een homepage kunt maken zonder dat je ook maar iets van HTML af hoeft te weten). Het probleem is dat homepages die gemaakt zijn met zo'n programma er ook uit zien alsof de maker niets van HTML afweet.
    Meer ervaren homepage makers gebruiken een op tekst gebaseerde editor. Welke editor je wilt gebruiken, is een kwestie van persoonlijke smaak. Bij het bewerken van deze cursus heb ik gebruik gemaakt van EditPlus. Het voordeel van zo'n editor is dat de tags in een andere kleur worden weergegeven, dat je tags met een druk op de knop in kunt voeren, enzovoort.
    Er zijn een aantal goede freeware editors (freeware betekent gratis, helemaal voor niks!). Een site waar je deze zeker kunt vinden is www.tucows.com.
    Zo'n editor doet het werk niet voor je. Je moet nog steeds iets van HTML afweten. De editor maakt het werk wel makkelijker.


    Het uploaden van je website


    Als je je homepage klaar hebt moet je al je bestanden naar een webserver uploaden. Een server is een computer die de documenten aanbiedt aan wie ze maar zien wil. Vraag aan je eigen provider hoe het uploaden in z'n werk gaat. Het enige wat ik je daarover kan vertellen is dat je een FTP-programma nodig hebt om je bestanden te kopiëren van je eigen PC naar de computer van je provider. Zo'n FTP-programma is ook te vinden op www.tucows.com.


    Schermresoluties


    We zijn nu al een heel eind op weg om een goed uitziende homepage te maken. We hebben tekst en fonts gemanipuleerd, afbeeldingen ingevoegd en hyperlinks gemaakt. Wat de basisvaardigheden betreft is er eigenlijk niet veel meer te vertellen.
    Laten we beginnen met even stil te staan bij schermresoluties. Ik gebruik, zoals de meeste mensen, een schermresolutie van 1024x768 pixels. Sommige mensen gebruiken 800x600 en anderen 1280x1024. Er zullen ook nog wel andere resoluties gebruikt worden. Wat heeft dit met ons onderwerp te maken? Het heeft alles te maken met hoe je homepage eruit zal zien op de verschillende beeldschermen. Hieronder staan en paar screen shots van een willekeurige homepage bij verschillende resoluties.
    Als je erover denkt om een webpagina te gaan publiceren, is het geen slecht idee om je documenten bij verschillende resoluties te bekijken. Je zorgvuldig ontworpen design kan volledig teniet gedaan worden bij andere resoluties.


    Plaatjes: typen en kleuren


    Op het Internet is het van belang dat je het goede afbeeldingstype kiest voor elk plaatje dat je laat zien op een pagina. Hieronder zijn de twee meest voorkomende typen besproken met hun voor en nadelen en waar je ze het best voor kan gebruiken:
     

    Type

    Kenmerken

    .GIF het Graphics Interchange Format is een compressie-standaard voor afbeeldingen die onder andere gebaseerd is op grote vlakken met dezelfde kleur en maximaal 256 kleuren. Dit type is dus zeer geschikt voor afbeeldingen met grote vlakken en weinig kleuren, zoals logo's.
    .JPEG de Joint Photographic Experts Group heeft een compressie-standaard ontwikkeld voor foto's. Dit type is dus uitstekend te gebruiken voor afbeeldingen zonder regelmatige vlakken en met veel kleuren (standaard 16,7 miljoen). In tegenstelling tot het GIF-type is dit een compressiemethode waarbij informatie verloren gaat. Bij foto's is dit nauwelijks te zien, bij afbeeldingen met vlakken is dit echter vooral bij de randen juist zeer goed te zien, zeker bij een hoge compressie (die compressie-verhouding is in te stellen).

    Tip:

    Gebruik bij het ontwerpen van grafische afbeeldingen alleen kleuren die als r-, g- en b-waarde één van de volgende waarden hebben: hexadecimaal: 00, 33, 66, 99, CC of FF; dat is decimaal: 0, 51, 102, 153, 204 of 255. Deze kleuren worden namelijk 'solide' weergegeven op een 256-kleuren scherm. De technische uitleg hiervoor staat hieronder.

    Een kleur is opgebouwd uit een hoeveelheid rood, geel (of groen) en blauw. Een kleur kan daarom beschreven worden met een rgb-waarde. Deze r-, g- en b-waarde kunnen waarden hebben van 0 tot en met 255 (dus 256 mogelijkheden). Hiermee kan je dus 16,7 miljoen (256 x 256 x 256 = 16.777.216) kleuren maken.
    Als je een 256-kleuren scherm hebt, dan neemt de computer de dichtsbijzijnde kleur en zet er een paar puntjes van een andere kleur doorheen zodat de kleur op het scherm lijkt op de oorspronkelijke kleur. Dit proces, dat we dithering noemen, ziet er echter niet zo mooi uit.
    Als Windows ingesteld staat op 256 kleuren, dan neemt Windows daar een paar kleuren van in beslag om de windows-schermpjes in te kleuren waardoor er nog maar 216 kleuren vrij zijn. Dit zijn dus de kleuren die solide (dat wil zeggen, zonder dithering) weergegeven worden. Dit zijn de kleuren die met behulp van bovengenoemde r-, g- en b-waarden zijn opgebouwd.
    Voor elke r-, g- en b-waarde heb je dus zes verschillende mogelijkheden. Op deze manier kan je dus 6 x 6 x 6 = 216 verschillende kleuren maken!


    En nu verder?


    Na deze cursus 'HTML voor beginners' gaan we verder met de cursus 'toveren met TABELLEN'.
    Verder wil ik je wijzen op het tag-overzicht. Dit is een overzicht van alle tags die je in deze cursussen tegenkomt met een link naar de pagina waarin er iets over deze tags verteld wordt.


    einde les 4
    naar toveren met TABELLEN - les 1
    naar het tag-overzicht