Programming is not a zero-sum game. Teaching something to a fellow programmer doesn't take it away from you. I'm happy to share what I can, because I'm in it for the love of programming.
— John Carmack (maar het is ook de reden waarom ik leerkracht geworden ben)

HTML basisdocument

Basisstructuur

Voor deze kleine pagina maken we een aparte map. Noem die bvb ‘kat’. In deze map maken we straks een HTML-document aan. We willen in deze pagina ook minstens één foto toevoegen. Het is meestal een goed idee om foto's, logo's enz. in een aparte map te bewaren. Maak daarom in de map ‘kat’ een mapje ‘img’.

Rechtenvrije foto's

Voor deze oefening willen we ook een afbeelding toevoegen aan een webpagina. Je kan natuurlijk een zoekopdracht doen en een passende afbeelding downloaden. Je moet dan wel de toestemming hebben van de auteur, wat vaak niet kan omdat je de auteur niet kent.

Er bestaan gelukkig sites waar je mooie foto's, iconen en andere afbeeldingen kan vinden en het auteursrecht toch respecteren. In onderstaand filmpje tonen we twee dergelijke sites: unsplash.com en flickr.com.

Download nu enkele foto's, bvb eentje in lage resolutie en eentje in hoge resolutie. Bewaar de foto's in het mapje ‘img’.

HTML-pagina maken

We maken nu een eenvoudige pagina met enkele HTML-elementen, een foto, een link … Al deze dingen worden later in detail uitgelegd. Nu probereren we enkel de manier van werken uit.

Volg mee met onderstaande filmpjes. Het doel is een HTML-bestand in deze stijl: 

<!DOCTYPE html>
<html lang="nl">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mijn eerste pagina</title>
</head>

<body>
  <header>
    <h1>Mijn eerste webpagina</h1>
  </header>
  <main>
    <h2>Werken met HTML</h2>
    <p>Dit is de eerste alinea, met een p element</p>
    <p>En dit is dan de tweede alinea. Dit zijn blokelementen. 
    Er zijn ook inline elementen, 
    zoals om <em>woorden te beklemtonen<em>.</p>

    <h2>Werken met een afbeelding</h2>
    <p>Een img is inline: 
    <img src="img/kote-puerto-so5nsYDOdxw-unsplash.jpg" 
      alt="foto van een kleine kat"></p>
    <p>Als er geen plaats is, komt die eronder: 
    <img src="img/25161907065_8a763415f9_k.jpg" 
      alt="grote afbeelding van kat"></p>

    <h2>Werken met links</h2>
    <p>Meer info vind je op 
    <a href="https://www.ucll.be">de website van UCLL</a>.</p>
  </main>
  <footer>
      &copy; 2022 Jan Van Hee &lt;
  </footer>
</body>

</html>

Editor, code, browser, live server

We vertrekken van de map ‘kat’ met daarin een map ‘img’ die twee foto's bevat. In onderstaande film bekijken we:

HTML elementen toevoegen, block / inline, img, links, validatie

Het vervolg van de film behandelt:

FTP (File Transfer Protocol)

We hebben de pagina lokaal getest, liefst in verschillende browsers. Alles schijnt te werken. Tijd om het resultaat van ons werk online te zetten. Dat kan op heel wat verschillende manieren. De basisversie is een FTP-client gebruiken om alle nodige bestanden naar de server te kopiëren. Modernere manieren om een site te deployen maken bvb gebruik van een github commit. Voor dit OPO houden we het echter gewoon bij een bestandsoverdracht via FTP.

Bekijk eerst de stappen in de installatiehandleiding (PDF 4,2 MB) om het programma Filezilla te installeren. Er zijn heel wat alternatieve FTP-clients. We gebruiken Filezilla omdat dit programma draait onder Windows, Linux en MacOS en gratis is. Gebruik gerust iets anders als je al vertrouwd bent met FTP!

In het volgend filmpje tonen we voor dit voorbeeld concreet hoe dit werkt. Als het inloggen op onze webserver niet lukt, neem dan contact op met je lector. Mogelijk moet je r-nummer manueel toegevoegd worden aan een databank. We brengen dat wel voor jou in orde, maar dan moet je het wel eerst signaleren (teams chatbericht). Opgepast: in het filmpje wordt de poort leeg gelaten. Dat mag niet meer: gebruik poort 22322, zoals in de handleiding staat.