Home » leer een html site maken

leer een html site maken

lessen volgen van 1 tot 9  sla wel alles op met aan het eind .html

 les 1

Een Basis HTML Bestand Maken

Hier leer je je eerste stappen bij het maken van je website. Als je een beginner bent op het gebied van HTML dan kun je het beste hier beginnen.

Een standaard HTML bestand is vrij simpel te maken. Het enige wat je nodig hebt is een tekst editor zoals bijvoorbeeld "kladblok" dat standaard bij Windows zit. Het is echter aan te raden om een HTML editor te gebruiken. Dit werkt makkelijker en sneller. Een lijstje met goede HTML editors vind je hier.

Nog een opmerking: HTML behandelt hoofdletters en kleine letters hetzelfde. Het maakt dus niet uit of je <TITLE> of <title> typt.

Zoals al gezegd heten de commando's tussen < en > tags.
Het volgende voorbeeld bevat het basismodel van ieder HTML bestand.

<HTML>
<HEAD>
<TITLE>Hier vul je de titel van je pagina in.</TITLE>
</HEAD>
<BODY>
Hier komt de inhoud van je pagina.
</BODY>
</HTML>

Klik Hier om dit Voorbeelddocument te bekijken!

Ok, dit is dus een standaard HTML document. Iedere webpagina bevat dus minimaal het bovenstaande.
Maar wat gebeurt er nu eigenlijk? Even een uitleg van de verschillende tags die hier gebruikt worden.

<HTML>

Deze tag wordt gebruikt om het begin van een HTML document aan te geven. Als je een HTML bestand maakt, begin je dus altijd met <HTML>.

<HEAD>

De <HEAD> tag wordt gebruikt om belangrijke informatie over de pagina in op te nemen. Deze informatie is (vrijwel altijd) onzichtbaar voor de bezoeker van je pagina. Je vindt hier vaak de titel van de pagina (zie hieronder) en ook meta-tags (waarover later meer).

<TITLE> en </TITLE>

De <TITLE> tag is de begintag van de titel van je pagina.
Na deze begintag type je dus de gewenste titel voor je pagina. Deze titel ziet de bezoeker linksboven in zijn browserscherm.
Vervolgens sluit je de tag met </TITLE>.

Kijk maar eens naar het voorbeelddocument hierboven. Je ziet dat tussen de <TITLE> en </TITLE> tags het volgende staat: "Hier vul je de titel van je pagina in."
Dit zou dus moeten verschijnen als je het voorbeelddocument hierboven opent. Controleer dit maar eens.
Als het goed is, zie je de titel ("Hier vul je de titel van je pagina in.") linksboven in het nieuwe browserscherm verschijnen.
Verder staat er nog: "Hier komt de inhoud van je pagina." Maar dat komt hieronder bij de bespreking van de BODY.

</HEAD>

Dit is de eindtag van de HEAD. Onthoud dat practisch alle elementen bestaan uit een begintag en een eindtag. De eindtag ziet er hetzelfde uit als de begintag, maar het heeft alleen een / erbij.
Vergeet niet begin- en eindtag op te nemen, anders heeft dit (meestal) grote gevolgen voor het resultaat op het scherm.

<BODY> en </BODY>

De <BODY> en </BODY> tags zijn veruit de belangrijkste tags in ieder HTML document. De werkelijke inhoud van je pagina komt tussen deze tags te staan. Daarom heet het ook "body", ofwel "lichaam". De <BODY> tag komt tussen de <HTML> en </HTML> tags en na de </HEAD> tag.

Ook vind je in het element BODY belangrijke informatie in haar attributen over bijvoorbeeld de achtergrondkleur en de tekst.

Nu alvast een zestal belangrijke attributen die in de BODY tag horen:

background
Hiermee kun je een plaatje gebruiken als achtergrond van je pagina.
bgcolor
Belangrijk attribuut, om de achtergrondkleur van je pagina te wijzigen.
text.
Met dit attribuut kun je de standaard tekstkleur op je pagina instellen.
link
Hiermee kun je de kleur van de links op je pagina instellen.
alink
Bepaalt de kleur van de actieve links. De links zijn actief als je er op klikt.
vlink
Attribuut waarmee je de kleur van de geklikte links aangeeft. Als een bezoeker terugkeert op je pagina, dan zijn de links waarop hij al geklikt heeft in deze kleur weergegeven.

Meer over kleuren en kleurwaarden kun je hier lezen.

Even een voorbeeld van een "BODY" tag met mogelijke attributen en waarden:

<BODY bgcolor="yellow" text="red" link="pink" alink="purple" vlink="brown">

Hiermee krijg je een pagina met een gele achtergrond, rode tekst, roze links, paarse actieve links en bruine bezochte links.

Nog even voor het begrip van de termen: het element in bovenstaande tag is: BODY, de attributen hiervan zijn: bgcolor, text, link, alink en vlink. De waarden van de verschillende attributen zijn: yellow, red, pink, purple en brown.

Natuurlijk hoef je deze attributen niet te gebruiken. Doe je dit niet, dan gebruikt de browser de standaard ingestelde waarden. Meestal betekent dit een witte achtergrond, blauwe links, enz.
Zoals je ziet, zet je de waarden (yellow,red,etc.) van de attributen tussen aanhalingstekens.

</HTML>

Deze eindtag markeert het einde van een HTML document. Dit is dus de laatste tag die je gebruikt bij het maken van je pagina.

Einde Les Een

Ok, dit is genoeg voor de eerste les. Nu ben je in staat om een standaard HTML bestand te maken en kun je werken met de attributen van de BODY tag, waarmee je o.a. de achtergrondkleur en de linkkleur van je pagina's kunt veranderen.
Nu kun je les twee bekijken, waar de verschillende tekst-tags aan de orde komen.

 

Les 2

Tekst Schrijven En Tekstopmaak

Hier leer je de verschillende tekst-tags kennen en hun effecten op je pagina. Met deze tags kun je de tekstopmaak op je pagina aanpassen.

Schrijven

