HTML

Inhoud

Een eerste tekst

Paginatitel

Hoofdingen

Basis sjabloon

Een HTML bestand bestaat steeds uit dezelfde basisstructuur. Daarom is het handig om dit éénmaal in een HTML bestand voor te bereiden, wat je nadien telkens kan hergebruiken. Je maakt zo een HTML bestand in bijvoorbeeld Notepad++.

<html>

<head>

</head>

<body>

</body>

</html>

Om een bestand op te slaan in Notepad++ als .html kies je Opslaan als, en bij type kies je Hyper Text Markup Language File.

Let op! Zorg ervoor dat de bestandsnaam niet index.html.html wordt, want dan werkt de automatische link naar de hoofdpagina ook niet.

Een eerste tekst

Het kan handig zijn om tekst die je op een website wil plaatsen, eerste te schrijven in een tekstverwerkingsprogramma zoals Google Docs of Microsoft Word. Zo kan je gebruik maken van de autocorrector die in dit programma verwerkt zit. Want als bedrijf wil je natuurlijk ten allen tijden vermijden dat er typfouten op je website staan.

Wanneer je de tekst schrijft, hou je best volgende opmerkingen in je achterhoofd:

al wat je schrijft is ofwel “Kop 1” ofwel “Standaard”;
paragrafen worden gescheiden door een witregel;
een paragraaf bestaat uit doorlopende tekst of uit een verticale opsomming zoals:
- Jan
- Klaas
- Piet
- …

Als je tekst klaar is, selecteer (Ctrl+A) en kopieer dan de tekst (Ctrl+C). Plak de tekst in je HTML bestand tussen de body- tags. Al wat tussen <body> en </body> tags staat, vormt de zichtbare inhoud van de pagina. Je krijgt dan zoiets:

<html>

<head>

</head>

<body>

Mijn parkiet

Ik heb een parkiet genaamd Pietje. Hij kan goed vliegen en spelen. Overdag mag hij uit zijn kooi. Hij is blauwwit. Hij eet en drinkt uit bakjes. Hij heeft veel speelgoed:

Pietje’s speelgoed

Een spiegeltje

Een belletje

Nog een belletje

Nog een spiegeltje

En nog veel meer

Tot zover dit artikel over de parkiet Pietje.

</body>

</html>

Wanneer je deze tekst opslaat als index.html en je opent dit bestand met een webbrowser (Google Chrome) in plaats van met Notepad++ dan verkrijg je onderstaand resultaat.

Dit is natuurlijk nog niet wat we een mooi geordende webpagina noemen. Hieronder zullen we verder structuur brengen aan onze eerste webpagina.

Paginatitel

Plaats de titel, in ons voorbeeld, Mijn parkiet, tussen de <title> en </title> tags binnen de <head> tags. Wat daartussen staat is niet zichtbaar op de pagina, maar wordt getoond in de smalle richel helemaal bovenaan het browservenster. Ook gebruiken zoekmachines deze titel voor het indexeren van de pagina.

Sla opnieuw op. Zoek het bestand op en open het door erop te dubbelklikken, dan wordt dit bestand getoond in de standaardbrowser. Het zal blijken dat de tekst nog steeds doorloopt, maar de titel is bovenaan wel ingevuld.

Hoofdingen

Basis opmaak HTML.mp4

Zet de titel, Mijn parkiet, ook tussen de <h1> en </h1> tags. De h-tags staan voor header-tags.

<h1>Mijn parkiet</h1>

De titel wordt dan door de browser groot, vet en met witruimte eromheen weergegeven. Een subkop die wat kleiner moet zijn kan met <h2> en </h2> gemaakt worden:

<h2>Pietje's speelgoed</h2>

Voor nog kleinere koppen zijn <h3> tot en met <h5> beschikbaar. Hoe groter het getal bij de h-tag, hoe kleiner het lettertype.

Paragrafen

Een paragraaf wordt met <p> en </p> tags gemaakt. De p staat voor paragraph.

<p>Ik heb een parkiet genaamd Pietje. Hij kan goed vliegen en spelen. Overdag mag hij uit zijn kooi. Hij is blauwwit. Hij eet en drinkt uit bakjes. Hij heeft veel speelgoed:</p>

De browser zorgt voor witruimte eromheen en regelomloop, zodat je een duidelijk onderscheid krijg tussen de verschillende paragrafen.

Verticale opsomming

De verticale opsomming kan je als volgt verwezenlijken:

<p>Een spiegeltje<br>

Een belletje<br>

Nog een belletje<br>

Nog een spiegeltje<br>

En nog veel meer</p>

