Ga naar
HTML deel 2: Tekst opmaken
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.
|
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>
<p>
Deze tekst is om te testen. Je mag hem best lezen maar veel zul je er niet aan hebben.
</p>
</blockquote>
</body>
</html>
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.
|
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>
<p>
De tekst is nu wit zoals je wel ziet.
</p>
</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 <Font>
Soms wil je ook verschillende delen van de tekst kleuren. Hiervoor gebruiken we <font>
<html><head>
<title>
Voorbeeld7.htm
</title>
</head>
<body bgcolor="grey" text="white">
<blockquote>
<p>
Deze tekst is om te testen.
<font color="black">
Je mag hem best lezen maar veel zul je er niet aan hebben.
</font>
</p>
</blockquote>
</body>
</html>
Klik hier voor een voorbeeld
<font> 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.
|
<font> kan enkele onderdelen van de tekst veranderen. Over het algemeen wordt <font> gebruikt om tekst een kleurtje te geven en om lettergrootte te veranderen. Maar <font> kan ook het lettertype veranderen.
We zullen een aantal voorbeelden geven van de eigenschappen die je in een <font> 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.
<head>
<title>
Voorbeeld8.htm
</title>
</head>
<body bgcolor="grey">
<blockquote>
<p>
<font color="white">
Deze tekst is nu wit
</font>
<p>
<font color="white" size="+1">
Deze tekst is nu wit en groter.
</font>
<p>
<font color="white" size="1">
Maar nu is de tekst wit en klein.
</font>
<p>
<font color="white" face="Comic Sans MS">
En nu heeft de tekst een ander lettertype en is wit.
</font>
</p>
</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.
|
Tekst centeren en links en rechts uitlijnen.
Eigenschappen kunnen ook voor andere tags gebruikt worden dan alleen <font> en <body>. Zo kunnen we <p> 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>
<p align="center">
Nu zie je de tekst gecentreerd.
</p>
<p>
Maar normaal staat de tekst links.
</p>
<p align="right">
En nu staat de tekst rechts.
</p>
</blockquote>
</body>
</html>
Klik hier voor een voorbeeld
<p align="?"> met de align eigenschap kun je de tekst:
- Links uitlijnen ("left")
- Rechts uitlijnen ("right")
- En centreren ("center")
<head>
<title>
Voorbeeld10.htm
</title>
</head>
<body>
<blockquote>
<p>
Hier staat weer wat tekst als voorbeeld
</p>
<hr>
Deze tekst gaat hier weer verder
</blockquote>
</body>
</html>
Klik hier voor een voorbeeld
Deze tekst gaat hier weer verderKlik hier voor een voorbeeld
Naast <p align="center"> kun je ook <center> gebruiken. Deze tag plaats je dan tussen de <p> en de </p>. Het gebruik van <center> wordt wel ontmoedigd door het adviesorgaan voor HTML omdat het schoner is om <p align="center"> 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>
<p>
</p>
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>
<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>
<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:<br>
<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
<dt> Het woord dat je wilt definiëren
<dd> De definitie van het woord.
Meta Tags
|
<html>
<head>
<meta name="keywords" content="woord1, woord2, woord3">
<meta name="author" content="Bertine van Hoevell">
<meta name="copyright" content="Copyright © 2005 hcc!Magazine">
<meta name="robots" content="Noindex, Nofollow">
<meta http-equiv="refresh" content="10;url=http://www.eenpagina.nl">
<title> Geen voorbeeld
</title>
</head>
<body>
Onbelangrijke tekst.
</body>
</html>
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.
Voorbeeld: <meta name="copyright" content="Copyright © 2005 hcc!Magazine">
<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.
<font> 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.
<p>
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.