Zoals je in les 1 hebt gezien, bevat dat wat in de BODY staat de daadwerkelijke inhoud van je pagina.
Dit betekent dat alle tekst die je tussen de <BODY> en </BODY> tags zet, op het scherm verschijnt als je de pagina in je browser bekijkt.
Er zijn verschillende tags die je helpen de tekst te structureren en op te maken. Zo krijg je een overzichtelijke en mooie pagina.
Nu dus een uitleg van de verschillende tekst-tags.

Headings

HTML heeft zes verschillende headings (koppen), genummerd van 1 tot 6, waarbij 1 de grootste is.
Een voorbeeld van een heading tag: begintag: <H1> eindtag: </H1>. Dit zijn de begin- en eindtag van H1. H3 is ongeveer de normale tekstgrootte.

Je gebruikt headings als koptekst. Kijk maar eens op deze pagina. Hier vind je alle headings onder elkaar, van <H1> tot <H6>, en zie je het effect dat ze hebben op de tekst.
Je ziet dat de headings de tekst ook wat vetter gedrukt weergeven.

Paragrafen

Lege ruimtes in je HTML code, zoals spaties, enters en inspring-ruimte, worden altijd weergegeven als een enkele spatie als je de HTML pagina in de browser bekijkt. Dit is handig, omdat je niet meer hoeft te letten op de lengte van je zinnen. De browser zet de woorden namelijk automatisch op een nieuwe regel als hij een regel heeft volgeschreven.

Toch zal je soms structuur in je tekst willen aanbrengen, door middel van paragrafen bijvoorbeeld. Dit doe je met de <P> tag. Deze paragraaf tag begint een nieuwe regel en doet dit na een lege regel erboven vrij te hebben gehouden.
De <P> tag heeft wel een eindtag, </P>, maar deze hoef je niet te gebruiken. De browser begrijpt namelijk zelf bij het zien van een volgende <P> tag dat de eerste paragraaf is afgelopen en dat nu de tweede paragraaf begint.
Ik zou uit goede gewoonte toch maar gewoon de eindtag </P> gebruiken. Tussen de begin- en eindtag komt dan de inhoud van je paragraaf.

De <P> tag heeft ook een attribuut, namelijk, align.
Met align kun je aangeven of je de tekst in de paragraaf left (links), center (in het midden), of right (rechts) wilt uitlijnen.
Standaard is align ingesteld op left. Als je dus geen align attribuut toevoegt, wordt de tekst links uitgelijnd.
Hieronder zie je wat de code wordt voor een in het midden uitgelijnde paragraaf (center) en voor een rechts uitgelijnde paragraaf (right).

<P align="center">Zo schrijf je de tag als je de paragraaf in het midden wilt uitlijnen</P>

<P align="right">Zo schrijf je de tag als je de paragraaf rechts wilt uitlijnen</P>

Center

Je kunt naast paragrafen ook andere tekst en andere elementen in het midden van de pagina laten uitlijnen. Dit doe je dan met de tag <CENTER>.
Je sluit de tag met </CENTER>.

Break

Ik zei eerder al dat enters in HTML niet gelden als het einde van een regel. Als je het einde van een regel wilt markeren, moet je deze tag gebruiken: <BR>. Deze tag zorgt ervoor dat de tekst die volgt, op de volgende regel geplaatst wordt. Er is geen sluitingstag.

Horizontal Rule

Een andere handige tag om je pagina in secties op te delen is de <HR> tag. Deze tag zorgt ervoor dat een horizontale lijn op het scherm verschijnt, zoals hieronder.


Ook deze tag heeft geen eindtag. Wel kun je de dikte en lengte van de lijn aanpassen via de attributen size en width. Een voorbeeldje:

Met:

<HR size="3" width="50%">

Krijg je de volgende lijn:


Experimenteer maar wat zodat je de goede maat kunt vinden voor je pagina.

Bold, Italic, Underline, Typewriter Text

Nu nog wat over een aantal speciale tekststijlen.

Met de <B> tag krijg je vetgedrukte tekst.
Zo ziet het eruit.

Met de <I> tag krijg je schuingedrukte tekst.
Dat ziet er zo uit.

Met de <U> tag krijg je onderstreepte tekst.
Dit is onderstreept.

En met de <TT> krijg je typemachine tekst.
Dit is typemachine tekst.

Al deze tags hebben eindtags dus: </B>, </I>, </U> en </TT>.

 

Les 3

Werken Met Fonts

Met de FONT tag kun je de lettergrootte en het lettertype van een bepaald stuk tekst aanpassen. De FONT tag is vrij makkelijk in gebruik.

Lettergrootte aanpassen

Zoals je al gezien hebt, kun je de lettergrootte aanpassen met Headings. Deze zijn echter vooral bedoeld als koptekst.

Als je de lettergrootte van een ander stuk tekst op je pagina wilt aanpassen doe je dit met de FONT tag.
Je voegt hier dan het attribuut size aan toe en een waarde met een getal van 1 tot 7, waarbij 1 de kleinste letter oplevert en 7 de grootste.
De waarde 3 komt overeen met de basislettergrootte. De eindtag is </FONT>.

Een voorbeeld tag:

<FONT size="6">Zo krijg je lettergrootte 6</FONT>

RESULTAAT:

Zo krijg je lettergrootte 6

De bovenstaande waarden zijn absolute waarden. Je kunt ook met relatieve waarden werken. Dit doe je door met de + en - tekens te werken. +3 is dan de grootste letter en -3 maakt de kleinste letter.

De waarden die je dan opgeeft, geven de wijziging aan t.o.v. de basislettergrootte op je pagina. De relatieve waarden plaats je tussen aanhalingstekens.

Een voorbeeld van het aanpassen van de tekstgrootte d.m.v. een relatieve waarde:

<FONT size="+2">Zo wordt de tekst met twee verhoogd t.o.v. de basislettergrootte</FONT>

RESULTAAT:

Zo wordt de tekst met twee verhoogd t.o.v. de basislettergrootte

 

Lettertype aanpassen

Net zoals je de lettergrootte van ieder stuk tekst op je pagina kunt aanpassen, kun je ook het lettertype veranderen.
Dit doe je weer met de FONT tag, maar nu gebruik je het attribuut face.

Je moet als waarde een bepaald lettertype opgeven. Een paar bekende lettertypen zijn: Verdana, Arial, Courier.

