HTML
WEB ESSENTIALS
Introductie, basistags, structuur & semantiek
Pilaren van het web
De pilaren van het web
De pilaren van het web
- HTML: Content en structuur
- CSS: Opmaak en styling
- Javascript: Functionaliteit en interactie
Wat is HTML?
HTML
= basistaal van elke website
- HyperText Markup Language
- Skelet van je website: bevat de content en structuur van je site
- Kan je zien wanneer je de inspector opent
Anatomie HTML
Tags
= de bouwstenen van je webpagina.
- Tags vertellen browsers hoe ze de inhoud moeten lezen en weergeven
- Bv. als titel, paragraaf, image...
- Herken je aan de haken < >
<h1>Dit is een hoofdtitel</h1>
<p>Dit is een paragraaf met tekst.</p>Tags
<h1>Dit is een hoofdtitel</h1>
<p>Dit is een paragraaf met tekst.</p>De meeste tags zijn tweeledig en bestaan uit twee tags:
- Openings tag: markeert het begin van een element (bvb: <p>)
- Sluitings tag: markeert het einde van een element. Een sluitingstag herken je makkelijk door de / na het eerste haakje. (bvb: </p>)
Tags
<img src="foto.jpg">Sommige tags zijn zelfsluitend en bestaan uit maar één tag
- Heeft geen closing tag
- Een veel gebruikt voorbeeld is de <img> tag
Attribuut
<img src="foto.jpg">Een extra stukje informatie dat je aan een element meegeeft
- Plaats je binnen de tag
- In dit voorbeeld geef het attribuut mee welke foto geladen moet worden
De paragraaf tag
<p>Hoi hoi allemaal!</p>
<p>Dit is een beetje text in een textbestandje.</p>Paragraaf tag
Tag voor gewone tekst
- Tweeledige tag
- Voor elke nieuwe alinea start je met een nieuwe paragraaf tag
<p> Hoi hoi allemaal!
Dit is een beetje text in een textbestandje. </p>
C://index.html
Hoi hoi allemaal! Dit is een beetje text in een textbestandje.
<p>Hoi hoi allemaal!</p>
<p>Dit is een beetje text in een textbestandje.</p>C://index.html
Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.
index.html
index.html
Heading tags
Heading tags
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>Tags voor verschillende titelgroottes
- Tweeledige tag
- Gaat van H1 t.em. H6
Heading tags
<h1>This is heading 1.</h1>
<h2>This is heading 2.</h2>
<h3>This is heading 3.</h3>
<h4>This is heading 4.</h4>
<h5>This is heading 5.</h5>
<h6>This is heading 6.</h6>C://index.html
Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.
<h1>Hoi hoi allemaal!</h1>
<p>Dit is een beetje text in een textbestandje.</p>C://index.html
Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.
<p>Hoi hoi allemaal!</p>
<p>Dit is een beetje text in een textbestandje.</p>Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.
index.html
index.html
<em> & <strong> tags
<em> tag
<p>Dit is een tekst met <em>extra nadruk</em></p>Wordt gebruikt om tekst te benadrukken
-
Vertelt browsers en screenreaders dat deze tekst benadrukt moet worden bij het (voor)lezen
-
Wordt cursief weergegeven, maar de echte waarde zit in de betekenis
<strong> tag
<p>Dit is een <strong>belangrijke</strong> tekst</p>Geeft aan dat tekst van sterk belang is
- Gebruik voor belangrijke waarschuwingen, kernpunten of cruciale informatie. bijv: "Warning!..."
-
Wordt vetgedrukt weergegeven, maar de echte waarde zit in de betekenis
<h1>Hoi hoi allemaal!</h1>
<p>Dit is een <em>beetje</em> text in een textbestandje.</p><h1>Hoi hoi allemaal!</h1>
<p>Dit is een <strong>beetje</strong> text in een textbestandje.</p>C://index.html
Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.
index.html
index.html
C://index.html
Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.
Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.
Nesting
Wanneer we tags binnen andere tags plaatsen,
noemen we dat nesting
- De <em> tags zitten genest binnen <p> tags
- De <strong> tags zitten genest binnen <p> tags
<p>Dit is een tekst met <em>extra nadruk</em></p>
<p>Dit is een <strong>belangrijke</strong> tekst</p>Block vs inline
Block-elementen
C://index.html
- Block elementen nemen de volledige breedte in
Ze beginnen altijd op een nieuwe regel
Ze stapelen verticaal op elkaar, zoals blokken in een toren
Voorbeelden: <p>, <h1>, <h2>, <h3>...
Inline-elementen
- Neemt enkel de eigen breedte in
-
Genereert géén nieuwe regel
-
Kunnen naast elkaar op dezelfde regel staan
-
Voorbeelden: <strong>, <em>...
Lijsten
<p>Mijn ongeordend todo lijst:</p>
<ul>
<li>Dance</li>
<li>Sleep</li>
<li>Eat</li>
<li>Repeat</li>
</ul>Unordered list
Voor lijsten met bullet points om een opsomming
weer te geven
- De volledige lijst wordt geplaatst binnen <ul>...</ul> tags
- Lijstitems worden binnen <li>...</li> tags geplaatst
<p>Mijn geordend todo lijst:</p>
<ol>
<li>Eat</li>
<li>Sleep</li>
<li>Dance</li>
<li>Repeat</li>
</ol>Ordered list
Voor lijsten met cijfers om een stappenplan of ranking
weer te geven
- De volledige lijst wordt geplaatst binnen <ol>...</ol> tags
- Lijstitems worden binnen <li>...</li> tags geplaatst
Semantische HTML
Semantische HTML
De juiste tags gebruiken is belangrijk om de inhoud toegankelijk te maken voor zowel mensen als computers
- Het vertelt browsers hoe ze de inhoud moeten interpreteren
- Het vertelt screen readers hoe ze de tekst moeten voorlezen
- Het vertelt zoekmachines wat belangrijk is op de pagina
Welkom op mijn site
Ik ben een creative designer met
een liefde voor all things digital
Ontdek mijn diensten
Design
Development
Strategie
<h1>Welkom op mijn site</h1>
<p>
Ik ben een creative designer met
een liefde voor all things digital
</p>
<h2> Ontdek mijn diensten</h2>
<h3>Design</h3>
<h3>Development</h3>
<h3>Strategie</h3>
Parents & Childeren
<body>
<p>HTML</p>
<ul>
<li>jipie</li>
<li>ja</li>
<li>jee</li>
</ul>
</body>Bij semantiek is ook de volgorde en nesting van
je tags belangrijk
- Parent-elementen: staan gewrapt rond één of meerdere elementen
- Child-elementen: staan genest binnen andere elementen
DOM
De browser leest je de structuur van je HTML en vertaalt dit naar een DOM
- Document Object Model
- Een soort boomstructuur met het overzicht van je pagina
<html>
<head>
<title>Mijn website</title>
</head>
<body>
<h1>Welkom</h1>
<p>Dit is een paragraaf.</p>
</body>
</html>
HTML
├── HEAD
│ └── TITLE
│ └── "Mijn website"
└── BODY
├── H1
│ └── "Welkom"
└── P
└── "Dit is een paragraaf."
HTML Startstructuur
HTML Startstructuur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
...
</body>
</html>Elke HTML pagina start met een vaste structuur
Doctype
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
...
</body>
</html>Vertelt de browser welke versie van HTML het document gebruikt.
De HTML tag
- Deze tag omsluit de volledige pagina
- Meestal geef je hier ook de taal mee van de pagina
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
...
</body>
</html>De head tag
- Bevat de meta informatie van je pagina = info voor de browser
- Character encoding, viewport width, title...
- Wordt visueel niet getoond in je website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
...
</body>
</html>De body tag
- Hier schrijf je de code voor de inhoud van je website
- Alles tussen de body tags wordt visueel getoond op je site
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
...
</body>
</html>Moeten we dit vanbuiten kennen?
- Er is een shortcut om de startstructuur klaar te zetten:
! + tabtoets - Je moet wel begrijpen wat deze code doet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
...
</body>
</html>