Blog

Basis HTML Codes

  • Bericht auteur:
  • Berichtcategorie:Opdrachten
  • Die je nodig hebt voor je site
  • Die je krijgt op de toets
  • Van elk voorbeeld goed naar de syntax kijken.
TagDoetVoorbeeld
<!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<ul>
<li>Informatica</li>
<li>Natuurkunde</li>
</ol>
Inhoudsopgave
  1. CSS
  2. Waar staat het CSS tag?
  3. Op tag
  4. Class selector .
  5. ID Selector #

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>