Je kunt ook meerdere lettertypen opgeven, achter elkaar, gescheiden door een komma. Als dan het eerstgenoemde lettertype niet ondersteund wordt door het systeem van de gebruiker, dan wordt het tweede lettertype gebruikt, als het tweede ook niet ondersteund wordt, het derde, etc.
Je zet de lettertypen tussen aanhalingstekens.

Een voorbeeld:

<FONT face="Verdana, Arial, Courier"> Zo stel je het lettertype van deze tekst in op Verdana, niet ondersteund? Dan Arial en tenslotte Courier</FONT>

RESULTAAT:

Je ziet dat het lettertype veranderd is. Eerste keus is hier Verdana, daarna Arial en Courier.

Tekstkleur Veranderen

Een derde attribuut van de FONT tag is: color.
Hiermee kan je de kleur van een bepaald stuk tekst veranderen.

Als waarde moet je een bepaalde kleur opgeven. Dit kun je doen met kleurnamen, zoals: yellow, green, blue of door middel van RGB waarden.
Voor een overzicht van webkleuren en RGB waarden, hier klikken!

Een voorbeeld van het werken met het color attribuut:

<FONT color="Red"> Zo stel je de kleur van dit tekstdeel in op rood.</FONT>

RESULTAAT:

Je ziet dat de tekst nu rood gekleurd is.

Alles Samen Nu

Goed, je hebt nu drie attributen van de tag FONT gezien.

Wat nu als je de lettergrootte en het lettertype wilt veranderen? Of zelfs lettergrootte, lettertype en tekstkleur?
Is het dan nodig iedere keer de FONT tag te gebruiken met één attribuut, dan de tag weer te sluiten en dat dan twee of zelfs drie keer te herhalen?
Het antwoord is nee.
Je kunt de attributen namelijk achter elkaar zetten in de FONT tag.

Een voorbeeld van drie attributen in één FONT tag:

<FONT size="4" face="Arial" color="Red">Nu krijg je dus lettergrootte 4, met lettertype Arial in de kleur rood met één FONT tag.</FONT>

RESULTAAT:

Lettergrootte 4, lettertype Arial in de tekstkleur rood

 

 

Les 4

Links Maken

Hyperlinks (=links) maken het World Wide Web tot dat wat het is. Zonder links zouden alle files op het web geïsoleerd zijn en zou je alleen een pagina bezoeken waarvan je het adres wist. Door links zijn een enorme hoeveelheid files op het web aan elkaar gekoppeld en is het mogelijk op je pagina te verwijzen naar (delen van) andere pagina's op je site, maar ook naar pagina's en bestanden van een totaal andere site.

Nu gaan we dus kijken hoe je links maakt met HTML. De link tags in HTML zijn: <A> als begintag, de eindtag is dan </A>.

Achtereenvolgens komt aan bod:

Linken naar bestanden op je eigen site

Er zijn twee soorten links die onder deze categorie vallen:

1. Linken naar bestanden op een andere pagina van je site.
2. Linken naar een bepaald gedeelte op een pagina.

Het is bij deze bestanden niet nodig om bij de links "http:// " en "www." toe te voegen, aangezien de bezoeker zich al op je site bevindt en hij alleen doorgestuurd hoeft te worden naar een ander bestand op dezelfde server.

ad 1.

Een link naar een bestand op een andere pagina van je site maak je als volgt.

Je begint met de A tag en vervolgens voeg je hier het attribuut href aan toe. Href staat voor Hyper Reference en definieert het adres waar men naartoe gebracht wordt nadat op de link is geklikt.

Daarna type je de naam van het bestand/de pagina waar je naar toe wilt linken. Bijvoorbeeld index.html. Nu verwijs je dus naar het bestand index.html. Dit bestand moet dan wel in dezelfde directory staan als het bestand waarin je de link plaatst. Heb je het bestand in een directory die daar "onder" staat (oftewel in een subdirectory) dan krijg je zo'n soort link:

diversen/index.html.

Nu stuur je de bezoeker naar de onderliggende subdirectory: "diversen" en het bestand "index.html" dat daar in staat.

Staat het bestand in een directory "boven" het bestand waarin je de link plaatst dan schrijf je deze link:

../index.html.

Hier wordt verwezen naar het bestand "index.html" in de bovenliggende directory. Met de twee puntjes gaat de browser naar de bovenliggende directory.

Je kunt ook verwijzen naar een bestand in een directory die boven de huidige directory ligt. Dat gaat met:

../etcetera/index.html.

Nu wordt met de twee puntjes eerst weer een directory omhoog gegaan. Vervolgens wordt in de directory "etcetera" die zich daar bevindt, het bestand "index.html" geöpend.

Nog even alles op een rij:

<A href="index.html">Met deze link verwijs je naar het bestand "index.html" in dezelfde directory.</A>

<A href="diversen/index.html">Nu verwijs je naar het bestand "index.html" dat zich in de subdirectory "diversen" bevindt.</A>

<A href="../etcetera/index.html">Ook nu verwijs je weer naar het bestand "index.html", maar nu bevindt het zich in een bovenliggende directory met de naam "etcetera".</A>

Nog één belangrijk ding: de tekst die je tussen de <A..> en </A> tags plaatst, is de link-tekst. Deze wordt standaard onderstreept weergegeven en als erop geklikt wordt, wordt de link geactiveerd.

ad 2.

Soms kan het handig zijn om een bezoeker gelijk naar een bepaald gedeelte op een pagina te verwijzen. Denk aan een lange pagina met veel tekst. Het is dan ideaal om een link naar een specifieke paragraaf te kunnen opnemen.

Hiervoor dient het attribuut name.

Je zet de tag <A name="de naam">De tekst waar je naar toe linkt</A> bij het gedeelte waar je naar toe wilt linken.
Dan gebruik je de tag <A href="#de naam">Hier komt de link-tekst</A> daar waar je de link wilt plaatsen.

Even een voorbeeld:

Als je hier klikt, ga je naar de tekst "Linken naar bestanden op je eigen site" hierboven op deze pagina.

Bij de tekst waar ik naar wil linken heb ik dit geplaatst:

<A name="tekst">Links naar bestanden op je eigen site:</A>

