BASISCURSUS HTML

Deze cursus behandelt heel in het kort het maken van een website met behulp van HTML. HTML vormt de basis voor alle sites. Vanaf de grond af opbouwen van sites gebeurt nauwelijks meer. In het algemeen wordt gebruik gemaakt van CMS-pakketten als Joomla om sites in te richten en van inhoud te voorzien. Wil men echter aanpassingen plegen aan de site, dan is basiskennis van HTMl, CSS, PHP en SQL noodzakelijk. Dit artikel voorziet daar, voor wat betreft HTML, in.
Diverse elementen van HTML komen kort aan de beurt. De cursus geeft een algemeen idee hoe één en ander werkt. Voor meer details zie de hoofdstukken HTML 4 en HTML 5.

HOOFDSTUKINDELING

0 Inleiding
1 Een site maken
1.1 Eerst ontwerpen, dan maken
1.2 Wat is HTML?
1.3 HTML-paginastructuur
1.4 Tekstindeling
1.5 Je eerste koppelingen
2 Je site van afbeeldingen voorzien
2.1 Afbeeldingsindelingen die op het web worden gebruikt
2.2 Afbeeldingen opnemen in webpagina's
3 Je site publiceren
4 Aanmelden van een site

0. Inleiding

Terug naar de top

Met behulp van deze cursus maak je in vier eenvoudige stappen kennis met het maken van websites. Je hebt ongeveer 10 tot 20 minuten nodig om de hele zelfstudie te lezen. Als je klaar bent, weet je hoe je zelf pagina's kunt maken en illustreren, hoe je ze op internet kunt zetten en hoe je ze overal bekend kunt maken. Inhoud van de cursus:

  1. Een site maken
    Leer de basisbeginselen van HTML en begin met het maken van je eerste webpagina's.
  2. Je site van afbeeldingen voorzien
    Ontdek de verschillende soorten afbeeldingen die op het web worden gebruikt en hoe je ze op je website kunt gebruiken.
  3. Je site publiceren
    Leer hoe je je site op internet kunt zetten, zodat iedereen hem kan bekijken.
  4. Aanmelden van een site
    Leer hoe je je site kunt aanmelden bij de belangrijkste adreslijsten en zoeksystemen op het web.

1. Een site maken

Terug naar de top

Voor het maken van je eerste site moet je de taal van het web leren, HTML. Hiermee kun je je site opmaken. Maar om te beginnen is het belangrijk dat je de opbouw van je site bepaalt.

In dit hoofdstuk:
1.1 Eerst ontwerpen, dan maken
1.2 Wat is HTML?
1.3 HTML-paginastructuur
1.4 Tekstindeling
1.5 Je eerste koppelingen

1.1 Eerst ontwerpen, dan maken

Terug naar de top

Pak potlood en papier en bepaal wat je allemaal op je site wilt hebben. Teken elke pagina op het papier en teken alle koppelingen erbij.


Afbeelding 1: Voorbeeld van de structuur van een site



Bij het ontwerpen van een site kun je het beste beginnen met de startpagina, omdat die pagina het eerste is wat bezoekers zien als ze op je site komen. Alle onderwerpen van de site moeten toegankelijk zijn vanaf deze startpagina. Op alle andere pagina's moet een koppeling staan waarmee je terug kunt naar de startpagina. Deze eerste pagina moet index.htm of index.html heten. Dit is een algemeen gebruik op internet. Als bezoekers de URL van je site typen als http://www.koor-duende.nl, worden ze doorgestuurd naar http://www.koor-duende.nl/index.htm.

Opmerking
De juiste extensie. De twee extensies .htm en .html mogen allebei worden gebruikt. Zorg er wel voor dat je in koppelingen de juiste extensies gebruikt.
Voor de andere pagina's van de site zijn er geen verplichte namen, maar er zijn wel een paar dingen waar je op moet letten. Vermijd om te beginnen spaties, letters met accenten en andere vreemde tekens. Buitenlandse bezoekers kunnen die tekens misschien niet gebruiken. Gebruik alleen de 26 letters van het alfabet en een paar cijfers. Gebruik bovendien alleen kleine letters voor de naam van alle pagina's, afbeeldingen en andere bestanden. Op die manier voorkom je verwarring bij het maken van koppelingen.

