Paper 3 Web Authoring
Paper 3 Web Authoring
Paper 3 Web Authoring
Web Authoring
• 21.1 Web Development Layers
• 21.2 Create a Web Page
• 21.3 Use Stylesheets
Chapter 21: Web Authoring
WWW.YAHMAD.CO.UK
ICT IGCSE Practical – Revision Presentation
Web Authoring
Web Development Layers
WWW.YAHMAD.CO.UK
ICT IGCSE Practical – Revision Presentation
Web Authoring
HTML (Hyper Text Markup Language) – Content Layer
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
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
# 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
Correcting CSS for Text Styles
Stylesheet1
• Font: Arial, Helvetica or
default sans-serif font
• Font Size: 24px
• Italic, Bold, Red
• Center Aligned.
Correct CSS
Corrected Mistakes
#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.
WWW.YAHMAD.CO.UK
ICT IGCSE Practical – Revision Presentation
Web Authoring
Attaching Style Sheet
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 can be used to apply
particular text styles. You can also use the code view to apply styles.
Chapter 21: Web Authoring
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
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)
Creating Tables
1) Insert >> Table
2) Work out the number
Chapter 21: Web Authoring
WWW.YAHMAD.CO.UK
ICT IGCSE Practical – Revision Presentation
Web Authoring
Creating a Table
TR Table Row
Chapter 21: Web Authoring
TD Table Data
Tip:
Tbody: Body
Table Body
WWW.YAHMAD.CO.UK
ICT IGCSE Practical – Revision Presentation
Web Authoring
Creating Table Style Sheet
Chapter 21: Web Authoring
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 Border not visible
background colour of a table row. in live view
Chapter 21: Web Authoring
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 Table Cell (TD).
Chapter 21: Web Authoring
HTML Tag
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
Chapter 21: Web Authoring
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 Authoring
Images: Use Dreamweaver if they don’t mention the use of a suitable software. You
can use the properties panel to resize an image.
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 Authoring
WWW.YAHMAD.CO.UK
ICT IGCSE Practical – Revision Presentation
Web Authoring
Editing Graphics: Brightness and Contrast
Chapter 21: Web Authoring
WWW.YAHMAD.CO.UK
ICT IGCSE Practical – Revision Presentation
Web Authoring
Editing Graphics: Colour Depth
Increasing the
Chapter 21: Web Authoring
colour depth
will increase
the time taken
to show the
image in the
web browser.
File Size
Optimise
Alternative
text can be
added when
inserting the
image.
Blank Table
Chapter 21: Web Authoring
Unordered List - UL
Chapter 21: Web Authoring
Ordered List – OL
WWW.YAHMAD.CO.UK
ICT IGCSE Practical – Revision Presentation
Web Authoring
Absolute and Relative File Paths
Relative File Path: Is the file path from the current directory.
WWW.YAHMAD.CO.UK
ICT IGCSE Practical – Revision Presentation
Web Authoring
Importing Media Content (Audio, Video etc)
3 4
WWW.YAHMAD.CO.UK
ICT IGCSE Practical – Revision Presentation
Web Authoring
Anchors
WWW.YAHMAD.CO.UK
ICT IGCSE Practical – Revision Presentation
Web Authoring
Email Link
mailto:[email protected]
Chapter 21: Web Authoring
WWW.YAHMAD.CO.UK
ICT IGCSE Practical – Revision Presentation
Web Authoring
Printing & Highlighting Code
Chapter 21: Web Authoring
WWW.YAHMAD.CO.UK
ICT IGCSE Practical – Revision Presentation
Web Authoring
Printing & Highlighting Code
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
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. their feedback.
• What could be improved?
WWW.YAHMAD.CO.UK