Lab exercise 1: Basics of HTML

Solution

Find the solution to this exercise here:

Solution

Related links

W3C Validator: validation tool:

W3C-validator

aXe DevTools: accessibility validation tool:

aXe DevTools

MDN Web Docs: HTML source:

MDN Web Docs

Google: we all use it:

Google

Goals of the exercise

The goals of the exercise are the following:

  • Correct usage of elements (<head>, <body>) and semantic tags (<header>, <main>, <footer>, <nav>, <section>, <ul> and <li>).
  • Setting up a navigation menu using relative paths and using the same techniques to add images to the document.
  • Using the W3C-validator and aXe DevTools to check for errors and accessibility issues.
  • Organising a project in a comprehensive way without using capital letters or spaces in file and folder names.
  • Publishing a lab exercise or project to the server so it can be accessed using a provided URL.

Reflection

Easy

Copying the first page of the assigment was fairly easy. I had a slight issue getting the images to align properly on the second page of the assigment.

Hard

Making sure the directories and files were named appropriately was the harder part. I have recreated the folder structure (that was shown in the theory course) using OneDrive.

Unsure

I am unsure about the usage of <i> </i> in case of using italics in latin names. Is <em></em> still the preferred tag in this case? Or are italics only configured using CSS? Not sure about my directory structure in Plesk: the finished lab exercise had to be available on robinmorent.ikdoeict.be/labo01, however it seems that this is different to the path suggested in the theory classes? Will also ask for feedback on this. Is the use of tables like these appropriate?
Answer: Do not use a table this way, tables are only for raw data. Must be configured in CSS. Same can be applied for bold or cursive text: use CSS.