Info Links Home Lessen Contact Sitemap Software Copyright Downloads Info Links Home Contact Sitemap Software Copyright Downloads Les 1 Les 2 Les 3 Les 4 Les 5 Les 6 Les 7 Les 8 Les 9 Les 10

Site Info:

Deze site werd gemaakt als eindwerk voor het vak Webtechnologie dat we krijgen aan de Hogeschool West Vlaanderen departement Provinciale IndustriŽle Hogeschool in het kader van onze opleiding Multimedia en Communicatie Technologie.

Voor het vak Webtechnologie moeten we als eindproject in team een volledige website samenstellen. Wij hebben ervoor gekozen om een e-learning project te maken met al thema HTML voor beginners.

Opdrachtstelling:24/01/2002
Releasedatum:23/04/2002
Laatst aangepast:10/10/2002
Totaal aantal bezoekers: 3451

De Ontwerpers:

Voornaam: Steven
Familienaam: Casteleyn
Woonplaats: Marke (Kortrijk)
Leeftijd: 22
Geboortedatum: 22/03/1980
Email: steven@tutorialhtml.tk
Homepage: PixelDev.be



Voornaam: Jonah
Familienaam: Claerhout
Woonplaats: Kortrijk
Leeftijd: 19
Geboortedatum: 22/11/1982
Email: jonah@tutorialhtml.tk
Homepage:

 

Welkom,

Met deze website willen we jullie de basis van HTML aanleren waardoor U in staat zal zijn om na de hele cursus een eenvoudige website te maken. Het is zeker niet onze bedoeling om alles wat HTML te bieden heeft tot in de details te bespreken en na deze cursus zullen jullie ook geen professionele "webmasters" zijn, doch zal U alle elementaire HTML basiskennis onder de knie hebben en dus zelf aan de slag kunnen gaan om zelf je website te bouwen, on line te plaatsen en te onderhouden.

Deze site bestaat uit een on line lessenpakket van 10 lessen, waarbij we starten van de basisuitleg in les 1 en waarbij we eindigen met een oefening die een samenvatting en tevens ook een evaluatie is van de 9 geziene lessen.

De mensen die niet over een permanente internetverbinding beschikken hoeven ook niets te vrezen, want het volledige lessenpakket kan gedownload worden, men kan dus ook zonder problemen de internetverbinding uitschakelen en off line verder de lessen volgen.

We hebben ons best gedaan om de opbouw en de uitleg van de lessen simpel te houden. Indien we vonden dat bij sommige woorden toch nog wat extra uitleg nodig was, hebben we deze woorden een rood kleurtje gegeven. Deze woorden worden toegelicht in een pop-up kadertje, dat de gebruiker kan raadplegen door op het desbetreffende woord te klikken.

Alvast bedankt voor uw bezoek en veel succes met het volgen van het lessenpakket, eventuele vragen of onduidelijkheden mogen altijd gemeld worden, daarvoor kan U zich wenden tot het "Contact" onderdeel.

Jonah en Steven,
Eerstejaarsstudenten Multimedia en Communicatie technologie.

Valid HTML 4.01!

Indien u vragen, suggesties,... hebt, dan kunt u deze via dit formulier naar een algemeen emailadres sturen.
U kunt ons natuurlijk ook afzonderlijk contacteren. U vindt onze emailadressen in het onderdeel Info.

Persoonlijke gegevens:
Voornaam:
Familienaam:
Emailadres:
Homepage:

Onderstaand kader kan u gebruiken om uw vragen te stellen, suggesties in te schrijven...

Gelieve ook even onze enquÍte in te vullen, dank u.
Bent u tevreden over de inhoud van de lessen?
Was uw bezoek nuttig voor u?
Wat vindt u van de layout van de site?
Wat vindt u van de download sectie?
Wat vindt u van de sitemap?
Wat is uw globale waardering van de site?
Zijn er dingen die u aan de site veranderd wilt zien?
zo ja, welke?

Deze sitemap kan u gebruiken door op de blaadjes boven de namen van de pagina's te klikken en dus niet door de namen aan te klikken.

In dit onderdeel vindt u informatie terug over de verschillende soorten software die bestaan om HTML pagina's mee te ontwerpen.

Er bestaan heel veel soorten software, wij beperken ons echter tot enkele van de meest gebruikte programma's:

Kladblok
Textpad
Frontpage
Dreamweaver
WS FTP
Motivatie keuze Textpad

Kladblok

Kladblok is een programma dat standaard in Microsoft Windows zit. Je kan het makkelijk terugvinden door naar start -> programma's -> Bureau accessoires -> Kladblok te gaan. In kladblok kan je in principe alle webpagina's gaan schrijven, maar het is zeker niet het meest gebruiksvriendelijke programma om mee te werken. Alle code wordt in dezelfde kleur weergegeven, wat het werken met dit programma wel bemoeilijkt. Vandaar dat we aan dit programma niet meer uitleg spenderen.

top

Textpad

Textpad is het programma dat wij aanraden om te gebruiken. Dit programma zit niet standaard in windows maar jullie hoeven daarom niet direct naar de winkel te stappen om de desbetreffende software aan te schaffen, maar kunnen een gratis proefversie downloaden op http://www.textpad.com.
Let wel, via deze link kan u direct het bestand downloaden, en komt u niet op www.textpad.com terecht.

Textpad heeft het grote voordeel dat alle html-code een blauw kleurtje krijgt, waardoor deze makkelijk te onderscheiden is van de ingetypte tekst, ook zijn er een heleboel attributen aanwezig waardoor het werken met textpad veel handiger, prettiger en gemakkelijker is dan met kladblok.

Uitleg over hoe je een bestand in textpad opslaat, en meedere informatie over het programma zelf en enkele van zijn belangrijkste knoppen vindt U in de eerste les.

top

Frontpage

Frontpage is een Nederlandstalige WYSIWYG html-editor. WYSIWYG staat voor What You See Is What You Get. Heel simpel gezegd is Frontpage eigenlijk een visuele html-editor.

Als je bijvoorbeeld een foto invoegt, dan zal je in les 5 zien dat je in textpad de code zal moeten intypen en dan je html-document zal moeten bekijken om de foto te kunnen bekijken.

Frontpage werkt anders en toont letterlijk in het programma zelf hoe je webpagina er zal uitzien. Zo kan je heel gemakkelijk zien hoe je webpagina verandert en hoef je niet telkens naar je browser te gaan om de veranderingen te zien.

top

Dreamweaver