Waarschuwing
Vragen om fouten. Sommige hostservers maken ook verschil tussen een bestand met de naam MIJNPAG.HTML en een ander bestand met de naam mijnpag.html. Als je alleen kleine letters gebruikt, voorkom je veel fouten.

1.2 Wat is HTML?

Terug naar de top

Nu we wat richtlijnen hebben vastgelegd, kunnen we met het echte werk beginnen. Strikt genomen is HTML geen programmeertaal. Het is meer een soort presentatietaal. Je gebruikt HTML om je pagina's aantrekkelijker te maken, door er afbeeldingen, koppelingen en dergelijke aan toe te voegen. Bovendien kun je de opmaak van de tekst verbeteren door lettertypen en andere kenmerken, zoals vet, cursief en onderstreept, te definiëren.

HTML bestaat uit codes die een bepaalde syntaxis hebben en die horen bij een bepaalde opmaakstijl ofeen object. Je kunt de codes makkelijk herkennen, omdat ze altijd tussen punthaken staan (< en >). Als je bijvoorbeeld tekst cursief wilt maken, gebruik je de code <i>. Voor het invoegen van een afbeelding gebruik je <img>.

Opmerking
Hoofdletters of kleine letters? In HTML 4.01 maakte het niet uit of codes in hoofdletters of kleine letters worden geschreven. Ze worden allebei ondersteund. Tegenwoordig, met de introductie van XHTML, schrijft men kleine letters voor.
In HTML worden twee soorten codes gebruikt:

  • Opmaakcodes
    Deze codes worden altijd in paren gebruikt: een openingscode zoals <i>, en een sluitcode, die altijd begint met een schuine streep /, zoals </i>. Een tekst die cursief moet worden, wordt bijvoorbeeld als volgt gecodeerd: <i>italic</i>; het resultaat is: italic.
  • Invoegcodes Met deze codes kun je verschillende soorten objecten invoegen in je pagina, zoals afbeeldingen, geluiden, filmpjes, enzovoort. Ze worden alleen gebruikt, in HTML 4.01 zonder sluitcode en in XHTML met intern een sluitcode, maar er worden wel kenmerken aan toegevoegd. Als je bijvoorbeeld een afbeelding wilt invoegen uit een bestand in de submap bestanden met de naam basis-2.jpg, gebruik je de code <img> in combinatie met het kenmerk src. Je krijgt dan het volgende: <img src="/algemeen/bestanden/basis-2.jpg" /> met dit resultaat:

Je weet nu meer over de syntaxis van HTML. Maar er is nog iets waar je over moet denken voordat je je eerste pagina gaat schrijven. Welke software moet je gebruiken voor het maken van webpagina's?
Gebruik voor je eerste probeersels een eenvoudige teksteditor: Kladblok in Windows of SimpleText op Macintosh-systemen. Vergeet niet je pagina's op te slaan met de extensie .htm of .html. 

1.3 HTML-paginastructuur

Terug naar de top

Voorzichtig! Je kunt niet lukraak schrijven voor het web. Je pagina's moeten voldoen aan de basisstructuur van een HTML-document.
<html>
<head>
Hier staat de kop van de pagina
<title>
Hier staat de title van de pagina
</title>
</head>
<body>
Hier staat de body / inhoud van de pagina
</body>
</html>

Elk van de codes die in deze uitgeklede HTML-pagina worden gebruikt, heeft een bepaalde rol.

  • <html> en </html> markeren het begin en eind van de pagina.
  • <head> en </head> markeren het kopgebied van de pagina. Dit gedeelte van de pagina bevat bepaalde belangrijke informatie, zoals de naam van de maker, de titel van de pagina en bijvoorbeeld de gegevens die nodig zijn voor het aanmelden van de site. Deze informatie wordt niet weergegeven op de site.
  • <title> en </title> markeren de titel van de pagina. Deze titel wordt weergegeven in de titelbalk van de browser van de gebruiker.
  • <body> en </body> markeren het hoofdgedeelte van de pagina: alle elementen die in het browservenster worden weergegeven. In dit gedeelte zet je de afbeeldingen, animaties en natuurlijk de tekst.

Al je HTML-pagina's moeten voldoen aan deze structuur, anders kunnen ze niet worden geïnterpreteerd door de browsers van de bezoekers van je site.

1.4 Tekstindeling

Terug naar de top