En de link zelf heb ik als volgt gemaakt:

<A href="#tekst">hier</A>

Linken naar bestanden elders op het web

Linken naar een bestand op een totaal andere website is vrij eenvoudig.
Je gebruikt natuurlijk weer de tags <A> en </A>.
Nu moet je wel "http://" en "www." toevoegen aan het link-adres, want nu verwijs je naar een bestand op een andere server.

Een voorbeeld:

<A href="http://www.hetadres.nl/index.html">De link-tekst hier!</A>

Met deze link verwijs je dus naar het bestand "index.html" wat een onderdeel is van "http://www.hetadres.nl/".

Het attribuut "target"

Nu nog iets over het attribuut target.
Dit attribuut wordt vooral gebruikt in pagina's met frames (waarover later meer), maar kan ook gebruikt worden in normale pagina's.

Het attribuut target kan vier verschillende waarden hebben:

_blank
Zorgt ervoor dat de link in een nieuw browserscherm geladen wordt.
_self
Link wordt in hetzelfde browserscherm geladen.
_parent
Laadt de link in de bron van het document.
_top
Laadt de link in het gehele scherm. Alleen van belang bij frames.

Zo zien de tags er dus uit als je het "target" attribuut gebruikt met één van de vier bijbehorende waarden:

<A href="http://www.voorbeeld.nl/" target="_blank">Zo wordt de link in een nieuw browserscherm geladen</A>

<A href="http://www.voorbeeld.nl/" target="_self">Zo wordt de link in hetzelfde browserscherm geladen</A>

<A href="http://www.voorbeeld.nl/" target="_parent">Zo wordt de link in de bron van het document geladen</A>

