ICT IGCSE Practical – Revision Presentation

Web Authoring

• 21.1 Web Development Layers

• 21.2 Create a Web Page
• 21.3 Use Stylesheets
Chapter 21: Web Authoring

• 21.4 Test and Publish a Website

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Web Development Layers

Presentation Layer Content layer: Behaviour layer

To format whole web To enter the content To enter scripting

Chapter 21: Web Authoring

page(s) or individual (Text, images, audio, language to a web page

elements. Stylesheet video etc) into a web or an individual element.
could include page page and to create
layouts using Div Tags suitable hyperlinks. • Image Effects
and text/table formatting • Pop up message
properties. The Content layer is in
the HTML.
The presentation layer is
in the CSS.

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
HTML (Hyper Text Markup Language) – Content Layer

• HTML is used to develop the

content layer of the website.
Chapter 21: Web Authoring

• The HTML file extension is .HTM

or HTML
Content is between the
• HTML can be written in web Body Tags
authoring or text editing software

CSS (Cascading Style Sheet) – Presentation Layer

• Styles can be created separately or

embedded into HTML.
No Style Sheet
• The CSS file extension is .CSS

• Style Sheets could be attached to a

number of webpages to give a
consistent layout and appearance. Style Sheet Attached

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Creating CSS for Text Styles
Tip: If you have been giving the task of creating a CSS then make sure you use the Manage
Styles Window.
Tip: Write all colours
1) Create New CSS and then Save
in 6 hexadecimal
Chapter 21: Web Authoring

2) Open the Manage Styles – using this will eliminate mistakes

digits e.g. #000000
3) Click on New Style and then write the name of the tag (H1, H2 etc.)

1 2 3

Enter the CSS Tag

here

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
CSS (Commonly Used Windows)
Font: Format Text Block: Alignment Background
Chapter 21: Web Authoring

List: Bullet Style Border: Internal/External Border Box: Format Table

Position: Table Size

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Body Tag Body Tag: Is used to set properties for the webpage
background. You can either browse and select an
image for the background or choose a colour. The
background repeat option will allow you to choose
how the background image will be laid out.
Chapter 21: Web Authoring

Click Browse to select

your background image

Tip: Make sure the background colour is

not placed in the font window.
WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Hexadecimal Colours

Red Green Blue RGB

# FF FF FF White
Chapter 21: Web Authoring

# FF 00 00 Full Red
The closer the number gets # 00 FF 00 Full Green
to 00 then the colour will
become a darker shade. # 00 00 FF Full Blue

# C0 00 00 ¾ ON (75%) Red
# 80 00 00 ½ On (50%) Red
# 40 00 00 ¼ on (25%) (Darker Shade)
# 00 00 00 OFF (Black)

Make sure all colour settings are in 6 digits Hexadecimal e.g. #000000
#000060 – (60 has been used in previous mark schemes when requested to set a
colour as a dark shade)
WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Creating and Applying CSS Text Style Sheet

TextCSS Style 1) Create and save the CSS

Body Background Yellow
Chapter 21: Web Authoring

h1 Font Times, Times New Roman, Serif

Alignment center
Size 18
Colour #FF0000
h2 Font Browsers Default San-Serif Font
Alignment left
Size 14
Colour #0000FF
LI Font Browsers Default Serif Font
Size 16
UL Colour #FF0000
List Style Square
OL Colour #0000FF Enter a comment
List Style Numbered using /* ____ */
WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring

1) Open text.html
2) Attach the
TextCSS Style
Style Sheet
Chapter 21: Web Authoring

3) Highlight the
Text and apply
the style After: CSS attached
and Styles Applied

HTML Code View

Before: No formatting as the style sheet

and the styles have not been applied

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Applying List Styles

Unordered List - UL
HTML Code View
Chapter 21: Web Authoring

Ordered List – OL
HTML Code View

OL/UL will pick up properties from a LI tag (Size, Font).

Unique settings can be set for OL/UL tags like disc styles.
WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Using the most Efficient Syntax

TextCSS2 Style
H1, H2, H3 Font Times New Roman, Times,
serif
Chapter 21: Web Authoring

h1 Alignment left
Size 14
Colour #FF0000
H2 Alignment center
Size 16
Colour #00FF00
H3 Alignment right
Size 18 Most efficient way
of setting the same
Colour #0000FF
font style for h1, h2
and h3.
Separate tags created for
h1, h2 and h3 as they have
different attributes for size,
alignment and colour

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Correcting CSS for Text Styles

