Hier plaats je de feitelijke content van de pagina
n.v.t.
<title>
Wordt gebruikt om je pagina een titel te geven (voor het tabblad)
(zie tabblad)
<p>
Hiermee kun je een paragraaf aanmaken
Dit is een paragraaf.
<br>
Om een nieuwe regel te beginnen
Nieuwe regel beginnen.
<strong>
Hiermee kun je tekst als belangrijk markeren
Bold Text
<em>
Hiermee kun je tekst als benadrukt markeren
Text in Italics
Les 2 - Teksten
<meta>
Hier plaats je metagegevens plaatsen (vooral voor SEO)
n.v.t.
<h1> t/m <h6>
Met deze elementen kun je headings (kopjes) maken
Dit is een h3-heading
<del>
De <del>-tag doorstreept de tekst. Meestal gebruikt met de <ins>-tag
Mijn auto is wit zwart
<ins>
De <ins>-tag onderstreept de tekst. Meestal gebruikt met de <del>-tag
League of Legends is slechter beter dan DotA
<sup>
De <sup>-tag veranderd tekst naar en superscript tekst.
De 1ste en 2de wereldoorlog speelde zich af in de 20ste eeuw.
<sub>
De <sub>-tag veranderd tekst naar en subscript tekst.
H2O is the chemical formula for water.
<q>
De <q>-tag zet een tekst in aanhalingstekens om zo te laten zien dat het een quote is.
The supreme art of war is to subdue the enemy without fighting -Sun Tzu, The Art of War
<blockquote>
De <blockquote>-tag specificeerd een stuk tekst dat is gequote van een andere bron.
Quote van W3Schools:
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content.
<abbr>
De <abbr>-tag definieerd een afkorting of acroniem.
HTML in combinatie met CSS en Javascript wordt vaak gebruikt om websites te ontwerpen.
Les 3 - Lijsten
<ul>
Gebruik <ul> wanneer de orde van de list items niet van belang is. Denk hierbij bijvoorbeeld aan een lijst van hoofdsteden in de wereld.
Amsterdam
Brussel
Berlijn
<ol>
Gebruik <ol> wannneer de orde van de list items juist wel van belang is. Denk hierbij aan een inhoudsopgave.
Inleiding
Wat is HTML
Waarom gebruiken we HTML
Conclusie
<li>
Wordt gebruikt in <ul> en <ol> om list items toe te voegen aan de lijsten.
Zie <ul> en <ol>
<dl>
Een <dl> (description list) wordt meestal gebruikt voor registers of begrippenlijsten.
Concurrentie
De onderlinge strijd om een bepaalde positie in de markt
Omzet
Het totale bedrag aan inkomsten uit de verkoop van producten en diensten in een bepaalde periode
<dt>
Wordt gebruikt in een description list om termen aan te leggen.
Zie <dl>
<dd>
Wordt gebruikt in een description list om details en/of een descriptie aan te leggen aan de termen.
Zie <dl>
Les 4 - Hyperlinks
<a>
Hiermee kun je een stuk tekst omzetten naar een hyperlink.
Een <iframe> wordt gebruikt om een webpagina binnen een webpagina weer te geven.
Les 5 - Afbeeldingen
<img>
De <img>-tag wordt gebruikt om een afbeelding toe te voegen. De image die je opbrengt dien je altijd in een subdirectory te plaatsen. Verder dien je de image ook altijd een alt, title, width en height attribuut te geven.
<map>
Met een <map> kun je in een image op meerdere punten klikken of met je muis er over heen zweven om bijvoorbeeld tekst te zien. In dit geval kun je met je muis over de staff en/of gezicht zweven om een kleine beschrijving te zien.
<object>
De <object> tag definieert een container voor een externe source. De voordeel van <object> is dat je een fallback kan maken voor het geval als de browser de source niet herkent.
Les 6 - Tabellen
<table>
Hiermee kun je een tabel creëren
Filler caption
<th>
1 rij van <td> is 1 <tr>
<td>
<td>
<th>
Definieert een headercel in een HTML-tabel.
Zie <table>
<tr>
Definieert een rij in een HTML-tabel.
Zie <table>
<td>
Definieert een cel in een HTML-tabel.
Zie <table>
<caption>
Met het <caption> element kun je een bijschrift toevoegen aan de tabel.
Zie <table>
<thead>
Het gebruik van <thead> biedt semantische structuur aan de tabel.
n.v.t.
<tbody>
Het gebruik van <tbody> biedt semantische structuur aan de tabel.
n.v.t.
<tfoot>
Het gebruik van <tfoot> biedt semantische structuur aan de tabel.
n.v.t.
Les 7 - Metagegevens
<base>
Hiermee kun je de beginpunt van je website specificeren. Door een base in te stellen zullen alle relatieven paden vanuit de bron beginnen.
n.v.t.
<link>
Met de <link> tag kun je een relatie maken tussen de huidige document en een externe source.
<link rel="stylesheet" href="css/stylesheet.css">
<script>
<script src>
Met <script src> leg je een relatie aan met de huidige document en een externe script source.
<script>
<script> wordt gebruikt om een client-side script in te sluiten
<script src="js/script.js"></script>
Les 8 - Formulieren
<form>
Hiermee creër je een formulier
<form action="#" method="get"></form>
<input>
Hiermee creër je een invoerveld waarin de gebruiker data kan invoeren.
<label>
Hiermee geef je een betekenis aan de invoerveld en weet de gebruiker wat er in de invoerveld moet worden ingevoerd.
<select>
Hiermee creër je een dropdown met een aantal opties. Dit kan een alternatief zijn voor radiobuttons en bespaart ruimte.
<option>
Wordt in combinatie gebruikt met <select>. Hiermee kun je verschillende opties toevoegen aan de <select> dropdown.
<option>Filler</option>
<textarea>
Hiermee creër je een grotere invoerveld voor bijvoorbeeld opmerkingen of commentaar.
Les 9 - Media
<audio>
Hiermee kun je een audio bestand embedden op je pagina
<source>
De <source> tag wordt gebruikt als je meerdere soorten bestandstypes hebt. Dit is handig, omdat het dan de volgende bestand probeert af te spelen als de vorige niet is ondersteund.
Hiermee kun je een video bestand embedden op je pagina
<embed>
Hiermee kun je sources embedden die niet meer worden ondersteund op nieuwere browsers, maar wel op oudere versies.
n.v.t.
<canvas>
Hiermee creër je een container waarin je kan illustreren met behulp van Javascript.
Les 10 - Divisies
<div>
Met de <div> tag kun je je pagina in logische blokken verdelen.
n.v.t.
<header>
De <header> tag gebruik je voor de kop van de pagina. Verder brengt de <header> tag ook semantische waarde.
n.v.t.
<footer>
De <footer> tag gebruik je voor de kop van de pagina. Verder brengt de <footer> tag ook semantische waarde.
n.v.t.
<nav>
De <nav> tag gebruik je voor de kop van de pagina. Verder brengt de <nav> tag ook semantische waarde.
n.v.t.
<section>
De <section> tag bevat de main content van je pagina. Je gebruikt sections wanneer content blokken samen deel maken van een groter geheel.
n.v.t.
<article>
Articles gebruik je wanneer de content blokken juist niet deel maken van een groter geheel, maar opzich zelf staan.
n.v.t.
<aside>
De <aside> tag gebruik je voor ondersteunend content die ongeveer te maken heeft met de main content.
n.v.t.
<figure>
De <figure> tag is ook deel van je content, maar in plaats van tekst, omhuls je een afbeelding. Een figure is ook automatisch een losstaand element en begint op een nieuwe regel.
Fat ass wizard cat
<figcaption>
Een <figcaption> geeft een descriptie aan een figure.
