Year 8
Creating a Website

ICT
Go straight to: Lesson 2 : Lesson 3 : Lesson 4 : Lesson 5 : Lesson 6 : Lesson 7 : Lesson 8
Year 8
 
 
Lesson 1 - HTML
 

Objectives:
WALT (What we are learning today)
  Today you will learn how to create a web page using only Notepad and HTML code.
WILF (What you will complete by the end of this lesson)
  By the end of the lesson pupils will have created a webpage in notepad using HTML code.

Lets create your first webpage.

TASK 1
Open Notepad and type this:

Type the text exactly as it is except you should replace YOUR NAME with your own name.

TASK 2
Save the file as "Index.html" in your user area and preview it in internet explorer.
Click here to find out how to open it in internet explorer if you are unsure.
Click here to find out how to open it in notepad.

TASK 3
You should have noticed that the text is all on one line. Try adding <br> at the end of each line. e.g. "Welcome.<br>".
Preview your page in internet explorer.

TASK 4
You can add headings to your web page by using a heading tag.
The <h1> tag sets text as a heading in style 1. Valid tags are <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Add a heading to your web page by adding <h1> at the start of your heading and </h1> at the end of it. e.g. "<h1>Welcome.</h1><br>".
Preview your page in internet explorer.

TASK 5
You can change the title of your web page. In between <head> and </head> type the text on the right
<title>
YOUR NAME HERE's First Web Page
</title>

Your web page code should look like this.
Preview your page in internet explorer.

TASK 6
You can also add hyperlinks to your web page. Type the text below instead of Hyperlink.
<a href="http://www.Google.co.uk"> Google </a>
Preview your page in internet explorer.

TASK 7
Now we are going to add background colour. In the body tag add the following text so it looks like this
<body bgcolor="#000000">
The #rrggbb is the hexadecimal colour of the background. Check out these other colour codes.
Preview your page in internet explorer.

TASK 8
Now we are going to add text colour. In the body tag add the following text
<body bgcolor="#000000" text="yellow">
Instead of using "yellow" you can use any colour code in just the same way as the background colour code.
Preview your page in internet explorer.

TASK 9
Next you will add an image.
Find a picture on google and save it into the same directory as your web page as "Picture.bmp".
Copy this line of code into your web page after the Google hyperlink.
<img src="picture.bmp">
 Preview your page in internet explorer.

Extension
Insert several hyperlinks of your own. They can link to any site you like.
Write a paragraph about your self.
Try this quiz and see how you score.

This handout contains all infomation from this web page, you can print it if you prefere. (Check with your teacher first)

  
 
 
 
   
 
 
Lesson 2 - Website in Word
top
 
Objectives:
WALT (What we are learning today)
 

Today you will learn how to create a web page using Word and to understand the advantages of using different software packages .

WILF (What you will complete by the end of this lesson)
  By the end of the lesson pupils will have created a webpage in Word and compared both their web sites and see which one is more efficient, easier to understand.

If you would prefere this lesson on paper then click here. Check with your teacher before you print it.

TASK 1

Although all web pages are based on the structure of HTML, different applications can be used to create them. We have already created a simple web page by typing in the HTML tags yourself using notepad.

Now we are going to create the same web page using Microsoft Word. In Word we simply design the layout of the page and the code will be automatically generated for us.

Follow the steps below:

1. Load MS Word and start a new document:
To be able to view a web page correctly we must click on “Web Layout” in the “View” menu.

2. To add the text :
We simply type the text – no tags needed.

Type the text on the right exactly as it appears remembering to press enter at the end of each line.

You should replace “YOUR NAME HERE” with your own name and leave a space for the school badge.

This is the second web page created by YOUR NAME HERE.

I am a student at Sir John Nelthorpe School.

The school badge is below:

My favourite search engine is:

Google.

3. To create the heading text :
Use the mouse to highlight the first line of text “This is the second…” Then select Heading 1 from the drop down style box (To the left of the font dropdown box).

4. To add the image :
Position the cursor on a new blank line and then select “Picture” from the “Insert” menu. Select the “From file” option and then use the dialogue box to find the image:

G:\school logo\logo.jpg … and then click on “Insert”.

5. To add the hyperlink to Google :
Use the mouse to highlight the word Google on the last line of text. Now select “Hyperlink” from the “Insert” menu. In the next field labelled “Type the name of the file or web page name” Type the web page address shown below:

http://www.google.co.uk … then click on “OK” to convert the text to a hyperlink.

