The aim of this project is for you to learn how to design, plan, research and create a website.
The theme of your website is:
Your website should:
• Be suitable for the intended audience
• Have relevant and interesting content
• Have a consistent look and feel
• Show features of good design
• Use hyperlinks to navigate from page to page
• Contain images
Task 1
Before you create your own web pages, you need to consider what makes an effective website.Open the document called Evaluating Internet Sites.doc
Look at the following two websites
• www.andertoons.com or www.tbshumorstudy.com
• www.cartoonnetwork.com
Assess these websites and answer the questions in the document.
From your research, list 6 key points that describe a well designed website.
Print out the finished document and make sure that you put your name in the header or footer. Extension Task
Complete the following quizzes and test your knowledge about the internet and the world wide web http://www.chem.ox.ac.uk/it_lectures/washington/examples/internettest.html
Task 2
Open a new Word document and save it, calling it ‘Designing Websites for Different Audiences’.
Find a website aimed at an adult audience and one aimed at teenagers. Try to identify the techniques they have used to appeal to each different audience.
Create a table in your Word document (see below) and record the different points that you have identified.
Print out the finished document and make sure that you put your name in the footer.
Homework Task 1
Website Evaluation, download the work sheet and complete for homework.
Task 3
Using Notepad to create a HTML webpage. Follow the instructions step by step.
Open Notepad (Programs > Accessories) (for Macintosh users - use Simple Text) or Text Edit in the applications folder) Save the file straight away as:
File name: index.htm Note … the first page in a website is always called index.htm
Save as type: All Files (change from Text Documents) A basic page...(Do not type the words that are shown in bold)
<html>
<body>
Favorite Pages
</body>
</html> Save the file & Look at the results in the web browser
What shows up on the page?
Changing text styles
<html>
<body>
<h1>Favorite Pages</h1>
</body>
</html> Save the file & Look at the results in the web browser
How has the text changed?
Splitting lines
<html>
<body>
<h1>Favorite Pages</h1>
YouTube<br>
Facebook<br>
Google<br>
</body>
</html> Save the file & Look at the results in the web browser
Adding Hyperlinks
<html>
<body>
<h1>Favorite Pages</h1>
<a href="http://www.youtube.com">YouTube</a><br>
<a href="http://www.facebook.com">Facebook</a><br>
<a href="http://www.google.com">Google</a><br>
</body>
</html> Save the file & Look at the results in the web browser
What colour are the links?
Adding a title to the page
<html>
<head>
<title>Information on Search Engines</title>
</head>
<body>
<h1>Search Engines</h1>
<a href="http://www.youtube.com">YouTube</a><br>
<a href="http://www.facebook.com">Facebook</a><br>
<a href="http://www.google.com">Google</a><br>
</body>
</html> Save the file & Look at the results in the web browser
What colour are the links?
Make a note of the file size of the document “index.html” …………………… (Right mouse click over the file and look in Properties)
?????? is the colour as a number. Each colour has a code.
Other colours include:
FF0000 = Red
EEEE00 = Yellow
00FF00 = Green
800080 = Purple
FFFFFF = White
000000 = Black
Set background colour (Note the spelling of colour … color)
<body bgcolor= ??????>
Set text colour
<body text=??????>
Italic text
<i> </i>
New paragraph
<p> </p>
New paragraph aligned to left, right or center (this aligns the text to itself … not the page)
< p align=?>
Some more common HTML tags
<font size=”6”> change to size 6 font (you can choose any size between 1 and 7)
<ul> Create a bulleted list (this tag must be put in front of each item in the list)
<hr> Horizontal line
To Insert a Picture
<img src="www.gif">
This tag would insert a picture with the filename www.gif
The picture you want to enter must be in the same directory (folder) as your web page.
Make a note of the file size of the document “index.html” ……………………
Task 4
Use a word processor to create a web pages. Using Word open a new document
Type the following:
Favorite Pages
YouTube
Facebook
Google
Highlight ‘Favorite Pages’ and make it into a Heading (from the text formatting tools)
Highlight ‘YouTube’ and from the Insert menu select Hyperlink
Type in the web page name for the site http://www.youtube.com
Repeat for the other two sites http://www.facebook.com http://www.google.com
For users of the new Office 2007, Click on the yellow button on the top left of the page to save it. Select "Other Formats"and use the file type Web Page *htm, *html (It will automatically open up as an interactive page)
Save as Favorite Pages.htm and select the file type as Web Page *htm, *html (It will automatically open up as an interactive page)
Open your web browser and open Favorite Pages.htm
Compare and make notes about making these two similar basic web pages, using HTML code and a word processor
Now return to your Word file “Search Engines.htm” and from the View menu select “HTML Source”
Compare this HTML code with the code you wrote using Note Pad
What do you notice?
Make a note of the file size of the document “Favorite Pages.htm” …………………… (Look in Properties)
Think about the technical issues that affect electronic communication.
Homework Task 2
This task is to be completed for homework.
Write a document entitled ‘Is the Internet more useful than traditional printed material?’
Consider different methods of publishing material e.g.
Points to think about:
• How up to date is the information?
• How accurate is the information?
• How many people can access the information at a given time?
• Do you need any special equipment?
• Are there any potential dangers with this resource?
Add your name, class and the title ‘Homework Task 2’ and the date in the footer
Notes & Info
HTML
Hypertext Markup language … the code used to write web pages Tag …e.g. <body> </body>… an HTML instruction code URL
Uniform Resource Location (or Locator) … the address of a web page
When designing web pages …
Everything is measured in pixels (the dots that make up a screen picture) Never use capital letters in any file names and use _ (underscore) instead of spaces
The first page must always be called index.html
Use .jpg files for photographs, .png files if you want a transparent background for a picture or button and .gif if you want an animated picture (can also have a transparent background but only limited colours)
When colouring images in other software e.g. Xara, Photoshop or Flash, use web safe colours, hexadecimal colours Optimise pictures before putting them on web pages … i.e. make them the right size (in pixels) and the file as small as possible to make sure they load quickly before you insert them into your website.
Use tables to lay out the contents of a web page
Make sure text stands out clearly against the background of the page
Do not use too many flashing animated gifs
Golden rules when designing a website…
• Design
• Ease of use
• Copywriting
• Interactivity
• Use of technology
• Innovation
• Content
Assessment
It is important for all ICT assignments to understand the assessment rubric, which is attached to each booklet and there is a guide for each project outlining which areas you will be assessed on. Read through them carefully.
Evaluation
Here is an example of the evaluation used for the Website Design Project: Peer Evaluation
Using the table below open your website onto the computer and invite four people to review it using PIM's
You can copy this into your blog or open the attached word document then copy that into your Google Site Web Site Evaluation.doc
Name
Positive
Minus
Interesting
Once completed copy onto your blog page.
Self Evaluation
Have I planned and created pages for my website?
Have I added appropriate text and images to my website?
Have I planned and created hyperlinks to navigate through my web page?
Have I evaluated my pages to make sure they were suitable for a wide audience?
I can describe the steps I have worked through to create my web pages and suggest how they can be improved?
Once again copy the statements into your Google Site and complete for homework
Table of Contents
Introduction
Before beginning this project students need to download the attatched files:The theme of your website is:
Your website should:
• Be suitable for the intended audience
• Have relevant and interesting content
• Have a consistent look and feel
• Show features of good design
• Use hyperlinks to navigate from page to page
• Contain images
Task 1
Before you create your own web pages, you need to consider what makes an effective website.Open the document called Evaluating Internet Sites.docLook at the following two websites
• www.andertoons.com or www.tbshumorstudy.com
• www.cartoonnetwork.com
Assess these websites and answer the questions in the document.
From your research, list 6 key points that describe a well designed website.
Print out the finished document and make sure that you put your name in the header or footer.
Extension Task
Complete the following quizzes and test your knowledge about the internet and the world wide web
http://www.chem.ox.ac.uk/it_lectures/washington/examples/internettest.html
Task 2
Open a new Word document and save it, calling it ‘Designing Websites for Different Audiences’.Find a website aimed at an adult audience and one aimed at teenagers. Try to identify the techniques they have used to appeal to each different audience.
Create a table in your Word document (see below) and record the different points that you have identified.
Print out the finished document and make sure that you put your name in the footer.
Homework Task 1
Website Evaluation, download the work sheet and complete for homework.Task 3
Using Notepad to create a HTML webpage. Follow the instructions step by step.Open Notepad (Programs > Accessories) (for Macintosh users - use Simple Text) or Text Edit in the applications folder)
Save the file straight away as:
File name: index.htm Note … the first page in a website is always called index.htm
Save as type: All Files (change from Text Documents)
A basic page ...(Do not type the words that are shown in bold)
<html>
<body>
Favorite Pages
</body>
</html>
Save the file & Look at the results in the web browser
Changing text styles
<html>
<body>
<h1>Favorite Pages</h1>
</body>
</html>
Save the file & Look at the results in the web browser
Splitting lines
<html>
<body>
<h1>Favorite Pages</h1>
YouTube<br>
Facebook<br>
Google<br>
</body>
</html>
Save the file & Look at the results in the web browser
Adding Hyperlinks
<html>
<body>
<h1>Favorite Pages</h1>
<a href="http://www.youtube.com">YouTube</a><br>
<a href="http://www.facebook.com">Facebook</a><br>
<a href="http://www.google.com">Google</a><br>
</body>
</html>
Save the file & Look at the results in the web browser
Adding a title to the page
<html>
<head>
<title>Information on Search Engines</title>
</head>
<body>
<h1>Search Engines</h1>
<a href="http://www.youtube.com">YouTube</a><br>
<a href="http://www.facebook.com">Facebook</a><br>
<a href="http://www.google.com">Google</a><br>
</body>
</html>
Save the file & Look at the results in the web browser
Make a note of the file size of the document “index.html” …………………… (Right mouse click over the file and look in Properties)
Other colours include:
FF0000 = Red
EEEE00 = Yellow
00FF00 = Green
800080 = Purple
FFFFFF = White
000000 = Black
www.lissaexplains.com
<body bgcolor= ??????>
Set text colour
<body text=??????>
Italic text
<i> </i>
New paragraph
<p> </p>
New paragraph aligned to left, right or center (this aligns the text to itself … not the page)
< p align=?>
Some more common HTML tags
<font size=”6”> change to size 6 font (you can choose any size between 1 and 7)
<ul> Create a bulleted list (this tag must be put in front of each item in the list)
<hr> Horizontal line
To Insert a Picture
<img src="www.gif">
This tag would insert a picture with the filename www.gif
The picture you want to enter must be in the same directory (folder) as your web page.
Make a note of the file size of the document “index.html” ……………………
Task 4
Use a word processor to create a web pages. Using Word open a new documentType the following:
Favorite Pages
YouTube
Facebook
Google
Highlight ‘Favorite Pages’ and make it into a Heading (from the text formatting tools)
Highlight ‘YouTube’ and from the Insert menu select Hyperlink
Type in the web page name for the site http://www.youtube.com
Repeat for the other two sites
http://www.facebook.com
http://www.google.com
For users of the new Office 2007, Click on the yellow button on the top left of the page to save it. Select "Other Formats" and use the file type Web Page *htm, *html (It will automatically open up as an interactive page)
Save as Favorite Pages.htm and select the file type as Web Page *htm, *html (It will automatically open up as an interactive page)
Open your web browser and open Favorite Pages.htm
- Compare and make notes about making these two similar basic web pages, using HTML code and a word processor
- Now return to your Word file “Search Engines.htm” and from the View menu select “HTML Source”
- Compare this HTML code with the code you wrote using Note Pad
- What do you notice?
Make a note of the file size of the document “Favorite Pages.htm” …………………… (Look in Properties)Think about the technical issues that affect electronic communication.
Homework Task 2
This task is to be completed for homework.Write a document entitled ‘Is the Internet more useful than traditional printed material?’
Consider different methods of publishing material e.g.
Points to think about:
• How up to date is the information?
• How accurate is the information?
• How many people can access the information at a given time?
• Do you need any special equipment?
• Are there any potential dangers with this resource?
Add your name, class and the title ‘Homework Task 2’ and the date in the footer
Notes & Info
HTMLHypertext Markup language … the code used to write web pages
Tag …e.g. <body> </body>… an HTML instruction code
URL
Uniform Resource Location (or Locator) … the address of a web page
When designing web pages …
Everything is measured in pixels (the dots that make up a screen picture)
Never use capital letters in any file names and use _ (underscore) instead of spaces
The first page must always be called index.html
Use .jpg files for photographs, .png files if you want a transparent background for a picture or button and .gif if you want an animated picture (can also have a transparent background but only limited colours)
When colouring images in other software e.g. Xara, Photoshop or Flash, use web safe colours, hexadecimal colours
Optimise pictures before putting them on web pages … i.e. make them the right size (in pixels) and the file as small as possible to make sure they load quickly before you insert them into your website.
Use tables to lay out the contents of a web page
Make sure text stands out clearly against the background of the page
Do not use too many flashing animated gifs
Golden rules when designing a website…
• Design
• Ease of use
• Copywriting
• Interactivity
• Use of technology
• Innovation
• Content
Assessment
It is important for all ICT assignments to understand the assessment rubric, which is attached to each booklet and there is a guide for each project outlining which areas you will be assessed on. Read through them carefully.Evaluation
Here is an example of the evaluation used for the Website Design Project:Peer Evaluation
Using the table below open your website onto the computer and invite four people to review it using PIM's
You can copy this into your blog or open the attached word document then copy that into your Google Site Web Site Evaluation.doc
Self Evaluation
Once again copy the statements into your Google Site and complete for homework