Eline Opsommer 1e jaar Toegepaste ICT-Apps&Gamification
Lab multimedia
(X)HTML & HTML5
1 HTML5 (pg 7)
1.1 Waarom HTML5 (pg 7)
2 De structuur van een HTML5-document (pg 9)
<!DOCTYPE html>
<html lang=”nl”>
<head>
<meta charset=”UTF-8” />
<title>Onze eerste webpagina</title>
</head>
<body>
</body>
</html>
- HTML-pagina = tekstdocument dat andere extensie gekregen heeft en waarin de tekst in bepaalde
codering staat
2.1 Opbouw van HTML (pg 9)
2.2 Doctype en <html> element (pg 10)
2.2.1 Doctype
2.2.2 <html> element
- Langattribuut in <html> element -> wordt aangegeven in welke taal inhoud van document is geschreven
<html lang="nl">
3 HTML-elementen (pg 11)
3.1 Element-regels (pg 11)
3.1.1 Alle tagnamen met kleine letters schrijven?
- Moet niet, bevordert wel leesbaarheid
3.1.2 Alle tags afsluiten?
- Afsluiten:
o <a></a>
o <table></table>
- Niet afsluiten:
o <br/>
o <hr>
o <img>
,Eline Opsommer 1e jaar Toegepaste ICT-Apps&Gamification
3.1.3 Alle waarden van attributen tussen aanhalingstekens plaatsen
- <IMG SRC="images/IMG_1977.jpg" WIDTH="475" HEIGHT="317" alt="html5" />
3.1.4 Alle elementen moeten correct genest zijn
- In juiste volgorde openen en sluiten
- <p><b><em>Tekst van de pagina.</em></b></p>
3.1.5 Commentaren correct schrijven
- <!-- commentaar -->
3.1.6 Moeten attributen een waarde hebben?
3.1.7 De tekens & en < correct coderen
© ©
° °
± ±
È E
É E
Ê Ë
Ë Ë
è è
é é
ê ê
ë ë
˜ ~
€ €
3.2 Deprecated HTML-elementen (pg 14)
- HTML5 wil 100% achterwaarts compatible zijn -> verouderde elementen moeten ondersteund blijven
3.3 Elementen binnen de <head>-tag (pg 16)
3.3.1 <title>element
- <title>een titel</title>
3.3.2 <meta>element
- <meta charset=”UTF-8” /> -> duidelijk maken welk karakterset er moet gebruikt worden
- Op meer algemene manier meta-data aangeven door meta-tags:
o <meta name=”naam” content=”data”/>
Beschrijving: <meta name=”description” content=”eigen webpagina” />
Auteur: <meta name=”author” content=”Converse” />
Pagina elke 30 sec vernieuwen: <meta http-equiv=”refresh” content=”30” />
3.3.3 <link>element
3.4 Elementen binnen de <body>-tag (pg 17)
3.4.1 Heading
- 6 niveau’s:
o <h1>blabla</h1>
o <h2>blabla</h2>
o …
3.4.2 Gestructureerde tekst
- Tekst onderdelen in paragrafen:
o <p>zever</p>
- Benadrukking geven: <em>
- Sterkere benadrukking geven: <strong>
- Citaat weergeven: <cite>
- Definitie aangeven: <dfn>
- Computer-code aangeven: <code>
- Uitvoer van programma’s, scripts,.. : <samp>
, Eline Opsommer 1e jaar Toegepaste ICT-Apps&Gamification
- Geeft tekst die gebruiker moet invoeren: <kdb>
- Geeft variabele/programma-argument aan: <var>
- Afkorting: <abbr>
- Geeft type afkorting aan: <acronym>
- Niet-proportioneel lettertype gebruiken voor vb gedichten dat browser zich niet bemoeit met formatering
van tekst:
o <pre>Test
A 10 20
B 8 16
C 6 12</pre>
3.4.3 Lijsten
3.4.3.1 Genummerde lijst
<ol>
<li>Eerste jaar</li> 1. Eerste jaar
<li>Tweede jaar</li>
<li>Derde jaar</li>
<li>Vierde jaar</li>
=> 2.
3.
4.
Tweede jaar
Derde jaar
Vierde jaar
</ol>
<ol>
<li>Eerste jaar 1. Eerste jaar
<ol> 1. Informatica
<li>Informatica</li> 2. Boekhouden
=>
<li>Boekhouden</li> 2. Tweede jaar
</ol> 3. Derde jaar
</li> 4. Vierde jaar
<li>Tweede jaar</li>
<li>Derde jaar</li>
<li>Vierde jaar</li>
</ol>
3.4.3.2 Ongenummerde lijst
<ul>
<li>Eerste jaar</li> Eerste jaar
<li>Tweede jaar</li>
<li>Derde jaar</li>
<li>Vierde jaar</li>
=>
Tweede jaar
Derde jaar
Vierde jaar
</ul>
<ul>
<li>Eerste jaar Eerste jaar
<ul> o Informatica
<li>Informatica</li> o Boekhouden
=>
<li>Boekhouden</li> Tweede jaar
</ul> Derde jaar
</li> Vierde jaar
<li>Tweede jaar</li>
<li>Derde jaar</li>
<li>Vierde jaar</li>
</ul>
3.4.3.3 Definitielijst
= lijst met koppen en inspringende alinea’s
<dl>
<dt>HTML</dt> HTML
<dd>HyperText Markup Language</dd> HyperText Markup Language
<dt>CSS</dt> CSS
<dd>Cascade StyleSheets</dd> Cascade StyleSheets
</dl>
Lab multimedia
(X)HTML & HTML5
1 HTML5 (pg 7)
1.1 Waarom HTML5 (pg 7)
2 De structuur van een HTML5-document (pg 9)
<!DOCTYPE html>
<html lang=”nl”>
<head>
<meta charset=”UTF-8” />
<title>Onze eerste webpagina</title>
</head>
<body>
</body>
</html>
- HTML-pagina = tekstdocument dat andere extensie gekregen heeft en waarin de tekst in bepaalde
codering staat
2.1 Opbouw van HTML (pg 9)
2.2 Doctype en <html> element (pg 10)
2.2.1 Doctype
2.2.2 <html> element
- Langattribuut in <html> element -> wordt aangegeven in welke taal inhoud van document is geschreven
<html lang="nl">
3 HTML-elementen (pg 11)
3.1 Element-regels (pg 11)
3.1.1 Alle tagnamen met kleine letters schrijven?
- Moet niet, bevordert wel leesbaarheid
3.1.2 Alle tags afsluiten?
- Afsluiten:
o <a></a>
o <table></table>
- Niet afsluiten:
o <br/>
o <hr>
o <img>
,Eline Opsommer 1e jaar Toegepaste ICT-Apps&Gamification
3.1.3 Alle waarden van attributen tussen aanhalingstekens plaatsen
- <IMG SRC="images/IMG_1977.jpg" WIDTH="475" HEIGHT="317" alt="html5" />
3.1.4 Alle elementen moeten correct genest zijn
- In juiste volgorde openen en sluiten
- <p><b><em>Tekst van de pagina.</em></b></p>
3.1.5 Commentaren correct schrijven
- <!-- commentaar -->
3.1.6 Moeten attributen een waarde hebben?
3.1.7 De tekens & en < correct coderen
© ©
° °
± ±
È E
É E
Ê Ë
Ë Ë
è è
é é
ê ê
ë ë
˜ ~
€ €
3.2 Deprecated HTML-elementen (pg 14)
- HTML5 wil 100% achterwaarts compatible zijn -> verouderde elementen moeten ondersteund blijven
3.3 Elementen binnen de <head>-tag (pg 16)
3.3.1 <title>element
- <title>een titel</title>
3.3.2 <meta>element
- <meta charset=”UTF-8” /> -> duidelijk maken welk karakterset er moet gebruikt worden
- Op meer algemene manier meta-data aangeven door meta-tags:
o <meta name=”naam” content=”data”/>
Beschrijving: <meta name=”description” content=”eigen webpagina” />
Auteur: <meta name=”author” content=”Converse” />
Pagina elke 30 sec vernieuwen: <meta http-equiv=”refresh” content=”30” />
3.3.3 <link>element
3.4 Elementen binnen de <body>-tag (pg 17)
3.4.1 Heading
- 6 niveau’s:
o <h1>blabla</h1>
o <h2>blabla</h2>
o …
3.4.2 Gestructureerde tekst
- Tekst onderdelen in paragrafen:
o <p>zever</p>
- Benadrukking geven: <em>
- Sterkere benadrukking geven: <strong>
- Citaat weergeven: <cite>
- Definitie aangeven: <dfn>
- Computer-code aangeven: <code>
- Uitvoer van programma’s, scripts,.. : <samp>
, Eline Opsommer 1e jaar Toegepaste ICT-Apps&Gamification
- Geeft tekst die gebruiker moet invoeren: <kdb>
- Geeft variabele/programma-argument aan: <var>
- Afkorting: <abbr>
- Geeft type afkorting aan: <acronym>
- Niet-proportioneel lettertype gebruiken voor vb gedichten dat browser zich niet bemoeit met formatering
van tekst:
o <pre>Test
A 10 20
B 8 16
C 6 12</pre>
3.4.3 Lijsten
3.4.3.1 Genummerde lijst
<ol>
<li>Eerste jaar</li> 1. Eerste jaar
<li>Tweede jaar</li>
<li>Derde jaar</li>
<li>Vierde jaar</li>
=> 2.
3.
4.
Tweede jaar
Derde jaar
Vierde jaar
</ol>
<ol>
<li>Eerste jaar 1. Eerste jaar
<ol> 1. Informatica
<li>Informatica</li> 2. Boekhouden
=>
<li>Boekhouden</li> 2. Tweede jaar
</ol> 3. Derde jaar
</li> 4. Vierde jaar
<li>Tweede jaar</li>
<li>Derde jaar</li>
<li>Vierde jaar</li>
</ol>
3.4.3.2 Ongenummerde lijst
<ul>
<li>Eerste jaar</li> Eerste jaar
<li>Tweede jaar</li>
<li>Derde jaar</li>
<li>Vierde jaar</li>
=>
Tweede jaar
Derde jaar
Vierde jaar
</ul>
<ul>
<li>Eerste jaar Eerste jaar
<ul> o Informatica
<li>Informatica</li> o Boekhouden
=>
<li>Boekhouden</li> Tweede jaar
</ul> Derde jaar
</li> Vierde jaar
<li>Tweede jaar</li>
<li>Derde jaar</li>
<li>Vierde jaar</li>
</ul>
3.4.3.3 Definitielijst
= lijst met koppen en inspringende alinea’s
<dl>
<dt>HTML</dt> HTML
<dd>HyperText Markup Language</dd> HyperText Markup Language
<dt>CSS</dt> CSS
<dd>Cascade StyleSheets</dd> Cascade StyleSheets
</dl>