<A href="http://www.voorbeeld.nl/" target="_top">Zo wordt de link in het hele scherm geladen (alleen voor frames-pagina's)</A>

Afbeeldingen als links gebruiken

Je kunt ook afbeeldingen als link gebruiken. Deze heten dan clickable images.
Het maken van de link-tag verschilt niet veel van wat je hierboven geleerd hebt. Alleen gebruik je nu in plaats van de onderstreepte link-tekst, het adres van de afbeelding.

Afbeeldingen komen pas in een volgende les aan de orde. Meer over het gebruik van afbeeldingen kun je dus hier lezen.
Toch is het handig om nu alvast aan te geven hoe je een afbeelding als link kunt gebruiken.

Voor nu volsta ik dus met het weergeven van de tag:

<A href="http://www.voorbeeld.nl/"><IMG src="afbeelding.gif"></A>

Op de plaats waar nu "afbeelding.gif" staat, vul je het adres in van de afbeelding in die je gebruikt voor je link. Meestal is dit een .gif of .jpg (.jpeg) bestand.

E-mail Link

Deze links worden ook wel mailto links genoemd. Deze link verschijnt als elke andere link, maar wanneer er op geklikt wordt, kan de bezoeker een e-mail aan je sturen.

Een mailto link maak je als volgt:

<A href="mailto:jouw@emailnaam.nl">Stuur me een e-mail!</A>

De tekst: "Stuur me een e-mail!" wordt weergegeven als de link-tekst.

De mailto link heeft nog wat meer mogelijkheden. Zo kun je een onderwerp toevoegen en een tekst voor de e-mail. Dit bespreken we uitgebreid in het artikel Mailto link in HTML.

 

Les 5

Afbeeldingen Toevoegen

De meeste afbeeldingen die voor internet gebruikt worden, zijn in .gif .jpg (.jpeg) of .bmp formaat.

Hoewel plaatjes je pagina kunnen verfraaien, moet je toch goed nadenken voor je ze opneemt, want als je er te veel gebruikt, wordt de laadtijd van je pagina veel te lang. En als er één ding is dat je moet voorkomen, is het wel dat je bezoekers je site verlaten, omdat de pagina's te langzaam laden.

<IMG> tag en het attribuut "src"

Afbeeldingen neem je op met de <IMG> tag. Het heeft geen eindtag.
Je moet altijd het attribuut src (=source) erbij gebruiken, dit attribuut vertelt de browser waar de afbeelding staat.
De waarde van src is daarom altijd een adres. Het schrijven van een adres hebben we al behandeld in les 4.

De attributen "height" en "width"

Er zijn nog twee attributen die je eigenlijk altijd moet toevoegen, namelijk height en width.
Deze attributen vertellen de browser welke afmetingen de afbeelding heeft. De browser laat deze ruimte open (ruimte in pixels) en gaat verder met het laden van de rest van de pagina.

De afmetingen van je afbeeldingen moet je kunnen zien met je grafische software, zoals Photoshop.

Nu een voorbeeld van een "IMG" tag met de bijbehorende attributen:

<IMG src="hello3d.gif" height="64" width="154">

RESULTAAT:

http://www.mijnhomepage.nl/clipart/hello3d.gif

Je ziet nu hierboven de afbeelding "hello3d.gif" op het scherm verschijnen.

Afbeeldingen Uitlijnen

Als je tekst bij een bepaalde afbeelding wilt plaatsen, moet je het align attribuut gebruiken.
Align kan hier als waarde top, bottom of middle hebben (bottom is de standaard, dus als je niets invult).

Nu zie je voorbeelden van het uitlijnen van een afbeelding:

PlaatjeStandaard is de onderkant van een afbeelding uitgelijnd met de tekst, zoals je hier ziet. Hieronder zie je voorbeelden van align met waarden: top en center.

PlaatjeDit is weer hetzelfde plaatje, maar nu zie je dat de tekst aan de bovenkant van de afbeelding begint. Je ziet dat alleen de eerste regel bovenaan begint. De rest van de tekst komt weer onder de afbeelding. Dit is dus de waarde top.

De complete tag met waarde "top" wordt dus:

<IMG src="hello3d.gif" height="64" width="154" align="top">

PlaatjeHier weer dezelfde afbeelding, maar nu zie je dat de tekst ter hoogte van het midden van de afbeelding begint. Je ziet dat alleen de eerste regel in het midden begint. De rest van de tekst komt weer onder de afbeelding.

De tag met waarde "middle":

<IMG src="hello3d.gif" height="64" width="154" align="middle">

Een Afbeelding Als Achtergrond Gebruiken

Dit is al kort behandeld in de eerste les.
Je kunt een afbeelding als achtergrond voor je pagina gebruiken. Je moet dan het attribuut background in de <BODY> plaatsen.
Zo dus:

<BODY background="afbeelding.gif">

 

Les 6

Lijsten Maken

In deze les kun lees je hoe je lijsten maakt. Lijsten maken met HTML is erg eenvoudig.
Er zijn drie verschillende soorten lijsten die achtereenvolgens aan bod komen:

Tenslotte bespreek ik nested lists (geneste lijsten).

Unnumbered Lists (ongenummerde lijsten)

In een ongenummerde lijst wordt iedere lijstobject voorafgegaan door een bullet (een dikke punt).

Je begint de ongenummerde lijst met de <UL> tag - de openingstag voor de lijst.
Vervolgens gebruik je de tag <LI> voor ieder lijstobject (List Item) dat je in de lijst wilt plaatsen. De eindtag </LI> is niet nodig.
Als je alle List Items hebt ingevoerd, sluit je de lijst met de eindtag </UL>.

Een voorbeeld van een Unnumbered List:

<UL>
<LI>appels</LI>
<LI>peren</LI>
<LI>bananen</LI>
<LI>druiven</LI>
</UL>

Het resultaat van de bovenstaande code is:

  • appels
  • peren
  • bananen
  • druiven

 

Ordered Lists (geordende lijsten)

In een geordende lijst wordt elk lijstobject voorafgegaan door een nummer. Verder lijkt alles op de Unnumbered List.

De begintag is <OL>.
Dan gebruik je weer de tag <LI> voor ieder lijstobject dat je in wilt voeren.
Tenslotte sluit je de geordende lijst weer af met de eindtag: </OL>

Een voorbeeld van een Ordered List:

<OL>
<LI>sinaasappels</LI>
<LI>mandarijnen</LI>
<LI>mangos</LI>
<LI>perziken</LI>
</OL>

Nu komt het resultaat van deze code:

  1. sinaasappels
  2. mandarijnen
  3. mangos
  4. perziken

 

Definition Lists (definitielijsten)

De definitielijst wordt begonnen met de begintag <DL>
Een definitielijst bestaat uit een term die verklaard moet worden - de Definition Term - gecodeerd als de tag <DT> en de zgn. Definition Definition - de verklaring van de term - met de tag <DD>.
De eindtag van de lijst is dan weer: </DL>.

Een voorbeeld van een Definition List:

<DL>
<DT>Appel</DT>
<DD>Vrucht van de appelboom</DD>
<DT>Peer</DT>
<DD>De sappige vrucht van de perenboom</DD>
</DL>

Je krijgt dan het volgende op je scherm te zien:

Appel
Vrucht van de appelboom
Peer
De sappige vrucht van de perenboom

De drie soorten lijsten zijn hiermee behandeld.
Nu nog een laatste paragraaf over geneste lijsten.

 

Nested Lists (geneste lijsten)

Een geneste lijst is niets anders dan een lijst in een andere lijst. Hierbij zijn alle combinaties van de drie hierboven besproken lijsten mogelijk.
Zo kun je een ongenummerde lijst in een geordende lijst, een definitielijst in een ongenummerde lijst, maar ook een ongenummerde lijst in een ongenummerde lijst maken.

Je begint met de tag van de hoofdlijst, dus <UL> <OL> of <DL>.
Dan voeg je het List Item (lijstobject) in, met daarna de tag van de sublijst die je wilt maken.

Dit voorbeeld maakt het duidelijk:

<OL>
 <LI>Honden
  <UL>
   <LI>Jack Russell Terriër</LI>
   <LI>Spaniël</LI>
   <LI>Golden Retriever</LI>
  </UL>
 </LI>
 <LI>Vogels
  <UL>
   <LI>Merel</LI>
   <LI>Spreeuw</LI>
   <LI>Mus</LI>
  </UL>
 </LI>
</OL>

Dit is het resultaat:

  1. Honden
    • Jack Russell Terriër
    • Spaniël
    • Golden Retriever
  2. Vogels
    • Merel
    • Spreeuw
    • Mus

Zie je wat er gebeurt? Ik begin met de tag voor de hoofdlijst <OL> - een geordende lijst.
In deze geordende lijst neem ik een ongenummerde lijst op achter het <LI> "honden" uit de hoofdlijst.
Deze ongenummerde lijst sluit ik weer af nadat ik er de gewenste honden ingevoegd heb.
Vervolgens ga ik weer verder met de hoofdlijst (de geordende lijst), nu met het lijstobject "vogels".
Ook nu begin ik weer een ongenummerde lijst, stop de nodige vogels erin, en sluit hem weer af.
Tenslotte sluit ik de hoofdlijst af met de eindtag: </OL>.

 

Les 7

Werken Met Tabellen

In deze les gaat het over tabellen. Dit is waarschijnlijk het moeilijkste gebied van HTML dat je tegen zult komen.
Je zult wel gauw in staat zijn eenvoudige tabellen te maken, maar de echte complexe tabellen vergen gewoon veel oefening en ervaring.
Ook is het gebruik van tabellen een van de handigste functies in HTML. Practisch iedere webmaster krijgt er vroeg of laat mee te maken. Ook de pagina die je nu bekijkt is opgebouwd uit verschillende tabellen.

Dit vooraf. Nu kun je lezen over de TABLE tags en de verschillende attributen.

De <TABLE> <TR> en <TD> tags

Een tabel is een systeem van rijen (horizontaal) en kolommen (verticaal).
In de rijen staan verschillende cellen. In de cellen komt de informatie die je wilt opnemen. Het aantal kolommen wordt bepaald door het aantal cellen in de rijen.

Je begint de tabel met de <TABLE> tag.
Vervolgens begin je een rij met de tag: <TR> (Table Row).
Hierna plaats je een cel met de tag: <TD> (Table Data).
Na deze tag plaats je de informatie die je in de cel op wilt nemen.
De eindtags: </TD> en </TR> zijn niet verplicht.
Een nieuwe cel begin je dan weer met: <TD>.
Heb je alle cellen binnen een rij ingevuld, dan begin je de volgende rij met: <TR>.
Zo vul je de hele tabel in. Uiteindelijk sluit je de tabel met de eindtag: </TABLE>.

Attributen van de <TABLE> tag:

width: hiermee stel je de breedte in van de tabel. Dit kun je doen in pixels of in een percentage. Ik zou zoveel mogelijk percentages gebruiken, want dan ben je minder afhankelijk van de browserinstellingen van je bezoekers.

border: met dit attribuut stel je de dikte van de rand van de tabel in. De waarde 0 betekent: geen rand.

cellpadding: hiermee kun je een witruimte creëren tussen de rand van de cel en de inhoud van de cel instellen. De waarde die je opgeeft, is in pixels. De standaardwaarde is 1.

cellspacing: dit stelt een ruimte in tussen de verschillende cellen in een tabel. Ook nu is de waarde weer in aantallen pixels. De standaardwaarde is hier 2.

bgcolor: hiermee stel je de achtergrondkleur in van de hele tabel. Over kleuren hebben we het al eerder gehad in deze cursus. Klik hier om de verschillende kleuren en kleurwaarden te bekijken.

align: regelt de uitlijning voor de hele tabel. Mogelijke waarden zijn: left,center en right.

Attributen van de <TR> tag:

align: hiermee kun je de inhoud van de hele rij uitlijnen, de waarden zijn: left, center en right.

valign: hiermee kun je de verticale uitlijning van de inhoud van de rij bepalen. Mogelijke waarden: top, center en bottom.

bgcolor: bepaalt de achtergrondkleur van de hele tabelrij.

Attributen van de <TD> tag

width: stelt de breedte in van de cel. Je kunt de waarden opgeven in pixels en percentages.

colspan: bepaalt het aantal kolommen dat de cel inneemt. Soms moet je dit attribuut gebruiken. Bijvoorbeeld: je eerste rij van je tabel heeft vier cellen, maar je wilt maar drie cellen in je tweede rij. Je moet dan het attribuut colspan gebruiken om dit effect te bereiken. Als je dit niet doet dan maakt de browser zelf een vierde - lege - cel.

rowspan: bepaalt het aantal rijen dat de cel inneemt. Stel, de eerste cel gebruikt een rij, maar je wilt dat de tweede cel twee rijen inneemt. Dan moet je het attribuut rowspan gebruiken.

align: hiermee lijn je de inhoud van de cel uit. Mogelijke waarden: left, center of right.

valign: regelt de verticale uitlijning van de inhoud van de cel. De waarden die je hier kunt invullen zijn: top, center of bottom.

bgcolor: hier kun je een achtergrondkleur voor de cel invullen.

 

Tijd voor een voorbeeld van een tabel met gebruik van een aantal attributen:

<TABLE bgcolor="lightblue" border="2" width="100%">
 <TR>
  <TD align="center" colspan="4" bgcolor="red"><B><FONT size="+2">Dieren</FONT></B></TD></TR>
 <TR>
  <TD align="center" colspan="2"><B>Honden</B></TD>
  <TD align="center" colspan="2"><B>Vogels</B></TD></TR>
 <TR align="center">
  <TD width="25%"><U>Jack Russell Terriër</U></TD>
  <TD width="25%"><U>Spaniël</U></TD>
  <TD width="25%"><U>Mus</U></TD>
  <TD width="25%"><U>Spreeuw</U></TD></TR>
 <TR align="center">
  <TD width="25%"><U>Golden Retriever</U></TD>
  <TD width="25%"><U>Teckel</U></TD>
  <TD width="25%"><U>Merel</U></TD>
  <TD width="25%"><U>Ekster</U></TD></TR>
</TABLE>

Dit is het resultaat op het scherm:

Dieren
Honden Vogels
Jack Russell Terriër Spaniël Mus Spreeuw
Golden Retriever Teckel Merel Ekster

 

Nu kun je zien wat de code voor gevolgen heeft op het scherm. Bekijk de code rij voor rij. Een rij wordt aangegeven met de tag: <TR>.
Zoals je ziet zijn er vier rijen: Dieren, Honden/Vogels en twee rijen met honden en vogels, ze staan allen een plaats ingesprongen in de code.
Iedere cel (<TD>) staat twee plaatsen ingesprongen.
Dit is natuurlijk maar een hele simpele tabel, er is veel meer mogelijk, maar dat gaat nog wat te ver voor deze beginnerscursus.

 

Les 8

Werken Met Frames

Frames worden vooral gebruikt om de navigatie binnen een site te verbeteren. Dit onderwerp behoort net als het werken met tabellen tot de moeilijke gebieden van HTML. Hier zal ik proberen je de basisbeginselen van het werken met frames uit te leggen.

Voordat ik begin, zou ik je willen aanraden frames niet te gebruiken, tenzij het niet anders kan.

Er kleeft namelijk een aantal belangrijke nadelen aan het gebruiken van frames. Zo worden frames niet door oude browsers ondersteund (pas vanaf Netscape 2.0 en IE 3.0), ook hebben zoekmachines vaak moeite met het indexeren van frames-paginas, waardoor je bezoekers kunt mislopen.
Tenslotte kan het bookmarken van een framespagina problemen opleveren.
Veel dingen waarvoor men frames gebruikt, zijn ook te maken met tabellen, waarmee je deze nadelen niet hebt.

Toch zijn frames nu eenmaal onmisbaar wanneer je een pagina wilt maken met verschillende, onafhankelijk van elkaar werkende secties.

Hoe Functioneren Frames?

Zoals al gezegd, dienen frames vooral voor de navigatie op een site.
Dit gebeurt, doordat de frames het scherm splitsen in verschillende secties. Hoe die splitsing plaatsvindt, staat in de hoofdpagina van de website, meestal de index.html file.
Bij de links binnen de frames moet worden aangegeven waar de paginas geladen worden of dat ze zonder de frames weergegeven worden.

De <FRAMESET> tag

Deze tag komt dus op de hoofdpagina van je site (meestal index.html).
De tag vervangt de <BODY> tag van de hoofdpagina.
Met de FRAMESET tag geef je aan hoe, en waar de pagina gesplitst wordt.
Als je de pagina wilt splitsen in kolommen en rijen, heb je twee FRAMESET tags nodig, voor ieder één.

Om de grootte van de frames aan te geven, moet je de volgende attributen gebruiken:

rows: hiermee bepaal je de horizontale splitsing van de pagina.
De waarde die je invult is, of in pixels, of in een percentage. Je kunt het beste percentages gebruiken, dan ben je het minst afhankelijk van de browserinstellingen van je bezoekers.

Een voorbeeld van een pagina die in drie horizontale delen gesplitst is:

<HTML>
<HEAD>
<TITLE>Framesvoorbeeld met rijen</TITLE>
</HEAD>
<FRAMESET rows="30%,50%,20%">
 <FRAME src="document1.html">
 <FRAME src="document2.html">
 <FRAME src="document3.html">
</FRAMESET>
</HTML>

Klik hier om het resultaat te zien!

Je ziet, de pagina is nu horizontaal verdeeld in drie frames d.m.v. het attribuut: rows.

cols: Hetzelfde als bij de rows. Alleen wordt nu de pagina verticaal gesplitst.

Een voorbeeld van een pagina die in drie verticale delen gesplitst is:

<HTML>
<HEAD>
<TITLE>Framesvoorbeeld met kolommen</TITLE>
</HEAD>
<FRAMESET cols="30%,50%,20%">
 <FRAME src="document4.html">
 <FRAME src="document5.html">
 <FRAME src="document6.html">
</FRAMESET>
</HTML>

Klik hier om het resultaat hiervan te zien!

Nu zie je dat de pagina nu verdeeld is in drie verticale frames door het cols attribuut.

De <FRAME> tag

In de bovenstaande voorbeelden zag je deze tag al staan. Deze tag staat in de FRAMESET tag.
De functie van de <FRAME> tag is, aan te geven welke paginas in de verschillende frames moeten worden geladen.

De <FRAME> tag kan de volgende attributen hebben:

src: dit staat voor "source" en dit attribuut geeft het adres aan waar de te laden pagina staat.
Dit is een verplicht attribuut.

name: Als je vanuit het ene frame een pagina in een ander frame wilt laden, moet je de frames een unieke naam geven. Deze naam heeft niets te maken met het adres van het frame.
Deze naam geef je met het attribuut name.

Zo dus:

<FRAME src="hetadres" name="framenaam">

Als je nu een pagina wilt laten verschijnen in het frame, dan moet je in de link (de <A> tag) naar die pagina het attribuut target toevoegen, met daarin als waarde de naam van het frame.

Op deze manier:

<A href="adres" target="framenaam">

marginwidth: bepaalt de dikte van de linker- en rechtermarge in aantallen pixels.

marginheight: bepaalt de hoogte van de "top" en "bottom" marge van het frame in aantallen pixels.

scrolling: hiermee kun je instellen of je scrollen in het frame mogelijk wilt maken.
Mogelijke waarden zijn: yes, no en auto. Standaard is auto (dus als je scrolling niet instelt). Bij auto wordt scrollen automatisch mogelijk als het nodig mocht zijn.

noresize: de grootte van de frame kan nu niet aangepast worden door de bezoeker.
Je hoeft geen waarde in te vullen. Zet gewoon noresize in de FRAME tag.

frameborder: hiermee kun je een rand tussen de frames instellen. Standaard staat hij al op "yes". Mogelijke waarden zijn: yes en no.

framespacing: stelt een ruimte in tussen de verschillende frames in aantallen pixels.

De <NOFRAMES> tag

In deze tag kan je een URL opnemen waar bezoekers, met een browser die geen frames aankunnen, heengestuurd worden.

Een voorbeeld:

<NOFRAMES>http://www.mijnhomepage.nl/index.php</NOFRAMES>

 

Les 9: Formulier maken

Met een formulier kan informatie worden ingevoerd en verzonden door een bezoeker van je website. Denk bijvoorbeeld aan de voor- en achternaam, het e-mailadres en adresgegevens. Formulieren worden gebruikt voor allerlei doeleinden, zoals het aanmelden voor een nieuwsbrief of forum, het plaatsen van een bestelling of als contactformulier. In deze les bekijken we hoe je een formulier kunt maken in HTML.

De <form> tag

Als je een formulier wilt opnemen in een pagina dan begin je met de <form> tag. Met deze tag vertel je de browser dat er een formulier volgt en geef je aan wat er met de gegevens in het formulier moet gebeuren. In de voorbeelden op deze pagina sturen we de ingevoerde gegevens naar een e-mailadres. Er zijn echter ook veel scripts waarmee je formulieren vaak een stuk beter kunt verwerken. Voor websites waar je zulke scripts kunt vinden, verwijs ik je naar de pagina met PHP scripts.

De begintag van een formulier is:

<form method="post" action="mailto:jouwemail@adres.nl">

In de code plaats je je eigen e-mailadres direct achter mailto: in de code, dus zonder een spatie ertussen. Met method="post" geven we de manier aan waarop de data moet worden verzonden. Als we klaar zijn met het maken van het formulier dan sluiten we altijd weer af met de eindtag </form>.

<input> voor tekstvelden

Met de <input> tag kunnen we een tekstveld maken in een formulier. Bijvoorbeeld:

Vul je voornaam in:

 

De code die we hiervoor gebruiken is:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Vul je voornaam in:</em>
<input type="text" size="20" maxlength="40" name="voornaam">
</form>

Als je het veld met je muisknop activeert dan kun je er in typen. De <input> tag heeft de volgende attributen:

  • type: geeft aan wat voor soort input er volgt. Mogelijke waarden zijn bijvoorbeeld: text, submit, en radio.
  • size: de breedte van het veld. Gemeten wordt in spaties.
  • maxlength: het maximum aantal karakters dat ingevoerd mag worden in het veld.
  • name: hiermee geef je het veld een naam, zodat er later naar verwezen kan worden.

In het voorbeeld hierboven gebruikten we een tekstveld (type="text") met een breedte van 20 en een maximum aantal karakters van 40. We gaven het veld de naam "voornaam" in het name attribuut.

Het formulier verzenden

Nu moet een bezoeker het formulier nog kunnen verzenden naar ons e-mailadres. Dit doen we door een submit knop toe te voegen. Doorgaans plaats je deze knop aan het einde van de code van het formulier. Om de verzendknop te maken, voegen we type="submit" toe aan een nieuwe <input> tag. Met het value attribuut geef je de tekst aan die op de knop moet komen, bijvoorbeeld "Verzenden" of "Versturen". De code voor de verzendknop wordt als volgt:

<input type="submit" value="Verzenden">

Nu voegen we de verzendknop toe aan het formulier met het tekstveld dat we hierboven gemaakt hebben:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Vul je voornaam in:</em> <input type="text" size="20" maxlength="40" name="voornaam"><br>
<input type="submit" value="Verzenden">
</form>

Het resultaat ziet er als volgt uit:

Vul je voornaam in:

<textarea> voor grotere teksten

Als we bezoekers een grotere tekst willen laten invoeren dan kunnen we hiervoor de <textarea> tag gebruiken. Dit kan bijvoorbeeld nuttig zijn als we een bezoeker om commentaar vragen of we hem/haar een vraag willen laten stellen. Een voorbeeld van een textarea:

Opmerkingen:

 

Met behulp van de attributen rows en cols geven we aan uit hoeveel rijen (de hoogte) en kolommen (de breedte) het tekstvak zal bestaan. Het bovenstaande tekstvak bestaat uit 7 rijen en 25 kolommen en heeft de naam "opmerkingen" gekregen:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Opmerkingen:</em><br>
<textarea rows="7" cols="25" name="opmerkingen"></textarea>
<input type="submit" value="Verzenden">
</form>

De <textarea> tag moet afgesloten worden met de eindtag: </textarea>. Voor de <input> tag is dit niet noodzakelijk.

Radio button

Met een radio button kunnen we een bezoeker een antwoord laten selecteren uit meerdere mogelijkheden. Je bent deze radio buttons ongetwijfeld wel eens tegengekomen op andere websites. Ze worden bijvoorbeeld vaak gebruikt voor een poll of een quiz.

In de code gebruiken we de volgende attributen:

  • type: nu kiezen we voor een radio button en daarom vullen we hier radio in.
  • name: hiermee geven we aan welke radio buttons bij elkaar horen.
  • value: geeft de informatie aan die zal worden verzonden als de bezoeker deze radio button selecteert.

Een voorbeeld van het gebruik van radio buttons:

Wat voor kleur ogen heb je?
Blauw Bruin Grijs Groen
Draag je een bril?
Ja Nee

 

De code voor deze twee sets radio buttons is:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Wat voor kleur ogen heb je?</em><br>
<input type="radio" name="oogkleur" value="blauw">Blauw
<input type="radio" name="oogkleur" value="bruin">Bruin
<input type="radio" name="oogkleur" value="grijs">Grijs
<input type="radio" name="oogkleur" value="groen">Groen<br>
<em>Draag je een bril?</em><br>
<input type="radio" name="bril" value="welbril">Ja
<input type="radio" name="bril" value="geenbril">Nee<br>
<input type="submit" value="Verzenden">
</form>

Checkbox

De checkbox lijkt op de radio button, maar de check box geeft de bezoeker de mogelijkheid om meerdere opties te selecteren. Verder gebruik je de name en value attributen op dezelfde wijze:

Wat zijn je favoriete soorten muziek?
Pop Rock House Hip Hop

 

De HTML code voor deze checkboxes is:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Wat zijn je favoriete soorten muziek?</em><br>
<input type="checkbox" name="muzieksoort" value="Pop" checked>Pop
<input type="checkbox" name="muzieksoort" value="Rock">Rock
<input type="checkbox" name="muzieksoort" value="House">House
<input type="checkbox" name="muzieksoort" value="Hip Hop">Hip Hop<br>
<input type="submit" value="Verzenden">
</form>

Valt je iets op in dit voorbeeld? Bij deze checkbox staat al een standaardkeuze aangevinkt. In het vakje voor "Pop" staat al een vinkje. Dit zie je in de code terug: value="Pop" checked. "Checked" geeft aan dat een optie standaard geselecteerd moet worden. Dit kan handig zijn om te gebruiken als je weet dat een groot deel van je bezoekers een bepaalde optie zullen aanvinken. Je kunt checked op dezelfde wijze gebruiken voor de radio buttons.

Drop down list

Een drop down list is een andere manier waarop bezoekers een optie kunnen selecteren. In een drop down lijst gebruiken we de <select> en <option> tags. Zo'n lijst ziet er bijvoorbeeld zo uit:

Welke film uit deze lijst vind je het beste?

 

De HTML code:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Welke film uit deze lijst vind je het beste?</em><br>
<select name="film">
<option>The Godfather</option>
<option>Pulp Fiction</option>
<option>The Shawshank Redemption</option>
<option>Raiders of the Lost Ark</option>
<option>Spartacus</option>
</select>
<input type="submit" value="Verzenden">
</form>

Een lijst met meerdere keuzemogelijkheden

We kunnen ook een lijst maken waarin meerdere mogelijkheden geselecteerd kunnen worden door de bezoekers. We maken daarvoor gebruik van het multiple attribuut. Met het attribuut size kunnen we bepalen hoeveel keuzemogelijkheden er getoond worden voordat de bezoeker moet scrollen in de lijst. Door selected toe te voegen aan een <option> tag kunnen we een standaardkeuze selecteren.

Hier is een voorbeeld van een lijst met meerdere keuzemogelijkheden:

Selecteer je favoriete drankjes:

 

Zoals je ziet worden er vier opties in beeld getoond en wordt "Bier" als een standaardkeuze geselecteerd. Je kunt in de lijst meerdere opties selecteren door de control toest ingedrukt te houden.

De HTML code voor de bovenstaande lijst is:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Selecteer je favoriete drankjes:</em><br>
<select multiple name="drankjes" size="4">
<option value="bier" selected>Bier</option>
<option value="wijn">Wijn</option>
<option value="cola">Cola</option>
<option value="sinas">Sinas</option>
<option value="vruchtensap">Vruchtensap</option>
<option value="wodka">Wodka</option>
<option value="ijsthee">IJsthee</option>
</select>
<input type="submit" value="Verzenden">
</form>