Presentaties
Sessie 1 : HTML basis
Sessie 2 : HTML met stijl

Sessie 1 : HTML elementen

☛ Een HTML element zegt de browser wat er moet getoond worden en de vormgeving.

Voorstelling van elementen (syntax)

Een HTML document bestaat uit HTML elementen.

<elementnaam attribuutnaam="attribuutwaarde">Inhoud</elementnaam>

Voorbeeld: <h2>Dit is een hoofding</h2>

Een element bestaat uit een begintag en eindtag met dezelfde naam, en eventueel iets ertussen.
De inhoud tussen de begin- en eindtag is ofwel tekst ofwel andere elementen ofwel leeg (vb. <naam/>).
De begintag kan geen, één of meerdere attributen bevatten. Een attribuut bestaat uit een attribuutnaam en attribuutwaarde.

Lijst van basis elementen

ElementOmschrijvingCode in HTML documentUitzicht in browser
htmlbegin en einde van het document<html>...</html> 
headbevat informatie over het document<head>
<title>
Titel</title>
</head>
 
bodybevat de inhoud van het HTML document<body>Alles wat hier staat, wordt getoond</body>Alles wat hier staat, wordt getoond
h1
h2
h3
h4
h5
h6
toont een hoofding<h2>De seizoenen van het jaar</h2>
<h3>De lente</h3>

De seizoenen van het jaar

De lente

pparagraaf (start en eindigt met nieuwe lijn)<p>Dit is een paragraaf</p>

Dit is een paragraaf

ul
li
toont een lijst met lijstitems<ul>
<li>
groep 1</li>
<li>
groep 2</li>
</ul>
  • groep 1
  • groep 2
alink naar een ander HTML document<a href="voorbeeld_css.htm" target="_blank">Toon pagina</a>Toon pagina
bralles hierna staat op een nieuwe lijneerste lijn <br/> tweede lijneerste lijn
tweede lijn
b
i
zet de tekst in vetjes of cursieftekst in <b>vetjes</b> en tekst in <i>cursief</i>tekst in vetjes en tekst in cursief
imgtoont een afbeelding<img src="images/huis.png" alt="home" title="Home"/>home
divdeelt de pagina op, bv. boven, midden, onder, linkerhelft, rechterhelft... <div>Rubriek met nieuwsitems</div>
Rubriek met nieuwsitems
table
tr
th
td
toont een tabel met rijen en cellen <table>
<tr><th>
Groep 1</th><th>Groep 2</th></tr>
<tr><td>
Eline</td><td>Tamara</td></tr>
<tr><td>
Wouter</td><td>Lennert</td></tr>
</table>
Groep 1Groep 2
ElineTamara
WouterLennert

Commentaar

Om een stuk van je HTML document niet te tonen in de browser, kan je het tussen <!-- en --> zetten.
Voorbeeld : <!-- Dit is een commentaar en wordt niet getoond op het scherm -->

Entiteiten

Code-karakters die als tekst moeten getoond worden, worden als entiteiten geschreven.
Voor speciale karakters en symbolen die niet op het toetsenbord staan, gebruik je ook entiteiten.
Een entiteit wordt voorgesteld door de entiteitnaam tussen & en ; ofwel het entiteitnummer tussen &# en ;.

&entiteitnaam;
&#entiteitnummer;

Voorbeelden :

KarakterEntiteitIn HTML documentResultaat in browser
&&amp;Romeo &amp; JuliaRomeo & Julia
<&lt;2 &lt; 32 < 3
ï&iuml;een pingu&iuml;neen pinguïn
&euro;43 &euro;43 €

Lijst met speciale karakters
Lijst met symbolen
Vrije Basisschool Terbank-Egenhoven | Workshop HTML © 2016 | Created by Els Quartier