ICT IGCSE Practical – Revision Presentation

Web Authoring

• 21.1 Web Development Layers

• 21.2 Create a Web Page
• 21.3 Use Stylesheets
• 21.4 Test and Publish a Website

Chapter 21: Web Authorin

g

WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring
Chapter 21: Web elements. Stylesheet
could include page To enter the content
Authorin
g layouts using Div Tags (Text, images, audio, Behaviour layer
Web Development and text/table video etc) into a web
formatting properties. page and to create To enter scripting
Layers Presentation suitable hyperlinks. language to a web
The presentation page or an individual
Layer layer is The Content layer is in element.
the HTML.
• Image Effects
To format whole web
Content layer: • Pop up message
page(s) or individual

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 Authorin
g
• The HTML file extension is .HTM
or HTML
software
• HTML can be written in web Content is
authoring or text editing between the Body Tags
CSS (Cascading Style Sheet) – Presentation Layer
WWW.YAHMAD.CO.UK

• Styles can be created separately or

embedded into HTML.

• 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

No Style Sheet

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 CSS Window.
1) Create New CSS and then Save write the name of the tag (H1, H2 etc.) 4) Select the
Chapter 21: Web Authorin properties for Tag (Size, colour etc.)
g
2) Open the CSS Window – using this will eliminate 1 2
mistakes 3) Select Tag and 34
then Tip: Write all colours in 6
hexadecimal digits e.g. #000000
 Code – For Heading1 WWW.YAHMAD.CO.UK
Tip: You can Align the style in Block If you are
writing the code the center alignment is spelt at
center.

Writing Centre will not work.

ICT IGCSE Practical – Revision Presentation

Web Authoring

CSS (Commonly Used Windows)

Chapter 21: Web Authorin

Type: Format Text Block: Alignment Background g
 Border: Internal/External Border Box: Format Table
List: Bullet Style
 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

Chapter 21: Web Authorin

g
how the background image will be laid out.
 Tip: Make sure the background colour is not placed
WWW.YAHMAD.CO.UK in the type window.

ICT IGCSE Practical – Revision Presentation

Web Authoring

Chapter 21: Web Authorin shade.

g
Hexadecimal Colours
# Red Green Blue
# C0 00 00
FF FF FF
# 80 00 00
# FF 00 00
# 40 00 00 ¼
# 00 FF 00
# 00 00 00
# 00 00 FF
The closer the number gets to 00 then
the colour will become a darker
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

Correcting CSS for Text Styles

Incorrect CSS
Chapter 21: Web Authorin
g
 Correct CSS
Tip: If you are asked to correct a CSS then you could either re-write it completely 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.

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
Chapter 21: Web Mistakes:
• No brackets to open and
Authorin close CSS Tags
g
Correcting CSS for Text
Styles

#8B0000
If
you are editing the CSS then
put the
#191970 #000080 brackets {Start & End } in the
correct place for each tag.

Then use the CSS

window to enter correct CSS
and delete the old (useless)
code.

• 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

Attaching Style Sheet

Attaching Style Sheet

1. Open the CSS Window
Chapter 21: Web Authorin
g

2. Click on
the
Attach
Style
Sheet
Icon
3. Click on
the
browse
button and select
stylesheet.
4. Click Ok to Attach Style Sheet.
 Table1.CSS Attached Table2.CSS Also Attached

Hierarchy of multiple attached stylesheets

Adding additional stylesheets will over rule elements from previously attached stylesheets. In the
example show above once the Table2.CSS is attached then the colour of the table has changed from
Yellow (from the Table1.CSS) to Blue (Table2.CSS) however the other elements have stayed the same.

WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

Applying CSS Text Styles

CSS text styles for heading, paragraphs and list styles can be applied to text in a HTML webpage (in the
content layer). The properties panel at the bottom of the page
Chapter 21: Web Authorin
can be used to apply g
particular text styles. You can also use the code view to apply styles.

1) Highlight the text.

2) Go to the properties panel
3) Select a specific format.
List Styles (OL/UL)

Heading 1 Style Applied

Code View: Remember to open <h1> and close </h1> the tags

WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring
CSS for Tables

TD: Internal Border (Style, Size, Colour)

Chapter 21: Web Authorin

g
Table: External Border (Style, Size, Colour)
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

 • 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

text alignment or cell padding.

Both TD/Table WWW.YAHMAD.CO.UK

• Solid, 4 Pixels, Navy Blue (80)

ICT IGCSE Practical – Revision Presentation

Web Authoring

Border Collapse
 Before Border
Collapse
Chapter 21: Web
Authorin
g
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
Creating a Table

Creating Tables
1) Insert >> Table
Chapter 21: Web Authorin
g
2) Work out the number
of rows and columns.
3) Set border, padding
and spacing if
necessary.

Merging Cells: Highlight cells to merge.

Right click >> Table >> Merge Cells.

