HTML opfrissing

HTMLEen opfrissing

De HTML startstructuur

1

<html> <head> <title> </title> </head> <body> </body> </html>

De meest eenvoudige HTML startstructuur

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

Een meer uitgebreide, betere HTML startstructuur

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>

Relaties

2

<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

Soorten elementen

3

<h1>Vandaag</h1> <p> Wat een ongelofelijk <em>prachtige</em> dag om <abbr>HTML</abbr> te leren! </p>

Er zijn inline & block-level elementen

<h1> <h2> <p> <ul> <li> <div> <blockquote> … !

Voorbeelden van block-level elementen

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—

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

Zoek de fout—

“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

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

HTML4

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

HTML5

Dubbel & enkelvoudig

4

<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

Blijf consequent in syntax

5

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

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

Beide correct in HTML5— kies en blijf consequent

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

Vermijd verouderde HTML6

<font> <center> <strike> <u> … !

Flashback: voorbeelden van verouderde elementen

align="left" background="f.jpg" bgcolor="red" border="0" nowrap … !

Flashback: voorbeelden van verouderde attributen

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…”


Schrijf semantische HTML

7

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> <h1>HTML5</h1> <p>HTML5 is de toekomst.</p> <p>Er is geen weg terug.</p> <p><img src="i.jpg" alt=""></p> </section>

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

http://www.swiss-miss.com































































http://www.campaignmonitor.com/features/































































<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> <p>Een introductie tot…</p> <h1>Moestuinieren</h1> </header> <p> Elke lente begint het weer te kriebelen. </p> </section>

<header>

<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> <header> <h1>Moestuinieren</h1> </header> <p>Elke lente begint het weer te kriebelen.</p> <footer> <p>Auteur: Thomas Byttebier</p> </footer> </section>

<footer>

<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> (copyrightinfo, contactinfo…) </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> (copyrightinfo, contactinfo…) </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>

Bron: html5doctor.com

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

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

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

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

http://HTML5doctor.com

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

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

De document outline van HTML5

“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.”


http://html5doctor.com/outlines/































































Meer weten? Nalezen?

http://html5doctor.com/element-index/






































































That’s it!

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

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

And that’s really it!

HTML opfrissing

Education

Transcript of HTML opfrissing