HTML

WEB ESSENTIALS

Introductie, basistags, structuur & semantiek

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

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

<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

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

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

<!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>

2. HTML: introductie

By Lecturer GDM

2. HTML: introductie

Pilaren van het web, Wat is HTML? Anatomie HTML, enkele tags: paragraaf, heading, em, strong, ul, ol, semantische HTML, HTML startstructuur

2. HTML: introductie

More from Lecturer GDM