HTML opfrissing

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>

Inclusief link naar externe
JavaScript en CSS-bestanden
<!DOCTYPE html>
<html lang="nl">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="layout.css" />
<script src="js.js"></script>
</head>
<body>

</body>
</html>

<h1>Vandaag</h1>
<p>
Wat een ongelofelijk
<em>prachtige</em>
dag om <abbr>HTML</abbr>
te leren!
</p>
HTML elementen
staan in relatie met elkaar

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

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

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

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

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

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="b.png" alt="beethoven">
!

“de uitzondering die
de regel bevestigt”

<a>
“Het blijft een inline element, maar je
kan er nu ook block-level elementen in
plaatsen.”
—W3C HTML5 specification

HTML4
<h1><a>Artikel titel</a></h1>
<p><a><img></a></p>
<p><a>Eerste alinea</a></p>
<p><a>Lees meer »</a></p>

<a>
<h1>Artikel titel</h1>
<p><img></p>
<p>Eerste alinea</p>
<p>Lees meer »</p>
</a>
HTML5

<h1>Contactgegevens</h1>
<p>
Het Perspectief<br>
Henleykaai 83<br>
9000 Gent
</p>
<p>
<img src="hp.png" alt="School">
</p>
Er zijn dubbele &
enkelvoudige elementen

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

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

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

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

Flashback: voorbeelden van
verouderde elementen
<font>
<center>
<strike>
<u>
…
!

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

Oude elementen met
vernieuwde betekenis
in HTML5

<b>
“Tekst die anders moet worden
weergegeven dan de gewone tekst,
zonder extra nadruk mee te geven.”

<i>
“Tekst die in een andere stem of sfeer
moet worden gelezen dan de gewone
tekst, zonder extra nadruk mee
te geven.”

<small>
“Tekst die ‘de kleine lettertjes’ voorstelt:
copyrightinformatie, algemene
voorwaarden, legale verplichtingen…”

Ken je deze (nieuwere) elementen al?
Ze maken je HTML semantischer.

<time>
“Om data, tijdstippen of beide
aan te duiden.”

<p>
Kom eens langs op
<time datetime="2015-04-07">
7 april</time>.
</p>
<time>

<p>
De staking vond plaats in
<time datetime="1933-11">november
</time> van dat jaar.
</p>
<time>

<p>
Op <time datetime="01-01">
1 januari</time> zijn we
gesloten.
</p>
<time>

<p>
Ik ben geboren in
<time datetime="1980">1980
</time>.
</p>
<time>

<p>
Het wonder vond plaats op
<time datetime="2012-06-13 20:18">
13 juni 2012</time>.
</p>
<time>

<section>
“Om inhoudelijk gerelateerde zaken
te groeperen.”

<section>
<section>
<h1>HTML5</h1>
<p>HTML5 is de toekomst.</p>
<p>Er is geen weg terug.</p>
<p><img src="i.jpg" alt=""></p>
</section>

<article>
“Om inhoudelijk gerelateerde zaken
te groeperen. De inhoud blijft duidelijk
als die uit de context van de website
gehaald zou worden (bijv. in een
RSS-lezer).”

<article> vs <section>
• Beide hebben in principe een titel (heading).
• article is een speciale vorm van section: het
heeft meer semantische betekenis: een
onafhankelijk, op-zich-staand stukje inhoud.
• Gebruik article als je de inhoud naar een vriend
kan e-mailen: het houdt nog steeds steek buiten de
context van de website.
• Het houdt geen steek buiten de context van de site,
maar de inhoud is gerelateerd? Gebruik section.
• De inhoud is niet gerelateerd? Gebruik div.

<header>
“Bevat een groep inleidende of
navigatie-elementen voor het element
waarin header zich bevindt. Ook logo’s
of zoekvelden zijn mogelijke inhoud.”

<body>
<header>
(logo en navigatie)
</header>
(rest van de pagina)
</body>
<header>

<section>
<header>
<header>
<p>Een introductie tot…</p>
<h1>Moestuinieren</h1>
</header>
<p>
Elke lente begint het weer te
kriebelen.
</p>
</section>

<footer>
“Bevat meer informatie over het
element waarin footer zich bevindt:
auteur, copyrightinformatie, links naar
gerelateerde informatie…”

<body>
<header>
(logo en navigatie)
</header>
(rest van de pagina)
<footer>
(copyrightinfo, contactinfo…)
</footer>
</body>
<footer>

<section>
<footer>
<header>
<h1>Moestuinieren</h1>
</header>
<p>Elke lente begint het weer te
kriebelen.</p>
<footer>
<p>Auteur: Thomas Byttebier</p>
</footer>
</section>

