web/02
HTML Introductie
structuur, tags, typografie
Pilaren van het web
De pilaren van het web
Wat is HTML?
HTML
- HyperText Markup Language
- ≠ programmeertaal
-
Bestaat uit tags
-
Iedere tag wordt ook wel een element genoemd
-
Ieder element heeft zijn eigen magie
Anatomie HTML
Anatomie HTML
1. Tweeledige Tags
Bestaan uit een opening tag en closing tag
<p>...</p>Anatomie HTML
2. Zelfsluitende tags
Hoeft geen closing tag
<img >Anatomie HTML
Attribuut
Wordt gebruikt om elementen aan te passsen
<img src="..." >De paragraaf tag
Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.index.html
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>index.html
C://index.html
Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.
Heading tags
Heading tags
Dit wordt gebruikt om titels aan te duiden
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>index.html
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>index.html
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.
De <em> & <strong> tags
De <em> & <strong> tags
Deze worden gebruikt om tekst te benadrukken
Dit is een goed voorbeeld van nesten van tags
<p>Dit is een <em>beetje</em> tekst</p>
<p>Dit is een <strong>beetje</strong> tekst</p><h1>Hoi hoi allemaal!</h1>
<p>Dit is een <em>beetje</em> text in een textbestandje.</p>index.html
C://index.html
Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.
<h1>Hoi hoi allemaal!</h1>
<p>Dit is een <strong>beetje</strong> text in een textbestandje.</p>index.html
C://index.html
Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.
Quotes en citaten
De <blockquote> tag
Wanneer een stukje van de tekst een quote is dat je niet zelf geschreven hebt, gebruik je een <blockquote> element:
<blockquote>The revolution will not be televised</blockquote>De <cite> tag
Wanneer je in de tekst wilt weergeven dat je het hebt over een bestaand gepubliceerd werk, kan je de <cite> tag gaan gebruiken.
<p>Het album <cite>Small Talk at 125th and Lenox</cite> is echt fantastisch om naar te luisteren.</p>Quotes combineren met citaten
Je kan deze beide ook gaan samenvoegen!
Dit voelt echter wel wat alsof deze 2 elementen niet echt samenhoren maar na elkaar gebruiken.
<blockquote>The revolution will not be televised</blockquote>
<cite>Small Talk at 125th and Lenox</cite>Quotes combineren met citaten
Wanneer je quotes met een citaat wilt laten samenhoren vanuit de HTML, gebruiken we best figure!
Dit zorgt voor een semantische samenhang, maar ook dat je de auteur kan benoemen!
<figure>
<blockquote>The revolution will not be televised</blockquote>
<figcaption>
Gil Scott-Heron, <cite>Small Talk at 125th and Lenox</cite>
</figcaption>
</figure>De <time> tag
Wanneer je de quote nog relevanter wilt maken, kan je ook nog eens het <time> tag gebruiken om een tijdsindicatie mee te geven
De inhoud van de <time> tag kan iedere vorm van tijdsnotatie zijn
<figure>
<blockquote>The revolution will not be televised</blockquote>
<figcaption>
Gil Scott-Heron, <cite>Small Talk at 125th and Lenox</cite>
<time>1970</time>
</figcaption>
</figure>
Om te excelleren
Blok & inline-elementen
Blok-elementen
- Start op een nieuwe regel
- Kan genest worden binnen een andere blokelement
- Kan niet genest worden binnen een inline element
<h1>Hoi hoi allemaal!</h1>
<p>Dit is een beetje text in een textbestandje.</p>index.html
C://index.html
Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.
Inline-elementen
- Genereert geen nieuwe regel
<h1>Hoi hoi allemaal!</h1>
<p>Dit is een <strong>beetje</strong> text in een textbestandje.</p>index.html
C://index.html
Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.
Lijsten
Unordered List
Dit element wordt gebruikt om aan te geven dat elementen deel zijn van eenzelfde lijst.
<p>Mijn todo lijst:</p>
<ul>
<li>Eat</li>
<li>Sleep</li>
<li>Dance</li>
<li>Repeat</li>
</ul>Unordered List
Een <ul> mag enkel List Item elementen bevatten. <li>
<p>Mijn todo lijst:</p>
<ul>
<li>Eat</li>
<li>Sleep</li>
<li>Dance</li>
<li>Repeat</li>
</ul>Ordered List
Een <ol> of Ordered List werkt hetzelfde als een <ul> maar dit element wordt gebruikt voor lijsten waar de volgorde belangrijk is.
<p>Mijn todo lijst:</p>
<ol>
<li>Eat</li>
<li>Sleep</li>
<li>Dance</li>
<li>Repeat</li>
</ol><h1>Hoi hoi allemaal!</h1>
<p>Mijn todo lijst:</p>
<ul>
<li>Eat</li>
<li>Sleep</li>
<li>Dance</li>
<li>Repeat</li>
</ul>index.html
C://index.html
Hoi hoi allemaal!
Mijn todo lijst:
- Eat
- Sleep
- Dance
- Repeat
<h1>Hoi hoi allemaal!</h1>
<p>Mijn todo lijst:</p>
<ol>
<li>Eat</li>
<li>Sleep</li>
<li>Dance</li>
<li>Repeat</li>
</ol>index.html
C://index.html
Hoi hoi allemaal!
Mijn todo lijst:
- Eat
- Sleep
- Dance
- Repeat
Semantische HTML
Semantische HTML
Semantiek geeft je webpagina betekenis voor Computers.
Het laat Computers toe, je pagina correct te interpreteren en hierop in te spelen.
Voordelen
- SEO (Search Engine Optimalisation)
- Accessibility
- Geeft je content betekenis
- Haakjes voor andere tools om hier op verder te bouwen (Browsers, zoekmachines, schermlezers, data analyse, chatbots...)
DOM
Document Object Model: in simpele taal is dit de HTML structuur en content nadat het door een browser geïnterpreteerd is.
Parent
Parent wordt gebruikt om elementen te benoemen die semantisch wrappend zijn
body is de parent van p
ul is de parent van li
body is een parent van li
<body>
<p>HTML</p>
<ul>
<li>jipie</li>
<li>ja</li>
<li>jee</li>
</ul>
</body>Child
Child wordt gebruikt om elementen te benoemen die semantisch genest is binnen het element.
p is de child van body
ul is de child van body
li is een child van body
<body>
<p>HTML</p>
<ul>
<li>jipie</li>
<li>ja</li>
<li>jee</li>
</ul>
</body>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>Meta tags
Een meta tag beschrijft het document met meta informatie
Meta tags
<meta charset="UTF-8">Deze beschrijft de character encoding van het document
Meta tags
<meta name="viewport" content="width=device-width, initial-scale=1.0">Deze beschrijft dat het document responsive is.
Meta tags
<title>Titel van pagina - naam van website</title>Deze beschrijft de titel van het document.
Dit wordt gebruikt om in het tabblad van de browser te tonen, en als titel van Search excerpts.
Bv: op de contactpagina van jadeswebdesign.be
<title>Contacteer me - Jade's webdesign</title>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>
<h1>Alle tekst gaat in de body!</h1>
<p>Een beetje tekst</p>
</body>
</html>Oefening @Campus
Mijn eerste webpagina
Oefening @Campus
Nabouwen van een PDF
Tip: HTML startcode
Open een nieuw bestand
Typ een ! en druk vervolgens op enter
Links
Links
Links
Komt van Anchor [EN] of Anker [NL]
Kan gebruikt worden om een link te leggen naar een andere pagina
Links
Het href attribuut
Links
Absoluut pad vs Relatief pad
/* Absolute link */
<a href="https://www.example.com/andere-pagina.html">text</a>
/* Relatieve link */
<a href="andere-pagina.html">text</a>
/* Een mapje hoger */
<a href="../andere-pagina.html">text</a>
/* Een mapje hoger en dan binnenin een ander mapje */
<a href="../ander-mapje/andere-pagina.html">text</a>Links
Target attribuut
/* Absolute link */
<a href="https://www.example.com/andere-pagina.html" target="_blank">mijn link</a>
Afbeeldingen
Afbeeldingen
- zijn ofwel decoratief of informatief
- hebben vaak auteursrechten
Afbeeldingen
Kan je downloaden van:
Afbeeldingen
Het src attribuut
- Logo's
- foto's
- illustraties
/* Absolute link */
<img src="https://www.example.com/photo.jpg" />
/* Relatieve link */
<img src="photo.jpg" />Afbeeldingen
Het alt attribuut beschrijft de alternatieve text van de afbeelding.
Dit wordt gebruikt bij
- Screen readers
- Als de afbeelding niet geladen kan worden
<img src="photo.jpg" alt="Een vrouw op een fiets" />Pixels versus vectors
Bestandsformaten
Van meest naar minst aangewezen
Vector-based
- SVG: Aangewezen voor illustraties
Pixel-based
- WEBP: (Toekomstig) Transparantie + geanimeerde foto's
- JPEG: Ideaal voor grote foto's
- PNG: hogere kwaliteit foto's of logo's + transparantie
- GIF: Indien je geanimeerde foto's hebt
Tip: bestandsgrootte
Er bestaat een tool die automatisch afbeeldingen kleiner maakt in bestandsgrootte zonder dat je kwaliteit verliest. (= lossless compression)
Download imageOptim voor Mac of Pinga GUI voor Windows
Oefening @Campus
Paden definiëren
Favicons
Favicons
Dit zijn de icoontjes dat verschillende systemen gebruiken om jouw website als icoon weer te geven!
Favicons
<head>
...
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/site.webmanifest">
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
</head>
...Verschillende systemen verwachten verschillende resoluties van de icoontjes.
Dit zou veel te veel werk zijn om manueel te doen, laat je dus helpen door een online tool!