Learning HTML5

The worksheet is based on the materials from the HTML lecture and you should refer to the slide deck to help your understanding. It will take approximately 15 hours to work through all the exercises and you should ensure that you have completed them all before attempting subsequent worksheets.

Before you start you need to download and new materials. To do this you will be carrying out three tasks:

You need to use your SSH Terminal and navigate to the root directory of your project (the one containing the exercises/ directory).
There must be no changes in your working directories. These must be stashed using the git stash command.
You can then use the git pull command to pull any changes from the GitHub repository.
Finally you need to unstash the changes you made.

The full list of commands is:

$ git stash
$ git pull origin master
$ git stash pop

If the VI editor window pops open:

press the Esc key.
type :wq and press the Enter key.

In this worksheet you will be learning about the markup language HTML which is currently in version 5. The worksheet is split into five parts with the resources for each part in their own subdirectory. The template.html file contains a basic HTML5 template you will find useful when creating your own web pages.

└── 03_html
    ├── 01_syntax
    ├── 02_hypermedia
    ├── 02_lists
    ├── 03_hypermedia
    ├── 04_tables
    ├── 05_forms
    ├── 06_semantic
    └── template.html

You should get into the habit of doing this each time you sit down to work on your lab exercises as you will then be working on the latest versions of the files (with fewer bugs).

1 Syntax

Lets take a look at some basic HTML syntax. Start by locating the exercises/03_html/01_syntax/ directory. Navigate to this using the SSH Terminal, install the express package and start the web server. If you navigate to the base route / you will see a screen full of text.

As you can see, all the newlines have been replaced by spaces. The default behaviour of the web browser is to replace all newlines with spaces and replace multiple spaces with a single one!

Your job is to add html formatting to the text to make it readable. You should first of all add the basic HTML5 tags and then format the text using:

Heading tags (levels 1-3).
Paragraph tags.
Horizontal rules.
All date ordinals should use superscript.

As you work, save the html file and refresh the browser, you don't need to restart the index.js script. Use the html validator to check your work on a regular basis.

2 Lists

Now you have mastered the basics of html its time to move on to how it can be used to render lists of different types. Start by locating the files in the exercises/03_html/02_lists/ directory. Now start the Express server and view the root URL /. This should display a simple page with the title 1980's Home Computers.

Now, add a list on your web page. Insert the following lines of code after the paragraph describing clever uses for home computers:

<p>Some reasons often mentioned were:</p>

<ul>
  <li>learning to write computer programs</li>
  <li>managing family finances</li>
  <li>keeping track of freezer contents</li>
</ul>

View the list in the browser.

The ul element describes an unordered list. It contains three list items (denoted by li elements).

See what happens, when you change the list type to ordered list (ol).

Next, try a definition list. Add the following piece of code at the very end of the document, right before the </article> end tag:

<p>There are two types of memory:</p>

<dl>
  <dt>RAM</dt>
  <dd>Random access memory. The memory usable by programs. The amount was
  typically in the ballpark of 20 to 64 kilobytes. However, the Basic
  interpreter by default consumed a part of this.</dd>

  <dt>ROM</dt>
  <dd>Read-only memory. This was normally smaller in size than RAM and
  roughly corresponded to the hardware implementation of the operating
  system.</dd>
</dl>

The definitions list contains two elements for each item: a dt for the term and a dd for definition.

2.1 Test Your Knowledge

Find out about the applications of computers in the 1980s and add two more reasons for people to buy them.
Create an ordered list that contains the uses of modern computers in order of importance.
Identify five components in a 1980s computer and create a definition list that defines each of these.

3 Hypermedia

Now you have mastered the basics of HTML markup we will look at one of the most important features, the ability to link resources together (known as hypermedia), this is one of the cornerstones of the World Wide Web (WWW).

3.1 Routes

Every resource on the WWW (such as html documents and images) has a unique URL and so when we design our website we need to define these. In a website built using NodeJS and Express these are known as routes. Start by locating the exercises/03_html/02_hypermedia/ directory. Start the web server and opening the index.js file.

Some resources need to be directly accessible in the web browser (they are accessed either directly or loaded by the html web page). These need to have their own directly accessible URL.
1. One directory needs to be specified as being publicly available. In this example we have created a directory called public/
2. Express needs to make this directory public. This is achieved on line by importing a static module and using this to specify the public directory.
3. assuming the server is running you can directly view the image using the URL http://xxx:8080/paradox.jpeg, remembering to substitute your server's URL.
Some resources are virtual and are generated by a script running on the server before being sent back to the browser client.
1. There are some simple examples in index.js. Both the / and /paradoxes routes trigger scripts that take the contents of html files and send this back to the browser.
2. When you access the /date route it displays today's date. Look at the script that does this (you don't need to understand the code details).

