HTML

wo 01 februari 2012 - 16:29

Internet

HTML staat voor Hyper Text Markup Language. Met behulp van deze "taal" kan een webdesigner complexe webpagina's ontwerpen die op het World Wide Web geplaatst kunnen worden. Voorwaarde is dat de lezer van deze HTML-documenten over een internetverbinding beschikt en een browser op de pc geïnstalleerd heeft.

HTML, ofwel Hyper Text Markup Language, is de basis voor websites. Een website kan niet bestaan zonder enige vorm van HTML. HTML vertelt de browser hoe hij de website moet afbeelden. Zo weet de browser bijvoorbeeld waar de tekst moet, waar de plaatjes en naar welke pagina's hij moet doorlinken. Deze cursus leert je hoe je een HTML-document maakt en je leert de meest basale vorm van HTML. Aan het einde van de cursus kun je koppen en paragrafen maken en stukjes tekst nadruk geven door deze vet te maken en te onderlijnen.

HTML bestaat uit een aantal markeringstekens die we kennen als "tags". Deze tags vertellen de browser dat hij onderdelen van de webpagina op een bepaalde manier moet weergeven. Een tag is te herkennen aan de haakjes < >.

Opmerking: tijdens de browser-oorlog tussen onder andere Microsoft en Netscape zijn een grote hoeveelheid tags bedacht die alleen kunnen werken op de browser van de bedenker. Om deze wildgroei aan tags tegen te gaan is er door het World Wide Web Consortum (W3C) een standaard gecreëerd die op alle browsers hoort te werken. Deze cursus houdt deze standaard zoveel mogelijk aan.

Een normale opmaakmarkering heeft twee delen: <…> en </…>. De slash ( / ) vertelt de browser dat hij de tag moet eindigen. Een goed voorbeeld is <body>. Deze tag signaleert het begin van de platte tekst en dus heel belangrijk. Om hem te activeren, zetten we <body>. Aan het einde van de platte tekst zet je </body> om aan te geven dat de code daar moet ophouden. Het is belangrijk dat je de tags altijd sluit als je klaar bent met dat deel van de opmaak. Anders loopt de code door totdat hij gesloten wordt, en wordt de pagina niet weergegeven zoals jij dat wilt. Daarnaast is het ook heel belangrijk dat de volgorde van de tags logisch blijft. Je kunt dus wel

Tekst doen, maar niet Tekst

Het makkelijkste is als je de tags als hoepels ziet; zolang de hoepels elkaar niet kruisen, zullen er geen problemen ontstaan.

Hoe een HTML document op te slaan

Er zijn veel verschillende website-ontwerpprogramma's op de markt en op internet, maar veelal zijn deze programma's duur en moet je enige kennis hebben van HTML om te weten dat je geen fouten maakt.

Om HTML te leren is het tekstprogramma Kladblok het beste omdat het programma geen eigen opmaakelementen bevat zodat je niet per ongeluk je tekst in een tekstverwerker opmaakt (zoals in Word). Daarnaast moet je handmatig de tags in je tekst intypen met een code in tegenstelling tot normale tekstverwerkers waarbij je een sneltoets of taakbalkknopjes kunt gebruiken.
Een HTMLbestand is te herkennen aan .htm of .html (geen verschil). Kladblok slaat het bestand normaal op als tekstbestand (.txt). Om dat te voorkomen ga je naar Bestand / Opslaan als, en zet je achter de bestandsnaam .htm of .html
Bijvoorbeeld: website.htm

De openingspagina van de website moet op vrijwel alle websiteservers 'index.htm' of 'index.html' heten. Het is dan ook aan te raden om de eerste pagina die je ontwerpt "index.htm" te noemen.

Tip: Als je een website ontwerpt, test hem in minstens twee verschillende browsers (bijvoorbeeld Internet Explorer en Mozilla Firefox). Zo weet je zeker dat de code geen fouten bevat en is de website optimaal bereikbaar!

De Basis

De absolute basis van HTML begint bij de <html> tag. Zo weet de browser dat het om een internetpagina gaat.
Open Kladblok en typ <html> op de eerste regel. Om geen fouten te maken bij het sluiten van de tags is het handing om </html> er gelijk achter te zetten en vervolgens tussen deze twee tags gaat werken. Vervolgens voegen we <head> eraan toe. Deze tag is bedoelt voor de titel,<title>, en de meta-tags, <meta>. De meta-tags worden in deel 2 van de cursus behandeld.
Als laatste voeg je de <body> toe. Zoals al eerder gezegd; zonder <body>, geen tekst.

<html>

<head>
 <title>
 Hier staat de titel van de pagina
 </title>
 </head>

<body>
 Hier staat de normale tekst
 </body>
</html>

De spaties zijn niet nodig maar zij vergroten het overzicht aanmerkelijk.

<html> Zo weet de browser dat het om een webpagina gaat. Zonder deze tag zullen sommige browsers het bestand niet als HTML-pagina herkennen.
<head> Dit is vooral belangrijk voor zoekmachines. In de head kunnen andere tags worden neergezet die bijvoorbeeld een samenvatting weergeven van de website of sleutelwoorden toekennen.
<title> De titel van de webpagina, deze komt in de taakbalk te staan.
<body> Alles wat op de website moet verschijnen, moet in de <body> geschreven worden. Deze tag is heel belangrijk want hij vertelt de browser om de tekst op het scherm te zetten. Vergeet deze tag nooit.