We kunnen nu beginnen met de inhoud van de pagina. Tekst weergeven is heel gemakkelijk. Je hoeft de tekst alleen maar tussen de codes <body> en </body> op de pagina te zetten. Sla je werk op in een bestand met de extensie .htm of .html en open dat bestand in je internetbrowser om te zien hoe je tekst eruit ziet. Heb je het gezien? Zo makkelijk kan HTML zijn! Maar je kan de opmaak van je tekst verbeteren met wat extra codes. Wil je misschien wat tekst vet (bold) maken? Dan zet je het gedeelte dat je wilt markeren tussen het codepaar <b>.
Bijvoorbeeld:

<b>Ik kan heel goed relativeren.</b>
Nou ja, enigszins.
[Waarom zeg je niks? - Rikkert Zuiderveld]
Dit wordt als volgt weergegeven:
Ik kan heel goed relativeren. Nou ja, enigszins. [Waarom zeg je niks? - Rikkert Zuiderveld]

Op dezelfde manier kun je met de codes <i> en <u> tekst cursiveren of onderstrepen. Hetzelfde voorbeeld:
<b>Ik kan heel goed relativeren.</b>
<i>Nou ja, enigszins.</i>
[<u>Waarom zeg je niks?</u> - Rikkert Zuiderveld]
Deze keer wordt de tekst als volgt weergegeven:
Ik kan heel goed relativeren. Nou ja, enigszins. [Waarom zeg je niks? - Rikkert Zuiderveld]

Aan deze drie codes heb je meestal genoeg voor de opmaak van je teksten. Het is je misschien al opgevallen dat de regeleinden in de tekst niet in de browserweergave van de pagina voorkomen. Dit komt doordat HTML deze regeleinden niet interpreteert, of beter gezegd omdat HTML ze interpreteert als een gewone spatie. Als je een regeleinde wilt afdwingen, gebruik je de code <br />, op de volgende manier:

"<b>Ik kan heel goed relativeren.</b>"<br />
<i>Nou ja, enigszins.</i><br />
[<u><b>Waarom zeg je niks?</b></u> - Rikkert Zuiderveld]
De weergave in de browser is nu meer zoals we hadden verwacht en de regeleinden worden weergegeven:
"Ik kan heel goed relativeren."
Nou ja, enigszins.
[Waarom zeg je niks? - Rikkert Zuiderveld]

In het vorige voorbeeld heb je gezien dat codes kunnen worden genest. Je kunt een tekst dus bijvoorbeeld zowel vet als cursief maken door de codes <b> en <i> te combineren.
Hieronder volgt een samenvatting van de codes die handig zijn voor het opmaken van tekst.

Code Beschrijving Gebruik
<b> Vette opmaak Bold text
<i> Cursieve opmaak Italicised text
<u> Onderstreepte opmaak Underlined text
<font> Gebruik van letterkleur en -typen Arial
<table> Een tabel invoegen.  
<tr> Een tabelregel invoegen  
<td> Een cel in een tabelregel invoegen  
<ul> Een geordende (genummerde) lijst invoegen  
<ol> Een niet-geordende lijst (met opsommingstekens) invoegen  
<li> Lijstonderdeel  

Voor meer en uitgebreidere informatie over de vorige onderdelen: Zie de andere pagina's van HTML 4.

1.5 Je eerste koppelingen

Terug naar de top

