HTML college: Overzicht HTML
WWW is een van de applicaties die gebruik maken van het internet.
Hoe zag het internet eruit voor het World Wide Web ?
Voordat het WWW zijn intrede deed was het al mogelijk om bestanden te zoeken,
databases te raadplegen, bestanden of e-mail te ontvangen of te verzenden en
dat allemaal over het internet. Voorbeelden van applicaties waarmee dat kon
(en nog steeds kan, hoewel de ondersteuning van enkele systemen gaandeweg
minder wordt) zijn ftp, gopher, archie en news.
Aan al deze mogelijkheden is in het begin van de jaren negentig
het gebruik van HTML, verzonden via het http protocol, toegevoegd en
dat was een van de belangrijkste redenen voor de enorme populariteit van
het internet nu.
HTML bundelt tekst, plaatjes, geluid, tabellen en dergelijke
-> opdelen van een document, snel doorheen zoeken, niet nodig om te weten
waar (fysiek) iets staat
Websites maken voor het WWW is heel veel afkijken van anderen. Maar je moet wel heel goed opletten
want lang niet iedereen houdt zich aan de HTML standaard ! Er wordt heel
wat afgerommeld op het internet.
Wat is HTML ?
HTML is een programmeertaal waarmee je documenten kunt opmaken en
een zekere mate van interactie kunt bieden door relaties tussen verschillende
documenten te maken waarmee door een verzameling documenten genavigeerd
kan worden.
HTML bestaat uitsluitend uit leesbare tekst.
Een file die je maakt met een tekstverwerker (bv. Word of Wordperfect) is
meestal geen tekst-file maar bevat allerlei hulptekens. Dat zijn niet-leesbare
tekens die bijvoorbeeld gebruikt worden om kleurtjes, lettergroottes en
kantlijnen in te stellen.
Zo'n file is onbruikbaar als HTML-bestand, want HTML bevat alleen
leesbare tekens !.
Schrijf je HTML files daarom weg als (ASCII) text file
met de extensie .html (.htm mag ook maar verdient niet de voorkeur) en let
vooral op bij eigenwijze programma's als Notepad want die willen er nog wel
eens .txt achter plakken.
HTML syntax
HTML bestaat uit tags en tekst. De tekst is de inhoud van het document
en de tags beschrijven hoe die inhoud aan de gebruiker gepresenteerd
wordt. Een tag in zijn meest eenvoudige vorm is de naam van de tag
tussen < en > dus bijvoorbeeld <strong>. Een tag heeft
altijd betrekking op de tekst die erna komt en het effekt van de tag
is voelbaar totdat je een sluit-tag tegenkomt. Een sluit-tag bestaat
altijd uit de naam van de tag tussen </ en > zodat bij de tag
<strong> de bijbehorende sluit-tag </strong> is.
Deze zin laat zien dat het effekt van de <strong>tag
voelbaar is tot aan de</strong> tag en niet verder.
Soms mag je in HTML de sluit-tag weglaten. Daar komen we later op terug.
HTML tags
Een tag is een label, dus eigenlijk een soort naamplaatje. Denk aan
dog-tag, een hondenplaatje. Het vertelt iets over het object waar het aan
hangt. Bij een hond geeft het bv. de naam en adres van het baasje, bij HTML
kan het iets zeggen over de kleur van een stuk tekst dat na de tag komt.
Een tag heeft een naam en vaak een aantal attributen met hun waarden. Een tag
begint altijd met < en wordt afgesloten door >
De algemene opbouw van een tag is als volgt:
<naam attribuut1="waarde1" attribuut2="waarde2" ...>
We schrijven de naam altijd met kleine letters (lowercase). Dat maakt de
stap naar XHTML kleiner.
Attributen zijn strings dus moeten altijd tussen "" staan.
Een geldige tag zou dus kunnen zijn:
<body bgcolor="red" text="lightblue">
Maar de volgende is net zo valide:
<body>
Als een browser een tag niet kent dan moet hij die tag negeren. De
gegevens waar de tag betrekking op zou moeten hebben wordt dan vaak gewoon
afgebeeld zoals het in het HTML-document staat.
Een minimaal HTML document
Een minimaal HTML document ziet er zo uit:
Het bevat dus altijd een header die algemene informatie over het document
bevat en een body die de eigenlijke informatie bevat.
Neem in de header altijd een titel op.
Deze zie je terug in de titel-balk van je browser.
Het staat bijzonder knullig als je pagina's 'Untitled' heten.
Een paar voorbeelden van tags
Hieronder volgen enkele veel gebruikte tags:
<html>
<head>
<title>
<body>
<h1>
<h2>
<h6>
<img>
<b>
<br>
<a>