Klik hier voor een voorbeeld

Tip: hou je HTML schoon. Dat wil zeggen dat je zo weinig mogelijk 'tags' moet gebruiken om het gewenste resultaat te bereiken. Op deze manier blijft je code overzichtelijk en blijft je pagina optimaal bereikbaar.

De algemene opmaak:

Met de vorige code kun je een tekstbestand makkelijk omzetten naar een webpagina, maar alleen als een platte doorlopende tekst. Je hebt voor alle onderdelen van HTML tags nodig, dus je kunt niet zoals bij Word de opmaak makkelijk veranderen doormiddel van een paar klikken. Dit kan in het begin redelijk moeilijk zijn maar het went zeer snel.

De algemene opmaak heeft een vrij simpele constructie. Zoals de Word-gebruikers onder ons weten, Ctrl B staat voor vet, Ctrl I staat voor cursief, en Ctrl U staat voor onderstreept.
Bij HTML is het eigenlijk precies zo, alleen dan wordt de "Ctrl" vervangen door tags:

We beginnen weer met

<html>
 <head>
 <title>
 Voorbeeld2.htm
 </title>
 </head>

<body>

Hier is de tekst, hij kan

breed

cursief

onderstreept

worden.
 Je kunt de tags ook combineren

</body>
</html>

 Zo zet je de tekst vetgedrukt.
 Dit is voor cursieve tekst
 En met deze kun je een tekst onderstrepen

Klik hier voor een voorbeeld

Paragrafen

Valt het je op dat de "enters" in de code niet op de pagina verschijnen?
Dat is omdat HTML voor een "enter" of een paragraaf, een aparte tag heeft. Ook een dubbele spatie is uit den boze, daarvoor moet je ook een speciale code <-- link naar speciale codes --> invoegen.

Om gebruik te maken van enters en spaties kunnen we ook met tags werken.

Eerst beginnen we met het maken van een paragraaf:

<html>
 <head>
 <title>
 Voorbeeld3.htm
 </title>
 </head>

<body>

Als het goed is, zie je nu twee paragrafen.

Dit is dankzij de paragraaf tag.

</body>
</html>

Klik hier voor een voorbeeld

 De paragraaf tag, hiermee kun je een paragraaf aanduiden.

Een paragraaf breken

Maar soms wil je binnen een paragraaf afbreken en de zin op een nieuwe regel beginnen zonder dat het een nieuwe paragraaf wordt. Je kunt zo ook zinnen doorbreken.
Dat doe je met

<html>
 <head>
 <title>
 Voorbeeld4.htm
 </title>
 </head>

<body>

Als het goed is, zie je nu twee paragrafen.
 
En hier heb ik net de zin afgebroken

De vorige zin is afgebroken met behulp van de break-tag.

</body>
</html>

Klik hier voor een voorbeeld.

Let op!: De tag sluit niet.

  De "Break" tag, hiermee kun je een zin of paragraaf afbreken. bestaat slechts uit een onderdeel en sluit niet.

Marge in je tekst aanbrengen

Om je paragrafen mooier te laten ogen, hebben we ook een tag: <blockquote>

<blockquote> maakt een klein marge aan beide kanten van het scherm, zoals je ook bij geprint papier hebt. Dit is een stuk aangenamer om te lezen en geeft ook vaak meer overzicht. Eigenlijk is deze tag bedoeld voor citaten met een paragraaf erin, maar je kunt hem ook voor de opmaak gebruiken.

We halen de weg en we voegen de <blockquote> toe:

<html>
 <head>
 <title>
 Voorbeeld5.htm
 </title>
 </head>

<body>

<blockquote>
 
Als het goed is, zie je nu twee paragrafen.
 
En hier heb ik net de zin afgebroken

De vorige zin is afgebroken met behulp van de break-tag. We maken deze zin extra lang om het effect van de blockquote te laten zien. De marge die blockquote maakt is altijd hetzelfde en is ongeveer even lang als de afstand van tien spaties.

</blockquote>

</body>
</html>

Klik hier voor een voorbeeld.

<blockquote> Deze tag maakt een marge aan beide kanten van de pagina. Zo ziet de pagina er meer uit als een geprinte tekst en is de pagina ook wat fijner te lezen. <blockquote> kun je zo veel herhalen als je wilt.

Tekst vergroten en verkleinen

Als laatste gaan we de tekst een kop geven. Dit doen we met de 'header' tag: <H?>. Bij de '?' kan een nummer van 1 tot en met 6 gevuld worden waarbij 1 het grootst is, en 6 het kleinst.

De header-tag maakt trouwens ook een paragraaf van je tekst.

<html>
 <head>
 <title>
 Voorbeeld6.htm
 </title>
 </head>

<body>

<h6>De tekst is klein</h6>
 <h5>Maar wordt groter?</h5>
 <h4>"en groter</h4>
 <h3>"en groter</h3>
 <h2>"en groter</h2>
 <h1>"tot dat hij zo groot wordt. </h1>

</blockquote>
</body>
</html>

Klik hier voor een voorbeeld.

<H?> De headertag geeft je tekst een kop. Bij de , kan een cijfer van 1 (grootst) tot 6 (kleinst) ingevuld worden. De tag maakt automatisch een paragraaf van je tekst.

De tags van deze cursus in volgorde van gebruik:

<html> Met deze tag beginnen we de html en we sluiten de tag pas aan het einde van de pagina.
<head> De head is belangrijk voor de titel maar ook voor specifieke tags bedoelt voor zoekmachines.
<title> De titel van de pagina moet hier. Hij is niet noodzakelijk, maar als je hem weglaat dan krijgt je pagina "Untitled document" als titel.
<body> In deze tag moet de tekst die je op de website wilt, geschreven worden. Alles wat buiten de body wordt geschreven wordt niet afgebeeld.
 Zo maken we de tekst vetgedrukt.
 Deze is om de tekst cursief te maken.
 En deze onderstreept de tekst.
 Met maak je een paragraaf.
  Deze tag onderbreekt je zin of paragraaf en laat hem aan het begin van de volgende lijn doorlopen.
<blockquote> Deze tag is vooral bedoelt voor citeren maar hij kan ook gebruikt worden voor het creëren van een zijmarge in je tekst. De marge is altijd even groot en je kunt meerdere <blockquote>'s achter elkaar zetten.
<h?> Geeft je tekst een kop. <h1> is het grootst, <h6> het kleinst.

De eigenschappen van een tag

Dit is een goed moment om de inhoudsopbouw van een tag te verklaren. In het eerste deel van de HTML-cursus hebben we gebruik gemaakt van tags zoals <body>. Dit noemen we ook wel een HTML element. Een tag kan verder bestaan uit een eigenschap (property) en een waarde (value). Met een eigenschap kunnen we de uitdrukking van de tag (ofwel het element) veranderen. Een eigenschap heeft altijd een waarde, mits het om een zelfstandige eigenschap gaat.

Om tekst en achtergrond aan te passen en kleur te geven moeten we ook gebruik maken van de andere twee onderdelen. Dat doen we zo: <element eigenschap="waarde">

Een eigenschap moet altijd in een tag staan, je kunt hem niet zelfstandig gebruiken.

Tip: als je hetzelfde element meer dan één eigenschap wil geven, kun je het beste deze eigenschappen achterelkaar zetten: <element eigenschap1="waarde1" eigenschap2="waarde2">. Zo hoef je de tag ook maar een keer te sluiten. Let er wel op dat je een spatie tussen de twee verschillende eigenschappen plaatst!

Achtergrond kleuren

Om de pagina een achtergrond kleur te geven, gaan we de body tag aanpassen: <body bgcolor="grey" >

<html>
<head>
 <title>
 Voorbeeld6.htm
 </title>
</head>
 <body bgcolor="grey" >
<blockquote>

Deze tekst is om te testen. Je mag hem best lezen maar veel zul je er niet aan hebben.

</blockquote>
 </body>
</html>

Klik hier voor een voorbeeld

De achtergrond is nu gekleurd omdat we het <body> element een eigenschap hebben gegeven, namelijk bgcolor. Vervolgens geven we deze eigenschap een waarde: grijs (grey)

bgcolor="?" Met de eigenschap bgcolor geef je de achtergrond een kleur. De bgcolor is bruikbaar voor alles wat een achtergrond kleur kan krijgen.

