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: https://www.online.liverpool.ac.uk/programmes/msc-in-web-sciences-and-big-data/structure
HTML5 Module descriptions
Table of Contents
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:
Following is a wireframe of the document HTML5 design that we’ll create:
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:
The actual body of the document starts right after the meta section and is contained within <body> and </body> tags.
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.
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.
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.
The document is finalized with closing body tag and closing HTML tag.
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:
Attached screenshot of the rendered HTML5 page depicts the final product that incorporates all required features.