A- A A+

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.

 

W3 Schools

A great resource of HTML programming snippets

W3 Schools

HTML Tutorial

Online HTML tutorial split into different sections.

HTML Tutorial

Codecademy

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.