De <br> tag zorgt dat een nieuwe regel begonnen wordt. De br staat voor break. Om tijd te sparen kun je hem eenmaal typen, en dan kopiëren en plakken waar nodig.

Merk op! Gewoon op Enter duwen produceert geen nieuwe regel in HTML.

In totaal hebben we nu:

<html>

<head>

<title>Mijn parkiet</title>

</head>

<body>

<h1>Mijn parkiet</h1>

<p>Ik heb een parkiet genaamd Pietje. Hij kan goed vliegen en spelen. Overdag mag hij uit zijn kooi. Hij is blauwwit. Hij eet en drinkt uit bakjes. Hij heeft veel speelgoed:</p>

<h2>Pietje's speelgoed</h2>

<p>Een spiegeltje<br>

Een belletje<br>

Nog een belletje<br>

Nog een spiegeltje<br>

En nog veel meer</p>

<p>Tot zover dit artikel over de parkiet Pietje.</p>

</body>

</html>

Sla weer op en bekijk de pagina in een browser. De tekst zal er nu normaal uitzien, met basis opmaak.

Opmaak

Basis opmaak HTML 2.mp4

Om de website wat meer opmaak te geven, hebben we nog andere elementen nodig om dit te verwezenlijken.

Eenvoudige bewerkingen

In dit onderdeel zullen we tonen hoe je tekst vet kan maken, cursief kan plaatsen, als super- of subscript plaatsen of hoe je tekst kan benadrukken. Daarvoor bestaan de volgende tags: b, i, u, sub, sup en strong.

Vette tekst

De tekst die je in het vet geplaatst wil hebben, plaats je tussen de b-tags (bold):

<b>vette tekst</b>

Cursieve tekst

De tekst die je cursief op de webpagina wil, zet je tussen de i-tags (italic):

<i>schuine tekst</i>

Onderlijne tekst

Tekst die je wil onderlijnen, moet je tussen de u-tags plaatsen (underline):

<u>onderlijnde tekst</u>

Subscript

Om tekst in _subscript te plaatsen, zet je deze tussen de sub-tags (subscript):

Superscript

Tekst zet je in ^superscript door de sup-tags te gebruiken:

Belangrijke tekst

Belangrijke tekst zet je tussen de strong-tags:

Uiteraard kan je deze tags combineren. Zorg er dan wel voor dat je ze op de juiste manier bij elkaar zet, rond elkaar dus. Je moet steeds voor je een tag afsluit, ervoor zorgen dat de tags die hierbinnen geopend werden, eerst worden afgesloten. Een voorbeeld:

Juist: <b><u>Deze tekst is vet en onderlijnd</u></b>

Fout: <b><u>Deze tekst is vet en onderlijnd</b></u>

De meeste browsers geven geen foutmelding, maar je code is op die manier veel overzichtelijker, vooral als je met lange stukken bewerkte tekst werkt waarbij veel tags door elkaar gebruikt worden.

Geavanceerd bewerken

Hierboven werd tekst reeds opgemaakt met behulp van tags. Maar je kan ook opmaak definieren aan de hand van tags, in combinatie met parameters. Wanneer je een stuk tekst een bepaalde opmaak wil meegeven (ander lettertype, kleur en/of grootte) kan je die tekst tussen de font-tags plaatsen:

<font color="#FF00AA" face="Arial" size="3">Dit is bewerkte tekst</font>

Je kan in deze tag de volgende parameters gebruiken:

Kleur (color)

Om de kleur van de tekst te bepalen, gebruik je de color-parameter. Vervang de xxxxxx door de juiste hexadecimale kleurencode en de tekst binnen de font-tags krijgt die kleur.

color="#xxxxxx"

Lettertype (face)

Om het lettertype te wijzigen van een stuk tekst, gebruik je de face-parameter. Voor je website gebruik je best een veel gebruikt lettertype, zodat elke browser dit mooi kan tonen en zorg er ook zeker voor dat dit een eenvoudig te lezen lettertype is, zodat de bezoekers van je website niet te veel moeite moeten doen om de tekst te kunnen lezen.

face="Arial"

Lettergrootte (size)

Om de grootte van je lettertype te wijzigen, gebruik je de size-parameter. Dit kan ook een negatef getal zijn, wat een grootte geeft die kleiner is dan de standaard grootte.

size="x"

HTML basis links.mp4

Hyperlinks

Een website is opgebouwd uit verschillende pagina's. Om te navigeren van de ene naar de nadere pagina, heb je nood aan hyperlinks. Ook kan je verwijzen naar externe webpagina's.

Om een link naar een andere pagina te leggen, gebruik je de a-tag (anchor):

