HTML5 for Beginners – A simple website

This is a fourth article in the series dedicated to HTML5 programming for beginners. In this post, we’ll create a fictitious website project dedicated to two existing courses at University of Liverpool. Page will list a a description of two modules that are part of the studies at the University of Liverpool, in MSc in Web Sciences and Big Data program: 

HTML5 Module descriptions

Table of Contents

Project Document Structure 2

HTML5 Document Architecture 3

1. HTML5 Wireframe 3

2. HTML5 document definition and meta information 3

3. HTML5 document body 4

a. Top (header) of the HTML5 document body 4

b. Middle (module information) of the HTML5 document body 5

c. Bottom (footer) of the HTML5 document body 6

d. End of the HTML5 document 6

Cascading Style Sheet 6

HTML5 Document Output 7


Project Document Structure

Let’s create an HTML5 website project that will consist of the following files:

  • HTML5 file (index.html)
  • External CSS file (main.css)
  • Image file (University_of_Liverpool_logo.png)

The following diagram depicts the high-level project structure and file organization:

In the root of the project, I kept the index.html file, while CSS and Image files are sitting in their respective folders (main.css inside CSS folder and University_of_Liverpool_logo.png file inside img folder). I felt that keeping the project structured this way would be an excellent self-explanatory way of organizing the project, allowing it to scale in the future.

Following screenshot shows an actual organization of the project inside IDE:

HTML5 Document Architecture

HTML5 Wireframe

Following is a wireframe of the document HTML5 design that we’ll create:


HTML5 document definition and meta information

Document starts with HTML5 document definition (<!doctype html>) and continues with HTML Tag that defines start of the HTML5 document. Below that, the next section is defined between the <head> and </head> tag. This is where metadata and all the information about my document was entered. Head tag is the first element inside an HTML element.

Meta section of the document contains:

  • Definition of the charset (UTF-8) in this case
  • Title tag that defines name of the page
  • Content description meta tag
  • and finally, a link to a CSS style sheet

Screenshot outlining the top of the document, doctype definition, start of html and meta section inside <head> tags:

3. HTML5 document body

The actual body of the document starts right after the meta section and is contained within <body> and </body> tags.

Top (header) of the HTML5 document body

The first <section> tag defines the top parts of the document. It provides information in two different div tags; one depicts the right side of the HTML header, the other shows logo on the left aspect of the document. Left side div tag is id: ‘leftTop’, and right side div containing logo is id: ‘rightTop’.

This is the code:

The top section contains name of the project, author of the document (my name) and, or any other parts of the document, and following is what the top section looks like when rendered in the browser.

Middle (module information) of the HTML5 document body

The middle section of the document is contained in the <section> tag and div tag with id ‘middle’. This section provides information about two modules inside <ol> ordered list and then details, such as learning outcomes of each module are confined inside unordered list <ul>. Following is the code of the middle section of the document. As you can perceive, I’ve also used HTML commenting feature to better detail where each part begins.

Each module of the middle section will look like this, containing the name of the module, instructor’s name, objectives and learning outcomes.


Bottom (footer) of the HTML5 document body

This is a 3rd and last section of the document, which lists a div tag id: ‘footer,’ in which I’ve used a copyright line.

End of the HTML5 document

The document is finalized with closing body tag and closing HTML tag.

Cascading Style Sheet

Cascading style sheet contains the styling for tags (orange section), then repeating classes (starting with a dot) and down below for each of the segments of the document (leftTop, right Top, middle and footer). Following is the CSS code:

HTML5 Document Output

Attached screenshot of the rendered HTML5 page depicts the final product that incorporates all required features.