Year 7 Web Design (HTML & CSS)
Name:
Form:
Feedback:
Grade:
Learning Objectives
Enter the date each time you meet a target;
Objective Demonstrated
Know what HTML is used for.
Use HTML tags to create a webpage.
Use headings, paragraphs and line breaks in a webpage.
Add images to a webpage.
Use ordered and unordered lists in a webpage.
Add tables to a webpage.
Use div and span tags to set layout and formatting.
Set font, text sizes and colours using CSS.
Add hyperlinks between multiple web pages.
Create a multi-page website which demonstrates a range of web design
skills.
CodeAcademy
We use CodeAcademy to support the learning which takes place during lessons. You should
create an account using your school email address. You may wish to note your log on
details below.
www.codeacademy.org
Username:
Password:
1
Topic 1 - Webpage basics
Basic page code
<!DOCTYPE html>
<html>
<head>
<title>Your name here</title>
</head>
<body>
<h1>My First Webpage</h1>
<p>My name is … and I made this webpage.</p>
</body>
</html>
Tasks
Create an ‘HTML’ folder for storing your web work.
In notepad copy the html code from above adding your details as appropriate.
Save your webpage as ‘aboutme.html’, open the folder and double click the file to
open it in a web browser.
Back in notepad; add a second paragraph describing one thing you did over the
summer.
Answer the questions below
Questions
What must you put at the end of a file name for it to open as a webpage?
What program do we use to edit web pages?
What does a web browser do?
Extension
Add headings of ‘School’, ‘Clubs’ and ‘Hobbies’ to your webpage, make them all
different sizes.
Put a 1 sentence paragraph under each heading.
Add a horizontal rule after each sentence. (find out how online)
Plenary - Key Words
Add definitions for the key words from today’s lesson to the key words sheet.
2
Topic 2 - Images, Links, Lists and Tables
Tasks
Save an image to the same folder as your webpage, use the example code on the
next page to add the image underneath your first paragraph.
Create a second webpage called ‘school.html’.
Add the html for a basic webpage as in topic 1.
Set the top heading to ‘King Edward VI Grammar School’.
Put a sub heading of Subjects.
Add an ordered list of your favourite 3 subjects, and an unordered list of 3 things
you did over the holidays.
Put a sub heading of Timetable.
Add a table showing 1 week of your timetable information, include subject and
teacher.
Underneath the top heading on both webpage add a link to the other webpage.
Example website with an ordered list, an
unordered list, a basic table with heading and
data cells and an image, with the HTML code
to the right.
3
Images
<img src="file name">
Ordered List
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Unordered List
<ul>
<li>List item</li>
<li>Another list item</li>
</ul>
Table
<table border="1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data cell</td>
<td>Column 2 cell</td>
</tr>
</table>
Hyperlinks
<a href="file name">Link text or img tag</a>
Extension
Lookup the <thead>, <tfoot>, and a <tbody> elements, modify your timetable to include the
thead and tbody tags.
Look up and add definitions to some of the key words at the end of your book.
4
Plenary 1
Write 6 key words from the key words sheet in each of the bingo grids below.
Keyword Bingo
Plenary 2
In 20 words or less summarise what you have learned today:
Plenary 3
What level are you? Self-assess against the requirements below to identify which level you
are currently working at for Web Design. Set yourself a target for next lesson.
Level 3 - I can make a webpage with headings, paragraphs and some use of images,
lists or tables.
Level 4 - I can produce a well-designed webpage including a range of different types of
information, including; headings, paragraphs, images, lists and tables in a web page
that is suitable for a given audience.
Level 5 - I can make a web site which is suitable for a given audience and can justify
why it is appropriate. I have used a range of tags and modified the properties of these
to improve presentation.
Target:
5
Topic 3 - Divs and Spans
Div
Divisions or divs are used to separate the page into parts, such as the head (top of a page)
and body. This is useful if you have a website which has the same title and menu at the top
of each page, it allows you to clearly separate the heading from the content and apply
different styling to each.
<div id="head">
<h1>Page title</h1>
</div>
Span
Spans allow us to set in line formatting for our webpage, you can put a span inside a div tag,
but not a div within a span.
<p>This is a paragraph with a <span style="color: red;">red</span> word in the
middle.</p>
Tasks
Use 3 sets of div tags with the ids ‘title’, ‘menu’ and ‘content’ to surround the three
sections top heading in your webpage.
Use a span tag to change the colour of your name in the first paragraph.
Extension
Add a footer div at the bottom of your web pages, put your name and the date in
the footer of both pages.
Research how to put your email address as a mail to link, add this to the footer as
well.
Explain what this mailto link does:
<a href=mailto:dsims@kegs.org.uk>Mr Sims</a>
Plenary
Working with a neighbour, add definitions for any remaining key words on the key words
page.
6
Topic 4 - CSS (Fonts, Sizes and Colours)
We use cascading style sheets to change fonts, colours and sizes from the default settings
for each browser. We can set style properties for most elements, each element will have
different properties that can be set, below are some examples.
<p style="font-family: Arial, Calibri, Georgia;"> - set which font to use
<span style="font-size: 200%"> - sets the text to twice the default size.
<h1 style="font-size: 15px"> - sets a fixed font size based on traditional pixel sizes.
<td style="background-color: red"> - set the background colour to red, note the American
spelling for colour.
<h2 style="color: blue"> - sets the text colour to blue.
Tasks
Set the background colour for your web pages.
Set a default font family on the body tag of your webpages.
Change the colour of the title on one page to make it stand out.
Extension
Set a background colour for the row or column with days in on your timetable.
Change the font for your name only to make it stand out.
Lookup the elements and properties in the table below and add notes to explain
what they do. (Hint use the w3 website)
Element / Description
Property
<strong>
<em>
<hr>
<link>
id
class
href
target
7
Assessment Task
You have been asked to create a website for a local charity. They have produced a rough
layout which they would like you to follow, however you may improve upon it as you see
fit. For some of the pages on the website you will need to do your own research to find
images and other suitable resources.
AnimalsRUs
AnimalsRUs is an animal sanctuary, it cares for sick and abandoned animals; they take all
animals from cats and dogs to more rare animals such as snakes or monkeys. They would
like a website to inform the public about what they do, to help them raise money, and to
encourage volunteers.
Content
AnimalsRUs would like a 3 page website:
Home - this page must include details about the charity and an image which links to their
contact us page. It also needs to have 2 lists, one listing the types of support they provide
and one listing 3 animals they are trying to find homes for.
Images - a web page with pictures of some of the animals they are looking after along with
a few sentences about each, this could be used to encourage visitors to adopt the animals.
Contact us - this page needs to include a map (you can use a screen shot of Google maps)
and a table with opening times, and an email link for anyone interested in volunteering.
Design
All pages should follow the same basic layout:
Title bar with logo and charity name.
Menu with links to other pages.
Main content, this section will change depending on which page you have loaded.
8
Key words
Key word Definition
Browser
(text) Editor
Tag
Element
Attribute
Style Sheet
Property
Depreciated
Comments
Script
Block
Inline
9
Homework
No. Homework Done
1 Code Academy complete tasks 1 to 5 (HTML Basics)
Add a definition for tag to the key words table.
2 Code Academy complete to task 14 (HTML Basics)
3 Code Academy complete Build your own webpage
4 Code Academy complete HTML Basics 2
5 Code Academy complete Social networking profile
6 Code Academy complete HTML Basics 3
7 Code Academy complete CSS an overview
8 Download some images to your AnimalsRUs website folder to use in your
website
9 Continue working on your AnimalsRUs website - you could use this time to
make a logo
10 HTML revision for test
Notes
Write your own notes and useful code snippets here for future reference.
10