3.1.1 Test Your Knowledge

There is a file called coventry_cathedral.jpg in the public/ directory. Display this in the browser.
Create a route called /cathedral which should return the contents of the cathedral.html file located in the html/ directory.
Create a route called /time that displays the current time in hours and minutes. There is detailed documentation on the Date function on the Mozilla website.

3.2 Hyperlinks

Now you understand the concept of URLs representing resources and how this relates to routes, it is time to start linking resources together. With the Express server running access the /commodore URL which should display a web page describing the Commodore 64 home computer

Add a link to the appropriate Wikipedia article to this web page, in a suitable location directly inside the body element:

<p>Read the <a href="http://en.wikipedia.org/wiki/Retrocomputing">Wikipedia article for Retrocomputing</a>.</p>

To test the functionality in your browser you will need to make sure the Express server is running and navigate to the correct URL.

A link, defined by the a element contains the URL of the linked web page as its href attribute. The link above contains an absolute path to a document on the external server. The absolute path begins will full protocol identifier and domain name.

Unlike block elements (such as h1 or p), links are inline elements: they always need a block element as a container and they are considered as a running part of the content of the parent block element.

A relative link is intended for links within the same domain. The parsing of the file path starts from the default directory, which is the directory where the containing HTML document is located. For instance:

"document.html" points to a document of that name in the default directory.
"info/document.html" points to a document in info subdirectory of the default directory.
"../document.html" points to a document in the parent directory of the default directory. (Note that, for security reasons, web servers prohibit the traversal of server's directory structure outside the dedicated document root folder.)

Add a link or two to suitable places in computers80.html.

Test your understanding

Create a relative link between the list item on the home page and the page on the Commodore 64.
Add a link at the bottom of the Commodore 64 page called Back which returns the user to the home page.
Create a file called spectrum.html in the html/ directory with the content shown below correctly marked up as HTML 5.
Create a new /spectrum route in the index.js.
Add new link to the list on the home page to send the user to this new page.
Make sure there is a link on the Spectrum page to return the user to the home page!
Validate your newly-created web page and correct any potential errors.

Sinclair ZX Spectrum
  - History
    - The ZX Spectrum is an 8-bit personal home computer released in the United Kingdom in 1982 by Sinclair Research.

  - Current status
    - There's still a wide community of Specrum enthusiasts. There are numerous emulators, such as Fuse (link to http://fuse-emulator.sourceforge.net) and Speccy (link to https://fms.komkon.org/Speccy/).
  - Gaming device
    - Best games
      - The ZX Spectrum was famous for its games. Some of the best include
        - Jet Set Willy
          - contained 60 levels
        - The Hobbit
          - A text adventure game with some simple graphics
  - Back to Main page (link)

3.3 Images

In HTML5, images are put inside a figure element. The figure element normally contains one image, possibly with a caption, but technically it can serve as a container for multiple images. because the images are loaded by the HTML web page (and not directly by the web server) they need to be in a publicly accessible directory. On our web server this has been defined as the public/ directory. You should create subdirectories within this to organise your files.

Locate the 03_hypermedia/public/ directory and create a new folder inside this called images/. Find an image of a 1980s computer and drag it into this new directory. You can use the image below if you wish.

Now, Add the following lines of code in an appropriate place, directly inside the body element, substituting the name of the image you uploaded:

<figure>
  <img src="images/computer.png" alt="A computer with a monitor"/>
  <figcaption>Photo: Piotr Siedlecki, public domain via http://www.publicdomainpictures.net.</figcaption>
</figure>

Notice that the path to the image images/computer.png does not include the public/ directory.

There are a couple of notable things about the img element:

It is a void element. A void element doesn't have any content, and can be closed immediately, like this <img >. For convenience, it can also be closed like this <img />. The extra / character, in the end, is not essential. However, <img > must NOT be closed like this <img></img>, which is a syntax error.

There are other void elements besides img. One of the most widely used is hr for creating a horizontal rule and written as <hr>. Void elements are not to be confused with self-closing tags. For void elements it's illegal to write <img></img> or <hr></hr>, but for self-closing tags such as <li> or <body> you can safely ignore closing tags </li> or </body>. Click here for a comprehensive list of void elements, here and here for discussions on StackOverFlow. To close or not to close tags, that is the question.

For an image to be displayed, it requires additional information in the form of attribute/value pairs. The attribute/value pairs above, are given within the start tag in the form of attribute="value". Multiple definitions are separated by space. Two of attribute/value pairs are mandatory for images:

Attribute	Purpose
src	For locating the image file. The file path is normally given as relative path, starting from the directory where the HTML file is located.
alt	For displaying an alternative text if the image cannot be displayed, or if the user prefers using a screen reader for accessibility purposes.

3.3.1 Test Your Knowledge

Find photographs of the following computers and upload to the images/ directory you created:
1. Sinclair ZX Spectrum
2. Commodore 64
3. BBC Model B
Make sure you add a <figcaption> element that describes the image and where you found it.
Make all the images 320px wide without stretching them. You will need to use another attribute, use the documentation to work out how.

3.4 Media

Now we will learn how to embed audio in a website. There are a number of resources located in the public/ directory that we will add to our index.html page.

You can use the new html <audio> tag to embed audio in a web page without needing to use third-party plugins. You will need to encode your audio files in two different formats for this to work in all major browsers:
1. Most browsers need files in the .mp3 format.
2. Firefox requires files encoded using the .ogg format.
In a similar way, video can also be embedded:
1. Most browsers require a video file encoded as .mp4.
2. Firefox needs an .ogg encoded version.
You can also embed a YouTube video in an <iframe> or alternatively using the <object> element. This is achieved by clicking on the share button then on the embed link that is displayed. You copy the html code into your website.

3.4.1 Test Your Knowledge

Add the guitar audio file to the index.html web page. The file has been provided in the two required formats.
1. Test that the audio plays in both Firefox and Chrome.
2. Can you modify the <audio> element to make the video auto-play?
Add the coventry video clip to the index.html file, again the file has been provided in both formats (note that you will need to change one of the extensions from .mp5 to .mp4).
1. Test the video using both Firefox and Chrome.
2. Restrict the video window to 320px wide without stretching the image.
3. Are there any additional attributes you can add to the <video> element. Try these out, whay effect do they have?
Find a (short) video clip on YouTube. This can be on any subject you wish.
1. Embed this in your web page using the iFrame code provided by Google.
2. Examine the attributes used and try changing their values, noting the effect this has on the embedded video.
3. Now embed the same clip using the Object code.
4. Examine the attributes used and try changing their values, noting the effect this has on the embedded video.

4 Tables

This task focuses on HTML tables. You will be working on the files in the exercises/03_html/04_tables/ directory. Start the web server.

Open the root path / which should display a table comparing a number of home computers from the 1980s. Examine the script index.js to locate the html file being loaded and open up this file in the editor.

Verify that you understand the elements used in marking up the table:

<table> to indicate the entire table.
<caption> for specifying the header of the table. By default, it appears above the table centered.
<thead> and <tbody> are semantic elements to show the header and body parts of the tables (there´s also <tfoot> for the footer). These are semantical elements, and, while not necessary, can help figuring out the structure of the table. In addition, <tfoot> could be used for a footer row.
<tr> for a table row. You can add as many of these elements into the table as necessary. Inside each <tr>, put a necessary number of <th>/<td> elements (see below)
<th> for a header cell. Inside the <tr> element corresponding to the header row (usually the topmost row), each column heading is given using this element.
<td> for a table data cell, i.e. regular table cell.

A summary of all HTML table tags can be found here.

4.1 Test your understanding

Modify the table structure to contain a column for Spectravideo home computer. Its data is: Spectravideo SV-328, Zilog Z80A CPU, 64kB RAM, 32kB ROM.
Generate two additional rows where each row should have a multi-column cell (use colspan attribute):
- Main usage: home computing (for all computers, a single cell should span over four columns)
- Killer game: Jet Set Willy (for Commodore 64 and ZX Spectrum, in a merged cell covering two columns), Jelly Monsters (for VIC-20), and Armoured Assault for Spectravideo.

5 Forms

In this final part of the worksheet you will be building forms that can send data to a web server.

5.1 POST vs GET

Lets start by looking at how forms send data to the server. This can be done using the HTTP GET method or using the POST method. Lets try out both so we can understand the differences.

5.1.1 Submitting Data Using POST

Make sure the web server is running and access the /postform route and open the corresponding html file.

Complete the form with your name.
Click on the the Submit button.
Examine the URL carefully:
1. Notice that it points to the base route / with no additional data in the URL.
Open the Chrome developer tools and look at the http request:
1. Notice that the request uses the POST method. This corresponds to the method attribute in the <form> element.
2. The request header includes a Content-Type header which contains the value application/x-www-form-urlencoded.
There is a request body which contains the form data:
1. This uses the application/x-www-form-urlencoded encoding.
2. Notice that it contains 2 query parameters in a querystring.
3. The names of the query parameters correspond to the values in the name attributes in the <input> elements.

5.1.2 Submitting Data Using GET

Make sure the web server us running and access the /getform route and open the corresponding html file.

Complete the form with your name.
Click on the the Submit button.
Examine the URL carefully:
1. Notice that it contains 2 query parameters in a querystring.
2. The names of the query parameters correspond to the values in the name attributes in the <input> elements.
Open the Chrome developer tools and look at the http request:
1. Notice that the request uses the GET method. This corresponds to the method attribute in the <form> element.
2. The URL contains the data (remember there is only a request body when the POST method is used.

5.2 Form Controls

In the previous section the form used the <input> element which displayed simple text boxes where you could enter anything. In this section you are going to learn about how to use a wide range of different controls to capture user input.

5.2.1 Input Elements

HTML defines a number of input types that can be used in forms. The commonly used ones are:

Plain text: <input type="text">
Password fields: <input type="password">
Email addresses: <input type="email">

The above are supported by most browsers. There are some new input types also:

URL addresses: <input type="url">
Numeric data: <input type="number">
Date pickers: <input type="date">

The main reason for introducing these new input types is for mobile devices with limited screen sizes where special keyboards/input methods can be used. But note that not every browser supports the new types.

Input types, not supported by old web browsers, will behave as input type text. See here.

Hidden parameters

Sometimes we need a way to submit some additional parameter to the server. This can be done by using a hidden input parameter. A hidden parameter has no onscreen appearance, but it will be sent to the server.

<form>
......
    <input type="hidden" name="org" value="Acme" />
    ....
</form>

5.2.2 Lists

The problem with the <input> elements is that it forces users to input free text which means the data will require a lot of validation. For example if asked to input a city users might enter Coventry, coventry, Cov, Coventry City and any number of variations. Where possible you should require users to choose from a predefined list.

There are two ways to define a list, radio/checkboxes and dropdown lists. Load the /lists route in your browser to see these in use. Make sure the web server is running, access the /lists route and open the html file that is being displayed.

Whilst not strictly a list, checkboxes can be used where the user can pick one or more options from a short list.

<input type="checkbox" name="foo" value="1">Option 1<br/>
<input type="checkbox" name="bar" value="2">Option 2<br/>

Notice:

It uses the standard <input> element.
The type attribute has a value of checkbox.
Each has a different value for their name attribute.
The value atribute contains the value that is passed to the server.

Radio buttons are to allow the user to make a selection from a small number of options:

<input type="radio" name="foobar" value="1">Option 1<br/>
<input type="radio" name="foobar" value="2">Option 2<br/>

Notice:

It uses the standard <input> element.
The type attribute has a value of radio.
All grouped options must have the same value for their name attribute.
The value atribute is what is passed to the server.

The select element defines a drop-down list, and the option element is used to define a list item.

<select name="example">
  <option value="notknown">Not selected</option>
  <option value="item1">Item 1</option>
</select>

Every option element should have a unique value, just like in checkboxes and radio buttons.

5.2.3 Test Your Understanding

Create a new route in the index.js file called /register.
Create an html file called registerform.html.
Create an html form that POSTs its data to /.
Create a registration form using all of the different form controls you have seen.
Make sure you understand the data displayed when the form is posted.
Change the form so it makes a GET request.

5.3 Labelling Forms

<label> elements are used to connect texts and controls that are used together in forms. For example radio buttons and check boxes often come with preceding texts that describe the choice. However if the user clicks the text nothing happens. That's because the browser doesn't know the connection between the text and the neighboring control. They must be wrapped up with label element.

<form action="">
<input type="checkbox" name="bike" value="Bike">I have a bike<br>
<input type="checkbox" name="car" value="Car">I have a car
</form>

You have to click on the box. But if you have

<form action="">
<label><input type="checkbox" name="bike" value="Bike">I have a bike</label><br>
<label><input type="checkbox" name="car" value="Car">I have a car </label>
</form>

It is enough to click on text too.

Note the above can also be written as the following, which is also valid but needs more typing

<form action="">
<input type="checkbox" name="bike" id="bike" value="Bike"><label for="bike">I have a bike</label><br>
<input type="checkbox" name="car" id="car" value="Car"><label for="car">I have a car </label>
</form>

Read discussions on StackOverFlow for different ways of associating labels and inputs.

Use grouping and hints

In many user interfaces, you can see how different elements on the screen are grouped together in order to make the input easier for the user. In HTML, you can use fieldset element for this.

<form action="">
<fieldset>
<legend>Credit Card</legend>
<label><input type="radio" name="card" value="Visa">Visa</label><br>
<label><input type="radio" name="card" value="MCard">MasterCard </label>
</fieldset>
</form>

What you get is

In user interfaces it also a common practice to give hints on the kind of data is expected. In HTML, this can be achieved by value or placeholder attribute on the controls. The placeholder attribute's text disappears once the control is clicked in or gains focus and the value attribute's text stays in place when a control has focus unless a user manually deletes it.

5.3.1 Test Your Understanding

Make sure the web server is running and access the /semantic route. Open the html file containing the form that is being diplayed.

At the moment, you have to click exactly the right spot on your checkboxes etc. Change this by using labels.
Rearrange your form with legends and fieldsets in order to make it easier for the user to understand.
Give input hints to the user whenever possible.

5.4 Form Validation

Form validation is traditionally done using JavaScript. But HTML5 introduces some new ways of doing it, which makes validation a lot easier.

5.4.1 'required' attribute

Now return to the very first example in this lab

<form action="http://www.google.com/search">
  <div>
    Let's search Google:
    <input name="q">
    <input type="submit">
  </div>
</form>

If we add a required attribute to the query input, it will become <input required name="q">. In this case, the query field is required. In other words, if we don't type in anything in this field, we'll have an error message when trying to click submit.

Behind the scene, the browser tries to verify user's input. There are some other input attributes that can serve for validation purposes. For example, min and max attributes for numerical input types such as number or month; size and maxlength for limiting the number of characters entered.

5.4.2 'pattern' attribute based on regular expression

In addition to using different input types, we can also use patterns a.k.a.regular expressions. Using patterns, we can validate user inputs even more precisely.

Pattern is an encoded sequence of characters that define a pattern of text characters. Remember that client-side validation is not reliable as the only means of validation, it is useful to make the user interface more pleasant.

For example, a Finnish social security number (similar to UK National Insurance number) is often 999999-999X (for those who are born in the 20th century). The first 6 digits are the birth date: day, month and year's last two numbers. After "-" there are 3 digits and the last character can be either digit or letter from A to Y. If we want to make a pattern of this, it would be

<input type="text" pattern="\d{6}\-\d{3}([0-9A-Y])" ...>

\d means a digit, \- means the "-", [chars] means a set of characters.

5.4.3 Test your understanding

Open file form-skel.html. Validate the user's data in Student id, email address and score by using patterns.

6 Semantic Markup

In this final exercise we will look at how MicroData can be used to add semantic information to a web page. Start by using the SSH Terminal to run the server in the exercises/03_html/06_semantic/ directory and navigating to the base route /. This should display a simple review page.

Paste the URL into the Rich Snippets Tool to see what semantic data it contains. Notice:
1. There are two items on in the webpage, a movie and a rating. These are defined using the itemscope attribute in the html. Each item has an itemtype attribute that points to the appropriate Microdata definition.
2. Within each itemscope, the information has been tagged using the itemprop attribute. The allowed values are defined by the itemtype definition available on the Schema.org website.
3. The schema definitions define what itemtype are allowed and also what items can be nested inside which items.
The Rich Snippets Tool will not only extract the metadata but will also identify any errors in your implementation of the MicroData schema.
Install the Structured Data Testing Tool Plugin for your Chrome Browser and use it to see the metadata.

6.1 Test Your Understanding

The /cafe route displays information about a local cafe. Using the CafeOrCoffeeShop schema as a starting point, add semantic markup. Feel free to add additional content to practice your skills.

7 Markdown

Hand-coding HTML can be a hassle, especially because you have to remember to add opening and closing tags. There have been several attempts to make life easier but one of the most popular is the use of Markdown Syntax. This is a simple way to describe a web page which is then converted into an HTML document on the fly when the page is displayed. It is how the worksheets were written (notice they all have the .md file extension).

Start by running the server (note that you need to install an additional package called marked).

View the root path /. Notice that it displays a web page.
Use the Elements tab in the Chrome Developer Tools to view the markup, notice that the page contains a <h1>,a <p> element plus an ordered list and a table.
Now open the computers.md file:
1. Notice how a single # symbol is used to denote a top level <h1> element.
2. The <p> paragraph is denoted by text with no additional markup.
3. Numbers at the start of a line denote a list.
4. Tables are defined using pipes | and dashes -.
Explore the markdown syntax. Note it can only be used to define simple structures.

7.1 test Your Understanding

Add 2 more 80s computers to the list.
1. What happens if you repeat a list number?
Add these to the table and include the year of production.
1. What happens if the pipe symbols don't align?
Add two second level headings, hardware and software, putting the list of computers and their specs in the first section.
Find the names of 5 pieces of 80s software and create an unordered list.

TEACHING-MATERIALS/03 Learning HTML5.md