Les 01 - Wat Is HTML

STATISCHE WEBSITES
Les 1 Wat is HTML?
1
WAT IS HTML?
• Standaard opmaaktaal om webpagina’s te schrijven

• HyperText Markup Language
• Web browsers kunnen HTML code omzetten in visuele
vorm
• Laatste versie is HTML 5
• Hoe leer je HTML? Trial and error..
2
WAT IS HTML?
• Een HTML bestand bevat altijd een doctype declaratie

• Doctype informeert de browser welk type van HTML gebruikt
wordt (in theorie kan je nog HTML 2.0 gebruiken)
• Na de declaratie komt het <html> element waarin we html code
kunnen schrijven
• HTML bestand heeft als extensie .html
− voorbeeld: producten.html
• Wat is een extensie?
− Een tekstbestand dat je maakt met Kladblok heeft (meestal) als extensie .txt
− Een word bestand dat je maakt met Word heeft (meestal) als extensie .docx
3
HOE BRONCODE BEKIJKEN?
• Rechtermuisknop: Broncode
bekijken / View page source
• Shortcut: ctrl+u (meeste
browsers)
• Webbrowsers zetten HTML code
om in een visuele vorm wat wil
zeggen dat we van elke
website de broncode kunnen
bekijken
4
VOORBEELD HTML PAGINA
• De eerste regel is de declaratie van het doctype

• Dan wordt het <html> element geopend waarin we
het <head> en <body> element plaatsen
• Het <head> element bevat alle instructies van de
website zoals
− de titel van het tabblad
− Link naar CSS-, font-, javascriptbestanden en nog zoveel meer..
• Wat tussen het <body> element staat is wat we daadwerkelijk zien
op het scherm
• Merk op dat elk element geopend en gesloten wordt
behalve het doctype (begint ook met <! , de tags die wel gesloten
worden hebben geen !)
• HTML is niet hoofdlettergevoelig
• Meer info: https://www.w3schools.com/html/html_intro.asp
5
VOORBEELD HTML PAGINA
Code Resultaat
6
HTML ELEMENTEN, TAGS EN ATTRIBUTEN
• Tags/elementen
− <html>, <head>, <title>, <body>, <p>, ...
− <title>My first HTML document</title>
− <p>Hello world!</p>
− <img src=“..”>
• Attribuut (geeft extra informatie aan een element)

− <img src=“foto1.jpg” alt=“Afbeelding van Bassie & Adriaan”>
− SRC = Source
− Alt = Alternative
7
HTML ELEMENTEN, TAGS EN ATTRIBUTEN
8
VOORBEELDEN VAN HTML ELEMENTEN
• Structuurelementen
− <html></html>, <head></head>, <body></body>
• Paragraaf/tekst tonen
− <p>Je plaatst tekst tussen deze twee tags</p>
• Titel tonen
− <h1>Dit is een titel</h1>
• Afbeelding tonen
− <img src=“naamvandefoto.jpg” alt=“Foto van een ...”>
• Interactieve link
− <a href=http://www.thomasmore.be target=“_blank”>Ga naar de website van
Thomas More!</a>
9
• Video
− <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
• Audio
− <audio controls>
<source src=“music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
• Iframe
− <iframe width="560" height="315" src="https://www.youtube.com/embed/SWU3NUKf__0"
frameborder="0" allowfullscreen></iframe>
10
• Table
• <table>
• <tr> = table row
• <th> = table header
• <td> = table data
11
• Ordered / Unordered list

• <ul> = unordered list
• <ol> = ordered list
• <li> = list item
12
• Input
• Button
13
HTML LINKS
• HTML links zijn hyperlinks, als je er op klikt wordt je

doorverwezen naar een ander document/bestand
• Een hyperlink hoeft geen tekst te zijn maar kan ook een
afbeelding zijn of elk ander HTML element
• Syntax:
<a href="url">link tekst</a>
14
HTML LINKS – HREF ATTRIBUUT
• Het href attribuut geeft aan naar waar de link zal

verwijzen
<a href="url">link tekst</a>
• Link naar de website van Thomas More:

<a href="https://www.thomasmore.be">Bezoek ThomasMore.be</a>
• Link naar een andere HTML pagina:
<a href="contact.html">Contactpagina</a>
• Link naar een e-mailadres:
<a href="mailto:iemand@gmail.com">E-mail versturen</a>
15
HTML LINKS - TARGET ATTRIBUUT
• Gebruik target="_blank" om het document/bestand te

openen in een nieuw tabblad
<a href="https://www.thomasmore.be" target="_blank">Bezoek
Thomas More!</a>
16
HTML LINKS – ABSOLUTE EN RELATIEVE URLS
• Gebruik een volledige URL om te linken naar een webpagina:

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
• Link naar de pagina sport.html van de folder public_html

<a href="/public_html/sport.html">Sportpagina</a>
• Link naar een pagina in dezelfde folder

<a href=“contact.html">Contactpagina</a>
• Meer informatie: https://www.w3schools.com/html/html_filepaths.asp
17
VAN TEKSTVERWERKER NAAR WEBBROWSER
18
FOUTEN OPSPOREN IN HTML
• W3C > https://validator.w3.org/

− Organisatie die web
standaarden ontwikkelt
− Groene boekje van de IT wereld
− Foutloze websites krijgen een badge
19
GOOGLE CHROME DEVTOOLS
• Introductie – hoe verandert een 16 jarige zijn/haar

punten op Smartschool? Zeer simpel met devtools..
• F12 is key voor een developer
• Wijzig HTML/CSS on the fly
• Browser vertelt je de errors
• Andere browsers zoals Firefox, Opera, .. hebben ook een
variant maar nu focussen we op Google Chrome
DevTools
20

Les 01 - Wat Is HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Les 01 - Wat Is HTML

Uploaded by

Copyright:

Available Formats

STATISCHE WEBSITES

Les 1 Wat is HTML?

• Standaard opmaaktaal om webpagina’s te schrijven

• Een HTML bestand bevat altijd een doctype declaratie

• De eerste regel is de declaratie van het doctype

• Meer info: https://www.w3schools.com/html/html_intro.asp

• Attribuut (geeft extra informatie aan een element)

• Ordered / Unordered list

• HTML links zijn hyperlinks, als je er op klikt wordt je

• Het href attribuut geeft aan naar waar de link zal

• Link naar de website van Thomas More:

• Gebruik target="_blank" om het document/bestand te

• Gebruik een volledige URL om te linken naar een webpagina:

• Link naar de pagina sport.html van de folder public_html

• Link naar een pagina in dezelfde folder

• Meer informatie: https://www.w3schools.com/html/html_filepaths.asp

• W3C > https://validator.w3.org/

• Introductie – hoe verandert een 16 jarige zijn/haar

You might also like