Blog

• Die je nodig hebt voor je site
• Die je krijgt op de toets
• Van elk voorbeeld goed naar de syntax kijken.

Tag	Doet	Voorbeeld
<!DOCTYPE html>, <html>	Geef aan dat dit een HTML pagina is volgens een bepaalde standaard	<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head>
<body></body>	Plaats de inhoud van de pagina in de body	<body>Hier de inhoud</body>
<head></head>	Plaats informatie over de pagina, zoals de title en meta tags, in de head	<html><head><title> Voorbeeld titel</title></head></html>
<img>	Afbeelding	<img src="konijn.jpg" />
<a>	link	<a href="https://a7.lm.voeten.com/" >Airybubbles 7</a>
<a href="url"></a> <a target="_blank"></a>	href = doel adres target = doel venster
<a><img></a>	Een link maken van een plaatje	<a href="https://a7.lm.voeten.com" ><img src= "https://lesmateriaal.voeten.com/wp-content/uploads/2021/08/7.png" />Extra tekst</a>
<div>	Container om meerdere html elementen in te groeperen	<div>...</div>
<h1><h2><h3>	Headings. Sluit de ene heading voor je de volgende begint.	<h1>Vakken</h1> <h2>Nederlands</h2> <h2>Informatica</h2> <h3>Toetsen</h3> * HTML * Internet * Keyboard Shortcuts
<table>	Tabel	<table><tr>....</tr></table>
<tr>	Rij in tabel
<td>	Cel in rij in tabel
<th>	header cel in rij in tabel
	Tabel Voorbeeld	<table> <tr><th>Leuke Vakken</th><th>Teleurstellende vakken</th></tr> <tr><td>Informatica</td><td>Aardrijkskunde</td></tr> </table>
<ul><li></li></ul>	Bullit list	<ul> <li>Pizza</li> <li>Friet Patat</li> </ul>
<ol><li></li></ol>	Numbered List	<ol> <li>Informatica</li> <li>Natuurkunde</li> </ol>

CSS

Cascading (watervallende) stylesheets. Doel is: centrale vastlegging van opmaak voor tags met classes of op id.

Waar staat het CSS tag?

Inline Code

<p style="color: red; background-color: yellow;">BLA </p>

In de <HEAD> van de pagina

In het style tag in de head

<head>
  <style>
    body { background-color: lightblue; }
  </style>
</head>

Extern Stylesheet (css file)

<link rel="stylesheet" href="styles.css">

Hoe selecteer je het juiste CSS tab?

Dat is de question!

Op tag

Alle HTML met deze tag

h1, h2, label, code {
   font-family: 'codenewroman', sans-serif;
}

Class selector .

Tekst in tabellen (binnen een figure) van de class .smallfont zet ik in een kleiner font

.smallfont{
    font-size:.7em;
line-height:1.6em
}

<figure class="wp-block-table smallfont"><table class="has-fixed-layout"><thead><tr><th>Week (maandag)</th><th>Onderwerp</th><th>Eindterm</th><th>Lesmateriaal</th><th>Fundament, i &amp; i / etc</th></tr></thead>

ID Selector #

Alleen het tag met deze ID krijgt de eigenschap

#main-title {
  color: darkblue;
  font-size: 32px;
}

<h1 id="main-title">Welcome to the Site</h1>