De kleur, die tussen de aanhalingstekens ingevoerd moet worden, kan zowel de Engelse benaming (zoals "black") voor kleuren zijn als de zogenaamde HEXcode voor de kleur. De HEXcode is een getallensysteem met een zestiental aan karakters (hexadecimaal): de cijfers van 0 tot 9 en de letters van A tot F (niet hoofdlettergevoelig). Elke kleurcode bestaat uit een hekje (#) en zes van deze cijfers of letters. Wit bijvoorbeeld heeft de hoogste waarde: #FFFFFF, zwart daarentegen heeft de laagste waarde: #000000. Je kunt hier zowel de Engelse namen voor de kleuren vinden als hun respectievelijke HEXcode.

Platte tekst kleuren

We kunnen ook de tekst kleuren. Dit doen we met de eigenschap text="kleur".

<html>
<head>
 <title>
 Voorbeeld6b.htm
 </title>
</head>
 <body bgcolor="grey" text="white">
<blockquote>

De tekst is nu wit zoals je wel ziet.

</blockquote>
 </body>
</html>

Klik hier voor een voorbeeld

text="kleur" Deze eigenschap past de tekstkleur aan. Gebruik haar alleen in het <body> element.

De platte tekst aanpassen met 

Soms wil je ook verschillende delen van de tekst kleuren. Hiervoor gebruiken we

<html>
<head>
 <title>
 Voorbeeld7.htm
 </title>
</head>
 <body bgcolor="grey" text="white">
<blockquote>

Deze tekst is om te testen.
 
Je mag hem best lezen maar veel zul je er niet aan hebben.
 

</blockquote>
 </body>
</html>

Klik hier voor een voorbeeld

 Deze tag beïnvloedt de tekst tussen de tags. De tag alleen doet niets, hij heeft altijd een eigenschap nodig.
color="?" Deze eigenschap geeft tekst kleur. Je zult de color eigenschap vaak terugzien in andere tags.

HTML gebruikt de Amerikaanse spelling, dus het is color in plaats van colour!

kan enkele onderdelen van de tekst veranderen. Over het algemeen wordt gebruikt om tekst een kleurtje te geven en om lettergrootte te veranderen. Maar kan ook het lettertype veranderen.

We zullen een aantal voorbeelden geven van de eigenschappen die je in een kunt zetten:

Color="?" De kleureigenschap
Size="?" De grootte-eigenschap. In deel 1 heb je al kennis gemaakt met de headertag om tekst te vergroten. De size-eigenschap is eigenlijk veel beter omdat je meer nuance in grootte hebt. De waarde kan zowel "+1" zijn als bijvoorbeeld "1". Het verschil is dat "1" een vaststaande grootte is terwijl +1 de basis grootte (die van kladblok) een stapje vergroot. Ter vergelijking, de grootte van het lettertype in kladblok is over het algemeen "3" en die kan niet aangepast worden met HTML. Bij Size is "1" de kleinste grootte.
Face="?" De lettertype-eigenschap. Met deze tag kun je je tekst een ander lettertype geven dan de standaard die in Windows (ofwel, wat je in kladblok ziet) staat ingesteld.

<html>
<head>
 <title>
 Voorbeeld8.htm
 </title>
</head>
 <body bgcolor="grey">
<blockquote>

Deze tekst is nu wit

Deze tekst is nu wit en groter.

Maar nu is de tekst wit en klein.

En nu heeft de tekst een ander lettertype en is wit.

</blockquote>
</body>
</html>

Klik hier voor een voorbeeld

size="?" Past de grootte van de tekst aan.
face="?" Geeft een tekst een ander lettertype. Als het lettertype niet op de pc staat, dan zal hij het lettertype van de systeeminstelling weergeven.

Je kunt in face="" meerdere lettertypes aanwijzen door ze met een komma te scheiden: face="comic sans ms, arial". Als de browser het eerste lettertype niet kan vinden op het systeem, zal hij de tweede nemen.

Tekst centeren en links en rechts uitlijnen.

Eigenschappen kunnen ook voor andere tags gebruikt worden dan alleen en <body>. Zo kunnen we ook een eigenschap geven: align="?"

Met align="?" kan een tekst gecentreerd worden, maar ook links en rechts worden uitgelijnd. Dat gaat als volgt:

<html>
<head>
 <title>
 Voorbeeld9.htm
 </title>
</head>
 <body>
<blockquote>
 
Nu zie je de tekst gecentreerd.
 

Maar normaal staat de tekst links.

 
En nu staat de tekst rechts.
 
</blockquote>
 </body>
</html>

Klik hier voor een voorbeeld

 met de align eigenschap kun je de tekst:

Links uitlijnen ("left")
Rechts uitlijnen ("right")
En centreren ("center")

<html>
<head>
 <title>
 Voorbeeld10.htm
 </title>
</head>
 <body>
<blockquote>

Hier staat weer wat tekst als voorbeeld

 <hr>
Deze tekst gaat hier weer verder
</blockquote>
 </body>
</html>

Klik hier voor een voorbeeld

Deze tekst gaat hier weer verder

Klik hier voor een voorbeeld

Naast kun je ook <center> gebruiken. Deze tag plaats je dan tussen de en de . Het gebruik van <center> wordt wel ontmoedigd door het adviesorgaan voor HTML omdat het schoner is om te gebruiken. Het is daarnaast ook effectiever omdat je minder tags gebruikt om hetzelfde te bereiken.

De afscheidingslijn

De afscheidingslijn, <hr>, is een lijn die verschillende stukken tekst van elkaar kan scheiden.

<hr> Deze tag creëert een afscheidingslijn in je pagina. <hr> heeft geen eindtag!

De afscheidingslijn kan op veel manieren aangepast worden. Zo kun je de breedte, de lengte en de schaduw van de lijn aanpassen.

<hr> heeft de volgende eigenschappen:

color="#ff0000">size="?"
width="?"
noshade (zelfstandig)
align="?"

<html>
<head>
 <title>
 Voorbeeld11.htm
 </title>
</head>
 <body>
<blockquote>

Hier staat weer wat tekst als voorbeeld

De hoogte aangepast in pixels
 <hr size="10">
De breedte aangepast in pixels
 <hr width="50">
De breedte aangepast in procent
 <hr width="20%">
De breedte aangepast in pixels en links uitgelijnd
 <hr align="left" width="50">
De hoogte aangepast in pixels en plat gemaakt
 <hr size="10" noshade>

We kennen align="?" al van tekst centreren of uitlijnen. Size="?" geeft de hoogte aan (in pixels), width="?" geeft de breedte aan (in pixels of het aantal procent van een pagina) en noshade maakt er een platte lijn van.

</blockquote>
</body>
</html>

<hr>

size="" De hoogte aanpassing (pixels)
width="" De breedte aanpassing (pixels en procenten)
noshade Een platte lijn
align=("center", "left", "right") lijn uitlijnen

Lijsten

<html>
<head>
 <title>
 Voorbeeld12.htm
 </title>
</head>
 <body>
<blockquote>

Er zijn verschillende vervoersmiddelen:
 <ul>
 <li> fiets </li>
 <li> auto </li>
 <li> trein</li>
 <li> vliegtuig</li>
 </ul>

Klik voor een voorbeeld

<html>
<head>
 <title>
 Voorbeeld13.htm
 </title>
</head>
 <body>
<blockquote>

<ol>
 <li> fiets </li>
 <li> auto </li>
 <li> trein</li>
 <li> vliegtuig</li>
 </ol> <ol type="A">
 <li> fiets </li>
 <li> auto </li>
 <li> trein</li>
 <li> vliegtuig</li>
 </ol>

Klik hier voor een voorbeeld

De tags van deze cursus:

Een opsomming maak je met twee tags. Eén als aankondiging voor een lijst, <ul>. De ander om een lijstpunt mee aan te duiden, <li>.

Je kunt ook weer een onderverdeling in deze lijst maken:

<ul>
 <li> fiets </li>
 <li> auto </li>
 <li>trein</li>
 <ul>
 <li>stop trein</li>
 <li>sneltrein</li>
 <li>intercity</li>
 </ul>
 <li> vliegtuig</li>
 </ul>

</blockquote>
</body>
</html>

<ul> Begin van een willekeurige lijst. Je kunt ook weer een lijst in een lijst maken zoals in het voorbeeld.
<li> Dit is om een lijstpunt aan te geven. Vergeet de tag niet te sluiten.

We hebben nu een ongeordende lijst gemaakt. Maar er zijn nog een aantal andere soorten lijsten zoals een geordende lijst, <ol> en een definitie <dl>.

<ol> werkt zoals <ul>. Zonder de toevoeging van een eigenschap zullen de punten van <ol> van 1 tot 9 gaan. Voeg je eigenschappen toe, dan kun je bijvoorbeeld Romeinse nummers gebruiken of het alfabet.

<dl> heeft nog een aantal andere elementen:
<dt> Het woord dat je wilt definiëren
<dd> De definitie van het woord.

Hier zie je hoe je het gebruikt in een HTML pagina.

Er zijn verschillende vervoersmiddelen. Ik heb ze op volgorde van langzaam naar snel gezet:

Maar we kunnen ze ook van A naar D laten gaan:

Of in Romeinse nummers

<ol type="I">
 <li> fiets </li>
 <li> auto </li>
 <li> trein</li>
 <li> vliegtuig</li>
 </ol>

Van Dale zegt over de trein: 
 <dl>
 <dt>trein</dt>
 <dd>railvoertuig voor de langere afstand dat sneller dan 45 km per uur kan, bestaande uit een enkele of een reeks van locomotieven, treinstellen en/of wagons</dd>
 </dl>

</blockquote>
</body>
</html>

<ol> Hiermee maak je een geordende lijst. Je kunt de lijst door middel van Eigenschappen op de volgende manieren indelen:

type="A" A tot Z
type="a" a tot z
type="I" Romeinse cijfers in hoofdletter
type="i" Romeinse cijfers in kleine letter

<dl> Begin van een definitie
<dt> Het woord dat je wilt definiëren
<dd> De definitie van het woord.

Meta Tags

Kies alleen worden die op de pagina verschijnen. Zoekmachines geven pagina's die worden gebruiken die niet op de pagina voorkomen een lagere rang. Dit om misbruik te voorkomen (zoals eerst gebeurde met veel gezochte worden zoals "sex").

In het begin van de eerste cursus werd al naar metatags verwezen. De metatags zijn HTML codes die in de <head> worden geplaatst zodat zoekmachines beter (of juist niet) je pagina kunnen indexeren. Ze zijn niet nodig maar ze zijn goed om meer bezoekers te trekken en om pagina's te verstoppen.

Zoekmachines werken namelijk met kleine zelfstandige programmaatjes genaamd robots of webspinnen. Dit zijn onschuldige programmaatjes wiens enige doel is om het internet af te gaan en pagina's te indexeren. De metatags beïnvloeden vooral deze programmaatjes.

Metatags bestaan altijd uit twee eigenschappen: De naam van de meta (name) en de inhoud van de meta (content). De metanaam zelf heeft een waarde die omschrijft waarvoor de metatag bedoeld is, zoals steekwoorden voor een zoekmachine ("keywords") of omschrijving van de website ("description").
De meest voorkomende meta's zijn "keywords" en "description" en zijn zeker de moeite waard om in je website te zetten.

We bekijken ze voor het gemak apart:

<meta name="generator" content="">

Deze geeft aan wat voor een programma je hebt gebruikt om de pagina te maken. Bij Kladblok zul je vanzelfsprekend niets op deze plaats hebben, maar wysiwyg programma's zoals Frontpage, Dreamweaver en GoLive zullen hier automatisch hun programmanaam in vermelden. Je hebt hier eigenlijk niets aan en kunt het beter verwijderen ter optimalisering van je pagina.

Voorbeeld: <meta name="generator" content="Frontpage">

<meta name="keywords" content="">

De sleutelwoorden van de pagina. Hoewel tegenwoordig zoekmachines niet meer louter selecteren op sleutelwoorden zijn ze nog steeds zeer belangrijk om te vermelden. Het is natuurlijk niet de bedoeling om een heel woordenboek te vermelden.

Voorbeeld: <meta name="keywords" content="woord1, woord2, woord3">

Vergeet de komma niet om de verschillende termen aan te geven.

<meta name="description" content="">

Hier kan een kleine omschrijving van je pagina komen. Deze tag is niet te ontberen als je met metatags gaat werken want deze omschrijving wordt gebruikt in zoekmachines wanneer je pagina in de resultaten staat.

Voorbeeld: <meta name="description" content="Deze pagina gaat over HTML. Dit is de tweede cursus HTML van hcc!Magazine.">

<meta name="author" content="">

De auteur, jij dus.

Voorbeeld: <meta name="author" content="Bertine van Hoevell">

<meta name="copyright" content="">

Onder andere je naam, je bedrijfsnaam en het jaar waarin je de pagina gemaakt hebt. Deze tag is niet nodig want je hebt per definitie auteursrechten over alles wat jij publiceert op internet.

<meta name=" robots" content="">

Deze metatag beïnvloed wat zoekbots en webspinnen op je website doen. Deze tag heeft twee waardes: Nofollow en Noindex

Nofollow: Als je het vervelend vindt wanneer mensen je artikelen lezen zonder dat ze de beginpagina van je website zien, kun je met deze tag de webspinnen vertellen om niet de links op de pagina te volgen en te indexeren. Zo zou alleen je openingspagina in een zoekmachine moeten verschijnen.
Noindex: Deze tag kan heel belangrijk zijn voor je privacy. Alle documenten, maar dan ook alle documenten die je op je webruimte in de publieke folder zet, kunnen geïndexeerd worden door een webspin. Om dat te voorkomen (bijvoorbeeld bij vertrouwelijke documenten) hebben we deze tag. Noindex vertelt de webspin om de pagina NIET te indexeren.

Voorbeeld: <meta name="robots" content="Noindex, Nofollow">

<meta http-equiv="refresh" content="">

Dit is een beetje een vreemde eend onder de metatags. Hij is alleen bedoeld om een website om de tijd te vernieuwen. Dit kan dezelfde website zijn (bijvoorbeeld bij een nieuwswebsite of een forum), maar deze tag kan ook gebruikt worden om iemand naar een andere website te verwijzen ('redirect') (bijvoorbeeld wanneer de website verhuisd is, of wanneer een onderdeel verhuisd is).

Voorbeeld: <meta http-equiv="refresh" content="10;url=http://www.eenpagina.nl">

De 10 staat in dit geval voor het aantal secondes voordat hij de andere pagina laadt. Url verwijst naar de pagina die hij moet laden.

Een document met metatags ziet er zo uit:

Ik kan geen voorbeeld geven in een HTML document omdat het document de metatags niet zal afbeelden.

<body>
Bgcolor="kleur" Hiermee verander je de achtergrondkleur.
Text="kleur" Dit verandert de kleur van de gehele tekst over de pagina.
 Beïnvloed de tekst.
Color="?" Hiermee verander je de kleur.
Size="?" De grootte-eigenschap. Kan "1" tot "9" zijn of "+1" tot "+9". "1" betekent de kleinste grootte, "+1" is dat de tekst een stapje groter wordt.
Face="?" Hiermee verander je het lettertype.

Align=("center", "left", "right") met de align eigenschap kun je de tekst:
Links uitlijnen ("left")
Rechts uitlijnen ("right")
En centreren ("center")
<hr> Een afscheidingslijn.
Size="grootte" De hoogte aanpassing (pixels)
Width="breedte" De breedte aanpassing (pixels en procenten).
Noshade Een platte lijn.
Align=("center", "left", "right") lijn uitlijnen.
<ul> Begin van een willekeurige lijst. Je kunt ook weer een lijst in een lijst maken.
<li> Dit is om een lijstpunt aan te geven. Vergeet de tag niet te sluiten.
<ol> Hiermee maak je een geordende lijst. Je kunt de lijst door middel van eigenschappen op de volgende manieren indelen:
type="A" A tot Z
type="a" a tot z
type="I" Romeinse cijfers in hoofdletter
type="i" Romeinse cijfers in kleine letter
<dl> Begin van een definitie
<dt> Het woord dat je wilt definiëren
<dd> De definitie van het woord.
<meta>
name="generator" content="editor"> Wat voor een programma de pagina gemaakt heeft. Volkomen nutteloos
name="keywords" content="sleutelwoorden"> Hier zet je de sleutelwoorden van je pagina. Goed voor de zoekmachine.
name="description" content="Samenvatting pagina"> Hier schrijf je een korte omschrijving van je pagina. Erg belangrijk voor zoekresultaten.
name="author" content="jij"> De maker van de pagina
name="copyright" content="jij/bedrijf"> De copyright op de pagina
name="robots" content="gedrag"> Instructies voor webspinnen
Noindex Pagina wordt niet opgepikt door de webspin
Nofollow Links op de pagina worden niet gevolgd door de webspin
http-equiv="refresh" content="tijd;url=http://www.eenpagina.nl"> Bij tijd vul je het aantal seconden in voordat de pagina zichzelf herlaadt of een andere laadt.

Hyperlinks

Voor hyperlinks gebruiken we de tag <a>. Omdat je met <a> alleen niets kunt, moet je gebruik maken van eigenschappen.
We kennen twee soorten hyperlinks: die naar een andere pagina verwijzen en die naar een onderdeel van dezelfde pagina linken (ook wel interne links genoemd).
We beginnen met links naar andere pagina's. Deze worden gemaakt door de eigenschap href="?" toe te voegen in de <a> tag.

Externe link

Hierbij wordt er gelinkt naar een ander webadres:
<a href="http://www.adres.nl/pagina.htm">

Lokale link

Een lokale link is een verwijzing naar een ander gedeelte binnen je website.
Als de pagina waarnaar je verwijst in dezelfde folder staat als de pagina waarvan je verwijst, hoef je alleen de pagina te noemen:

<a href="pagina.htm">

Als je in Verkenner/Explorer folders bekijkt, zul je misschien het adres kunnen zien. Bijvoorbeeld Windows staat in c:windows. Wil je naar de lettertypes in windows gaan, dan ga je naar c:windowsfonts.Internetservers werken ook met dit soort folders. Op een webadres kan het lijken op

<a href="http://www.adres.nl/fonts/pagina.htm">

<a> Deze tag maakt een hyperlink van een stukje tekst.
<a href=""> href is de eigenschap die verwijst naar de website waar je naartoe wilt linken. Zonder href heb je geen link.
</a> Met deze tag sluit je de link-tekst af.

Tip: HTML ziet geen verschil tussen hoofd- en kleine letters. Bij het opslaan of verwijzen naar een pagina of een bestand kunnen ze wel belangrijk zijn. Schrijf daarom de namen van bestanden in kleine letter. Op deze manier zal de webserver ze altijd vinden. De tags en de platte tekst mogen zowel met hoofd als met kleine letter geschreven worden.

Interne Hyperlinks

De interne links zijn zeer handig. Met een interne link kun je linken naar een ander gedeelte op dezelfde pagina, bijvoorbeeld erg handig als je een lange tekstpagina hebt met diverse paragrafen.
Bij interne links zijn er twee onderdelen:

<a href="#naam">linktekst</a>
en
<a name="naam"></a>

Dankzij <a href="#naam"> weet de <a href> (hyperlink referentie) dat hij naar het onderdeel "naam" moet linken.
De <a name></a> tag (direct openend en sluitend) komt op de plaats waar je naartoe wilt linken.

<html>
 <head>
 <title>
 Voorbeeld 15
 </title>
 </head>

<body>
 <a href="#stukjetekst">Een link naar een stukje tekst onderaan de pagina</a>
 
 
 
 
 
 
 
 
 
 
 
<a name="stukjetekst">En naar dit stukje tekst is gelinkt</a>
 </body>
</html>

Klik hier voor een voorbeeld

Maar je kunt ook naar een interne link op een ándere pagina linken. Dat doe je door zowel het adres te vermelden als de naam van het onderdeel:

<html>
 <head>
 <title>
 Voorbeeld 16
 </title>
 </head>

<body>
 <a href="voorbeeld15.htm#stukjetekst">Deze link verwijst naar de interne link 'stukjetekst' op pagina voorbeeld15.htm.</a>
 </body>

</html>

Klik hier voor een voorbeeld

<a href="pagina.htm#onderdeel"> Dankzij de # weet de browser dat hij naar een gespecificeerd onderdeel van de pagina moet springen.
<a name="onderdeel"> Met name kun je een onderdeel van je pagina specificeren.
Maar, <a> heeft nog een aantal andere zeer interessante eigenschappen.

E-mail adres

Om een link te maken waarmee iemand een e-mail naar je kan versturen voeg je 'mailto:' na de href toe.
Dus: <a href="mailto:redactie@hccmagazine.nl">
Wil je de mail die via de link is verstuurd kunnen herkennen aan een bepaald onderwerp, kan kun je dit meegeven in de link.
<a href="mailto:redactie@hccmagazine.nl?subject=Over de html cursus">

Wanneer je op zo'n mailto link klikt, zal automatisch je e-mailprogramma worden opgestart (zoals Outlook, Thunderbird of Gmail).

Download link

Een downloadlink maken is niet zo moeilijk als je misschien denkt. Zodra je een extensie gebruikt die de browser niet kan weergeven, zal de browser de bezoeker de optie geven om het gekoppelde bestand te downloaden. Dit zijn extensies zoals .exe (programma), .zip (archief), .rar (archief), .ace (archief) of .doc (document).

Tip: De extensie van het bestand staat er meestal bij. Soms laat Windows de extensie weg. Om die optie uit te schakelen moet je naar Verkenner, ofwel Explorer of Mijn Computer en dan naar
Extra > Mapopties > Beeld. Daar vind je een gevinkte optie genaamd 'Verberg extensies van bekende bestandtypes'. Deze kun je uitschakelen.

Je krijgt dan bijvoorbeeld:
<a href="htmlcursus.zip">

Let op: veel webservers zullen een .exe niet accepteren. Dit is omdat er een kans bestaat dat de executable, een uitvoerbaar programma, een verborgen virus kan zijn. Hetzelfde geldt voor .pif bestanden (DOS-snelkoppeling).

Openen in een ander venster

Om een website te laten openen in een ander venster, hoef je alleen target="_blank" in te vullen:
Voorbeeld: <a href="http://www.website.nl" target="_blank">

Deze optie is zeer aan te raden als je gaat linken naar andere websites. Bezoekers raken anders jouw website kwijt zodra ze op een externe link klikken. Ook kun je deze optie gebruiken als je bijvoorbeeld een uitleg wilt geven over een stuk tekst, maar het niet in hetzelfde venster wil openen als het origineel.

Links een andere kleur geven

De standaard kleuren van links kunnen je opmaak lelijk in de war gooien. Daarom is er een manier om deze kleuren te beïnvloeden. Hiervoor gebruiken we een aantal eigenschappen die we in de tag <body> zetten. Let er op dat je de eigenschappen ín de <body>tag zet en niet nog een <body> in de code zet.

Dit gebruik je om een kleur te geven aan een link waar nog niet op is geklikt (normaal blauw). Gebruik hiervoor de Engelse vertaling van een kleur.

Om te laten zien of de lezer al op een bepaalde link geklikt heeft.

Deze kleur bepaalt de kleur als er direct op geklikt wordt.

Je kunt de eigenschappen combineren:
<body link="kleur" vlink="kleur" alink="kleur">

Plaatjes invoegen in je pagina

Als je het maken van een hyperlink onder de knie hebt, kun je zonder moeite plaatjes in de tekst zetten. In feite maken plaatjes ook gebruik van een soort hyperlink, maar in plaats van je te verwijzen naar een andere pagina, zullen er plaatjes op de pagina verschijnen.

Afbeeldingen worden op de pagina met behulp van <img> opgeroepen. Ook bij <img> moet je eigenschappen toevoegen wil je überhaupt iets kunnen afbeelden.
Om een plaatje te laten verschijnen voegen we toe waar de source (src, de bron) zich bevindt: dus <img src="plaatje">

De <img> tag hoeft niet gesloten te worden.

<html>
 <head>
 <title>
 Voorbeeld 17
 </title>
 </head>

</html>

Klik hier voor een voorbeeld

<img> Het element voor een afbeelding
scr="http://" De eigenschap om de afbeelding mee te laden

Tekst en plaatjes

Je kunt zowel de tekst naast als onder de afbeelding zetten. Het enige verschil is dat de ene keer je wel een na de afbeeldingstag zet en de andere keer niet.

<html>
 <head>
 <title>
 Voorbeeld 17b
 </title>
 </head>

 <body>
<img src="http://www.hccmagazine.nl/art/no-logo.gif">
Deze tekst komt naast het plaatje te staan. 
<img src="http://www.hccmagazine.nl/art/no-logo.gif">
 
Terwijl deze tekst er onder staat.

</body>
</html>

Klik hier voor een voorbeeld

Plaatjes linken

Je kunt ook middels een plaatje ergens naar linken. Dit doe je door beide tags te combineren:

Eigenschappen van de <IMG> tag

Je ziet bij het gebruik van een imagelink dat er een rand om het plaatje verschijnt.
Wil je geen rand, dan zet je border="0" als eigenschap in de <img>tag:

Klik hier voor een voorbeeld

De eigenschap border zet een rand om de afbeelding heen. Als je de waarde hoger maakt, wordt ook de rand dikker. De kleur van de omlijning hangt af van de kleur van de tekst. Zo blijft hij zwart bij de standaardinstellingen maar wordt deze blauw wanneer je 'border' toepast op een gelinkte afbeelding.

<img border="?"> De eigenschap border bepaalt de grootte van de rand om het plaatje. Zet je deze op 0, dan haal je ook de rand om de gelinkte afbeeldingen weg.

Grootte van de afbeelding bepalen

Er kunnen nog een paar andere esthetische veranderingen gemaakt worden aan de <img> tag.

Deze tag kan heel handig zijn. Als je de dimensies van je afbeelding opgeeft, dan kan de pagina van te voren een ruimte vrijhouden in de pagina. Zo hoeft je foto nog niet geladen te zijn om de tekst op de pagina er op de juiste manier uit te laten zien.

Je kunt met deze tag ook een originele afbeelding vergroten en verkleinen, maar dit is niet aan te raden omdat je dan het origineel òf uitrekt of laat krimpen.

Width="?" Definieert de breedte van het plaatje.

Height="?" Definieert de hoogte van het plaatje.

Let op: als je op deze manier de grootte van een afbeelding aanpast wordt deze van veel mindere kwaliteit dan wanneer je het plaatje zou aanpassen in een beeldbewerkingprogramma. Hoewel het meer werk is, is het beter om een afbeelding aan te passen in een beeldbewerkingprogramma.

Uitlijnen van afbeelding
Een afbeelding uitlijnen gaat net zoals met tekst met de eigenschap align. Ditmaal wordt align in het <img> element gezet. Ook hier gebruik je de waardes "left", "right" en "center".

<html>
 <head>
 <title>
 Voorbeeld 18
 </title>
 </head>
 <body>

Ik schrijf hier iets als voorbeeld.

</body>
</html>

Klik hier voor een voorbeeld

Align=("left","center","right") gebruik een van de opties om de afbeelding uit te lijnen. Met left lijnt de afbeelding bijvoorbeeld links uit en met right wordt deze rechts uitgelijnd.

Horizontale en verticale marge

Als je vindt dat je afbeelding meer ruimte nodig heeft in een tekst, kun je een marge tussen de afbeelding en de tekst plaatsen.

Om een horizontale marge aan te brengen gebruiken we hspace="", voor een verticale marge gebruik je de eigenschap vspace="".

<html>
 <head>
 <title>
 Voorbeeld 19
 </title>
 </head>
 <body>

Ik schrijf hier iets als voorbeeld.

Nog meer voorbeeld voorbeeld voorbeeld.

</body>
</html>

Hspace="?" voegt een marge aan de zijkanten van een afbeelding

Vspace="?" voegt een marge aan de boven- en onderkant van een afbeelding

Klik hier voor een voorbeeld

Achtergrond plaatje

Als laatste wordt de achtergrondafbeelding behandeld. Om deze afbeelding te plaatsen maak je gebruik van een eigenschap in de <body>

<html>
 <head>
 <title>
 Voorbeeld 20
 </title>
 </head>

Hier hoeven we eigenlijk niets te schrijven.

</body>
</html>

Klik hier voor een voorbeeld

<body background="?"> De eigenschap background geeft de pagina een achtergrondafbeelding.

Je ziet hier gelijk het grootste probleem met een achtergrondplaatje: het blijft zich herhalen.
Daarom moet je als je toch een achtergrond wilt gebruiken, altijd een neutraal en rustig plaatje gebruiken.

Wil je dat er geen herhalingen van je afbeeldingen plaatsvindt, dan kun je bgproperties="fixed" toevoegen in je body-tag.

Auteur: Daviddehaas

HTML

Agenda

Nieuws

Forum

Populaire onderwerpen

Algemene informatie