H1 – Structuur
Met HTML beschrijf je de structuur van je webpagina. Een volledig HTML element bestaat uit
een openings- <html> en een sluitingstag </html>.
Een aantal voorbeelden van HTML elementen zijn als volgt:
• <html></html>
Alles tussen de openings- en sluitingstag is HTML-code;
• <body></body>
Alles tussen de openings- en sluitingstag staat in het hoofdvenster van de website;
• <h1></h1>
Dit is een hoofdkop;
• <p></p>
Dit is een alinea;
• <h2></h2>
Dit is een subkop;
Attributen bieden extra informatie over de inhoud van een element. Een attribuut is
opgebouwd uit twee delen: een naam <p class=..> en een waarde <..”alinea1”>.
De basis opbouw van een HTML pagina ziet er als volgt uit:
Wanneer je werkt in een CMS zie je de <html> en <body> tags vrijwel nooit.
,H2 – Tekst
HTML heeft zes verschillende kopniveaus: <h1> t/m <h6>. Standaard tonen browsers de
inhoud van koppen (wat tussen de openings- en closingtag staat) in verschillende grootte.
Hierbij is de <h1> logischerwijs het grootst en <h6> het kleinst.
Je kunt een tekst vet maken door deze binnen <b></b> tags te plaatsen en cursief door hem
tussen <i></i> tags te plaatsen. Echter, als het puur als opmaak bedoeld is dien je dit te
veranderen met CSS!
Ook kan je teksten als superscript of subscript neerzetten. Dit doe je door hem tussen <sup></sup>
(voor superscript) of <sub></sub> (voor subscript) tags te plaatsen. Een superscript gebruik
je vaak bij m2 en een subscript bij wetenschappelijke notaties als CO2.
*Witruimte maakt de code beter leesbaar!*
Als je iets tussen <strong></strong> tags plaatst geef je aan dat de inhoud erg belangrijk is.
De tekst wordt eveneens vetgedrukt. Echter, je dient dit niet te gebruiken om een tekst
vetgedrukt te maken.
Wanneer je op een nadruk wilt leggen die op een subtiele wijze de betekenis van de zin
veranderd dan kun je gebruik maken van <em></em>, de tekst wordt dan schuingedrukt.
Ook hier geldt weer dat je het niet moet gebruiken als opmaak, daarvoor hebben we CSS.
Citaten:
<blockquote>inhoud</blockquote>
• De inhoud van dit element is een langer citaat van een hele alinea;
• De inhoud van het element springt in.
<q>inhoud</q>
• Dit element wordt gebruikt voor kortere citaten;
• Browsers horen aanhalingstekens rondom de tekst tussen de tags te plaatsen. IE doet
dat niet, daarom wordt het gebruik van <q> vaak vermeden.
NOTE: het attribuut ‘cite’ wordt gebruikt om aan te geven waar een citaat vandaan komt.
Afkortingen en acroniemen:
<abbr>n.v.t.</abbr>
• Wordt gebruikt voor afkortingen en acroniemen, het attribuut ‘title’ wordt gebruikt
om de volledige term aan te duiden.
,Citaten en definities
<cite></cite>
• Wordt gebruikt om te verwijzen naar een boek, film of onderzoeksrapport als een
citaat daar vandaan komt;
• Inhoud wordt cursief weergegeven.
<dfn></dfn>
• Wordt gebruikt om een definiërende instantie (de eerste keer dat je een nieuwe
term als bijvoorbeeld vakjargon uitlegt) aan te geven;
• Sommige browsers geven dit cursief weer. Chrome en Safari doen dat niet!
Auteursgegevens
<address><p></p></address>
• Bevat de contactgegevens van de auteur van de pagina;
• De inhoud wordt vaak cursief weergegeven.
Inhoudelijke wijzigingen
<ins></ins>
• Wordt gebruikt om aan te geven dat tekst aan een document is toegevoegd;
• De inhoud wordt onderstreept.
<del></del>
• Wordt gebruikt om aan te geven dat tekst uit een document is verwijderd;
• Inhoud wordt doorgehaald weergegeven.
<s></s>
• Geeft aan dat een tekst niet meer juist of relevant is, maar niet moet worden
verwijderd;
• De inhoud wordt meestal doorgehaald weergegeven.
, Hoorcollege 11-9-2017 (Walter Gianuzzi)
Het internet is opgebouwd uit de onderstaande standaarden:
• TCP/IP
• DNS
• URL
• HTTP(S)
• HTML / CSS
• JavaScript
Het web is opgebouwd uit de onderstaande standaarden:
• HTML
• CSS
• JavaScript
• Een browser (Chrome, Safari, IE etc.)
• API’s
Web en internet zijn twee compleet verschillende zaken. Het web is namelijk de laag en het
internet is de techniek.
Tim Berners Lee liet alle computers hetzelfde protocol spreken (HTTP) en liet alle computers
informatie op dezelfde manier structureren om uitwisseling mogelijk te maken (HTML).
Browsers spreken allemaal het HTTP protocol. Een DNS (Domain Name Server) gaat na welk
IP-adres bij bijvoorbeeld www.hoi.com hoort. HTML heeft CSS en JavaScript nodig om er
goed uit te zien en zich fatsoenlijk te gedragen. Hierbij is CSS verantwoordelijk voor de
vormgeving en JavaScript voor het gedrag.
Binnen HTML vind je ook een aantal ‘self-closing’ tags. Onderstaand zijn ze opgesomd:
• <meta>
• <link rel=”stylesheet” href=”style.css”>
• <br>
• <img src=”images/image.jpg” alt=”afbeelding”>
• <hr>
• <input type=”tekst”>
Met HTML beschrijf je de structuur van je webpagina. Een volledig HTML element bestaat uit
een openings- <html> en een sluitingstag </html>.
Een aantal voorbeelden van HTML elementen zijn als volgt:
• <html></html>
Alles tussen de openings- en sluitingstag is HTML-code;
• <body></body>
Alles tussen de openings- en sluitingstag staat in het hoofdvenster van de website;
• <h1></h1>
Dit is een hoofdkop;
• <p></p>
Dit is een alinea;
• <h2></h2>
Dit is een subkop;
Attributen bieden extra informatie over de inhoud van een element. Een attribuut is
opgebouwd uit twee delen: een naam <p class=..> en een waarde <..”alinea1”>.
De basis opbouw van een HTML pagina ziet er als volgt uit:
Wanneer je werkt in een CMS zie je de <html> en <body> tags vrijwel nooit.
,H2 – Tekst
HTML heeft zes verschillende kopniveaus: <h1> t/m <h6>. Standaard tonen browsers de
inhoud van koppen (wat tussen de openings- en closingtag staat) in verschillende grootte.
Hierbij is de <h1> logischerwijs het grootst en <h6> het kleinst.
Je kunt een tekst vet maken door deze binnen <b></b> tags te plaatsen en cursief door hem
tussen <i></i> tags te plaatsen. Echter, als het puur als opmaak bedoeld is dien je dit te
veranderen met CSS!
Ook kan je teksten als superscript of subscript neerzetten. Dit doe je door hem tussen <sup></sup>
(voor superscript) of <sub></sub> (voor subscript) tags te plaatsen. Een superscript gebruik
je vaak bij m2 en een subscript bij wetenschappelijke notaties als CO2.
*Witruimte maakt de code beter leesbaar!*
Als je iets tussen <strong></strong> tags plaatst geef je aan dat de inhoud erg belangrijk is.
De tekst wordt eveneens vetgedrukt. Echter, je dient dit niet te gebruiken om een tekst
vetgedrukt te maken.
Wanneer je op een nadruk wilt leggen die op een subtiele wijze de betekenis van de zin
veranderd dan kun je gebruik maken van <em></em>, de tekst wordt dan schuingedrukt.
Ook hier geldt weer dat je het niet moet gebruiken als opmaak, daarvoor hebben we CSS.
Citaten:
<blockquote>inhoud</blockquote>
• De inhoud van dit element is een langer citaat van een hele alinea;
• De inhoud van het element springt in.
<q>inhoud</q>
• Dit element wordt gebruikt voor kortere citaten;
• Browsers horen aanhalingstekens rondom de tekst tussen de tags te plaatsen. IE doet
dat niet, daarom wordt het gebruik van <q> vaak vermeden.
NOTE: het attribuut ‘cite’ wordt gebruikt om aan te geven waar een citaat vandaan komt.
Afkortingen en acroniemen:
<abbr>n.v.t.</abbr>
• Wordt gebruikt voor afkortingen en acroniemen, het attribuut ‘title’ wordt gebruikt
om de volledige term aan te duiden.
,Citaten en definities
<cite></cite>
• Wordt gebruikt om te verwijzen naar een boek, film of onderzoeksrapport als een
citaat daar vandaan komt;
• Inhoud wordt cursief weergegeven.
<dfn></dfn>
• Wordt gebruikt om een definiërende instantie (de eerste keer dat je een nieuwe
term als bijvoorbeeld vakjargon uitlegt) aan te geven;
• Sommige browsers geven dit cursief weer. Chrome en Safari doen dat niet!
Auteursgegevens
<address><p></p></address>
• Bevat de contactgegevens van de auteur van de pagina;
• De inhoud wordt vaak cursief weergegeven.
Inhoudelijke wijzigingen
<ins></ins>
• Wordt gebruikt om aan te geven dat tekst aan een document is toegevoegd;
• De inhoud wordt onderstreept.
<del></del>
• Wordt gebruikt om aan te geven dat tekst uit een document is verwijderd;
• Inhoud wordt doorgehaald weergegeven.
<s></s>
• Geeft aan dat een tekst niet meer juist of relevant is, maar niet moet worden
verwijderd;
• De inhoud wordt meestal doorgehaald weergegeven.
, Hoorcollege 11-9-2017 (Walter Gianuzzi)
Het internet is opgebouwd uit de onderstaande standaarden:
• TCP/IP
• DNS
• URL
• HTTP(S)
• HTML / CSS
• JavaScript
Het web is opgebouwd uit de onderstaande standaarden:
• HTML
• CSS
• JavaScript
• Een browser (Chrome, Safari, IE etc.)
• API’s
Web en internet zijn twee compleet verschillende zaken. Het web is namelijk de laag en het
internet is de techniek.
Tim Berners Lee liet alle computers hetzelfde protocol spreken (HTTP) en liet alle computers
informatie op dezelfde manier structureren om uitwisseling mogelijk te maken (HTML).
Browsers spreken allemaal het HTTP protocol. Een DNS (Domain Name Server) gaat na welk
IP-adres bij bijvoorbeeld www.hoi.com hoort. HTML heeft CSS en JavaScript nodig om er
goed uit te zien en zich fatsoenlijk te gedragen. Hierbij is CSS verantwoordelijk voor de
vormgeving en JavaScript voor het gedrag.
Binnen HTML vind je ook een aantal ‘self-closing’ tags. Onderstaand zijn ze opgesomd:
• <meta>
• <link rel=”stylesheet” href=”style.css”>
• <br>
• <img src=”images/image.jpg” alt=”afbeelding”>
• <hr>
• <input type=”tekst”>
