Wat is HTML?
HTML staat voor H yper T ext M arkup L anguage
HTML is de standaard opmaaktaal voor webpagina's
HTML- elementen zijn de bouwstenen van HTML-pagina's
HTML-elementen worden weergegeven door <> tags
HTML-elementen
Een HTML-element is een starttag en een eindtag met daartussen inhoud:
<h1>Dit is een kop</h1>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | This is a Heading | </h1> |
| <p> | This is paragraph. | </p> |
HTML-kenmerken
- HTML-elementen kunnen attributen hebben
- Attributen geven aanvullende informatie over het element
- Attributen komen in naam/waarde-paren zoals charset="utf-8"
Een eenvoudig HTML-document
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
Voorbeeld uitgelegd
HTML-elementen zijn de bouwstenen van HTML-pagina's.
- De
<!DOCTYPE html>verklaring definieert dit document als HTML5 - Het
<html>element is het hoofdelement van een HTML-pagina - Het
langattribuut definieert de taal van het document - Het
<meta>element bevat meta-informatie over het document - Het
charsetattribuut definieert de tekenset die in het document wordt gebruikt - Het
<title>element specificeert een titel voor het document - Het
<body>element bevat de zichtbare pagina-inhoud - Het
<h1>element definieert een grote kop - Het
<p>element definieert een alinea
HTML-documenten
Alle HTML-documenten moeten beginnen met een documenttypedeclaratie: <!DOCTYPE html>.
Het HTML-document zelf begint met <html>en eindigt met </html>.
Het zichtbare deel van het HTML-document bevindt zich tussen <body>en </body>.
HTML-documentstructuur
Hieronder ziet u een visualisatie van een HTML-document (een HTML-pagina):
Opmerking: alleen de inhoud in het gedeelte <body> (het witte gebied hierboven) wordt in een browser weergegeven.
HTML-koppen
HTML-koppen worden gedefinieerd met <h1>to <h6>-tags.
<h1>definieert de belangrijkste kop. <h6>definieert de minst belangrijke kop:
Voorbeeld
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML-alinea's
HTML-paragrafen worden gedefinieerd met <p>tags:
Voorbeeld
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML-links
HTML-links worden gedefinieerd met <a>tags:
Voorbeeld
<a href="https://www.w3schools.com">This is a link</a>
De bestemming van de link wordt gespecificeerd in het hrefattribuut.
HTML-afbeeldingen
HTML-afbeeldingen worden gedefinieerd met <img>tags.
Het bronbestand ( src), alternatieve tekst ( alt),
width, en heightworden geleverd als attributen:
Voorbeeld
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
HTML-knoppen
HTML-knoppen worden gedefinieerd met <button>tags:
Voorbeeld
<button>Click me</button>
HTML-lijsten
HTML-lijsten worden gedefinieerd met <ul>(ongeordende/opsommingstekens) of
<ol>(geordende/genummerde lijst) tags, gevolgd door <li>
tags (lijstitems):
Voorbeeld
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML-tabellen
Een HTML-tabel wordt gedefinieerd met een <table>tag.
Tabelrijen worden gedefinieerd met <tr>tags.
Tabelkoppen worden gedefinieerd met <th>tags. (standaard vetgedrukt en gecentreerd).
Tabelcellen (gegevens) worden gedefinieerd met <td>tags.
Voorbeeld
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML programmeren
Elk HTML-element kan attributen hebben .
Voor webontwikkeling en -programmering zijn de belangrijkste attributen id en class. Deze attributen worden vaak gebruikt om op programma's gebaseerde manipulaties van webpagina's aan te pakken.
| Attribuut | Voorbeeld |
|---|---|
| ID kaart | <tabel - ID ="tabel01" |
| klas | <p class ="normaal"> |
| stijl | <p style ="font-size:16px"> |
| gegevens- | <div data -id="500"> |
| bij klikken | <input onclick ="mijnFunctie()"> |
| muis over | <a onmouseover ="this.setAttribute('style','color:red')"> |
Volledige HTML-zelfstudie
Dit was een korte beschrijving van HTML.
Ga voor een volledige HTML-tutorial naar W3Schools HTML-tutorial .
Ga voor een volledige HTML-tagreferentie naar W3Schools Tag Reference .