Column Width: You can change a column width

WWW.YAHMAD.CO.UK
to the a percentage in the properties panel.
 ICT IGCSE Practical – Revision Presentation
Web Authoring

Setting Table Size

Chapter 21: Web Authorin

g
 Width (W) and Height (H) can also be set as a

• You can either resize a table element in the

properties panel or in the Code.
• In the exam you may have to highlight the
code which shows the table/TD sizes.
 WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

Chapter 21: Web Authorin

g
Creating a Table TR Table Row

Tip:

TD Table Data To set the height of the table you

must go into the code view.

You would have to click after the

table width and then enter
Height. You can then set the height.
WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

Tables are used to structure (layout) the content on a webpage. HTML tags are used to
format the table. The table header (Thead), footer (Tfoot) and body (Tfoot) needs to
be inserted in this order.
Chapter 21: Web Authorin
g

Table Header Table Footer

WWW.YAHMAD.CO.UK
Table HTML Tags: Table:v
TD: Table Data
THEAD & TH: Header Tfoot: Footer
Tbody: Body

Table Body
 ICT IGCSE Practical – Revision Presentation
Web Authoring

Creating Table Style Sheet

Chapter 21: Web Authorin
g
Table: Used for general settings for the table
Table Colour, Padding , Text Alignment, Table size,
Collapse Border etc
TD (Table Data): Used to format the TD.

Tables can be used to layout

content in a webpage. table. Tbody: Used to format the body of the
Thead (TH): Used to format the header of the table.
table. Tfoot: Used to format the footer of the
 WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

Table HTML Tags and Embedded CSS

HTML Tags could be used or edited to apply
additional
formatting. For example you may want to change
the
Chapter 21: Web Authorin
g

background colour of a table row.

Increase this number for border thickness.
Border not visible in live view

You can also create CSS

Style tag to format
elements of your table.
For Example: Border
Collapse
 WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

Use of Embedded CSS in HTML

Nov 2015
Chapter 21: Web Authorin
g
 WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

Table Alignment

The properties panel can be used to align content (V or H) in a

Chapter 21: Web Authorin
Table Cell (TD). g
 HTML Tag
You can also use embedded CSS in
HTML for formatting either vertical or
Horizontal alignment in a cell (TD)

Horizontal Alignment Vertical Alignment

WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

• 21.1 Web Development Layers

• 21.2 Create a Web Page
• 21.3 Use Stylesheets
• 21.4 Test and Publish a Website

Chapter 21: Web Authorin

g
 WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

Software Choices

Images: Use Fireworks if it says open a the file in a suitable application (Jpeg or Gif)

Chapter 21: Web Authorin

g
Images: Use Dreamweaver if they don’t mention the use of a suitable software. You
can use the properties panel to resize an image.

Aspect Ratio: Keep the padlock

locked to maintain the aspect ratio
Properties Panel
HTML & CSS: Use Dreamweaver for these file types.

You would use Dreamweaver to

create or edit CSS or HTML files.

WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring
 Resize an image in a suitable application

Tip: If it asks you to resize an image in a suitable software than you

must use Adobe Fireworks.
Chapter 21: Web

Authorin
g

1) Open the image

2) Click on Modify >>
Canvas >> Image
Size.
3) Write in the new
dimensions of the
image.

If you wish to maintain the aspect ratio then make sure

selected.
WWW.YAHMAD.CO.UK
Constrain Proportions has been

ICT IGCSE Practical – Revision Presentation

Web Authoring

Flip Horizontal/Vertical (Reflect)

Chapter 21: Web Authorin

g
You can also use
the Icons shown to
flip an
image
(V/H).
You can rotate an image using the
Scale Tool.

1) Select the image

2) Click on Modify >>
Transform>> Flip
Horizontal/Vertical.
This will flip the image

WWW.YAHMAD.CO.UK
After: Horizontal Flip

ICT IGCSE Practical – Revision Presentation

Web Authoring

Editing Graphics (Cropping Image): Cropping is to remove a part of an image.

Chapter 21: Web Authorin
g

In the example shown above the left side of

 the
image (Green) has been cropped off so the image is
high.
Example Cropping Question
1200 PX wide and 800 PX

WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

Editing Graphics: Brightness and Contrast

Chapter 21: Web Authorin

g
Original Image Increased Brightness Increased Contrast

1) Click on Filter >>

Adjust Color >>
Brightness/Contrast.

Then apply the

appropriate brightness
or contrast settings.
 WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

Editing Graphics: Colour Depth

Chapter 21: Web Authorin

g
Increasing the
colour depth
will increase
the time taken
to show the
image in the
web browser.
 Increasing the
colour depth will increase the quality
WWW.YAHMAD.CO.UK file size.
of the image which will mean an increased

ICT IGCSE Practical – Revision Presentation

Web Authoring