Dreamweaver is net als Frontpage een WYSIWYG html-editor, maar dan wel een engelstalige.

Dreamweaver is echter wel veel beter dan Frontpage (dit is gebaseerd op persoonlijke voorkeur), heeft veel meer mogelijkheden en voegt niet overal onnodige mapjes bij, in tegenstelling tot Frontpage.

Dreamweaver is ook veel correcter in de code die hij opstelt. Frontpage is geneigd om overal veel meer code toe te voegen dan nodig is, wat tot problemen kan leiden als je dan je code zelf wil aanpassen.

Let wel, Dreamweaver is geen programma voor beginners maar is pas aan te raden als je een behoorlijke voorkennis hebt van html.

top

WS FTP

WS FTP is 1 van de vele FTP programma's. FTP staat voor File Transfer Protocol en is een protocol dat gebruikt wordt om bestanden te versturen over het internet. Een FTP programma kan dus bijvoorbeeld gebruikt worden om bestanden op de web server te plaatsen waar je website op staat.

U kan het programma hier downloaden.

Meer informatie voor het on line plaatsen van uw site vindt u in een apart .pdf documentje dat u tevens kan downloaden.

top

Motivatie bij de keuze voor Textpad

U vraagt zich misschien af waarom wij kiezen voor een programma als Textpad als er betere en handigere programma's bestaan zoals Frontpage en Dreamweaver.

Ons antwoord is eigenlijk relatief simpel: als je met een programma als Dreamweaver zou starten, dan kunnen wij jullie wel leren hoe je figuren moet invoegen,... maar dan leer je alleen maar webpaginas maken met behulp van zo'n programma, en snap je niets van de onderliggende code, en dat is toch wel nodig. Met Textpad moet je bijvoorbeeld zelf de code invoeren, en moet je dus snappen wat je aan het invoeren bent.

Als je daarna dan overschakelt naar een programma als Dreamweaver, dan zal je snappen wat het programma doet als je iets invoert en zal je niet meer uitgaan op de goedheid van het programma alleen, maar ook op je eigen kennis van de HTML-taal.

top

Op deze pagina kan u de off line versie van onze site downloaden. Deze is opgesteld in een .pdf documentje wat je kan bekijken met Adobe Acrobat Reader 5.0.

Indien u dit programma niet staan hebt, dan kunt u het downloaden op Adobe.com. Vul daar de nodige gegevens in en u kunt dit programma dan gratis downloaden.

Alle lessen in *.pdf formaat
Les 1 Inleiding: Wat is HTML? bekijk download 106 kb
Les 2 Werken met tags bekijk download 38 kb
Les 3 Kleuren, lettergroottes en aligneren bekijk download 31 kb
Les 4 Hyperlinks bekijk download 4 kb
Les 5 Figuren bekijk download 14 kb
Les 6 Figuren advanced en lijsten met attributen bekijk download 38 kb
Les 7 Tabellen bekijk download 63 kb
Les 8 Frames bekijk download 43 kb
Les 9 Formulieren bekijk download 42 kb
Les 10 Eindoefening bekijk download 442 kb

Overige bestanden:
Alle lessen in 1 bestand download 799 kb
Alle images uit de lessen download 356 kb
Uitleg over het on line plaatsen van een site download 984 kb
bestanden nodig voor les 10 download 182 kb

Inleiding

Wat is HTML?

Vooraleer je kan beginnen met het schrijven van de code voor de site die je wil maken, moet je eerst weten waar je mee bezig bent en wat het doet. Daarom eerst even een korte verklaring van enkele termen:

HTML is het woord waar alles om draait bij het maken van een website. HTML staat voor HyperText Markup Language en is met andere woorden een opmaaktaal voor webpagina's.

Verklaring van de termen Hypertekst en Markup:

Hypertext is de techniek waarmee een verbinding (een link) wordt gelegd naar bijvoorbeeld een ander document, een afbeelding, of een geluidsopname.
Markup is het gebruik van code om de browser te vertellen hoe de inhoud van het document weergegeven moet worden en naar welke bestemming de hyperlinks moeten leiden.

In tegenstelling tot geschreven tekst is HTML niet lineair, maar door middel van hyperlinks kan men verspringen van pagina naar pagina en dus ook van tekst naar tekst. Het is ook een taal voor grafische en structuuropmaak van webdocumenten.
HTML- documenten worden meestal aangemaakt in een texteditor (zoals Textpad, kladblok,...) of met behulp van een WYSIWYG HTML-editor (zoals MS Frontpage, Macromedia Dreamweaver,...), waarin men ziet wat men verandert.

Voor onze cursus maken wij gebruik van Textpad, waarvan een gratis proefversie beschikbaar is op http://www.textpad.com. Deze link laat u toe onmiddellijk het bestand te downloaden.
Wij raden u aan dit programma te downloaden en het op uw computer te installeren.
Voor meer informatie over deze programma's ga naar het onderdeel Software

Laten we nu eens Textpad gaan openen.

De plaats waar nu de cursor aan het knipperen is, is het vlak waar je straks de Html-code kan beginnen schrijven (zie les 2 en volgende).
Links ziet U nog 2 vlakken, het onderste is van minder belang en hoeft U geen aandacht aan te schenken, het bovenste echter wel.
Wanneer dit het eerste document is dat U opent zie je in het linkerbovenvlak standaard staan "document 1". U moet echter het project eerst een naam gaan geven en opslaan onder een bepaalde extensie.
Om nu het project op te slaan vooraleer je al een regel code hebt geschreven volg je de standaard windows procedure "file - save as". Nu moet U echter aandachtig zijn want standaard zal Textpad bestanden opslaan als *.txt. Hierbij staat het * voor de bestandsnaam en .txt is de extensie van het bestand
Moest u nu een bestand opslaan als *.txt en U opent het, dan zal U in kladblok een tekstbestand te zien krijgen, en dus geen HTML-pagina.

Bij het opslaan van het HTML document moet u dus op 2 dingen letten:

1. De keuzelijst die u terugvindt onder het vak waar u een bestandnaam kunt ingeven moet het volgende weergeven: Alle bestanden (*.*)
2. Achter de bestandnaam dient u de extensie .htm of .html te typen. Door 1 van deze extensies toe te voegen geeft u aan dat het programma het bestand moet opslaan als webpagina.

Voorbeeld van het opslaan van een bestand:

opslaan van een html-bestand

U ziet, het bestand wordt opgeslagen onder de naam "Mijn eerste webpagina.html" en onder type "all files" (mag ook *.html of *.htm zijn).
Probeer dit nu eens dat je zeker onder de knie hebt hoe je de gewenste pagina moet opslaan als .html bestand.

