IGCSE Tuition - 0417 ICT
21 Website Authoring
21.1 Web development layers
Website Web Page Content Layer HTML
Presentation Layer CSS
(McDonald’s) (Menu Page)
https://www.mcdonalds.com.my/ https://www.mcdonalds.com.my/menu
Behaviour Layer JavaScript
Web Page Content Layer HTML
Presentation Layer CSS
(Promotions Page)
https://www.mcdonalds.com.my/promo
tion Behaviour Layer JavaScript
Web Page Content Layer HTML
(Company News Page) Presentation Layer CSS
https://www.mcdonalds.com.my/compa
ny/news Behaviour Layer JavaScript
● HTML lets you create the structure and content of your webpage (without any
stylings).
● CSS lets you format elements to style your web pages using colours, layouts and
simple animations.
● JavaScript lets you control elements to make your web pages more interactive,
responsive and dynamic. (not covered in IGCSE syllabus)
Examples of Websites:
● First website created & published in 1991: [HTML only]
https://info.cern.ch/hypertext/WWW/TheProject.html
● Websites created & published by designers: [HTML & CSS only]
https://www.csszengarden.com/pages/alldesigns/
● Websites created & published by designers: [HTML & CSS & JavaScript]
https://oakharborwebdesigns.com/
Prepared by: Claudia Heng
, IGCSE Tuition - 0417 ICT
21.2 Create a Web Page (HTML)
Concept Definition Example
Element The opening tag, content, and <p>This is a paragraph.</p>
closing tag, forms an HTML
element.
Attribute Attributes provide additional <img src="img_girl.jpg">
information about HTML elements.
Tag Tags usually come in pairs. An <div></div>
opening tag begins a section of
page content, and a closing tag <img>
ends it. There are also self-closing <br>
tags for which content is not <hr>
needed.
Class An attribute that is used to group <p class="intro">This is an
HTML elements together, allowing introductory paragraph.</p>
you to apply the same styles or
behaviors to multiple elements
using CSS. It's a way to give
elements a shared identity or
characteristic.
ID An attribute that is used to <p id="123">This is an
uniquely identify an element introductory paragraph.</p>
within a web page. It provides a
way to target specific elements for
styling with CSS
Prepared by: Claudia Heng
21 Website Authoring
21.1 Web development layers
Website Web Page Content Layer HTML
Presentation Layer CSS
(McDonald’s) (Menu Page)
https://www.mcdonalds.com.my/ https://www.mcdonalds.com.my/menu
Behaviour Layer JavaScript
Web Page Content Layer HTML
Presentation Layer CSS
(Promotions Page)
https://www.mcdonalds.com.my/promo
tion Behaviour Layer JavaScript
Web Page Content Layer HTML
(Company News Page) Presentation Layer CSS
https://www.mcdonalds.com.my/compa
ny/news Behaviour Layer JavaScript
● HTML lets you create the structure and content of your webpage (without any
stylings).
● CSS lets you format elements to style your web pages using colours, layouts and
simple animations.
● JavaScript lets you control elements to make your web pages more interactive,
responsive and dynamic. (not covered in IGCSE syllabus)
Examples of Websites:
● First website created & published in 1991: [HTML only]
https://info.cern.ch/hypertext/WWW/TheProject.html
● Websites created & published by designers: [HTML & CSS only]
https://www.csszengarden.com/pages/alldesigns/
● Websites created & published by designers: [HTML & CSS & JavaScript]
https://oakharborwebdesigns.com/
Prepared by: Claudia Heng
, IGCSE Tuition - 0417 ICT
21.2 Create a Web Page (HTML)
Concept Definition Example
Element The opening tag, content, and <p>This is a paragraph.</p>
closing tag, forms an HTML
element.
Attribute Attributes provide additional <img src="img_girl.jpg">
information about HTML elements.
Tag Tags usually come in pairs. An <div></div>
opening tag begins a section of
page content, and a closing tag <img>
ends it. There are also self-closing <br>
tags for which content is not <hr>
needed.
Class An attribute that is used to group <p class="intro">This is an
HTML elements together, allowing introductory paragraph.</p>
you to apply the same styles or
behaviors to multiple elements
using CSS. It's a way to give
elements a shared identity or
characteristic.
ID An attribute that is used to <p id="123">This is an
uniquely identify an element introductory paragraph.</p>
within a web page. It provides a
way to target specific elements for
styling with CSS
Prepared by: Claudia Heng