6. To save your work follow these steps carefully:

    • Select “Save As” from the “File” menu.
    • Change the “save In:” box to your "Web design" directory you created in your user area.
    • Change the “Save as type” to Web Page.
    • Type the filename “index2.html” and click on “Save”

7. Now view your web page in the internet browser :

Click here to find out how to open it in internet explorer if you are unsure.

N.B. To see the HTML code for the web page displayed in Internet Explorer:
Select “Source” from the “View” menu.

TASK 2

Compare the code that you typed yourself with the code produced by Word for the same page.

When you have finished and shown your page to your teacher you may add to the page using Word.
 
 
 
 
   
 
 
Lesson 3 - Evaluating websites
top
 

Objectives:
WALT (What we are learning today)
  how to evaluate web sites effectively and what makes good websites and bad ones.
WILF (What you will complete by the end of this lesson)
Pick out the main features from a website that help design.

Work in pairs. View this presentation and answer the following questions in Microsoft Word.

This is the project task sheet we will be working on for the next 6 lessons. Read the Introduction and Task 1.

TASK 1

Before you create your own web pages, you need to consider what makes a good or a bad website.

Save this file ‘Evaluating an internet site’ in your "Web design" folder and open it.

You need to find two web sites, one that is well designed and one that is poorly designed.

Answer the questions in the 'Evaluating an internet site' file.

Discuss with another pair of students near you the 6 key points for a well designed site. They should decide which 6 points from the two pairs are the most important.

Each pupil should print a copy of the document, remembering to put your name in the footer.

EXTENSION

If you finish early you can go on to Task 2.

This Project Check Sheet is the final list of tasks that need to be printed and put into your folders.

HOMEWORK
Task 3 is for homework.

  
 
 
 
   
 
 
Lesson 4 - Who is your audience?
top
 
Objectives:
WALT (What we are learning today)
 

What topic they will be developing their own website on.
How a website can be assessed for suitability for a target audience.

WILF (What you will complete by the end of this lesson)
  assess a website using the criteria and determine whether it is suitable for its target audience.

Task 3 should have been completed for homework. Put it in your folder.

View this presentation about audience.

Now it is time to start Task 2 on the project task sheet.

Once Task 2 is complete move onto Task 4.

HOMEWORK
Work on Task 5. The hierarchy diagram must be completed before next lesson.

 
 
 
 
   
 
 
Lesson 5 - Planning and designing your web page.
top
 
Objectives:
WALT (What we are learning today)
 

Know: How to set up the first couple of pages for their website using Publisher / FrontPage
Understand: How to use some of the main features of Publisher.

WILF (What you will complete by the end of this lesson)
  Plan their websites and start to find resources for their sites.
Create a bibliography

Task 5 should have been completed for homework. Put it in your folder.

You need to more on to Task 4 now. Check out the project task sheet if you have not already saved it to your user area.

  
 
 
 
   
 
 
Lesson 6 - Building and Bibliography
top
 

Objectives:
WALT (What we are learning today)
 

Know: How to insert a table into a website
Understand: Why tables are needed in websites

WILF (What you will complete by the end of this lesson)
  Be able to: Insert a table into their own website.

View this presentation about tables.

If you have not used publisher then this site will help you with Publisher basics.

Task 7
Make sure you keep a record of each web page you get information from; save it in a word document called Bibliography.

Now you can create your website in Publisher or FrontPage.

  
 
 
 
   
 
 
Lesson 7 - Building your web page in Publisher
 top
 
Objectives:
WALT (What we are learning today)
  Know: How to insert a table into a website
Understand: Why tables are needed in websites
WILF (What you will complete by the end of this lesson)
  Be able to: Insert a table into their own website.

Today you will continue to build your website.

Make sure you keep a record of each web page you get infomation from.

 
 
 
 
   
 
 
Lesson 8 - Evaluating your website and your friends.
 top
 
Objectives:
WALT (What we are learning today)
 

Know: How to complete their individual evaluations
Understand: The importance of completing their individual evaluation with sufficient detail and reflection.

WILF (What you will complete by the end of this lesson)
  Be able to: To evaluate other student’s websites against a set of criteria.

Website preperation
You have 20 minutes at the start of the lesson to get your website ready to show to the rest of the class.

Student peer evaluation
You will need to have this Evaluating Websites file printed and on your keyboard.
First you need to assess your own website .
Your pair then need to assesses all of the other websites.

Student self evaluation
You need to save this Evaluation template to your user area.
Make sure you complete it in sufficient detail.