Incorrect CSS Tip: If you are asked to

correct a CSS then you could
either re-write it completely
Chapter 21: Web Authoring

or edit the existing CSS and

correct the errors

Stylesheet1
• Font: Arial, Helvetica or
default sans-serif font
• Font Size: 24px
• Italic, Bold, Red
• Center Aligned.
Correct CSS
Corrected Mistakes

• Times New Roman removed

• Semi Colons (;) in correct
place at the end of each part
of the code.
• Font-Weight (missing dash)
• Colour now in correct format.
• } To close the CSS Tag
WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Correcting CSS for Text Styles

#8B0000
Chapter 21: Web Authoring

#191970 If you are editing the

CSS then put the
brackets {Start & End }
in the correct place for
#000080 each tag.

Then use the Manage

Styles Window to enter
correct CSS and delete
the old (useless) code.
Mistakes:
• No brackets to open and close CSS Tags
• No semi-colons to separate parts of the CSS
• Colours in wrong order
• Spelling mistakes
• Unnecessary Text

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
CSS for Tables

TD: Internal Border (Style, Size, Colour)

Table: External Border (Style, Size, Colour)

Chapter 21: Web Authoring

Table Colour, Padding, Text Alignment,

Table size, Collapse Border etc

Tip: If you have set internal borders for a table then create the additional TD Tag.
TD: Internal Border
• Solid, 2 Px, Navy Blue (80)

Table: External Border

Both TD/Table
• Solid, 4 Pixels, Navy Blue (80)
• Yellow Background Colour
• 80% Width of the window
• Cell Padding (Top & Bottom 10Px), (Left
& Right 20Px)
• Text Align Centre
• Collapse Border

Some tags from table would also work in TD like

WWW.YAHMAD.CO.UK text alignment or cell padding.
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Border Collapse

Before Border Collapse

Chapter 21: Web Authoring

After Border Collapse

Tip: Border Collapse will make

the border into one as you can
see in the example.

You can preview the difference

in the browser or live view.
WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Using the most Efficient Syntax

TextCSS2 Style Most efficient way of setting

Borders Solid, 2 Pixels the same border style and
border width for both internal
Chapter 21: Web Authoring

Table External Border Red

and external gridlines.
Background Colour Yellow
Table Size 80% Width of the window
Borders All Collapsed
TD Internal Border Black

Table and TD grouped together

Separate tags created for table

and td for different attributes.

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Hierarchy of multiple attached stylesheets

Attaching Style Sheet

1. Open the Manage Styles Window
2. Click on the Attach Style Sheet Icon
Chapter 21: Web Authoring

3. Click on the browse button and select

stylesheet.
4. Click Ok to Attach Style Sheet.

CSS1 Attached

Hierarchy of multiple
attached stylesheets
Adding additional stylesheets will
over rule elements from previously
CSS2 Also Attached attached stylesheets.

Changes:
• Table Background Colour
• External Border

Same
• Table Size (W – 400, H – 300)
WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Creating a Table

Creating Tables
1) Table >> Insert Table
2) Work out the number
Chapter 21: Web Authoring

of rows and columns.

3) Specify the width of
the table
4
rows

4 columns

Table created
with 4 rows
and columns.

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Setting Table Size
Chapter 21: Web Authoring

Merging Cells: Highlight cells to merge.

Right click >> Modify >> Merge Cells. Row
Merged

Width (W) and Row

Setting Cell Size: Highlight cells >> Right
Height (H) can also Merged
Click >> Enter Dimensions.
be set as a %
WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Creating a Table
Chapter 21: Web Authoring

You can highlight

multiple cells and set the
dimensions at the same
time

Setting Cell Size: Highlight cells >> Right

Click >> Enter Dimensions.
WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Creating a Table
Chapter 21: Web Authoring

Tr – Table Row
TD – Table Data (Each Cell)

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Use of Embedded CSS in HTML Nov 2015

If the table margins (Right and

left) are both set to auto then the
Chapter 21: Web Authoring

table will be centre aligned.

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Inserting Content (Text and Images) into a Table
Chapter 21: Web Authoring

Text can be entered or copied and To insert an image click on the

pasted in from external sources. table cell (TD) and then click on:

Insert Image using