Bespreking van de enkele van de belangrijkste textpad-knoppen/handelingen:

De wereldbol-knop "view in web browser": Wanneer je hier op klikt zie je effectief hoe je site eruit ziet. Let wel op: Je moet alles opslaan vooraleer het resultaat te kunnen zien.

Het S-teken "word wrap": Springt automatisch naar een nieuwe lijn moest de code die je schrijft te lang zijn om nog zichtbaar te zijn zonder de balk te verschuiven.

Door op deze knop te klikken bent u in "full screen mode", U hebt dus het hele scherm om je code te tikken nu.

Met deze twee knoppen kunt U een bepaald deel van de code doen gaan inspringen (of terug uitspringen), door dit bij de juiste stukken te gebruiken zal de code veel overzichtelijker worden.

Het kan ook handig zijn wanneer je de gewenste code aan het schrijven bent, om de nummering van het aantal lijnen code te zien, ga daarvoor naar view - line numbers.

Verder zijn knoppen zoals opslaan, open etc. ook belangrijk maar waarschijnlijk voldoende gekend, daar dit de standaard windows procedure is.

Als alles vlot lukt, ga dan naar les 2.

Werken met Tags

Wat zijn Tags?

Tags zijn structuren waarmee men een webpagina kan opmaken. Ze komen altijd tussen <> te staan: bijvoorbeeld: <br>

Hoe worden tags gebruikt?

Tags kan men gebruiken door de tekst die waarop de tag invloed heeft tussen de open-tag en de sluit-tag te plaatsen.
Bijvoorbeeld: <b>deze tekst komt vet te staan<b>, <i>terwijl deze tekst schuin komt te staan</i>
Als men een tag opent, dan is men ook verplicht om die weer te sluiten. Indien een tag niet gesloten wordt, dan krijgt al de daaropvolgende tekst de eigenschap van die tag.
Bijvoorbeeld: <b>de tekst die hier staat blijft vet en alles wat hierna komt zal vet blijven.... </b>nu werd de tag afgesloten en staat de tekst weer normaal.

basisstructuur van een HTML-document

De basisstructuur van een webpagina is de volgende:
<html>
<head>
... hier komt de header-inhoud
</head>
<body>
... hier komt de inhoud van de webpagina
</body>
</html>

We zullen nu elk component apart bespreken:

Header:

De header bevat informatie over het document en bevindt zich tussen de <head> en </head> tags. De header bevat minstens een titel en deze bevindt zich tussen de <title> en </title> tags.
De titel wordt niet op de webpagina zelf getoond, maar wordt bovenaan links in de titelbalk weergegeven.

Voorbeeld:

plaats waar de titel in de browser komt

De code hiervoor gebruikt is simpelweg:
<html>
<head>
<title>Alles tussen de title tags komt hier te staan</title>
</head>
<body>
</body>
</html>

Body:

De body bevat alles (titels, tekst, images, geluiden, formulieren,...) wat de gebruiker te zien krijgt op zijn scherm en wordt doorlopend weergegeven.
Dit doorlopend weergeven kan men met behulp van enkele tags doorbreken. Te gebruiken tags zijn hier:

<br>: nieuwe regel
<p> : nieuwe paragraaf
<hr>: horizontale lijn

Tekst die tussen <pre> tags geplaatst wordt krijgt de opmaak mee die hij had in Textpad
Er zijn ook 6 voorgeprogrammeerde koppen die men kan gebruiken, nl.:

<h1>kop 1</h1>
<h2>kop2</h2>
<h3>kop3</h3>
<h4>kop4</h4>
<h5>kop5</h5>
<h6>kop6</h6>

tip: plak dit eens in je browser en kijk wat er gebeurt.

Er zijn 2 manieren om een tekst op te maken:

1. Fysieke opmaak: hier bepaalt de auteur precies hoe de tekst eruit ziet.
2. Logische tekstopmaak: de auteur bepaalt het type tekst (citaat, tekst met opmaak,...) en de browser bepaalt de precieze weergave.

Voorbeelden van fysieke tekstopmaak:

- <b>vette tekst</b>
- <i>cursieve tekst</i>
- <u>onderstreepte tekst</u>
- <s>doorstreepte tekst</s>
- <tt>typmachine-tekst</tt>
- <sub>subscript</sub>
- <sup>superscript</sup>

Voorbeelden van logische tekstopmaak:

- <big>grote tekst</big>
- <small>kleine tekst</small>
- <em>tekst met nadruk (cursief)</em>
- <strong>tekst met sterke nadruk (vet)</strong>
- <cite>kort citaat (cursief)</cite>
- <blockquote>lang citaat(tab)</blockquote>

Bij het gebruik van deze tags moet er wel op gelet worden dat ze correct genest worden. Met nesten wordt bedoeld dat de opeenvolging in het gebruik van tags gerespecteerd wordt.
<b><u>tekst</u></b>
Voor men een tag kan afsluiten, moeten alle daarinliggende tags ook reeds afgesloten zijn. Dit is wat bedoeld wordt met nesten.

Een voorbeeld van een verkeerde nesting:

<b><i><u>De code van deze zin is verkeerd genest </b></i></u>

Dit voorbeeld is totaal mis. Er geldt immers dat de laatst geplaatste tag eerst gesloten moet worden enzovoort, waarvoor dit de juiste nesting is:

<b><i><u>De code van deze zin is correct genest </u></i></b>

Ter informatie: Enkele van de meest voorkomende bruikbare tags.

<br> line break
<p> nieuwe paragraaf
<hr> horizontale lijn
<h1> Kop 1 </h1> tot <h6> Kop 6 </h6>
<center> centreren </center>
<b> Vette tekst </b>
<i> Cursieve tekst </i>
<u> Onderstreepte tekst </u>
<s> Doorstreepte tekst </s>
<strike> Doorstreepte tekst </strike>
<tt> typmachine-tekst </tt>
<sub> subscript </sub>
<sup> superscript </sup>
<big> grote tekst </big>
<small> kleine tekst </small>
<em> tekst met nadruk (cursief) </em>
<strong> tekst met sterke nadruk (vet) </strong>
<cite> kort citaat (cursief) </cite>
<blockquote> lang citaat (tab) </blockquote>
<marquee> lichtkrant </marquee>

Ongeordende lijsten: (niet genummerd)
<ul>
<li type="disc"> eerste item
<li type="square" > tweede item
<li type="circle" > derde item
</ul>

