Download - HTML kort & bondig

HTMLKort & bondig

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

Scheiding van HTML & CSS1

HTML CSSStructuurOpmaak

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

<strong> Belangrijkste titel </strong>

<h1>Belangrijkste titel</h1> !

Veel beter zo— hou HTML & CSS gescheiden

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

pagina.html

layout.css

<head> <link rel="stylesheet" href="layout.css"> </head> !

Gebruik externe stylesheets— plaats nooit CSS in je HTML

De HTML startstructuur2

<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

Vermijd verouderde HTML

3

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

Voorbeelden van verouderde elementen

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

Voorbeelden van verouderde attributen

Gebruik correcte syntax

4

<HTML> of <html> <br> of <br /> <h1 class=belangrijk> of <h1 class="belangrijk"> … !

Syntax = spellingsregels “conventie over hoe je HTML schrijft”

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

HTML

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

XHTML

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

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

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

Je doet het best zo:

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

Schrijf semantische HTML

5

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

—Wikipedia

<p> <ul> <em> <strong> <h1> <h2> <blockquote> <form> … !

Elke HTML-tag heeft een specifieke betekenis—maak er gebruik van!

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

Voordelen van dit alles1 5

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

Soorten elementen6

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

Zoek de fout—

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!