Cert 4 Web Design Cluster; Week 6.

This week we started building our web sites from paper sketches to web code we looked at HTML page set out or layout structure. Also done a practice example in using CSS in setting up how a web page is presented or looks when opened.

HTML set up

The basic structure layout of a HTML page is;

<html> open tag

<head> open tag

<title>HTML page Layout</title>

<link> tag to css and meta charsets

</head> close tag

<body> open tag

<header> open tag

</header> close tag

<nav> open tag

Navigating between pages (Home, Shop, Location and Contact details.)

</nav> close tag

<main> open tag

<h1> open tag. Heading 1</h1> close tag

<p>This is the area where all the detailed information goes like stories and pictures.</p>

</main> close tag

</body> close tag

</html> close tag

Folder Directory

Also what is needed is a file or folder directory to store all the web site information in structured.

With project folder and everything goes into that folder;

Main Folder: BarberShop.

index.html” main web structure page

“styles.css” presentation page

“images” Folder images to be used on the web pages

“pages” Folder additional web pages to be used for the web site

  • “contact.html” page
  • “services.html” page
  • “shop.html” page

Using href to link the web pages and images together.

HTML language consist of Elements that contains opening and closing Tags, opening tags also can have Attributes and Values:

A Tag is: keyword that defines how the browser must format and display the content.

A Attribute is: provide additional information about an HTML element.

A Value is: specifies the value to be sent to a server when a form is submitted.

Example of opening element using tags, attributes and values.

<Tag Attributes= Values>

<p style= “color:red”>

<a href= “about.html>

<div id= “wrapper”>

CSS practice example exercise:

We where given a web page named “Website Template” and added additional CSS to it. When opened it looked like this.

After adding additional CSS it ended up looking like this. With the title and cassette tape image being able to rotate. A navigation bar links where adding which change colour from green to red when hovering over them. Also setting the navigation bar area, by setting its height and width and giving it a colour. The same was done for the footer.

How a CSS works is the Tag name is taken and attributes is added to them. Using the body tag as a example.

body {

  • Tag name.

font-family: “Verdana”, sans-serif;

  • Say what sort of font to be used on the web page.

background: #fff;

  • White colour is given as the background colour of the web page.

text-shadow: 3px 3px 3px “#c0c0c0;

  • Shadow outlining is given to text.

text-align: center;

  • Text is to be centred in the middle of the web page.

font-size: 20px;

  • Set size of the font.


Now it is time to add some CSS to my barber shop web page.