Geordende lists: (genummerd)
<ol> //ander voorbeeld: <ol type="A">
<li> eerste item
<li> tweede item
<li> derde item
</ol>

//ander voorbeeld: <li type="A" value="3">

Wordt dan:
C. Eerste item
D. Tweede item
E. Derde item

Definitie lijsten:

<dl>
<dt> definitie term
<dd> definitie beschrijving
<dt> tweede definitie term
<dd> tweede definitie beschrijving
</dl>

Probeer enkele tags uit en dan vooral het ordenen van lijsten en ga naar les 3 wanneer je het nesten volledig onder de knie hebt.

Kleuren, lettergroottes & aligneren.

Tot op heden, met alles dat we kennen van vorige lessen kunnen we nu tekst op ons scherm brengen, maar tekst alleen spreekt niet zo tot de verbeelding en de meeste mensen willen een mooie site zien met hier en daar wat kleur erin en met af en toe een ander lettertype dan het standaard browser lettertype.
Vooraleer we vertellen hoe je lettertypes kan aanpassen en kleuren kan gaan veranderen willen we toch even mede delen dat je toch voorzichtig moet zijn met het gebruiken van kleuren, té veel kleuren en té veel verschillende lettertypes geven immers alleen maar een afstotelijke indruk.

Standaard herkend de browser 16 kleuren:

16 standaard webkleuren aqua (#00FFFF)
black (#000000)
blue (#0000FF)
fuchsia (#FF00FF)
gray (#808080)
green (#008000)
lime (#00FF00)
maroon (#800000)
navy (#000080)
olive (#808000)
purple (#800080)
red (#FF0000)
silver (#C0C0C0)
teal (#008080)
yellow (#FFFF00)
white (#FFFFFF)

Wat willen nu die getallen en cijfers naast de kleuren zeggen?

Daar zullen we niet in uitweiden daar dit een html tutorial is voor leken en je daarvoor al enige voorkennis van het werken met kleuren moet hebben, maar nemen we even het volgende voorbeeld:

Stel: je wil de achtergrond kleur van je site gaan veranderen.

In les 2 werd de basisstructuur van een HTML document getoond, je zal zien dat dit patroon steeds zal terug komen, om bij ons voorbeeld te blijven, heb je nu 2 mogelijkheden om je achtergrondkleur te veranderen.

Mogelijkheid 1:

Je wil een zwarte achtergrondkleur, dus plaats je tussen de body tags: bgcolor = "black".

<html>
<head><title> Dit is de Titel van mijn website</title></head>
<body bgcolor = "black" ></body>
</html>

Mogelijkheid 2:

Je wil opnieuw een zwarte achtergrondkleur, dus plaats je tussen de body tags: bgcolor = "#000000".

<html>
<head><title> Dit is de Titel van mijn website</title></head>
<body bgcolor = "#000000" ></body>
</html>

Iedereen zal nu al opgemerkt hebben dat "#000000" nu hetzelfde resultaat geeft als wanneer je "black" schrijft, zoals al eerder gezegd gaan we daar niet dieper op in maar kan je , indien je vindt dat er niet genoeg keuze is tussen de 16 standaardkleuren, wat gaan experimenteren en de nullen gaan vervangen door enkele nummers en cijfers. Misschien bevalt het resulaat U wel.

Veranderen van de tekstkleur.

Is in principe hetzelfde als voor de achtergrondkleur, vb:

<body text="white">

Wil je nu vb. een zwarte achtergrond en een wit tekstkleur wordt dit simpelweg:

<html>
<head>
<title>Titel</title>
</head>
<body bgcolor = "black" text = "white"></body>
</html>


Tekst aanpassen.

Voor het aanpassen van tekst (kleur, lettertype, lettergrootte):

<font> betroffen tekst </font>

<font color="blue"> blauwe tekst </font>
<font face="Times New Roman"> tekst in Times New Roman </font>
<font size="7"> grotere tekst, van de afmeting 7 </font>

Samen wordt dit nu:

<font color="blue" face=" Times New Roman" size="7"> De gewenste tekst</font>

Aligneren.

Enkele voorbeelden:

<h4 align="left"> Deze tekst wordt links uitgelijnd</h3>
<p align= "center"> deze paragraaf wordt gecentreerd </p>

verder nog: "right" & "justify" (=uitgevuld)

Een horizontale lijn trekken:
<hr>

Enkele voorbeelden:

<hr size=" ">
hoogte van de lijn (pixelwaarde)
<hr width=" ">
breedte van de lijn (percentage)
<hr color=" ">
kleur (kleurnaam of -code)
<hr noshade>
verwijdert 3D-effect (geen waarde)
<hr align=" ">
alignment (left, right, center)

Probeer nu eens de zin "Dit is de eerste keer dat een zin in kleur kan plaatsen" in het wit te plaatsen, op een zwarte achtergrond met lettertype Arial en in grootte 6.
Als dit u lukt, ga dan door naar les 4.

Hyperlinks

Wat is een hyperlink?

Een hyperlink is een link naar:

1. Een ander html-document
2. Een plaats binnen hetzelfde document
3. Een pagina op een andere website
4. Een email-adres

In situatie 1:

<a href="pictures.htm">klik hier om naar de foto's te gaan</a>

Het spreekt voor zich dat je de bladzijde waar bijvoorbeeld de foto's staan op je website nu ook effectief moet opslaan onder de naam "pictures.htm" en dat ze onder dezelfde directory moeten opgeslaan worden.
In textpad kies je hiervoor file - new en dan opslaan als "pictures.htm".

In situatie 2:

Stel dat je een pagina hebt met heel veel tekst en je wil af en toe naar boven, naar onder of naar een andere plaats in je document linken, dit kan gebeuren, maar eerst moet je de volgende 2 stappen doorgaan:

1. markering maken
vb: <a name="markering">gemarkeerd punt</a>
2. linken naar markering
vb: <a href="#markering">link</a>

In situatie 3:

Stel: je wilt een link leggen naar deze html-tutorial:

<a href="http://www.htmltutorial.tk">

De "a" staat voor "anchor", het linken dus.
De "href" staat voor Hypertext REFerence. Dat is een korte manier om aan de browser te zeggen waar de link naar toe moet gaan.
Vergeet niet om het http:// protocol op te geven, anders zal de link niet werken!

In situatie 4:

Stel dat je op je website je email adres wilt weergeven, in plaats van gewoon je email adres te plaatsen kan je het volgende gaan doen:

<a href="mailto: myself@hotmail.com"> Schrijf me een email!</a>

"mailto:" zorgt ervoor dat het daarna komende emailadres als een emaillink wordt gezien en niet als een gewone link.
Wanneer je hier nu op klikt komt er bij de bezoeker van je website nu automatisch een nieuw emailvenster op zijn scherm met je email adres erop.

"Schrijf me een email!" staat nu als tekst op de pagina, wanneer je erop klikt kom je automatisch in outlook terecht waar het gekozen emailadres nu al in het "Aan-vak" staat.

Oefen nu vlot op alle situaties. Wanneer je een hyperlink kan leggen naar alle mogelijke situaties kan je verdergaan naar les 5.

Figuren

Dit is waarschijnlijk een les waar velen onder jullie naar uitkijken, want door het invoegen van enkele figuren doorbreek je het soms saaie patroon van de tekst en kan je wat fleur geven aan je website.
Deze les 5 geeft de basis weer omtrent werken met images of figuren, in les 6 gaan we daarop verder.

We nemen het voorbeeld :

<img src="foto.jpg">

Figuren of images worden ingevoegd met het <img>-element, dit zorgt ervoor dat de browser weet dat er hier een figuur moet komen.

<img> heeft ook minimaal het attribuut src nodig, src staat voor "source" wat bron betekent in het Nederlands. Dit is een commando binnenin een commando, het vertelt de broswer waar hij moet zoeken om de figuur te vinden.

"foto.jpg" is de naam van de figuur.

Enkele zaken waar je zeker moet op letten :

- Uiteraard moet je het figuur onder dezelfde directorie plaatsen als waar je U webpagina's hebt opgeslaan, je kan dus niet gewoon een foto invoegen die bijvoorbeeld onder C:\Mijn foto's staat wanneer je al je website documenten opslaat onder C:\Mijn websites.

- Mischien vragen enkelen van jullie zich wel af wat die .jpg dan wel mag betekenen ?

Wel, .jpg is een formaat waaronder je foto's kan opslaan, zo heb je bijvoorbeeld ook nog .gif, wanneer je dus een foto hebt die je wilt op je website plaatsen maar je weet niet of het een .jpg, een .gif (of nog een andere extensie) is, kan je dat gemakkelijk weten door rechts te klikken en dan eigenschappen te kiezen, als de foto op je harde schijf staat kan je natuurlijk altijd gaan kijken in de verkenner.

Je kan nu dus al een figuur op je website plaatsen, wanneer je browser een rood kruisje weergeeft in plaats dan de gewenste figuur is er iets misgelopen, controleer in dat geval of je geen schrijffout hebt gemaakt of dat je figuur wel onder de juiste directorie is opgeslaan.

Je hebt waarschijnlijk wel eens een website bezocht waar er een tekst verschijnt wanneer je met de muis over een figuur gaat, dit heet alternatieve tekst en dit kan je heel gemakkelijk invoeren, om maar eens bij het voorbeeld van daarnet te blijven, wordt dit dan :

<img src="foto.jpg" alt="Dit is mijn foto">

"Dit is mijn foto" verschijnt nu wanneer je met je muis over de figuur gaat.

Misschien heb je ergens een figuur staan die je zeker op je website wilt plaatsen, maar het figuur is veel te groot (of veel te klein), je kan dus deze waarden aanpassen en dit gebeurt als volgt:

<img src="foto.jpg" height="200" width="350">

Waarbij height de hoogte van het figuur is en width de breedte, de waarden 200 en 350 zijn pixelwaarden, je kan ook de waarden in % gaan invullen. Dit berust op een persoonlijke voorkeuze.

Opgelet: Wanneer U figuren te veel zal gaan vergroten kan er een kwaliteitsverlies optreden dus hou hier rekening mee.

Een border is de rand rondom een figuur, wanneer je geen rand wilt plaats je:

<img src="foto.jpg" border="0">

rand rond figuur = 0

Wanneer je wel een rand wilt plaats je:

<img src="foto.jpg" border="1">

rand rond figuur = 1

Wanneer dit vlot lukt ga dan door naar les 6.

Figuren advanced & lijsten met attributen

Wanneer les 5 tot een goed einde gebracht is, bent U nu al in staan om figuren op je website te plaatsen, wie al wat geprobeerd heeft zal gemerkt hebben dat het noodzakelijk zal zijn om te vertellen aan je browser waar de tekst zich moet bevinden ten opzichte van het figuur, dit gebeurt als volgt:

<img src="Mijnfoto.jpg" align="top">
<img src="Mijnfoto.jpg" align="middle">
<img src="Mijnfoto.jpg" align="bottom">

Top tekst

Midden tekst

Bottom tekst

Het align attribuut kent ook de waarden "left" en "right".

Let op: De tekst naast de figuur loopt wel door tot de ruimte vol geraakt, door het plaatsen van:<br clear="all"> wordt alles wat volgt dan op de volgende lege regel gezet

Andere mogelijke waarden voor clear-attribuut: none, left, right & all.

Ruimte rond de afbeeldingen:

Met het hspace-attribuut kan je de afstand links en rechts van de figuur bepalen, bijvoorbeeld:

<img src="Mijnfoto.jpg" hspace="20">

Met het hspace-attribuut kan je de afstand boven en onder van de figuur bepalen, bijvoorbeeld:

<img src="Mijnfoto.jpg" vspace="20">

Markering in unordered lists:

<ul type="circle">
<li>eerste item
<li>tweede item
<li>derde item
</ul>

Geeft als resultaat:

voorbeeld lijst 1

Andere mogelijkheden: disc, square, circle (probeer nu eens een lijst te maken met een disc voor het eerste item, een square voor het tweede item en een circle voor het derde item).

Markering in ordered lists:

<ol>
<li type="A" value="3">eerste item
<li type="A">tweede item
<li type="A">derde item
</ol>

Dit wordt nu:

voorbeeld lijst 2

Lijsten met figuren:

Van zelfsprekend kan je bijvoorbeeld ook figuren gebruiken als opsommingstekens voor lijsten.
Een voorbeeld:

<dl>
<dd><img src="logo1.jpg" width="15" height="15"> LOGO 1

<dd><img src="logo2.jpg" width="15" height="15"> LOGO 2

<dd><img src="logo3.jpg" width="15" height="15"> LOGO 3
</dl>

Dit wordt dan:

voorbeeld lijst 3

Lijsten met hyperlinks:

<ul>
<li><a href="http://www.tutorialhtml.tk"> Html tutorial </a>
<li ><a href="http://www.mct.nu"> Mct Pagina </a>
<li ><a href="http://www.pih.be"> Hogeschool West Vlaanderen dept. Pih </a>
</ul>

Dit wordt dan:

voorbeeld lijst 4

Probeer nu zelf eens de combinatie van de 2 bovenstaande, m.a.w. 3 hyperlinks naar je favorite website met hun icoon ervoor.
Wanneer dit U perfect lukt, kan je verdergaan naar les 7.

Tabellen

Tabellen is iets dat veel en graag gebruikt wordt, met tabellen kun je immers een heleboel zaken overzichtelijker weergeven.
Een tabel aanmaken in html vergt wat inspanning omdat je met enkele zaken rekening moet houden, maar eenmaal je doorhebt hoe het werkt zal je er des te graag mee werken.

Eenvoudige tabellen:

Met het element <table> kan je een tabel invoegen, met </table> sluit je de tabel terug af.

Nu, een tabel bestaat uit een x aantal rijen en een x aantal kolommen, dus zal je ook deze moeten gaan vermelden.

Een rij wordt gedefinieerd door het <tr> element.
(tr staat voor table row).
De cellen in een rij worden gedefinieerd door het <td> element.
(td staat voor table data).
Het spreekt voor zich dat hier opnieuw alles moet afgesloten worden.

Een voorbeeld:

<table>
<tr>
<td>R1K1</td>
<td>R1K2</td>
</tr>
<tr>
<td>R2K1</td>
<td>R2K2</td>
</tr>
</table>

Dit geeft als resultaat:

voorbeeld tabel 1

U ziet, alles staat in tabelvorm, maar er is nog geen Tabelopmaak:

Border:

Standaard wordt er geen rand weergegeven, het border attribuut bepaalt nu de dikte van het kader van de tabel (de buitenrand).

Bijvoorbeeld:

<table border="5"></table> (de waarde is in pixels)

Ons voorbeeld van daarnet zal er nu zo gaan uitzien:

voorbeeld tabel 2

Non breaking space:

Een cel waar geen enkel karakter in voorkomt, wordt niet weergegeven, om dit te voorkomen plaatsen we in lege cellen een "non-breaking space".
"&nbsp;" = een leeg karakter (denk aan een spatie).

Width & height :

Met het width attribuut kan de breedte van een tabel worden bepaald, met het height attribuut kan de hoogte van een tabel worden bepaald.

Voorbeeld:

<table width="5" height="5"></table>
De waarde kan je opnieuw terug opgeven in pixels of in percentage.

Align :

Met het align attribuut kan de horizontale uitlijning van de tabel op de pagina bepaald worden. Mogelijkheden:
-Left
-Center
-Right

Een voorbeeld :

voorbeeld tabel 3

Caption :

Met het caption element definieer je een bijschrift bij een tabel.
Attribuut: align (top, bottom, left, right).

Blijven we bij ons voorbeeld van daarnet wordt dit:

voorbeeld tabel 4

De code hiervan is :

<table border ="3" align="left" >
<caption align="top">Dit is het bijschrift</caption>
<tr>
<td>Deze kolom wordt links uitgelijnd</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>

Cellspacing :

Met het cellspacing attribuut wordt de ruimte tussen de cellen van een tabel en de ruimte tussen de buitenste cellen en de tabelrand vastgelegd.

Voorbeeld:

voorbeeld tabel 5

<table cellspacing="10"> </table>
De waarde "10" is hier in pixels.

Cellpadding :

Met het cellpadding attribuut wordt de afstand tussen de rand van een cel en de inhoud vastgelegd.

Voorbeeld:

voorbeeld tabel 6

<table cellpadding="30"></table>
De waarde "30" is hier in pixels.

Bgcolor :

Met het bgcolor attribuut kan de achtergrondkleur (mogelijkheden in kleuren: zie les 3) van de tabel bepaald worden.

Voorbeeld:

<table bgcolor="green"></table>

Bordercolor :

Met het bordercolor attribuut kan de kleur van de randen van de tabel bepaald worden.

Voorbeeld:

<table bordercolor="yellow"></table>

Bordercolordark :

Met het bordercolordark attribuut kan de kleur van de donkere delen van de randen van een tabel bepaald worden.

Voorbeeld:

<table bordercolordark="black"></table>

Bordercolorlight :

Met het bordercolorlight attribuut kan de kleur van de lichte delen van de randen van een tabel bepaald worden.

Voorbeeld :

<table bordercolorlight="red"></table>

Kolomtitels :

Met het <th> element definieer je een cel als rij- of kolomtitel. De inhoud van zo'n cellen wordt vet afgedrukt en gecentreerd.
Het th element komt in de plaats van het td element.

Voorbeeld:

<table border="2">
<tr>
<th>Titel 1</th>
<th>Titel 2</th>
<th>Titel 3</th>
</tr>

<tr>
<td>Rij 1 kolom 1</td>
<td>Rij 1 kolom 2</td>
<td>Rij 1 kolom 3</td>
</tr>

<tr>
<td>Rij 2 kolom 1</td>
<td>Rij 2 kolom 2</td>
<td>Rij 2 kolom 3</td>
</tr>
</table>

Dit wordt:

voorbeeld tabel 7

Tekst uitlijnen in cellen :

Met het align attribuut kan de horizontale uitlijning van de inhoud van een cel bepaald worden.

<td align="left"></td> voorbeeld tabel 8
<td align="right"></td>
<td align="center"></td>

Met het valign attribuut kan de verticale uitlijning van de inhoud in de cellen van de rij bepaald worden.

Voorbeeld :

<td valign="top"> </td> voorbeeld tabel 9
<td valign="middle"> </td>
<td valign="bottom"> </td>

Tekst uitlijnen van een rij :

De align en valign attributen kunnen ook toegevoegd worden aan het <tr> element als je voor een volledige rij dezelfde uitlijning wenst te bekomen.

<tr align="right" valign="bottom">..</tr>

Grootte van cellen :

Met het width attribuut kan de breedte van de cel worden bepaald.
Met het height attribuut kan de hoogte van de cel worden bepaald.

<td width="10" height="5"> ...</td>

De waarde kan je invlullen in pixel of in percentage.
De grootste waarde bepaalt telkens de breedte van een kolom of de hoogte van een rij.

Bg color in een cel :

Met het bgcolor attribuut kan de achtergrondkleur van een cel <td> bepaald worden.
De uitkomst van dit cel-attribuut gaat boven hetgeen eventueel gedefinieerd is voor de rij, de rijgroep, of de tabel, waartoe de cel behoort.

Voorbeeld:

<td bgcolor="red"> </td>

Bg color van een rij :

Met het bgcolor attribuut kan de achtergrondkleur van de cellen in een volledige <tr> bepaald worden.
De uitkomst van dit rij-attribuut gaat boven hetgeen eventueel gedefinieerd is voor de tabel, waartoe de cel behoort.

Voorbeeld:

<tr bgcolor="yellow"> </tr>

Wanneer U tabellen volledig onder de knie hebt, ga dan naar les 8.

Frames

Wat is een frame?

Jullie kennen allemaal een normaal venster, het ziet er uit als volgend figuur:

normaal venster

Nu, met frames zullen we dit documentvenster gaan opdelen in meerdere vensters.
In elk venster wordt een nu aparte html-pagina opgeladen en deze html-pagina's kunnen onafhankelijk van elkaar vervangen worden.

Voorbeeld van het werken met frames :

pagina met frames

Hier hebben we nu nodig :

-1 frameset-pagina die de frames opdeelt
-1 pagina per venster :

1 pagina met inhoud frame 1
1 pagina met inhoud frame 2
1 pagina met inhoud frame 3

De frameset pagina :

De frameset-pagina is een html-pagina die i.p.v. een body-gedeelte, een frameset-gedeelte heeft.

Voorbeeld van een normale html-pagina :

<html>
<head> </head>
<body>
</body>
</html>

Voorbeeld van frameset-pagina :

<html>
<head></head>
<frameset>
</frameset>
</html>

Definieren van het aantal rijen (rows)

In pixels of %.

Voorbeeld :

<frameset rows="15%, * ,15%">

pagina met frame rijen

Definieren van het Aantal kolommen (cols)

In pixels of %.

Voorbeeld :

<frameset cols="15%, * ,15%">

pagina met frame kolommen

Frameset met frames :

Binnen een <frameset> worden de verschillende vensters gedefinieerd met de <frame> tag.

<frame> moet minstens volgende eigenschap hebben:

-src : bronbestand dat in die frame moet geladen worden

voorbeeld :

<frame src="inhoudvanframeA.htm">
<frame src="inhoudvanframeB.htm">

verschillende framesets

Basiscode van een frameset :

<html>
<head>
<title>titel</title>
</head>
<frameset cols="30%,70%">
<frame src="linksframe.htm">
<frame src="rechtsframe.htm">
</frameset>
</html>

Dit wordt dan :

frame voorbeeld met gelinkte pagina's

Randen van frames :

Randen van frames zijn standaard in 3D, nattuurlijk kan je deze gaan aanpassen:

Bijvoorbeeld, een frame zonder randen wordt :

<frameset frameborder ="0" border="0" framespacing ="0" >

Moest U de rand toch willen behouden, maar je wilt hem veranderen van kleur kan dit op de volgende manier :

<frameset bordercolor="red">

Overzicht van de frame eigenschappen:

Frameborder: 0 = vlakke rand, 1 = 3D-rand

Bordercolor: Kleurnaam of kleurnummer (#......)

Marginwidth: afstand in pixels tussen inhoud van frame en linker- rechterranden.

Marginheight: afstand in pixels zijn tussen inhoud van frame en boven- en onderkant van het frame.

Noresize : balk tussen frames is vast.

scrolling : schuifbalken
-"yes" = schuifbalken altijd weergegeven.
-"no"= geen schuifbalken.
-"auto" = browser kiest zelf.

Tot hier de les over frames, schakel nu door naar les 9.

Formulieren

Proficiat, U hebt het al tot de laatste oefening gebracht.
In deze les komen formulieren aan bod, U hebt ze zeker al eens gezien op een site, en indien niet neem dan eens vlug een kijke op deze site bij "contact".

Waarvoor worden deze formulieren nu gebruikt?
Antwoord:
Om bezoekers van de site de mogelijkheid te bieden om informatie in te voeren en te versturen.

Enkele voorbeelden:

-geven van een reactie
-aanmelden als abonnee
-invullen van enquête
-plaatsen van bestelling
-beantwoorden van vragen

Formulieren:

2 aspecten:

-opmaak van formulier
-verwerking van gegevens:
-doorsturen naar e-mail
-doorsturen naar script

Formulieren worden begrensd door de <form>-tag:
<form><!-- inhoud van het formulier --></form>

Verschillende soorten velden:

Tekstvelden:

Voorbeeld:

voorbeeld van een tekstveld

<input type="text" name="veldnaam" size="20" maxlength="30" value="inhoud veld">

Waarbij:

"Type" het type veld is, "name" de veldnaam, "size" de grootte van het veld, "maxlength" het maximaal aantal karakters, en "value" de tekst is die in het veld staat.

Een paswoordveld:

<input type="password" name="paswoord" size="8" maxlength="8">

De ingetypte tekst wordt nu door * weergegeven.

Keuzerondjes:

<input type="radio" name="browser" value="K1">Keuze1<BR>
<input type="radio" name="browser" value="K2" checked>Keuze2<BR>

Dit wordt dan:

voorbeeld van keuzerondjes

Het "name" attribuut groepeert samenhorende radio buttons.

Aankruisvakjes:

Deze checkboxes worden gebruikt wanneer de bezoeker meerdere mogelijkheden tegelijk kan kiezen.

Voorbeeld:

voorbeeld van aankruisvakjes

<input type="checkbox" name="fruit" value="keuze 1">Keuze 1
<input type="checkbox" name="fruit" value="Keuze 2">Keuze 2

Knoppen:

Voorbeeld:

voorbeeld van knoppen

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

Tekstvakken:

Bedoeling van een tekstvlak: Een onbeperkte hoeveelheid tekst invoeren.

Voorbeeld:

voorbeeld van een textarea

<textarea name="tekstvak" rows="4" cols="50">Hier mag je de tekst typen </textarea>

Keuzelijsten:

Voorbeeld:

voorbeeld van een keuzelijst

<form>
Geef aan welk besturingssysteem je gebruikt:<BR><BR>

<select name="besturingssysteem">

<option value="w95">Windows 95</option>
<option value="w98">Windows 98</option>
<option value="w2000">Windows 2000</option>
<option value="wXP">Windows XP</option>

</select>
</form>

Extra attributen bij select:

-size="4": bepaalt hoeveel keuzes zichtbaar zijn.
-multiple: bepaalt aantal mogelijke keuzes.

Extra attributen bij option:
-value: waarde die naar de server zal gestuurd worden.
-selected: keuze die als standaard zal getoond worden.

Nu, deze zaken aanmaken is één ding, maar nu moeten de ingegeven gegevens nog verwerkt worden.
De gegevens worden doorgestuurd als 1 lange lijn gegevens met scheidingstekens dus moeten deze gegevens eerst opgesplitst worden.

Je kan deze gegevens automatisch doorsturen naar je email adres maar dit werkt niet zo vlot (de surfer moet naast zijn broswer ook dezelfde emailclient gebruiken).

Oplossing hiervan :

Gegevens doorsturen naar een cgi-script.

Zie volgende link voor meer uitleg :

http://cgi.resourceindex.com/Remotely_Hosted/Form_Processing

Verwerking van formgegevens:

<form>
attributen:
-method
get
post
-action
-target
-name

Bespreking :

<form method="..."> :

get
-De gegevens worden aan adres gekleefd en in 1 keer doorgestuurd
-Alleen ascii-karakters worden toegelaten dus geen é of ï etc.

post
-Alle info wordt uit het formulier opgenomen in de body van een bericht en verzonden naar adres bij action-attribuut
-ook non ascii-karakters toegelaten
-te gebruiken bij action=mailto:...

<form action="...">

MOET altijd worden toegevoegd
mailto:
-mailto:naam@yahoo.com
-subject kan ook toegevoegd worden (mailto: naam@yahoo.com?subject=onderwerp)
http://www.provider.be/cgi-bin/form.cgi
-verwijzing naar cgi-script

<form target="...">

<form target="naam">

Dient om de respons van een formulier in een bepaald frame weer te geven, als de naam niet bestaat wordt een nieuw venster geopend.

Kunnen ook gebruikt worden:

-<form target="_top">
-<form target="_parent">
-<form target="_self">
-<form target="_blank">

<form name="...">

Kan gebruikt worden om een naam aan een formulier te geven zodat je vanuit het script ernaar kunt verwijzen

Formulier naar e-mailadres :

<form method="post" action="mailto:naam@yahoo.com" enctype="text/plain">
...</form>

Opgepast: "text.plain" moet zeker meegedeeld worden, anders worden de gegevens niet of niet juist doorgestuurd.

Subject meesturen :

<form method="post" action="mailto:naam@yahoo.com? subject=Vragenformulier HTML" enctype="text/plain">...</form>

Andere formuliervelden:

<input type="hidden">
-onzichtbaar veld waarvan de inhoud wel wordt mee verzonden
<input type="file">
-mogelijkheid om een file mee te sturen.
<form enctype="multipart/form-data">
<input type="image" src="knop.gif">
-image als submit-knop

Zo, dat was het. Les 9 was zeker de moeilijkste van al, maar maak toch dat je zeker raad weet met "formulieren". Je kan je kennis over de ganse cursus testen in les 10. Veel succes!

Eindoefening.

Welkom in de laatste les, hier kan je de verworven kennis testen door middel van één grote oefening. De bedoeling is dat je aan de hand van screenshots de website probeert na te maken. Indien je iets niet weet of je twijfelt kan je gemakkelijk via de procedure "Beeld - bron" de gewenste code gaan bekijken. Klik hier om de website te bezichtigen. Klik hier om de nodige figuren te downloaden of kopier ze op de site zelf.

Home:

De site bestaat uit 3 frames, in de bovenframe plaatst U de 2 figuren "html tutorial.jpg" & "htmlin10lessen.jpg" ( let op centrering etc).
In het linkerframe komt de Navigatie, je komt standaard terecht op "Home" , maar wanneer je klikt op "Kleuren en lettergrootes", "Hyperlinks", "figuren" of "Tabellen" moet telkens deze pagina in het derde frame verschijnen. Hetzelfde gebeurt met de 2 iconen, die respectievelijk voor "Home" en "Contact" staan.
Zorg ervoor dat je de schuifbalk te zien krijgt op je home pagina.
De achterondkleur van de home pagina alsook alle andere paginas uigezonderd de "kleuren en lettergroottes pagina" is "F2F2F2".

screenshot van de homepage

Kleuren en lettergroottes:

Maak de opmaak van het screenshot na, het lettertype van de eerste paragraaf is Arial, het lettertype van de tweede paragraaf is Courier new. Het woord "HTML" in de eerste paragraaf moet vet en rood komen.
Tussen de 2 paragrafen moet dezelfde horizontale streep komen alsop de screenshot. Kleur: "Silver".
In de tweede pargraad is het de bedoeling dat alle cijfers schuin komen te staan in een groene kleur.

screenshot van de kleurpagina

Hyperlinks:

Maak opnieuw de opmaak na, U kan de uitleg zelf aflezen op de screenshots, alleen moet U nog "ga terug naar boven" plaatsen op de pagina en wanneer U hier dan op klikt moet U effectief terug helemaal naar boven worden gelinkt (zie screenshot 2).

screenshot hyperlinks

screenshot hyperlinks 2

Figuren:

Linksboven plaatst U de 7 figuren ("Logo1.jpg tot logo7.jpg"). Wanneer u met de cursor over één van de figuren gaat verschijnt er telkens als alternative tekst welk logo het is.
Dan plaatst U de figuren opnieuw op de pagina, alleen heeft figuur 1 een hoogte en een breedte van 25 en geen rand. Figuur 2 heeft een hoogte en breedte van 50 en een rand van 1. U gaat zo verder tot je bij figuur 7 een hoogte en een breedte van 175 uitkomt met een rand van dikte 6. Er verschijnt telkens terug alternative tekst.
Ga ook eens na wat gezegd werd in de les over figuren, wat er gebeurt met een figuur als je hem veel groter maakt dan hij oorspronkelijk is. (Kwaliteitsverlies).

screenshot figuren

Tabellen:

U ziet dat de tabellen de kleur hebben van de belgische driekleur, maak deze opmaak voledig na.

screenshot tabellen

Contact:

Maak het volgende contactformulier na:

screenshot contactformulier

Zo, dat was het.
Als deze oefening geen probleem was voor U dan wil dit zeggen dat je de lessen perfect onder de knie hebt. U bent nu nog één stap verwijdert van het maken van een eigen website. Als U nu nog wilt weten hoe je dan je website effectief op het net kan plaatsen wijzen we U graag door naar het onderdeel "software" waar U het werken met FTP wordt uitgelegd.

Alvast bedankt voor de tijd dat je op onze site hebt doorgebracht, indien mogelijk gelieve dan de kleine enquete in te vullen in het onderdeel "contact'".

Steven & Jonah.