De regels voor het noteren van een taal wordt de syntax genoemd. De bouwstenen van een HTML- pagina zijn de tags ( = elementen). De naam van een element staat altijd tussen < en > en (punthaken of vishaken).

We leggen eerst het fenomeen uit:

  1. Een tag staat altijd tussen punthaken .
  2. Een element bestaat uit een begintag en een eindtag met de inhoud ertussen. Er zijn een paar uitzonderingen maar hier komen we later op terug.
  3. Alles dat tussen deze tags staan komt in principe in beeld van de webpagina.De tekst tussen een < en een > komt nooit in beeld .
  • Enters (regeleinde), dubbele spaties en tabs in de HTML-code hebben geen invloed op het uiterlijk van de webpagina in de browser.
  • Voor hoofdletters en kleine letters gelden geen beperkingen in HTML5. Het is toegestaan om
     <DIV>
    of
     <DIV>

Er bestaan echter een paar elementen die geen sluittag hebben, zoals

<meta	>, 	<br>, 	<hr> en 	<img>
om ervoor te zorgen dat deze elementen toch afgesloten zijn, bedacht men de volgende oplossing: de begintag 'zelfsluitend' maken door een spatie en een slash te schrijven voor het sluitteken:

<img src="Afbeeldingen/foto01.jpg" title="uitstap zee zomer 2012" />

Een voorbeeld van een attribuut:

<img src='url'>
  • De vermelding src is een attribuut = uitbreiding op de tag
  • De waarde staat tussen dubbele aanhalingstekens "..."Hoewel het nu in HTML5 ook met enkele aanhalingstekens ' ' werkt.

Kort samengevat: een tag bestaat op zich uit 3 verschillende delen:

 
	<table bordercolor="red"> </table>
	
<element attribuut = "waarde"> </element>

In een tekst-editor bv. notepad++ zie je de elementen in verschillende kleuren:

  • De HTML-code is in het blauw.
  • De attributen zijn in het rood en de waarden van de attributen (tussen de dubbele aanhalingstekens) zijn vet blauw gekleurd.
  • Alles wat zichtbaar is in de browser is zwart gekleurd.

Elke website bevat onderstaande structuur:

<html>
<head>
<title> ... </title>  
</head> 
<body>
<h1> ... </h1>
<p> .... </p>  
</body>
</html> 

Kort samengevat:

  1. De tag <html> kondigt de HTML-code aan.
  2. De tag <head> kondigt het hoofdgedeelte aan waarin allerlei informatie voor externe instanties staan (=extra codetaal oproepen zoals stijlbladen, javascript, enz...).
  3. De tag <title> vind je genest in de head van de pagina. De inhoud wordt weergeven in het tabblad van de browser = titel van de pagina. Vergeet dit niet! Anders staat er de tekst 'naamloos document' en dit komt heel onprofessioneel over. De titel van een webpagina is ook zéér belangrijk voor de zoekresultaten. Maak de titel zo specifiek en beknopt mogelijk, het moet aangeven over wat de webpagina gaat.
  4. Binnen de tag <body> gebeurt het allemaal! De hele webpagina wordt opgebouwd binnen dit gedeelte ( = structuur ). De structuur van de pagina wordt in het algemeen weergegeven door titels, net zoals een krant of tijdschrift. De tekst wordt ingedeeld in een alinea's.

Hoe geef je aan dat een webpagina gebruik maakt van HTML5?

Dat gebeurt met een heel eenvoudige document type declaration aan het begin van het document. Het zorgt ervoor dat de pagina in 'standaardmode' wordt weergegeven, dus volgens de regels van het World WideWeb Consortium.

De doctype bestaat uit slechts twee woorden in HTML5:

<!doctype html>

Het is verstandig het doctype op een HTML5-pagina de eerste tekst van het HTML-bestand te laten zijn. Bij het documenttype aan het begin gelden evenmin eisen voor het gebruik van hoofdletters.

In de eerste 512 bytes van een HTML5-document moet zijn aangegeven welke tekenverzameling het document gebruikt. Hoe vaak komt het niet voor dat de é en de à in een aangeleverde tekst iets raar opleveren op een andere computer? In de westerse wereld is er maar één verdedigbare tekenverzameling voor websites en dat is utf-8.

In het head van een webpagina kun je meestal het volgende meta-element zien:

<meta charset="utf-8">

Het is een vermelding van de gebruikte tekenverzameling, charset is in het Engels: character set.

In het vorige voorbeeld 'basis HTML5' gaf hij de HTML keurig weer in de browser, maar het was absoluut nog geen standaard webpagina. Zo moet de browser allereerst worden verteld dat een document is opgemaakt in HTML. We gaan de volgende code opslaan als 'sjabloon.html', zodat u met alle oefeningen steeds met deze basispagina kunt starten.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Oefening 1: Basis </title>
<meta name="web_author" content="eigen naam">
<meta name="description" content="Online webleren oefen je via PTI Ninove!">
<meta name="keywords" content="web, webdesign, HTML, CSS, online leren, zelfstandig leren, ... " >
</head>

<body>
<h1> Titel van de pagina </h1>
<p> Hier komt later mijn tekst in. </p>
</body>
</html>

Kort samengevat:

  1. De metatag <meta name='web_author' > is informatief en heeft geen invloed op de ranking bij de zoekmachines. Wel van invloed zijn onder andere de titel van de pagina, de trefwoorden <meta name='keywords'> en de beschrijving <meta name='description'>.
  2. De regel <!-- Hier komt de datum van vandaag in 9/11/2016 --> is handig voor jezelf of voor anderen om richtlijnen en feedback te geven. De tekst tussen <!-- en --> leest de browser als commentaar.

Maak het bovenstaande sjabloon na en sla de oefening op als 'oef01Basis.html'. Dien in op Smartschool.

Het resultaat ziet er in de browser zo uit:

Samenvatting HTML pagina:
  • Een HTML pagina's zijn tekst document.
  • HTML gebruikt tags om structuur op te roepen.
  • De tags bestaan meestal uit paren: een begin- en eindtag.
  • Een tag kan attributen bevatten met extra inhoud over dat element.
  • Alle attributen hebben een specifieken naam en waarde nodig.