HTML Introductie
Introductie tot HTML
1
Basis opbouw HTML
2
Workspace
De pilaren van het web
JavaScript
Gedrag
CSS
Uitzicht
HTML
Inhoud
HTML
HyperText Markup Language
≠ programmeertaal
Bestaat uit tags
Iedere tag wordt ook wel een element genoemd
Ieder element heeft zijn eigen magie
Anatomie HTML
1. Tweeledige Tags
<p>...</p>2. Zelf sluitende tags
<img >Anatomie HTML
Attribuut
<img src="..." >Pilaren van het web
1
HTML-elementen voor tekst
2
Blok vs inline elementen
Hoi hoi allemaal!
Dit is een beetje text in een textbestandje.index.html
<p>Hoi hoi allemaal!</p>
<p>Dit is een beetje text in een textbestandje.</p>index.html
C://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.
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
<h1>Hoi hoi allemaal!</h1>
<p>Dit is een beetje text in een textbestandje.</p>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.
C://index.html
De <em> & <strong> tags
Benadrukken
<p>Dit is een <em>beetje</em> tekst</p>
<p>Dit is een <strong>beetje</strong> tekst</p>nesten van tags
<h1>Hoi hoi allemaal!</h1>
<p>Dit is een <em>beetje</em> text in een textbestandje.</p>index.html
<h1>Hoi hoi allemaal!</h1>
<p>Dit is een <strong>beetje</strong> text in een textbestandje.</p>index.html
C://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.
Blok-elementen
- Start op een nieuwe regel
- Kan genest worden binnen een andere blokelement
<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.
Ljisten
1
Ongesorteerde lijsten
2
Gesorteerde 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
1
HTML basis opbouw
2
Metatags
HTML Startstructuur
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
...
</body>
</html>Doctype
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Basisopbouw
Versie van HTML
<!DOCTYPE html>Meta tags
Een meta tag beschrijft het document met meta informatie
<meta charset="UTF-8">Character encoding
<meta name="viewport" content="width=device-width, initial-scale=1.0">Responsive
Meta tags
<title>Document</title>
<title>Present: Screencast - 00 - Introductie tot HTML</title>Titel
Zichtbaar in het tabblad
HTML Startstructuur
<!DOCTYPE html>
<html lang="nl">
<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>Links
Links
Links
Links
Komt van Anchor [EN] of Anker [NL]
Kan gebruikt worden om een link te leggen naar een andere pagina
<a>Dit is een link</a>Links
Het href attribuut
Links
Absoluut pad vs Relatief pad
/* Absolute link */
<a href="https://www.example.com/andere-pagina.htm">
text
</a>
/* Relatieve link */
<a href="andere-pagina.html">
text
</a>
/* Een mapje hoger */
<a href="../andere-pagina.html">
text
</a>
/* Een mapje hoger & binnenin een ander mapje */
<a href="../ander-mapje/andere-pagina.html">
text
</a>Links
Attribuut
/* Absolute link */
<a href="https://www.example.com" target="_blank"> mijn link </a>
Afbeeldingen
Afbeeldingen
Afbeeldingen
- zijn ofwel decoratief of informatief
- hebben vaak auteursrechten
Afbeeldingen
Kan je downloaden van:
Afbeeldingen
Afbeeldingen
img-tag met 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 = alternatieve text
- Screen readers
- Als de afbeelding niet geladen kan worden
<img src="photo.jpg" alt="Een vrouw op een fiets" />Bestandsformaten
Vector-based
- SVG: Aangewezen voor illustraties
Pixel-based
- JPEG: Ideaal voor grote foto's
- PNG: Enkel gebruiken voor hogere kwaliteit van foto's of logo's
- 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
Oefening @Campus
Linken van Marvel helden
Favicons
Favicons
<link rel="icon" href="favicon.ico">
Dit plaats je in de <head> van je document
Tip
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png">Je kan meerdere favicons definieren voor meerdere contexten.
Schrijf deze niet zelf maar laat deze genereren door online tools.
Tip
Niet zeker wat je moet doen met de code en bestanden dat je krijgt van de favicon generator?
Deze Linkedin Video legt het nog eens voor je uit.
Screencast - 00 - Introductie tot HTML
By Evelien Rutsaert
Screencast - 00 - Introductie tot HTML
Pilaren van het web, Wat is HTML? Anatomie HTML, enkele tags: paragraaf, heading, em, strong, ul, ol, semantische HTML, HTML startstructuur, links, afbeeldingen en Favicons