Koppelingen vormen de kern van websiteontwerpen, omdat bezoekers ermee van de ene pagina naar een andere kunnen springen. Zoals elk onderdeel van een pagina wordt een koppeling gedefinieerd met een code: <a> (anchor). Deze code omsluit de tekst die of het object dat dient als koppeling, maar heeft ook een kenmerk, href, waarvan de waarde het doeladres van de koppeling aangeeft.
Een koppeling naar de website van Microsoft zou er dus zo uitzien: <a href="http://www.microsoft.com">Microsoft</a>
Dit heeft het volgende resultaat:
Microsoft
Je hoeft alleen maar het doeladres van de koppeling op te geven tussen dubbele aanhalingstekens. Je kunt dit op twee manieren schrijven:

  • Als het doel zich buiten de site bevindt, moet je een absoluut adres gebruiken (zoals http://www.eenanderesite.com/map/pagina.html).
  • Als het doel waarnaar wordt verwezen, binnen de site ligt, kun je volstaan met een relatief adres, waarin de naam van de server niet wordt opgegeven:
    • Bij een adres dat relatief is ten opzichte van de server (zoals map/pagina.html), kan de doelpagina worden gevonden vanaf het adres van de server (in dit geval http://www.mijnsite.com/map/pagina.html ongeacht waar de koppeling staat)
    • Bij een adres dat relatief is ten opzichte van de huidige pagina (zoals map/pagina.html), kan de doelpagina worden gevonden vanuit het pad van de huidige pagina. Als deze koppeling wordt geplaatst op een pagina met het adres http://www.mijnsite/com/archieven/index.html,verwijst de koppeling naar de pagina http://www.mijnsite.com/archieven/map/pagina.html.

Controleer de namen van bestanden die je on line zet altijd goed. Een kleine spelfout kan al fouten veroorzaken waar je bezoekers last van hebben.

Tips
Koppelingen naar afbeeldingen. In de voorbeelden hierboven verwijzen de koppelingen naar HTML-pagina's. Je kunt echter ook een afbeelding of een ander bronbestand kiezen als doel van de koppeling. Je hoeft er alleen maar voor te zorgen dat je de juiste bestandsnaam opgeeft bij het kenmerk href:
<a href="/algemeen/mijn_afbeelding.jpg">Mijn huisdier</a>
Je weet nu hoe je goed opgemaakte tekst met koppelingen on line kunt zetten. HTML heeft echter veel meer te bieden dan de paar codes die je nu hebt gezien. Ga voor meer informatie naar de overige pagina's.

2 Je site van afbeeldingen voorzien

Terug naar de top

Je website begint vorm te krijgen, maar er ontbreekt nog iets aan waardoor hij aantrekkelijker kan worden: afbeeldingen. Als je de eerste stap van deze Webstarter zonder problemen hebt uitgevoerd, zul je het ook niet moeilijk vinden om afbeeldingen in te voegen. Voordat we verdergaan met concrete voorbeelden, geven we eerst wat belangrijke informatie:

In dit artikel:
2.1 Afbeeldingsindelingen die op het web worden gebruikt
2.2. Afbeeldingen opnemen in webpagina's

2.1 Afbeeldingsindelingen die op het web worden gebruikt

Terug naar de top

Je kunt niet alle indelingen op internet zetten. Net zoals bij het maken van pagina's, moet je je ook bij het integreren van afbeeldingen aan bepaalde eenvoudige regels houden. Om te beginnen moet je weten dat er op het web maar drie bestandsindelingen voor afbeeldingen worden geaccepteerd:

  • GIF-bestanden (afbeelding.gif) voor afbeeldingen met weinig kleuren (knoppen, tekeningen, grafische teksten...). Met deze bestandsindeling kunnen heel kleine afbeeldingen worden gemaakt, maar die kunnen slechts uit 256 kleuren bestaan. Met sommige versies van deze indeling kunnen transparante afbeeldingen of animaties worden gemaakt.
  • JPEG-bestanden (afbeelding.jpg of afbeelding.jpeg) worden gebruikt voor foto's en tekening met veel kleuren. JPEG-afbeeldingen kunnen miljoenen kleuren bevatten en kunnen optimaal worden gecomprimeerd.
  • PNG-bestanden (afbeelding.png) zijn relatief nieuw op het web en worden gezien als concurrent van GIF-bestanden. Met deze bestandsindeling kunnen tussen de 256 en enkele miljoenen kleuren worden opgeslagen. Ook hier is transparantie mogelijk. Deze indeling is nog niet wijdverspreid, maar zal op den duur steeds gangbaarder worden.

Je kunt zelf de juiste bestandsindeling kiezen, maar bedenk daarbij één ding: let goed op de grootte van je grafische bestanden. Je kunt de grootte van de bestanden controleren op de vaste schijf. Een navigatieknop mag niet groter zijn dan 10 kB en een vrij grote foto niet groter dan 300 kB. Als de bestanden groter zijn, kan het inladen van een pagina zo veel tijd kosten, dat bezoekers doorklikken naar een andere.

2.2 Afbeeldingen opnemen in webpagina's

Terug naar de top

Welke indeling je ook kiest, de integratie van een grafisch element gaat altijd op dezelfde manier. We gebruiken hier weer een HTML-code voor: <img> (image). Deze code wordt gebruikt met het kenmerk src (source), waarvan de waarde het bestand definieert dat de op te nemen afbeelding bevat. Met de volgende regel wordt bijvoorbeeld onze afbeelding van een vogel toegevoegd:
<img src="/algemeen/bestanden/basis-2.jpg">
Met dit kleine stukje code wordt een afbeelding weergegeven op je pagina:

Zoals je waarschijnlijk al hebt gezien, lijkt de code <img> op de code die we hebben gebruikt voor het definiëren van koppelingen. En net zoals bij koppelingen kan het adres van de weer te geven afbeelding een absoluut adres (zoals http://www.site.com/afbeelding.jpg) of een relatief adres zijn (zoals afbeeldingen/afbeelding.jpg).

Het laatste punt: alle HTML-codes kunnen worden gecombineerd. Dit betekent dat je een koppeling kunt maken die is gebaseerd op een afbeelding. De code daarvoor is als volgt:
<a href="/algemeen/page.html"><img src"avion.jpg"></a>

De code <img> heeft verschillende kenmerken waarmee je de manier kunt aanpassen waarop afbeeldingen worden weergegeven. Hieronder volgt een kort overzicht.

Kenmerk Beschrijving
src Naam van het afbeeldingsbestand
width Breedte van de afbeelding
height Hoogte van de afbeelding
alt Commentaar
hspace Horizontale marge van de afbeelding
vspace Verticale marge van de afbeelding
align Tekstuitlijning ten opzichte van de afbeelding


Zie voor meer informatie de pagina Afbeeldingen.
Je kunt je site nu publiceren op internet.

3 Je site publiceren

Terug naar de top

Je site is nu opgemaakt, geïllustreerd en heeft werkende koppelingen en prachtige afbeeldingen. Om ervoor te zorgen dat iedereen je site kan bekijken, heb je alleen nog een klein programma nodig dat een FTP-client wordt genoemd. Deze software werkt als een brug (gateway) tussen je computer en de persoonlijke opslagruimte die door je webhostprovider voor jou is gereserveerd.
Eén van de meest gebruikte programma's is FileZilla. Voor de werkwijze van FileZilla: Zie FileZilla

4 Aanmelden van een site

Terug naar de top

Aanmelden van een site bij een zoeksysteem gebeurt in feite nauwelijks meer. De moderne zoeksystemen zoeken internet af naar de daarop gepubliceerde sites en de inhoud daarvan. Een klein programma , dat een crawler wordt genoemd, onderzoekt al je pagina's. De pagina's worden vervolgens toegevoegd aan een al bestaande database. De plaats van je site in het systeem hangt onder andere af van de woorden die op de site worden gebruikt.
Een tweede mogelijkheid die de bekendheid kan vergroten is om andere webmasters met gelijksoortige sites te verzoeken een link te leggen naar jouw site. Op jouw site maak je dan een link naar de andere site. Op de site van een kerk staan bijvoorbeeld links naar de landelijke kerk en naar plaatselijke kerken in de omgeving.

Met de crawlers van zoeksystemen wordt alle HTML-code in je pagina's geanalyseerd. De pagina's moeten dus bepaalde zeer belangrijke informatie bevatten, die moet worden toegevoegd aan het hoofdgedeelte van het HTML-document, tussen de codes <head> en </head>:

  • Geef je pagina's een beschrijvende titel met behulp van de code <title>. Bijvoorbeeld: <title>Webdesign - Inleiding tot het maken van websites!</title>.
    Vermijd titels als Welkom, Home page of, nog erger, Geen titel.
  • Maak een korte beschrijving van de inhoud van je site en plaats die in een <meta>-code zoals hieronder:
    <meta name="Description" content="Websites maken in vier stappen: bouwen, afbeeldingen, publiceren en aanmelden">
  • Kies een aantal trefwoorden waarmee de inhoud van de site wordt beschreven en plaats ze in een -code, zoals hieronder:
    <meta name="Keyworks" content="HTML, afbeeldingen, FTP, zoeksystemen">
    Vermijd te algemene (computer, spelletjes...) of te populaire (MP3, ...) trefwoorden. Deze worden zo veel gebruikt dat je site nooit een goede plaats zal krijgen.

NB. In Joomla kan men op diverse plaatsen In de tekstvelden Meta) deze informatie invullen.