Website design for a
purpose
Before you start
You should be able to:
Type text into a document
Createdocuments for a particular audience
and purpose
Use an internet browser.
Key
Website: a collection of webpagesTerms
Webpage: a single page in a website
Audience: the people that will look at the webpage
Purpose: the reason the webpage is created; for example, to be entertaining
HTML: the language used to create webpages
Tag: a piece of code that is used to add content and styling to a webpage.
Opening tag: the tag that goes at the start of the content
Closing tag: the tag that goes at the end of the content
Source code: the HTML code that is written to create a webpage
Introduction
What do you think is important when designing a website?
user-friendly for the audience
fit for purpose.
What is meant by user-friendly?
easy to learn and understand how to use it
easy to navigate around
can find what you want easily.
Introduction
learn website design skills to help you to create a high-quality
website for a specific purpose
Your website design should therefore be:
easy to use
well-organised
reliable, e.g. all of the links work
clear, not too much going on
aimed at your specific target audience
achieving the purpose for which it was made
Setting up a webpage
The first thing you need to be able to do is setup a webpage
using the software Notepad.
1. In Notepad, you save your file with a .html extension.
2. To see your file as a webpage, find the file you saved. It
now has a web browser icon next to it.
3. Click on the file. It will open the webpage in a web
browser.
4. You will not see any content on the page yet as you have
not added any, but you should see that the title you added
is displayed in the tab at the top.
Key
Terms
Key words
Default setting: the settings that are
initially applied to an element.
Formatting: changing the style of a webpage;
for example, the colour of the font.
Skill 3: Getting around!
Key words Making links
Navigation: what is used to move to the different To attach a hyperlink to a word, or to some text,
webpages in a website. you need this line of code:
<a href=“[Link]”>link text</a>
Read all the information for Skill 3 and carry out
Hyperlinks: links that can be clicked to navigate a
the instructions.
website
You will need these files:
Bees_Homepage.html
Attribute: a characteristic of an element that is
added to the webpage; for example, a certain font. Bees_Info.html
Bees_Contact.html.
Anchor: the text that is used for a link. It is the
anchor text that is clicked to follow the link. Go to Activities 3.1, 3.2 and 3.3.
Learning Objective:
Introduction to the module, what is HTML?
Setting up a webpage
write HTML code to create webpages
use
the software Notepad to develop your
website design skills
save the document as a webpage(.html)
Learning Objectives:
Typing code and saving the document as a
webpage
Setting up a webpage
Your website design should be:
easy to use
well-organised
reliable, e.g. all of the links work
clear, not too much going on
aimed at your specific target audience
achieving the purpose for which it was made
Learning Objective:
use the software Notepad to create website design
type code and save the document as a webpage
Type in the following source code (Basic Structure) exactly
as you see it:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Adding a title <title> </title>
Adding text to a webpage <P>, <h1>…..<h6> to the body
section.
Learning Objectives:
Create second webpage :
Type in the following source code exactly as you see it:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Adding a title
Adding text to a webpage <P>, <h1>…..<h6>
format the text using <b> ,<i> ,<u>,<br/>,<hr/> tags to create a good webpage
design.
Opening and Closing the common
Tags:
Html tags : <html></html>
Body tags : <body></body>
Head tags : <head></head>
title tags : <title></title>
heading tag :
<h1></h1>…………<h6></h6>
paragraph tags : <p></p>
Bold tags :<b></b>
italic tags : <i></i>
underline tags :<u></u>
Break line tags : <br/>
horizontal line tags : <hr/>
Good Webpages
Design
Learn how to format the text and backgrounds to create a good webpage
design.
Change the text colour, size, style and alignment.
Changing the text formatting
Changing the size of the text
Changing the colour of the text
Recognize the hexadecimal colour code.
Positioning text
Format the background of the webpage
Good Webpages
Changing the text formatting
Design
<p style=“font-family:algerian;”>this is my paragraph </p>
Changing the size of the text
<p style="font-size:33pt;">this is my paragraph </p>
Changing the color of the text
<p style="color:red;">this is my paragraph </p>
Recognize the hexadecimal color code.
<p style="color:#CA082D;">this is my paragraph </p>
Good Webpages
Design
Positioning text(Alignment)
<p style="text-align:left;">this is my paragraph </p>
Formatting the background of the webpage
<body style="background-color:lightblue;">
</body>
Good Webpages
Design
A semicolon is always added to the end to tell the software
that it is the end of the formatting for this section .
The formatting that you add to the style attribute needs to
be written between quotation marks.
Sometimes websites will change slightly depending on
1. The device , so the good design includes the ability to display the site on different types of devices.
2. Display web pages using different web browsers to make sure they are formatted correctly and all
the text and images that you want to include in website are displayed.
<p style="font-size:33pt;color:red;text-align:left;">this is my paragraph </p>
Second semester material
Learning Objectives:
1. Website design for a purpose:
• Revision of the main skills in the first semester :
• Setting up a webpage(adding title +saving as webpage +creating folder +
• Adding and formatting the text and backgrounds
• Change the text colour, size, style and alignment.
2. format text and backgrounds
• You are going to follow the instructions for Skill 5 to
• change the text formatting
• change the size of the text
• change the colour of the text using hexadecimal colour code
• change the position of your text
• format the background of your webpage.
Learning Objectives:
We will learn how to:
1. display images
■ insert images to a webpage
■ Image quality
■ add an image as a background for a webpage
■ Change the image size(the width and the height)
■ Change the image alignment.
2. Supported font
3. Using w3schools website
Skill 4: Adding images to a webpage
To add an image to your website:
• First, you need to save the image into the ‘Images’ folder
you created.
• Give your picture a short , suitable filename, making sure
that you will know which picture it is.
• You need to think about the quality of the image
• When you have all of the images you want to use in your
images folder, you can insert them into your webpage.
Skill 4: Adding images to a webpage
Key word
Image quality: this is how good an image looks.
▪ If you choose a low-quality image, it won’t look very good
▪ if you choose a high-quality energy file size will be very loud
and it may take a long time for someone to open your
webpage
▪ you will need to decide what is most important to you
Image size: the height and width measurements of an image.
Pixel: this is a tiny dot or point. Lots of pixels make up an image
Adding images to a webpage
Example to insert an image:
❖ The <img> tag has two required attributes:
a) src –is short for “image source” Specifies the path to the image
b) alt - Specifies an” alternate text” for the image
Adding images to a webpage
Example to insert an image:
❖ Remember that the images you save must be of good quality, to be
seen clearly when they are on your website.
❖ type the following line of HTML code into the body of the webpage
this line of code
❖ The line of code does not need the closing tag as the content that
gets displayed is put inside the opening tag.
● src –is short for “image source” Specifies the path to the image
<img src="_____________" >
<img src="[Link]" >
<img src="C:\Users\DELL\Downloads\[Link]" >
Adding images to a webpage
❖ Alt - Specifies an” alternate text” for the image
❖ If the user for some reason cannot view it
(because of a slow connection, an error in the src attribute, or if the
user uses a screen reader).
(
❖ The value of the alt attribute should describe the
image:
<img src="____________" alt="_________" >
<img src="[Link]" alt="Fun in Chania">
Skill 4: Adding images to a webpage
To change the image size on your website:
❖ the image will display on the web page at the size that it's
saved.
❖ If you want to change the image size you need to add some
further information to the tag
❖ The width and the height are the size in pixels that you want
to display the image
❖ for example:
<img src="____" alt="_____"width="_____"height="_____" >
<img src="[Link]" alt=“try again" width="500" height="600">
Skill 4: Adding images to a webpage
To set the image alignment on your website:
❖ the image will display on the web page at the left side as default
setting.
❖ If you want to change the image position you need to add some
further information to the tag
❖ The style attribute is used to add the certain position with float element
❖ for example.
<img src="___" alt="___"width="___" height="___" style="float:____" >
<img src="[Link]" alt=“try again" width="500" height="600"
style="float:right">
Skill 4: Adding images to a webpage
To set the image as a background:
❖
❖
❖ The style attribute is used to add the certain position with
background-image element
❖ for example.
<body style="background-image:url(' ');">
<body style="background-image:url('[Link]');">
Adding images to a webpage
Keywords
❖ Supported fonts: fonts that can be displayed by
all web browsers.
A web browser will only support certain font
[Link] most commonly supported font are:
● Arial
● bookman old style
● Garamond
● Georgia
● Helvetica
● Times New Roman
● Verda
File Path Examples
Description
● <img src="[Link]">
The "[Link]" file is located in the same folder as the
current page
● <img src="images/[Link]">
The "[Link]" file is located in the images folder in the current
folder
● <img src="/images/[Link]">
The "[Link]" file is located in the images folder at the root of the
current web
● <img src="../[Link]">
Learning Objectives:
Website design for a purpose:
1. link web pages together.
Making links
Keywords
• Navigation: what is used to move to the different webpages in a website.
• Hyperlinks: links that can be clicked to navigate a website. A hyperlink is an icon,
graphic, or text that links to another file or webpage.
• Attribute: a characteristic of an element that is added to the webpage; for example,
a certain [Link] attributes provide additional information about HTML elements.
Example:
The style Attribute:
The style attribute is used to add styles to an element, such as color, font, size,
and more
<p style="color:red;">this is my paragraph </p>
Making links: HTML Links - Hyperlinks
❖ HTML links are hyperlinks. You can click on a link and jump to another
document.
❖ When you move the mouse over a link, the mouse arrow will turn into a little
hand.
✔ Note:
A link does not have to be text. A link can be an image or any other HTML
element!
❖ The most important attribute of the <a> element is the href attribute, which
indicates the link's
❖ The link text is the word or words that you want the user to click on as the
navigation this is called the anchor destination.
❖ Clicking on the link text will send the reader to the specified URL address.
Making links
❖ Anchor: the text that is used for a link. It is the anchor text that is
clicked to follow the link
The href Attribute
❖ The <a> tag defines a hyperlink. The href attribute specifies the URL of
the page the link goes to:
❖ To attach a hyperlink to a word, or to some text, you need this line of
code:
<a href=“[Link]”>link text</a>
<a href=“[Link] text</a>
• Example of type of the links:
❖ absolute URL (a full web address)
<a href="[Link] [Link]!</a>
❖ Link to an Email Address
<a href="[Link] email</a>
❖ Link to a page located in the same folder as the webpage :
<a href=“[Link]">HTML tutorial</a>
❖ Note:
❖ you need to make sure that all the web pages that you create are saved in the same
folder.
❖ you need to choose a suitable name(link text) for each web page that you want to link to
Go to Activities 3.1, 3.2 and 3.3.
Read all the information for Skill 3 and carry out
the instructions.
You will need these files:
❖ Bees_Homepage.html
❖ Bees_Info.html
❖ Bees_Contact.html.
Learning Objectives:
We will learn how to:
1. Insert a table into a web page
■ Table purpose
■ Change the table size(the width and the height)
■ Change the table border.
■ Define an HTML Table
■ add an image as Data for a cell within the table a webpage
Adding tables to a webpage
Example to insert a table:
Table purpose: HTML tables allow web developers to arrange data into
rows and columns.
❖ The <table> tags : <table></table>
❖ Table CellsEach table cell is defined by a <td> and a </td> tag.
❖ Note: A table cell can contain all sorts of HTML elements: text,
images, lists, links, other tables, etc.
❖ Table Rows: tr stands for table row.
❖ Each table row starts with a <tr> and ends with a </tr> tag.
Adding tables to a webpage
❖ Type the line of HTML code into the body of the webpage
❖ The line of code needs the closing tag </table> as the content that
gets displayed is put inside the opening tag.
❖ A table in HTML consists of table cells inside rows and columns.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
Adding tables to a webpage
❖ Remember that the images you save must be of good quality, to be
seen clearly when they are on your website. if the cell contains
images.
❖ Sometimes you want your cells to be table header cells. In those
cases use the <th> tag instead of the <td> tag: th stands for table
header.
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
Adding images to a webpage
❖ Do the exercise:
[Link]
Skill 4: Adding tables to a webpage
To change the table size on your website:
❖ The table will display on the web page at the size that it's
saved.
❖ If you want to change the table size you need to add some
further information to the tag
❖ HTML tables can have different sizes for each column, row or
the entire table.
❖ The width and the height are the sizes in pixels(px)or
percentage that you want to display the table
Skill 4: Adding table to a webpage
❖ HTML tables can have different sizes for each
column, row or entire table.
❖ . Use the style attribute with the width or height
properties to specify the size of a table, row or
column
❖ HTML Table Width
❖ To set the width of a table, add the style attribute to
the <table> element:
❖ Set the width of the table to 100%:
<table style="width:100%">
Skill 4: Adding table to a webpage
❖ Note: Using a percentage as the size unit for a width
means how wide will this element be compared to its parent
element, which in this case is the <body> element
❖ To set the width of a table, add the style attribute to
the <table> element:
❖ Set the width of the table to 100%:
<table style="width:100%">
❖ To set the size of a specific column, add the style
attribute on a <th> or <td> element
<th style="width:70%">Firstname</th>
<tr style="height:200px">
Skill 4: Adding table to a webpage
❖ To set the height of a specific row, add the style
attribute on a table row element:
<tr style="height:200px“>
How To Add a Border
When you add a border to a table, you also add
borders around each table cell
<table border=“3”> using w3schools website
add an image as Data for a cell within the table a
webpage
<td><img src=”[Link]”></td>
Learning Objectives:
We will learn how to:
1. Adding lists:
■ Ordered list(Numbered List):a list that has
numbered points.
■ Unordered list (bulleted list):a list that has bullet
points but no numbers.
Adding list to a webpage
● List purpose: HTML lists allow web developers to group a
set of related items in lists.
● Type of lists:
An unordered HTML list:
● Item
● Item
● Item
● Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List
An unordered list starts with the <ul> tag. Each
●
list item starts with the <li> tag.
● The list items will be marked with bullets
(small black circles) by default:
● Example To create unordered list:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
.
ordered HTML List
● An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
● The list items will be marked with numbers by
default
● Example To create ordered list:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
o add an image or link as an item to the list in a webpage :
ul>
<li><a href="[Link] ></li>
<li><img src=></li>
<li>Milk</li>
</ul>
