HTML Website Design
During this unit students will go back to basics and design and make an HTML coded website. Using notepad ++ and learning about the differet HTML tags, students will then develop these into a local working website.
Unit Objectives
 |
To understand how to produce a basic text based website. |  |
To understand how to develop a website to include images and colour. |  |
To add links and further pages to your website including your own coding ideas. |
A great resource of HTML programming snippets
W3 Schools
Online HTML tutorial split into different sections.
HTML Tutorial
Online lesson and tutorials to get your started with website design.
Codecademy
Helpful notes
Edit your HTML in notepad++, you can continue to edit this by right clicking on the file and selecting edit with notepad++
Make sure to save your file as a Hyper Text Markup Language .html file.
To open the website just double click on it in explorer and it will open as a webpage.
Basic HTML Structure
<html>
<head>
<title>Your website title goes here</title>
</head>
<body>
Your contents of your website goes here.
</body>
</html>
Click on the links below for more information on expanding your website.
On each of the pages below the website asks you to 'Try it out' have a play before copying the HTML code to your own website so you know it works.
 |
Adding pictures to your website |
| <img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;"> | |
| |
Changing the background colour |
| <body bgcolor="#E6E6FA"> | |
| |
HTML Colour Picker |
| |
Adding a link |
| <a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a> | |
| |
Adding a table |
Assessment
You will be assessed on 3 areas of work for this unit.
Area 1: Your actual website
Area 2: The demonstration of your understanding of HTML coding using the skills sheet.
Area 3: The planning of your website, showing why you made decisions about your content, layout, menus, pictures etc.
