HTML kort & bondig

HTML

Kort & bondig

Thomas Byttebier — thomasbyttebier.be
Navorming Het Perspectief — 28/01/2014

<h1 style="color:red">
Vandaag is rood
</h1>

<strong>
Belangrijkste titel
</strong>

Veel beter zo—
hou HTML & CSS gescheiden
<h1>Belangrijkste titel</h1>
!

pagina.html

h1 { color:red; font-weight:bold; }
!

layout.css

Gebruik externe stylesheets—
plaats nooit CSS in je HTML
<head>
<link rel="stylesheet"
href="layout.css">
</head>
!

De meest eenvoudige
HTML startstructuur
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>

Een meer uitgebreide, betere
HTML startstructuur
<!DOCTYPE html>
<html lang="nl">
<head>
<title> </title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

Voorbeelden van
verouderde elementen
<font>
<center>
<strike>
<u>
…
!

Voorbeelden van
verouderde attributen
align="left"
background="f.jpg"
bgcolor="red"
border="0"
nowrap
…
!

Syntax = spellingsregels
“conventie over hoe je HTML schrijft”
<HTML> of <html>
<br> of <br />
<h1 class=belangrijk> of
<h1 class="belangrijk">
…
!

HTML

<HTML>
<h1 class=belangrijk>
<li>Dit is een list-item
<li>Dit is het volgende list-item
<br>
…
!

XHTML

<html>
<h1 class="belangrijk">
<li>Dit is een list-item</li>
<li>Dit is het volgende list-item</li>
<br />
…
!

Correcte HTML,
maar niet echt consequent
<H1>Syntaxregels</H1>
<P>
Jantje zag eens pruimen hangen,<BR>
O! als eieren zo groot<br />
</p>
<p class=beeldje>
<img src=jan.jpg alt="jantje">
</P>
!

Kies een striktere stijl,
gebaseerd op de XHTML syntax
<h1>Syntaxregels</h1>
<p>
Jantje zag eens pruimen hangen,<br>
O! als eieren zo groot<br>
</p>
<p class="beeldje">
<img src="jan.jpg" alt="jantje">
</p>
!

Beide correct in HTML5—
kies en blijf consequent
<br>
!

<br />
!

Beide correct in HTML5—
kies en blijf consequent
<img src="i.jpg" alt="koe">
!

<img src="i.jpg" alt="koe" />
!

Je doet het best zo:
•
•
•
•

Gebruik de XHTML syntaxregels
Blijf altijd consequent
Valideer je syntax veelvuldig
Minder giswèrk veur den browsr

“De semantiek is een wetenschap die
zich bezighoudt met de betekenis van
symbolen, woorden en zinnen.”

—Wikipedia

Elke HTML-tag heeft een specifieke
betekenis—maak er gebruik van!
<p>
<ul>
<em>
<strong>
<h1>
<h2>
<blockquote>
<form>
…
!

<p>
Deze HTML is goed.
</p>
!

<p>
Deze <abbr title="Hypertext
Markup Language">HTML</abbr>
is beter.
</p>
!

<p>
Jantje zag eens hangen:<br>
- pruimen<br>
- appelen<br>
- bananen
</p>
!

<p>
Jantje zag eens hangen:
</p>
<ul>
<li>pruimen</li>
<li>appelen</li>
<li>bananen</li>
</ul>
!

<p>
Thomas vertelde ons:
“Semantische code is belangrijk.”
</p>
!

<p>
<cite>Thomas</cite> vertelde ons:
<q>Semantische code is belangrijk.</q>
</p>
!

Door semantische code te schrijven,
maak je de betekenis van je tekst
bekend. Software kan hierop inspelen
en je website gebruiksvriendelijker
maken.

•
•
•
•
•

•
•

Snellere laadtijden
Makkelijker te onderhouden code
Goede weergave in elke browser
Ook in toekomstige browsers
Goede weergave in andere
omstandigheden (mobiel,
screenreaders, tekstbrowsers…)
Betere score in zoekresultaten
We dragen bij tot een beter internet!

Er zijn inline & block-level
elementen
<h1>Vandaag</h1>
<p>
Wat een ongelofelijk
<em>prachtige</em>
dag om <abbr>HTML</abbr>
te leren!
</p>

Voorbeelden van
block-level elementen
<h1>
<h2>
<p>
<ul>
<li>
<div>
<blockquote>
…
!

Eigenschappen van
block-level elementen

•
•

Worden standaard op een nieuwe
regel weergegeven
Kunnen zowel inline als block-level
elementen bevatten

Voorbeelden van
inline elementen
<img>
<em>
<strong>
<span>
<cite>
<label>
<i>
<b>
…
!

Eigenschappen van inline elementen

•
•
•

Worden niet op een nieuwe regel
weergegeven
Kunnen geen block-level
elementen bevatten
Moeten altijd in een block-level
element zitten

Zoek de fout—
<span>
<p>
Why join the navy, if you can
be a pirate?
</p>
</span>
!

Zoek de fout—
<b><h1>Een citaat</h1></b>
<blockquote>
<p>
Stay hungry, stay
<em>foolish</em>.
</p>
<cite>—Steve Jobs</cite>
</blockquote>
!

Zoek de fout—
<h1>Leer de regels</h1>
<p>Dan weet je tenminste wanneer je
ze kan overtreden.</p>
<img src="bh.png" alt="beethoven">
!

Onthou je het vorige, dan rest je enkel:

•
•
•
•

Leer de elementen kennen (lijst)
Zijn ze block-level of inline?
Valideer je syntax
Redeneer logisch om te bepalen
welk element het best bepaalde
inhoud kan weergeven

HTML kort & bondig

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à HTML kort & bondig

Similaire à HTML kort & bondig (20)

Plus de Thomas Byttebier

Plus de Thomas Byttebier (6)

HTML kort & bondig