Exercise 1: HTML and Markup Languages

The aims of this lab are:

• to write and, importantly, validate some HTML
• to develop some familiarity with the formal markup language specifications - both the descriptions and DTDs, and
• to familiarise yourself with some of the developments and issues in markup language specification and use.

Familiarisation with the Environment

1. If you haven't done so before, go through the Linux Tutorial Introduction to Linux. We will use the linux operating system in these labs so if you're computer is running Windows, reboot it to Linux. If you're doing these exercises outside the labs, you should be able to use any operating system, but later you'll have to setup and administer applications like Node and Heroku yourself.

2. You may use the editor of your choice for this unit, however you should use one that does automatic indentation and colour highlighting of text according to role. Brackets, Atom, Visual Studio Code, or Sublime Text are popular choices.

W3Schools

Work through the W3Schools Tutorial:
https://www.w3schools.com/html/default.asp
from the start up to HTML Blocks, and also to the section on HTML Forms.

Create your own home page

Create an HTML5 home page for yourself. The home page should contain a welcome message, a photo, a bullet list of the units you are studying, with each item in the list linked to the Unit Outline for that unit, and a table containing your timetable. You may find it useful to access some of the HTML5 references provided in the lectures.

Do not be too concerned about page output layout at this stage (tho you should use suitable indentation to show the structure of the page source).

Open the page in Firefox, Chrome and Opera to check that it works as expected. You may also want to have a look at it with Internet Explorer (if you're in Windows). Depending on your operating system, you can also check it under Safari and SeaMonkey.

Try adding a form to the page. The form should collect a users name, email and date of birth. Use HTML5 input types, and check that they work in the browser.

Validation

1. Validate your HTML5 page using the validation service at:

    http://validator.w3.org/.
   

   Try to fix any problems that appear during validation.