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

 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.
 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
• HTML can be written in web between the Body
authoring or text editing software Tags
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

 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
2) Open the CSS Window – using this will eliminate mistakes Tip: Write all colours in 6
hexadecimal digits e.g.
Chapter 21: Web Authoring

3) Select Tag and then write the name of the tag (H1, H2 etc.)
4) Select the properties for Tag (Size, colour etc.) #000000

1 2 3 4

Code – For Heading1

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)
Type: Format Text Block: Alignment Background
Chapter 21: Web Authoring

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

 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

Tip: Make sure the background colour is not placed

in the type window.
 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)
 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
 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 }
#000080 in the correct place for
each tag.

Then use the CSS

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
 ICT IGCSE Practical – Revision Presentation
Web Authoring
Attaching Style Sheet

Attaching Style Sheet

1. Open the CSS 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.

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.
 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 can be used to apply
particular text styles. You can also use the code view to apply styles.
Chapter 21: Web Authoring

1) Highlight the text.

2) Go to the properties panel
3) Select a specific format.

Heading 1 Style Applied List Styles (OL/UL)

Code View: Remember to open <h1> and close </h1> the tags
 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

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.
14 ICT IGCSE Practical – Revision Presentation
Web Authoring
Creating a Table

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

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

to the a percentage in the properties panel.
15 ICT IGCSE Practical – Revision Presentation
Web Authoring
Setting Table Size
Chapter 21: Web Authoring

Width (W) and

• You can either resize a table element in the Height (H) can
properties panel or in the Code. also be set as a
• In the exam you may have to highlight the
%
code which shows the table/TD sizes.
16 ICT IGCSE Practical – Revision Presentation
Web Authoring
Creating a Table

TR Table Row
Chapter 21: Web Authoring

TD Table Data

Tip:

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.
17 ICT IGCSE Practical – Revision Presentation
Web Authoring
Tables are used to structure (layout) the content on a webpage. Table HTML Tags:
HTML tags are used to format the table. The table header (Thead), Table:v
footer (Tfoot) and body (Tfoot) needs to be inserted in this order. TD: Table Data
THEAD & TH: Header
Tfoot: Footer
Chapter 21: Web Authoring

Tbody: Body

Table Body

Table Header Table Footer

18 ICT IGCSE Practical – Revision Presentation
Web Authoring
Creating Table Style Sheet
Chapter 21: Web Authoring

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. Thead (TH): Used to format the header of the table.
Tfoot: Used to format the footer of the table.
Tbody: Used to format the body of the table.
19 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 Border not visible
background colour of a table row. in live view
Chapter 21: Web Authoring

Increase this number for border thickness.

You can also create CSS

Style tag to format
elements of your table.
For Example: Border
Collapse
20 ICT IGCSE Practical – Revision Presentation
Web Authoring
Use of Embedded CSS in HTML Nov 2015
Chapter 21: Web Authoring
21 ICT IGCSE Practical – Revision Presentation
Web Authoring
Table Alignment
The properties panel can be used to align content (V or H) in a Table Cell (TD).
Chapter 21: Web Authoring

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