the Icon on the tool
bar
Insert >>
Picture >>
From File

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Alternative Text

Alternative Text can be added when importing an image. The

alternative text will show if the image does not load up. The
alternative text can also be typed into the picture properties panel
Chapter 21: Web Authoring

shown below.

Alternative
text can be
added when
inserting the
image.

Alternative text is shown when

the image can not be loaded.

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Resize an Image
Chapter 21: Web Authoring

To resize an image you have to select the

image and then right click your mouse.
Click on Picture Properties and then
select Appearance in the panel.
Enter the required dimensions.

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Text Alignment in a table
Chapter 21: Web Authoring

To align text in a cell you first have to right

click on the cell and select cell properties.
You then need to enter the required
settings.
WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Internal Hyperlinks
1) To create a internal hyperlink select either an image or
text to be linked and Right Click your mouse.
2) Select the hyperlink option
Chapter 21: Web Authoring

3) Click on Existing File or Webpage option.

4) Click on Current Folder
5) Then select or enter the webpage you want to link to

You can select the

option to open to
a new window.

You can name the

new window by
replacing _BLANK
with the name of
the new window
e.g _NEWNAME

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Hyperlinks – External Link 1) To create a external hyperlink select either an image or
text to be linked and Right Click your mouse.
2) Select the hyperlink option
3) Click on Existing File or Webpage option.
4) Click on Current Folder
Chapter 21: Web Authoring

5) Then enter the full URL address

You can select the

option to open to a
new window.

You can name the

new window by
replacing _BLANK
with the name of
the new window e.g
_NEWNAME

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Anchor (Bookmark)

1) Click after body An anchor will let you link to

to be at the top of a specific part of a page.
the page
Chapter 21: Web Authoring

For Example you can create

2) Click on Design an Named anchor at the top
View ad then click of the page.
on Insert >>
Bookmark You then create a link to
return to the top of the page
3. Enter some text for by referring to the Named
the bookmark name
anchor. #Top
(e.g. top)
4. Highlight the text
and right click and
select hyperlink.

5. Click on place in this

document and select
WWW.YAHMAD.CO.UK the bookmark (top)
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Email Link

Email Link with a subject Line

mailto:[email protected]?subject=Donation by Yasar Ahmad 5678
Chapter 21: Web Authoring

Highlight Text/Image >> Right Click and Select Hyperlink >> Click on E-Mail
Address

WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Publish a Website

1. To upload a website you need to purchase a domain name (www.yahmad.co.uk) and

hosting.
2. The hosting provider will give you user login details so that you are able to upload your
Chapter 21: Web Authoring

website into their hosting space.

3. To be able to upload the your website you need FTP (File Transfer Protocol) application.
Once you have logged in you will see the files on your computer on one side and the hosted
files on the other side.
4. You need to ensure that files are kept in appropriate web folders and that uploaded files
mirror how you have your files saved on a computer.

Computer Files Hosted Files

Files/folders are organised in exactly

the same way.
Files can be uploaded by dragging them from your
WWW.YAHMAD.CO.UK computer to the hosting space.
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Test a Website

Why Test your Web Page? Functional Testing

• To ensure all components of the
webpage are working correctly before • Is hyperlink from correct text/image?
Chapter 21: Web Authoring

they are published online. • Do hyperlinks to anchors within the page

work?
• Do hyperlinks to other pages in this site
Suitable Tests work?
Choose Suitable Testing Criteria • Do hyperlinks to email open the
editor/software?
• Do hyperlinks to email have the correct
address/subject line?
Alpha/In-House Testing: A in-house team • Do all external hyperlinks to existing URLs
is tasked with finding errors with the work?
website. They could focus on the html/CSS
codes. The developers are not involved in
this process. Create a Test Table

Test How Expected Actual Action Taken

Checking Click on each link All links to go to All links work as No action
Hyperlinks in the browser the correct page. expected. required.
WWW.YAHMAD.CO.UK
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Test a Website

User Testing?
• Feedback will be gathered from a variety of different users who will test the
website and give their feedback.
Chapter 21: Web Authoring

Factors that must be considered when

designing an effective test plan

• The purpose of the website

• The target audience
• Corporate house styles
• Describe each item that needs to be
tested
• Identify inputs (data to be entered)
• Identify expected outcomes A User form could be created so that
users testing the website and write
their feedback.

WWW.YAHMAD.CO.UK