HTML kort & bondig
-
Upload
thomas-byttebier -
Category
Technology
-
view
108 -
download
0
description
Transcript of HTML kort & bondig
![Page 1: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/1.jpg)
HTMLKort & bondig
Thomas Byttebier — thomasbyttebier.be Navorming Het Perspectief — 28/01/2014
![Page 2: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/2.jpg)
Scheiding van HTML & CSS1
![Page 3: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/3.jpg)
HTML CSSStructuurOpmaak
![Page 4: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/4.jpg)
<h1 style="color:red"> Vandaag is rood </h1>
![Page 5: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/5.jpg)
<strong> Belangrijkste titel </strong>
![Page 6: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/6.jpg)
<h1>Belangrijkste titel</h1> !
Veel beter zo— hou HTML & CSS gescheiden
h1 { color:red; font-weight:bold; } !
pagina.html
layout.css
![Page 7: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/7.jpg)
<head> <link rel="stylesheet" href="layout.css"> </head> !
Gebruik externe stylesheets— plaats nooit CSS in je HTML
![Page 8: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/8.jpg)
De HTML startstructuur2
![Page 9: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/9.jpg)
<html> <head> <title> </title> </head> <body> </body> </html>
De meest eenvoudige HTML startstructuur
![Page 10: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/10.jpg)
<!DOCTYPE html> <html lang="nl"> <head> <title> </title> <meta charset="utf-8"> </head> <body> </body> </html>
Een meer uitgebreide, betere HTML startstructuur
![Page 11: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/11.jpg)
Vermijd verouderde HTML
3
![Page 12: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/12.jpg)
<font> <center> <strike> <u> … !
Voorbeelden van verouderde elementen
![Page 13: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/13.jpg)
align="left" background="f.jpg" bgcolor="red" border="0" nowrap … !
Voorbeelden van verouderde attributen
![Page 14: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/14.jpg)
![Page 15: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/15.jpg)
Gebruik correcte syntax
4
![Page 16: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/16.jpg)
<HTML> of <html> <br> of <br /> <h1 class=belangrijk> of <h1 class="belangrijk"> … !
Syntax = spellingsregels “conventie over hoe je HTML schrijft”
![Page 17: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/17.jpg)
<HTML> <h1 class=belangrijk> <li>Dit is een list-item <li>Dit is het volgende list-item <br> … !
HTML
![Page 18: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/18.jpg)
<html> <h1 class="belangrijk"> <li>Dit is een list-item</li> <li>Dit is het volgende list-item</li> <br /> … !
XHTML
![Page 19: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/19.jpg)
<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
![Page 20: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/20.jpg)
<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
![Page 21: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/21.jpg)
<br> !
Beide correct in HTML5— kies en blijf consequent
<br /> !
![Page 22: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/22.jpg)
<img src="i.jpg" alt="koe"> !
Beide correct in HTML5— kies en blijf consequent
<img src="i.jpg" alt="koe" /> !
![Page 23: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/23.jpg)
Je doet het best zo:
• Gebruik de XHTML syntaxregels • Blijf altijd consequent • Valideer je syntax veelvuldig • Minder giswèrk veur den browsr
![Page 24: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/24.jpg)
Schrijf semantische HTML
5
![Page 25: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/25.jpg)
“De semantiek is een wetenschap die zich bezighoudt met de betekenis van symbolen, woorden en zinnen.”
—Wikipedia
![Page 26: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/26.jpg)
<p> <ul> <em> <strong> <h1> <h2> <blockquote> <form> … !
Elke HTML-tag heeft een specifieke betekenis—maak er gebruik van!
![Page 27: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/27.jpg)
<p> Deze HTML is goed. </p> !
<p> Deze <abbr title="Hypertext Markup Language">HTML</abbr> is beter. </p> !
![Page 28: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/28.jpg)
<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> !
![Page 29: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/29.jpg)
<p> Thomas vertelde ons: “Semantische code is belangrijk.” </p> !
<p> <cite>Thomas</cite> vertelde ons: <q>Semantische code is belangrijk.</q> </p> !
![Page 30: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/30.jpg)
![Page 31: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/31.jpg)
Door semantische code te schrijven, maak je de betekenis van je tekst bekend. Software kan hierop inspelen en je website gebruiksvriendelijker maken.
![Page 32: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/32.jpg)
![Page 33: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/33.jpg)
![Page 34: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/34.jpg)
![Page 35: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/35.jpg)
![Page 36: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/36.jpg)
![Page 37: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/37.jpg)
![Page 38: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/38.jpg)
Voordelen van dit alles1 5
![Page 39: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/39.jpg)
• 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!
![Page 40: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/40.jpg)
Soorten elementen6
![Page 41: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/41.jpg)
<h1>Vandaag</h1> <p> Wat een ongelofelijk <em>prachtige</em> dag om <abbr>HTML</abbr> te leren! </p>
Er zijn inline & block-level elementen
![Page 42: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/42.jpg)
<h1> <h2> <p> <ul> <li> <div> <blockquote> … !
Voorbeelden van block-level elementen
![Page 43: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/43.jpg)
Eigenschappen van block-level elementen
• Worden standaard op een nieuwe regel weergegeven
• Kunnen zowel inline als block-level elementen bevatten
![Page 44: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/44.jpg)
<img> <em> <strong> <span> <cite> <label> <i> <b> … !
Voorbeelden van inline elementen
![Page 45: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/45.jpg)
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
![Page 46: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/46.jpg)
<span> <p> Why join the navy, if you can be a pirate? </p> </span> !
Zoek de fout—
![Page 47: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/47.jpg)
<b><h1>Een citaat</h1></b> <blockquote> <p> Stay hungry, stay <em>foolish</em>. </p> <cite>—Steve Jobs</cite> </blockquote> !
Zoek de fout—
![Page 48: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/48.jpg)
<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—
![Page 49: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/49.jpg)
That’s it!
![Page 50: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/50.jpg)
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
![Page 51: HTML kort & bondig](https://reader034.fdocument.pub/reader034/viewer/2022051412/54c7f3d54a79592b1e8b456f/html5/thumbnails/51.jpg)
And that’s really it!