2 Website authoring

21.1 web development layers

Candidates should be able to:
• identify and describe the three web development layers:
– Content layer / structure layer ( HTML)
• Text
• Table
• Images
• Audio and video
• hyperlinks
– Presentation layer (CSS)
• Colors are defined here.
• Text size
• Font faces
• Alignment
• Background pictures / colors.

– Behavior (Java-script). (we only need to know it ).

• Animation and transition.
• Dynamic information.
• understand the function of: content layer :
• to enter the content and create the structure of a web page;
• presentation layer to display and format elements within a web page;
• behaviour layer to enter scripting language to elements within a web page(animation and transition
effects).

21.2 create a web page

Candidates should be able to:
• use software tools to create the content layer of a web page to meet the needs of the audience:
• the language that is going to be used is HTML
– html language devide the code into two sections:
• Head section.
• Body section
– explain the purpose of the head and body sections of a web page:
• Head section includes information send by the server to the browser to identify the
page , and the format that needs to be applied to display the page in the most
appropriate way.
• Contain other information such as the meta information ( information and description
abut the author the date the type , the creation company ).
– place appropriate elements in the head section of a web page, including:
– page title,
– attached stylesheets (external style) or internally created styles

– place appropriate elements in the body section of a web page:

• text, tables , images , videos, hyperlinks.

Back to contents page www.cambridgeinternational.org/igcse 27

 – explain why tables are used to structure elements within a web page:
• to dvide the whole page into different cells with different width and height that suits
the contents.
– insert a table<table> </table>, including:
– table header. <th> </th>
– table rows <tr> </tr>
– table data <td> </td>
– use appropriate table attributes, including:
• to adjust cells to span (merge) more than one row/column,
• to set table and cell sizes in terms of pixels and/or % values,
• to apply styles to tables, to meet the needs of the audience:
• table (size , width , height, alignment , border -spacing , background.
• Td (internal borders ): size , color , padding .
• Th (heading cell): sfornt size , background color , alignment.
• use software tools to appropriately place the content in a web page (web expression 4 ).
•
– insert appropriate objects into a web page including:
– text,
– still images (drag and drop).
– , moving images (generic code ) not operating system or company specific code./cross platform.
<video width =”400” height=”500” controls>
<source src= “movie.mp4” type=”video/mp4” />
This video format is not supported by your browser
</video>
– , sound clips:
<audio controls>
<source src=”song.mp3” type= äudio/mp3” />
This audio format is not supported by your browser
</audio>

– apply styles to text within a web page.

• Applied styles can be done :
• Using default styles (h1,h2, p, li)
• Or , can be modified : using either internally customized styles , or
externally customized styles or inline styles
– apply styles to a list:
• general list known by “li”
• ordered list known by “ol”
• unordered list known by “ul”

– insert an appropriate image into a web page:

when inserting images , they must be inserted as a relative path link not as absolute path.
– use appropriate image attributes, including:
– to adjust its size:
• within the web design application:
• advantage is original image is not altered or changed nor affected.
• Disadvantage is Resizing the image into smaller dimensions will not reduce
image storage size (since original image will keep its original dimensions).
• an image editing application:
• advantage any change in dimension will affect the original image
Back to contents page www.cambridgeinternational.org/igcse 27
 dimensions , hence makes it smaller in storage size , if the image is been
reduced into smaller dimensions.
• Original image will be altered or changes permanently, so it will be hard to
use it in another cell with different width and height or dimensions
requirements.
– aspect ratio is needed to prevent distortion width and height must change with the same ratio. (ratio is
constant).
– and alternate text: in case the browser does not display the image , a text description will be shown
instead.
continued

Back to contents page www.cambridgeinternational.org/igcse 27

 Cambridge IGCSE Information and Communication Technology 0417 syllabus for 2020, 2021 and 2022. Subject content

21.2 create a web page continued

• use software tools to create navigation within a web page and between web pages
– describe the function of a hyperlink
• an aid of navigation.
• Another page
• A part of the current page (anchor or bookmark),
• Email address
– describe the concept of a bookmark and methods of creating a bookmark within a web
page:
• It helps you navigate to a specific point or part in the same page.
• It should not be visible in browsers.
– describe the function of an anchor and why it is rarely seen from the browser view
• anchor are bookmarked that allow allow hyperlinks to reach them or reach
their location in the same page.
• No need to be visible , its just an aid f navigation.

– define and understand the terms relative file path and absolute file path
• path related to the website folder or working area
• absolute path , related to the storage device or computer .
– explain why absolute file paths must not be used for hyperlinks to locally saved web
pages/objects:
• so whenever we upload the website folder , only the files inside this folder
will be uploaded and any link or data outside will be ignored .( links will be
broken id folder is uploaded or changed from a device to another)
the following are done in practice
********************************************************
– use an object’s id attribute to create a bookmark within a web page
– create an anchor within a web page
– create hyperlinks from: text, images:
– create hyperlinks, where appropriate, to: bookmarks on the same page, other locally stored
web pages, a website using the URL, send mail to a specified email address, open in a
specified location including: the same window, a new window, with a window named as
specified
***************************************************************************
********

21.3 use stylesheets

Candidates should be able to:
• use software tools to create the presentation layer of a web page
– explain what is meant by the term cascading stylesheets
• these are syles defined to present the webpage in the most appropriate and
attractive way (in a way that suits the audience), the term cascading means
these styles are created in a specific order , where the last oe always
overwrite the previous one if there is a conflict. (with priorities).
– explain the difference between attached stylesheets and inline style attributes

Back to contents page www.cambridgeinternational.org/igcse 27

 – explain the hierarchy of multiple attached stylesheets and inline styles within a web page
• the last one attached will alwas has the highest proiority ( in attached
stylesheet).
• Inline style sheet are the only one created inside the body section , hence it
has the highest proioruty over attached and internally created style sheets.

– explain the difference between a style and a class

• Style will be applied to the whole page. Example (h1)
• Class will be applied to a specific line of code example (.h1)

**************************the following are done is

practice**********************************************
– create generic external styles and inline style attributes, including: background properties
(e.g. colour, images), font properties (e.g. style, typeface), table properties (e.g. background
colour, horizontal and vertical alignment, spacing, padding, borders: including collapsed,
border thickness, visible/invisible)
– create external styles to be tagged in a web page including: h1, h2, h3, p, li, as required
– specify the font appearance for each style, including features such as: font family,
size, colour, alignment, bold and italic
– save styles in cascading stylesheet format
– explain why relative file paths must be used for attached stylesheets
– attach an external stylesheet to a web page using a relative file path
–
*****************************************************************************************************

– attach comments to an external stylesheet

comment are added you’re the following code :

/* comments are typed here */

21.4 test and publish a website
Candidates should be able to:
• know how to publish a website
– explain how to upload and publish the content of a website using ftp
– test that web page elements work
– test navigation within/from a web page using a test plan
• test a website
– create a test plan to test a website including: web page elements are visible, navigation
within/from a web page
– justify the choice of test plan

Back to contents page www.cambridgeinternational.org/igcse 27