De elementen van de anchor-tag worden hieronder uitgelegd:

Href

Om te linken naar een andere locatie, moet je als vanzelfsprekend de locatie opgeven, dit doe je door de href-parameter:

href="pagina.html"

Hier plaats je de bestandsnaam + extensie (bij een webpagina .html of .htm, bij een figuur .gif of .jpg) van het bestand waarnaar je linkt. Dit kan een andere pagina, een afbeelding een figuur, een e-mail adres, ... zijn. Wanneer je wil linken naar een e-mail adres vul je hier mailto: gevolgd door het e-mailadres in:

<a href="mailto:t.vandeneede@ggl.gibbrasschaat.be">Verzend email</a>

Target

Om te definiëren hoe of waar de link geopend moet worden, gebruik je de target-parameter:

target="_blank"

Wanneer je dit element weglaat wordt de link standaard geopend in het venster waarin je je bevindt. Je kan hier zeggen dat de link in het volledig venster geopend moet worden (_top), of dat de link in een nieuw browservenster geopend moet worden (_blank). Dit laatste wordt vaak gebruikt.

Speciale tekens

Omdat de tekens < en > door de browser geïnterpreteerd worden (en dus niet weergegeven), zijn speciale codes nodig om die tekens desgewenst toch te gebruiken in de tekst zelf, namelijk respectievelijk < en > (less than en greater than).

En omdat het teken & dus ook geïnterpreteerd wordt, dient ook dat, als men het toch wil weergeven, met een code aangeduid te worden, namelijk & (van ampersand).

Verder is het goed te weten dat in HTML opeenvolgende spaties genegeerd worden, en als één spatie weergegeven worden. Iets uitlijnen met spaties kan dus niet. Echter, er is een code die indien gewenst toch meerdere spaties mogelijk maakt, namelijk   (no-break space). Bijvoorbeeld:

Dit geeft zeven spaties (waarvan er drie gewone spaties zijn, die tussen de harde spaties in staan).

Horizontale lijn

Om een horizontale lijn tussen je tekst te plaatsen gebruik je de tag <hr>. Ook deze tag heeft geen eindtag nodig. De tag kan eventueel nog de volgende elementen bevatten:

width="xx": de breedte van de lijn over je scherm. Standaard wordt de hele breedte van je scherm gebruikt, maar je kan de lijn ook korter maken door de xx te veranderen in een waarde van pixels of een procent (een getal gevolgd door %, dus bijvoorbeeld width="50%"). De lijn wordt standaard gecentreerd.

size="xx": de dikte van de lijn. Als je dit element weglaat wordt er gewoon een standaard lijn gebruikt. Je moet xx veranderen in een waarde van pixels. Als je NOSHADE als extra parameter toevoegt in het element krijg je een dikke lijn, afhankelijk van de ingestelde size.

Opsomming

HTML lijsten.mp4

Ongenummerd

Een ongenummerde opsomming maak je met de volgende code:

<ul>

</ul>

Dit geeft als resultaat:

Item 1
Item 2
Item 3

De code om een opsomming te maken bestaat uit 2 soorten tags: de tags <ul> en </ul> waartussen je de opsomming plaatst en de tags <li> </li> die het item aanduiden. Je kan zoveel items gebruiken als je wil, en ze ook opmaken zoals alle andere tekst met de gebruikelijke tags.

Genummerd

De code voor een genummerde opsomming is gelijkaardig aan die van de ongenummerde:

<ol>

</ol>

Dit geeft als resultaat:

Item 1
Item 2
Item 3

De code is bijna gelijkaardig aan de code van de ongenummerde opsomming, behalve dat de ul-tag vervangen wordt door de ol-tag.

Afbeeldingen

HTML afbeeldingen.mp4

Een afbeelding plaats je op je site met de volgende code:

Je hebt geen eindtag nodig. De elementen worden hieronder uitgelegd.

src="afbeelding.gif"

Src heeft als waarde de bestandsnaam met de extensie van de afbeelding. Dit element is verplicht.

width="50" height="100"

Width en height zorgen voor de breedte en hoogte van je afbeelding in pixels. Normaal kan je die ergens in je tekenprogramma zien. Deze elementen plaats je best in de tag zodat de je browser een plaats voor je afbeelding kan reserveren in de lay-out voordat hij ingeladen is. Als je het ene element in de tag plaatst, moet je het andere er ook in plaatsen

align="middle"

Align zegt hoe de tekst naast je afbeelding gepositioneerd moet worden. Ze kan de waarden top (bovenaan), middle (in het midden gemeten vanaf de onderkant van de letters), absmiddle (perfect in het midden) of bottom (onderaan) bevatten.