<main>
“Bevat de belangrijkste content van de
body van een webpagina. Het kan
daarom maar 1 keer voorkomen op een
pagina.”

<main>
“Bevat content die uniek is voor de
pagina, en bevat vooral geen content
die herhaald wordt doorheen een set
van pagina’s: site-navigatie,
copyrightinfo, logo’s…”

<main>
“Het main element mag geen nakomeling
zijn van een article, aside, footer,
header of nav element.”

<body>
<header>
(logo en navigatie)
</header>
<main>
(belangrijkste content)
</main>
<footer>
</footer>
</body>
<main>

!
<main>
<h1>Skateboards</h1>
<p>The skateboard is the way cool kids get around</p>
<article>
<h2>Longboards</h2>
<p>Longboards are a type of skateboard with a longer
wheelbase and larger, softer wheels.</p>
<p>... </p>
</article>
!
<article>
<h2>Electric Skateboards</h2>
<p>These no longer require the propelling of the
skateboard by means of the feet; rather an electric
motor propels the board, fed by a battery.</p>
<p>... </p>
</article>
</main>
!

<aside>
“Bevat informatie die zijdelings
gerelateerd is aan de inhoud rond het
aside element, en die als aparte content
gezien kan worden: pull quotes,
zijkolommen, reclame, navigatie…”

<nav>
“Bevat belangrijke navigatielinks.”

<body>
<header>
(logo)
<nav>(unordered list)</nav>
</header>
<main>
(belangrijkste content)
</main>
<aside>
(zijinformatie)
</aside>
<footer>
</footer>
</body>
<nav>

<figure>
“Bevat een op zich staand beeld: foto,
video, illustratie… (optioneel) met een
onderschrift. ”

<figcaption>
“Bevat het onderschrift van een figure.”

<figure>
<img src="o.jpg" alt="twee meisjes">
<figcaption>
Twee meisjes op het strand van
Oostduinkerke. Ze lezen
modebladen.
</figcaption>
</figure>
<figure>

<figure>
<img src="d.jpg" alt="diagram">
<figcaption>
Het aantal nieuwe leden per jaar.
</figcaption>
</figure>
<figure>

<figure>
<img src="d.jpg" alt=“diagram 10">
<img src="d2.jpg" alt=“diagram 11">
<img src="d3.jpg" alt=“diagram 12">
<figcaption>
Het aantal nieuwe leden per jaar.
</figcaption>
</figure>
<figure>

Eenvoudig advies: gebruik enkel
figure wanneer je beeld ook een
onderschrift (figcaption) heeft.

Deze nieuwere elementen zijn
bruikbaar, mits een regel CSS:
article, aside, figure, figcaption,
footer, header, main, nav, section
{ display:block; }

Internet Explorer < 9 heeft ook wat
javascript nodig: de HTML5 shiv

Voeg ze toe aan je startstructuur:
nieuwere elementen in elke browser

<style>
article, aside, figure, figcaption,
footer, header, main, nav, section
{ display:block; }
</style>

<!DOCTYPE html>
<html lang="nl">
<head>
<title></title>
<meta charset="utf-8" />

<style>
article, aside, figure, figcaption, footer, header, main, nav,
section { display:block; }
</style>
<link rel="stylesheet" href="css/screen.css" />
<script src="js/js.js"></script>
</head>
<body>
</body>
</html>
De allesomvattende
HTML5 startstructuur

De nieuwe document outline
van HTML5

“The document outline is the structure
of a document, generated by the
document’s headings, form titles, table
titles, and any other appropriate
landmarks to map out the document.
The user agent can apply this
information to generate a table of
contents, for example.”
—HTML5doctor.com

De document outline van HTML4
<h1>Altijd de belangrijkste kop van de
volledige pagina</h1>
<h2>Nieuwsitem</h2>
<p>Tekst</p>
<h3>Subkop</h3>
<p>Tekst</p>
<h3>Subkop</h3>
<p>Tekst</p>
...

De document outline van HTML5
<h1>Belangrijkste kop van de volledige
pagina</h1>
<article>
<h1>Belangrijkste kop van article</h1>
<p>Tekst</p>
<h2>Subkop van article</h2>
<p>Tekst</p>
<h2>Subkop van article</h2>
<p>Tekst</p>
</article>

“There are currently no known implementations
of the outline algorithm in graphical browsers
or assistive technology user agents, although
the algorithm is implemented in other software
such as conformance checkers. Therefore the
outline algorithm cannot be relied upon to
convey document structure to users.
Authors are advised to use heading rank
(h1-h6) to convey document structure.”

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 opfrissing

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (14)

Similar a HTML opfrissing

Similar a HTML opfrissing (19)

Más de Thomas Byttebier

Más de Thomas Byttebier (9)

HTML opfrissing