Exporting Graphics
• See the file size.
In Export Wizard you can do the following: • Sometimes you may have to change a GIF into a
• Select the format of the image (Gifs & Jpegs) JPG.
Chapter 21: Web Authorin
g
• Optimize the quality of the Image
• Change colour setting
Image Format
 File Size

Optimise

Reducing image resolution will reduce the image size.

This will allow the image to load up quicker on the web
WWW.YAHMAD.CO.UK
browser.
 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
Chapter 21: Web Authorin
g

up. The
 alternative text can also be typed into the
windows panel shown below. Typically the alternative text
would have to be highlighted in the HTML code.

Alternative
text can be
added when
inserting the
image.

Alternative text can be added in the properties panel

after you have inserted the image.
Alternative text is shown when
the image can not be loaded.
WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring
 Inserting Content (Text and Images) into a Table

Blank Table
Chapter 21: Web Authorin
g

Text can be entered or copied and table cell (TD) and then click
pasted in from external sources. on:

Insert >>> Image

WWW.YAHMAD.CO.UK
To insert an image click on the
ICT IGCSE Practical – Revision Presentation
Web Authoring

Applying List Styles

Unordered List - UL

Ordered List – OL
Chapter 21: Web Authorin
g

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

WWW.YAHMAD.CO.UK styles.
Unique settings can be set for OL/UL tags like disc

ICT IGCSE Practical – Revision Presentation

Web Authoring

Hyperlinks

To link to an external webpage select either the

image or text and then insert the URL address
Chapter 21: Web Authorin
g
into the Link section of the properties panel.

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

You can hyperlink to another internal webpage

from your website if you select the folder. Then
you can select the HTML file which you should
find in the root folder of your website.

WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

Absolute and Relative File Paths

 Absolute File Path: Is the complete path to the file location.

Relative File Path: Is the file path from the current directory.

Chapter 21: Web Authorin

g
 WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

Importing Media Content (Audio, Video etc)

1
To Insert Media Content you have to click on:
Chapter 21: Web Authorin 1. Insert >> Media >> Plugin
g
2. Browse for the file
3. Resize the Plugin
4. Preview in the browser
You can also select other media content like FLV or
SWF

34
WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring
 Anchors
anchor which has been placed
Chapter 21: Web Authorin at the top of the page.
g
An anchor will let you link
to a specific part of a
Named page.
Anchor
For Example you can
This create an Named anchor
text at the top of the page.
will be
linked
Placed You then create a link to
to the
Anchor return to the top of the
page by referring to the
Named anchor. #Top

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

Email Link

mailto:[email protected]

Chapter 21: Web Authorin

g
You can also click
on Insert >> email link

Email Link with a subject Line

mailto:[email protected]?subject=Donation by Yasar Ahmad
 5678
WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

Printing & Highlighting Code

Chapter 21: Web

Authorin
g
 Select for HTML Code
Select for CSS Code

Select to print code.

Tip: If you are asked to print the CSS make sure

you write your name as comment.

You need to start the comment with

/* You need to end the comment with
*/

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

Printing & Highlighting Code

Tip: Use the split view to help you

highlight code at the end of the
Chapter 21: Web Authorin
g

exam.
1. Highlight the part of the
content (link) which needs to be
highlighted.
2. On the printout refer to the row
number and highlight the code
 Example Highlight Question
which is normally found at the
end of the paper 3.

Your code could either be in the

evidence document or printed
from Dreamweaver.
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.
Chapter 21: Web Authorin
g
2. The hosting provider will give you user login details so that you are able to upload your
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 computer to the hosting space.
WWW.YAHMAD.CO.UK

ICT IGCSE Practical – Revision Presentation

Web Authoring

Test a Website
 Functional Testing
Why Test your Web Page?
• To ensure all components of the • Check if hyperlinks (including anchors, email
Chapter 21: Web Authorin links) are working.
g • Do all images appear including alternative
webpage are working correctly before text if image is unavailable.
they are published online. • Is the table structure correct.
• Stylesheet (If it is attached and whether the
correct styles have been used)
• Correct image sizes and alternative texts •
Suitable Tests
Correct use of borders (Visible/Non Visible).
Choose Suitable Testing Criteria

Tip: You may be asked to test 4 components Create a Test Table

of the website. Choose Test topics shown to
the right.

Test How Expected Actual Action Taken

Checking Click on each All links to go All links work No action
Hyperlinks link in the to the correct as expected. required.
browser page.

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
Chapter 21: Web Authorin
g
give their feedback.

User Testing
• Tasks to complete using the site checking the
usability:
• Entering data into a form (e.g. creating
a new email account)
• Navigation around the webpage.

• Questions to Answer
• What is the purpose of the website?
• Is the content easy to understand?
• What are the positive and negative
 features of the website? A User form could be created so that
• Is it easy to use the website and users testing the website and write
navigate from page to page. • What their feedback.
could be improved?

WWW.YAHMAD.CO.UK