border="0"

Border vertelt hoe breed het gekleurde randje rond je afbeelding in pixels moet zijn als het een link is.

alt="Dit is een afbeelding"

Bij alt plaats je een beschrijving van de afbeelding. Op die manier weet je bezoeker al welke afbeelding daar zal komen voordat de afbeelding ingeladen is.

Tabellen

HTML tabellen.mp4

Tabellen worden gebruikt om gewone lijsten of tabellen mee te maken, maar in HTML worden ze ook vaak ingezet om de volledige inhoud van je pagina te ordenen in een tabel zodat alles mooi op de plaats komt die jij wenst. Door de tabelrand onzichtbaar te maken, merkt de bezoeker hier niks van. Tabellen kunnen ook gebruikt om de menu mooi te ordenen.

De algemene code

Het onderstaande voorbeeld is een eenvoudige tabel om de noodzakelijke HTML-tags voor tabellen te leren kennen:

<tr>

</tr>

<tr>

</tr>

</table>

Deze code geeft het volgende effect:

A1 A2

B1 B2

In onderstaande tabel wordt een beetje meer uitleg gegeven over de verschillende tags.

<table border="1"> en </table> Vertelt je browser dat je tussen deze twee tags de code voor een tabel definieert. Over border="1" zullen we het straks hebben.

<tr> en </tr> Een tabel bouw je in HTML op per rij, tussen deze tags zet je dus alle code voor een hele rij.

<td> en </td> Uiteindelijk verdeel je die rij dan nog eens in verschillende cellen op. Ook als je rij maar één cel bevat, moet je deze tag gebruiken. Normaal gezien moet elke rij ook evenveel cellen bevatten, tenzij je speciale tags (zie later) gebruikt waarbij je cellen kan 'uitrekken'.

De tabel opmaken

In HTML bestaan er een aantal opmaaktags waarmee je je tabel of individuele cellen kan opmaken. Hieronder wordt een overzicht gegeven, naast het element staat telkens tussen haakjes in welke tag je het element moet zetten.

border="xx" (table)

Hiermee definiëer je de dikte van de randen in en rond je tabel in pixels. Als je dit element weglaat maakt Internet Explorer de waarde standaard 0, geen rand dus, maar sommige browsers maken daar iets anders van, dus je gebruikt best altijd deze tag.

cellspacing="xx" en cellpadding="xx" (table)

Definiëren respectievelijk de ruimte tussen de verschillende cellen en de ruimte tussen de celrand en inhoud in pixels. Met cellspacing kan je ook het uitzicht van je rand een beetje veranderen, uitproberen is hier de boodschap.

nowrap (table of td)

Voorkomt woordafbreking binnen alle cellen in je tabel (bij table) of één bepaalde cel (bij td). Let wel op dat je je tekst in die tabel of cel niet té lang maakt, anders moet je bezoeker voortdurend scrollen.

width="xx" (table of td)

Definiëert de breedte van je cellen in pixels of procent (% bij je getal zetten, bijvoorbeeld width="50%"). Je kan kiezen om de breedte van alle cellen (bij table) of van één bepaalde cel (td) te definiëren.

bgcolor="#000000" (td)

Definiëert de achtergrondkleur van je cel volgens de hexadecimale kleurencode, voorafgegaan met het hekje.

Colspan en rowspan

Wanneer je wil afwijken van de standaard lay-out van een tabel en bepaalde cellen wil samenvoegen, kan je colspan of rowspan gebruiken. Hieronder twee voorbeelden.

Colspan

De code:

<tr>

</tr>

<tr>

</tr>

</table>

Het resultaat:

colspan="2" geeft aan dat de bovenste cel twee kolommen in plaats van één inneemt. Je moet de tweede cel dus ook niet meer definiëren.

Rowspan

De code:

<tr>

</tr>

<tr>

</tr>

</table>

Het resultaat:

colspan="2" geeft aan dat de linkse cel twee rijen in plaats van één in neemt. Je moet de eerste cel van de tweede rij dus niet meer definiëren.

Formulieren

HTML formulier.mp4

Een formulier is een heel bijzonder element, omdat er diverse besturingselementen in worden gebruikt die alleen bij formulieren voorkomen.

Een formulier wordt omsloten door de tags <form> en </form>.

Voornaam:

Naam:

</form>

Action zorgt voor de verwerking van de formuliergegevens. Naar deze pagina wordt je gestuurd na het duwen op de submit-knop.

Method is de manier hoe het formulier actie neemt (POST of GET), maar hierover later meer.

Classroom

Page updated

Report abuse