Ga naar
HTML deel 1: De basis
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 < >.
|
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
<b><i>Tekst</i></b> doen, maar niet <b><i>Tekst</b></i>
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.
|
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> <body>
<head>
<title>
Voorbeeld2.htm
</title>
</head>
Hier is de tekst, hij kan
<b>breed</b>
<i>cursief</i>
of
<u>onderstreept</u>
worden.
<b><i><u> Je kunt de tags ook combineren </u></i></b>
</body>
</html>
<b> Zo zet je de tekst vetgedrukt.
<i> Dit is voor cursieve tekst
<u> En met deze kun je een tekst onderstrepen
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> <body>
<head>
<title>
Voorbeeld3.htm
</title>
</head>
<p>
Als het goed is, zie je nu twee paragrafen.
</p>
<p>
Dit is dankzij de paragraaf tag.
</p>
</body>
</html>
<p> 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 <br>
<html> <body> <p>
<head>
<title>
Voorbeeld4.htm
</title>
</head>
Als het goed is, zie je nu twee paragrafen.
<br>
En hier heb ik net de zin afgebroken
</p>
<p>
De vorige zin is afgebroken met behulp van de break-tag.
</p>
</body>
</html>
|
<br> De "Break" tag, hiermee kun je een zin of paragraaf afbreken. <br> 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 <br> weg en we voegen de <blockquote> toe:
<html> <body>
<head>
<title>
Voorbeeld5.htm
</title>
</head>
<blockquote> <p>
<p>
Als het goed is, zie je nu twee paragrafen.
<br>
En hier heb ik net de zin afgebroken
</p>
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.
</p>
</blockquote>
</body>
</html>
<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> <body>
<blockquote>
<head>
<title>
Voorbeeld6.htm
</title>
</head>
<p>
<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>
</p>
</blockquote>
</body>
</html>
<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.
<b> Zo maken we de tekst vetgedrukt.
<i> Deze is om de tekst cursief te maken.
<u> En deze onderstreept de tekst.
<p> Met <p> maak je een paragraaf.
<br> 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.