Scribd
Upload
27 views21 pages

17.1 Website Authoring

The document discusses web development layers and HTML. It explains that web pages have three layers - content, presentation, and behavior. The content layer is created using HTML, which structures content using elements like headings, paragraphs, links and images. The document also discusses HTML elements like the head and body, as well as tags for page titles, external stylesheets, metatags, and default target windows. It includes examples of HTML code.

Uploaded by

Mahboob Riaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
27 views21 pages

17.1 Website Authoring

The document discusses web development layers and HTML. It explains that web pages have three layers - content, presentation, and behavior. The content layer is created using HTML, which structures content using elements like headings, paragraphs, links and images. The document also discusses HTML elements like the head and body, as well as tags for page titles, external stylesheets, metatags, and default target windows. It includes examples of HTML code.

Uploaded by

Mahboob Riaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Headtosavemyexams.

comfor more awesome resources

IGCSE ICT
CIE Your notes

17.1 Website authoring


Contents

Web Development
Layers HT ML
CSS

Page 1 of 21
Headtosavemyexams.comfor more awesome resources

Web Development Layers


Your notes

Web Development Layers


Content Layer

The content layer forms the structure of a web page


This is where you enter the text, images, and other content that make up the body of the web
page
It's typically constructed using HTML (HyperText Markup Language)
Presentation Layer

The presentation layer is used to display and format elements within a web page
It controls how the content looks, including layout, colours, fonts, and more
This layer is mainly handled by CSS (Cascading Style Sheets)
Behaviour Layer

The behaviour layer uses scripting languages to control elements within a web page
It enables interactive elements and complex functionality, such as form validation, image sliders,
and dynamic content updates
JavaScript is the primary language used for the behaviour layer

Worked example

Web development layers are used when designing web pages. An example of one of the layers is the presentation layer.
Name the other two web development layers.

[2]

Content/Structure [1]

Behaviour/Scripting [1]

Page 2 of 21
Headtosavemyexams.comfor more awesome resources

HTML
Your notes

HTML
Creating the Content Layer

The content layer of a web page is made up of HTML elements such as headings (<h1>, <h2>, etc.),
paragraphs (<p>), links (<a>), images (<img>), and more
HTML elements are the building blocks of web pages and are used to structure and organise the
content
The head section contains information about the web page that's not displayed on the page
itself

It's enclosed by <head> and </head> tags

The content inside the head tag is displayed in the browser tab

The body section contains the main content of the web page, such as text, images, videos,
hyperlinks, tables etc.
It's enclosed by <body> and </body> tags
The content inside the body tag is displayed in the browser window

Page 3 of 21
Headtosavemyexams.comfor more awesome

Head Section Elements


Page T it Your notes
le
The <title> element is used to set the page title that displays in the browser tab
It is placed inside the <head> section of the HTML document
External Stylesheets

External stylesheets are linked in the <head> section using the <link> element
The rel the attribute is set to "stylesheet", and the href the attribute contains the relative le path to
the CSS le
Stylesheets are loaded in the order they are listed, so hierarchy is important
Metatags

Metatags are snippets of text in HTML that describe a page's content


They don't appear on the page itself but in the page's code
Search engines, browsers and other web services use metatags to glean information about a
web page
Metatags provide additional information about the web page to the browser and search engines

E.g.
Charset
The <meta charset="UTF-8"> the tag speci es the character encoding for the HTML document UTF-
8 is the most common character encoding and includes almost all characters from all
writing systems
Keywords
The keywords attribute in a <meta> tag is a comma-separated list of words that represent the
content of the web page
It was originally intended to help search engines understand the content of a page, but
it's less relevant today as search engines have become more sophisticated
Author
The author attribute in a <meta> the tag identi es the author of the web page
It can be helpful for copyright purposes and for readers who want to know the source of
the content
Description
The description attribute in a <meta> tag provides a concise explanation of the content of the
web page
This description often appears in search engine results and can in uence click-through
rates
Viewport
The <meta name="viewport" content="width=device-width, initial-scale=1"> a tag makes your web page
display correctly on all devices (desktop, tablet, mobile)
It controls the viewport siz e and the initial z oom level

Page 4 of 21
Headtosavemyexams.comfor more awesome

Default Target Windows

The target attribute of the <base> the element can set a default target window for all links on a page
Your notes
For example, <base target="_blank"> will open all links in a new window or tab
e.g.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
<meta name="description" content="This is my web page">
<meta name="author" content="Your Name">
<base target="_blank">
</head>
<body>
<h1>Welcome to My Web Page!</h1>
<p>This is a sample paragraph.</p>
</body>
</html>

Page 5 of 21
Headtosavemyexams.comfor more awesome

Worked example
Your notes
You are a student creating a website for your IGCSE ICT revision work. You have produced some
HTML, but have not yet added the logo or merged the cells. You are aiming to produce the
following page.

Fig. 1

Part of the markup you have produced is:

<table>
<tr>
<td><h1>IGCSE ICT</h1></td>
</tr>
<tr>
<td><h3>Theory</h3></td>
<td><h3>Practical 1</h3></td>
<td><h3>Practical 2</h3></td>
</tr>
<tr>
<td><h3>2 hour<br>Theory exam</h3></td>
<td><h3>2.5 hour<br>Practical exam</h3></td>
<td><h3>2.5 hour<br>Practical exam</h3></td>
</tr>
</table>

a. Write the HTML that would display the image called “Logo.jpg” as shown in Fig. 1. If the browser
cannot nd the image, then the text “Tawara School Logo” will be displayed.

[5]

<td rowspan="3"><img src="Logo.jpg" alt="Tawara School


Logo"></td>

One mark for each point

Page 6 of 21
Headtosavemyexams.comfor more awesome

<td rowspan = ”3”> [1]


<img [1]
src = ”Logo.jpg” [1] alt = ”Tawara School logo”> [1]
</td> [1] Your notes

<td rowspan="3"><img alt="Tawara School Logo” [3]


src="Logo.jpg"></td> [2]

own in the code does not produce the title as shown in Fig. 1. Write the HTML that would produce the title as shown in Fig. 1.
[2]

h1></td>

<td colspan [1]


="3"> [1]

Page 7 of 21
Headtosavemyexams.comfor more awesome

Creating Body Content


The <body> section of the HTML document is where the main content goes Your notes
This can include text, images, tables, links, and more
Tables in Webpages

In the early days of web development, tables were often used to create complex page layouts
They provide a way to arrange data into rows and columns
By utilising cell padding, cell spacing, and borders, developers could manipulate the appearance
of the page
Today, tables are primarily used for displaying tabular data - information that is logically displayed
in grid format
For example, nancial data, timetables, comparison charts and statistical data are often
presented in tables
Tables make it easy for users to scan, analyse and comprehend the data
Tables also enhance accessibility. Screen readers for visually impaired users can read tables
e ectively if they are correctly structured
Semantic HTML elements like <table>, <tr>, <th>, and <td> help in conveying the structure and purpose
of the data to these assistive technologies
Inserting a Table

Tables in HTML are created using the <table> element


Table rows are de ned with <tr>, headers with <th>, and data cells with <td>
Use rowspan and colspan attributes to make cells span multiple rows or columns
Table Attributes

Set table and cell siz es with the width and height attributes, using pixel or percentage values
Apply styles to tables with inline CSS or by linking an external stylesheet
Inserting Objects

Insert text with elements like <p> for paragraphs and <h1> to <h6> for headings
Insert images with the <img> element, using the src attribute to specify the image source
Use the alt attribute to provide alternate text for images
Adjust image or video siz e with the width and height attributes
Insert sound clips and videos with the <audio> and <video> elements, adding controls for playback
controls, and autoplay to start automatically
<body>
<h1>Welcome to My Web Page!</h1>
<p>This is a sample paragraph.</p>
<table style="width:100%">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>

Page 8 of 21
Headtosavemyexams.comfor more awesome

<td>Data 1</td>
<td>Data 2</td>
</tr>
</table> Your notes
<img src="image.jpg" alt="My Image" width="500" height="600">
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>
<video controls autoplay>
<source src="video.mp4" type="video/mp4">
</video>
</body>

Page 9 of 21
Headtosavemyexams.comfor more awesome

Styling
Using the <div> Tag Your notes

The <div> a tag is a container unit which encapsulates other page elements and divides the HTML
document into sections
<div> elements are block level elements and are often used to group elements to format them
with styles
Applying Styles and Classes

Styles can be applied directly to an element using the style attribute


Classes are de ned in CSS and can be applied to HTML elements using the class attribute
Multiple elements can share the same class
Text Styling Tags

Use the <h1> to <h6> tags for headings, with <h1> being the largest and <h6> the smallest
Use the <p> tag for paragraphs
Use the <li> tag for list items within <ul> (unordered/bullet list) or <ol> (ordered/numbered list)
Applying Styles to Lists

The <ul> tag creates an unordered list, and <ol> creates an ordered list
Styles can be applied directly to these lists using the style attribute or by using a class
<html>
<head>
<style>
.blue-text {
color: blue;
}
.large-font {
font-size: 20px;
}
</style>
</head>
<body>
<div class="blue-text large-font">
<h1>Blue Heading</h1>
<p>Blue paragraph.</p>
<ul style="list-style-type:circle;">
<li>Blue list item 1</li>
<li>Blue list item 2</li>
</ul>
</div>
</body>
</html>

Page 10 of 21

© 2015−2023 Save MyExams, Ltd. · Revision Notes, Topic Questions, Past


Headtosavemyexams.comfor more awesome

Bookmarks & Hyperlinks


Creating a Bookmark Your notes

A bookmark in HTML is a way to provide links to speci c sections of a web page


It allows users to navigate easily to di erent sections of content without having to scroll through
the entire page
Bookmarks are created using the id attribute in HTML
They allow users to jump to speci c sections within a page
Example: <div id="section1">This is Section 1</div>
Any tag can be turned into a bookmark by adding an id attribute to it
The id should be unique and not used more than once on a page
To link to the bookmark, use the <a> tag with a href value set to # followed by the id of the bookmark
By combining the <a> tag and the href attribute with a speci c id, you can create a link that takes the
user to that bookmarked section of the page
Creating Hyperlinks

A hyperlink, often just called a 'link', is a reference to data that a reader can directly follow by
clicking or tapping
It is one of the core elements of the World Wide Web, as it enables navigation from one web page
or section to another
Hyperlinks are created using the <a> (anchor) tag in HTML
They can link to di erent sections of the same page, other locally stored web pages, or external
websites
Text Hyperlinks: Usually, a portion of text that is highlighted in some way, like being
underlined or a di erent colour
Image Hyperlinks: An image that you can click on to take you to another page or another part
of the same page
Button Hyperlinks: A clickable button that redirects the user to another page or section
Hyperlinks utilise the 'href' attribute within the <a> tag in HTML
The 'href' attribute contains the URL of the page to which the link leads
The text between the opening <a> and closing </a> tags are the part that will appear as a link on the
page
Hyperlink Types

Same-page bookmark: Use the # followed by the id of the element, you want to jump to. Example:
<a href="#section1">Go to Section 1</a>
Locally stored web page: Use the relative path to the le. Example: <a href="contact.html">Contact
Us</a>
External website: Use the full URL. Example: <a href="https://www.google.com">Google</a>
Email link: Use mailto: followed by the email address. Example: <a
href="mailto:[email protected]">Email Us</a>

Page 11 of 21
Headtosavemyexams.comfor more awesome

Speci ed location: Use the target attribute to specify where to open the link. _blank for a new tab or
window, _self for the same tab or window, or a named window. Example: <a
href="https://www.google.com" target="_blank">Google</a> Your notes

<html>
<body>
<div id="section1">
<h1>This is Section 1</h1>
<a href="#section2">Go to Section 2</a><br>
<a href="contact.html">Contact Us</a><br>
<a href="https://www.google.com" target="_blank">Google</a><br>
<a href="mailto:[email protected]">Email Us</a>
</div>
<div id="section2">
<h1>This is Section 2</h1>
<a href="#section1">Go back to Section 1</a>
</div>
</body>
</html>

Relative and Absolute File Paths


Relative File Paths

A relative le path speci es the location of a le or directory about the current location, or the
location of the le that references it
For instance, if an HTML le and an image are in the same directory, you can reference the image in
the HTML le using just its name (e.g., image.jpg)
Absolute File Paths

An absolute le path speci es the exact location of a le or directory, regardless of the current
location
It includes the entire path from the root directory to the le or directory in question
For instance, an absolute le path on a Windows system might look like C:\Users\
Username\Documents\image.jpg
Reasons Not to Use Absolute File Paths for Local Objects

Using absolute le paths for local web pages or objects can lead to broken links when the
website is moved to a di erent directory or server
The web page or object might not exist at the speci ed location on the server or the user's
computer
If a website is moved or backed up, absolute links will still point to the original location, not the
new or backup location

Page 12 of 21
Headtosavemyexams.comfor more awesome

CSS
Your notes

How to use
CSS
The presentation layer of a web page is de ned by CSS (Cascading Style Sheets). This layer
deals with the layout, colours, fonts, and animations on the page
It separates the content (HTML) from the appearance of the web page
CSS allows for better control and exibility in designing a web page

Page 13 of 21
Headtosavemyexams.comfor more awesome

Inline Styles
External CSS is written in a separate le with a .css extension, and linked to the HTML document. This Your notes
allows for the same styles to be reused across multiple pages. E.g.

<head>
<link rel="stylesheet" href="styles.css">
</head>

Inline CSS is written directly within the HTML tags using the style attribute. This applies the style only to
that speci c element. E.g.

<p style="color:blue;">This is a blue paragraph.</p>

Background Properties

Background Colour: Set the background colour using the background-color property.
e.g. background-color: blue;
Background Images: Set a background image using the background-image property.
e.g. background-image: url("image.jpg");
Font Properties

Control the appearance of text with font properties. This includes font-size, font-family, color, text-align,
and more. E.g.

p{
font-size: 14px;
font-family: Arial;
color: blue;
text-align: center;
}

Tables

CSS is used to style HTML tables, allowing us to de ne the appearance of the table, table rows, table
headers, and table data cells.

Size: Control the width and height of a table using width and height.
e.g. width: 100%; height: 200px;
Background Colour: Use background-color to set the background.
e.g. background-color: yellow;
Borders: Apply a border using the border property. This includes colour, thickness, and visibility.
For instance: border: 2px solid black;
Collapsed Borders: Use border-collapse: collapse; to make borders appear as a single line
Spacing: Control the space between cells with border-spacing.
e.g. border-spacing: 5px;
Padding: De ne the space between cell content and its border with padding.

Page 14 of 21
Headtosavemyexams.comfor more awesome

e.g. padding: 10px;


table {
width: 100%;
Your notes
height: 200px;
background-color: yellow;
border: 2px solid black;
border-collapse: collapse;
border-spacing: 5px;
}

Size: Control the width and height of rows, headers, and data cells just like with tables.
e.g. width: 50px; height: 50px;
Background Colour: Use background-color to set the background of rows, headers, and data cells
Horizontal and Vertical Alignment: Control alignment with text-align (horiz ontal) and vertical-align
(vertical).
e.g. text-align: center; vertical-align: middle;
Padding: De ne the space between cell content and its border with padding
Borders: Apply a border using the border property
th, td {
width: 50px;
height: 50px;
background-color: white;
text-align: center;
vertical-align: middle;
padding: 10px;
border: 1px solid black;
}

Exam T ip

Be aware that inline CSS has the highest priority. If both external and inline styles are applied, the inline style will override the external
Keep in mind that CSS properties are case-sensitive. Always use lower case

Page 15 of 21
Headtosavemyexams.comfor more awesome

Classes
Classes in CSS are used to style multiple HTML elements at once Your notes
To de ne a class, use a period (.) followed by the class name. To apply a class to an HTML element,
use the class attribute

Background Colour: Use the background-color property. E.g.


.red-background {
background-color: red;
}

Background Images: Use the background-image property. E.g.


.image-background {
background-image: url("image.jpg");
}

Font Properties: Control the font siz e, family, colour, and alignment. E.g.
.big-blue-text { font-
size: 20px; font-
family: Arial; color:
blue;
text-align: center;
}

Size: Control the width and height with width and height. E.g.
.small-cell {
width: 30px;
height: 30px;
}

Background Colour: Use background-color to set the background. E.g.


.yellow-cell {
background-color: yellow;
}

Horizontal and Vertical Alignment: Use text-align (horiz ontal) and vertical-align (vertical). E.g.
.center-align {
text-align: center;
vertical-align: middle;
}

Spacing, Padding, Borders: Use padding for space inside the cell, and border for cell borders. E.g.
.padded-cell {
padding: 10px;
border: 2px solid black;
}

Page 16 of 21
Headtosavemyexams.comfor more awesome

Collapsed Borders: Use border-collapse: collapse; the table class to remove spaces between cell
borders. E.g.
.collapsed-table { Your notes
border-collapse: collapse;
}

Apply these classes to HTML elements like this:

<table class="collapsed-table">
<tr class="small-cell yellow-cell center-align">
<td class="padded-cell">Content</td>
</tr>
</table>

Exam T ip

Remember, CSS classes begin with a period (.) in the stylesheet The class attribute is used in the HTML document to apply a class

Page 17 of 21
Headtosavemyexams.comfor more awesome

External CSS
External Styles are CSS styles that are de ned in a separate .css le and linked to the HTML Your notes
document. This allows for reusing the same styles across di erent web pages

To create external styles for HTML elements like h1, h2, h3, p, and li, simply specify the element and
de ne the styles within curly braces {}. E.g.

h1 {
font-family: Arial;
font-size: 30px;
color: blue;
text-align: center;
}

h2 {
font-family: Arial;
font-size: 25px;
color: red;
text-align: left;
}

h3 {
font-family: Arial;
font-size: 20px;
color: green;
text-align: right;
}

p, li {
font-family: Arial;
font-size: 14px;
color: black;
text-align: justify;
}

In the above CSS, h1, h2, h3, p, and li tags have been given di erent font families, siz es, colours, and
alignments. Also, p and li share the same style

To apply bold or italic styles, use the font-weight and font-style properties respectively:

h1 {
font-weight: bold; /* makes text bold */
}

p{
font-style: italic; /* makes text italic */
}

Page 18 of 21
Headtosavemyexams.comfor more awesome

Comments in CSS are used to explain the code and make it more readable. They can be inserted
anywhere in the code and do not a ect the result

Your notes
A CSS comment starts with /* and ends with */. See above for examples

Attached Stylesheets vs Inline Style Attributes

Attached Stylesheets: These are external .css les linked to an HTML document. They allow for
reusing the same styles across multiple web pages. An attached stylesheet is linked using the
<link> tag within the <head> tag
<head>
<link rel="stylesheet" href="styles.css">
</head>

Inline Style Attributes: These are CSS rules applied directly to an HTML element using the style
attribute. They a ect only the speci c element they are applied to
<p style="color:blue;">This is a blue paragraph.</p>

The main di erence is that attached stylesheets allow for reusability and better organisation,
while inline styles are used for single, speci c modi cations
Hierarchy of Multiple Attached Stylesheets and Inline Styles

If there are multiple styles de ned for the same HTML element, the style closest to the element
takes priority. This is called the Cascading order

The cascading order, from highest to lowest priority, is:

. Inline styles (inside an HTML element)


. External and internal styles (in the head section)
. Browser default
Characteristics of a Style and a Class

A Style is a set of CSS properties that de ne the appearance of an HTML element

A Class is a way of selecting multiple elements to apply the same style

The di erence between them lies in their application: a style is used to de ne the CSS
properties, while a class is used to apply these properties to multiple elements

Relative File Paths for Attached Stylesheets

Relative le paths are used for linked stylesheets because they refer to the location of the CSS
le relative to the current HTML le. This makes the code more portable and easier to manage

E.g. if the CSS le is in the same folder as the HTML le, the path would be "styles.css". If the CSS le is
in a subfolder named css, the path would be "css/styles.css"

Page 19 of 21
Headtosavemyexams.comfor more awesome

Worked example
Your notes
A teacher is creating a web page in HTML to display on the school’s intranet.
All colour codes must be in hexadecimal. It has the following style sheet attached:

h1 {color: #ff0000;
font-family: Times, serif;
font-size: 30pt;
text-align: center;}
h2 {color: #0000ff;

font-family: Times, Helvetica, serif;


font-size: 24pt;
text-align: center;}
h3 {color: #00ff00;

font-family: Times, Helvetica, serif;


font-size: 14pt;
text-align: justify;}

body {background-color: #ad88e6;}


table {border-color: #000000;}

Having tested the web page the teacher needs to make some changes to the style sheet.
Write down the CSS to:
a. edit style h1 so that the font is Comic Sans or, if not available, Arial or, if this is not available,
the browser’s default sans-serif font.

[3]

font-family: "Comic Sans", Arial, sans-serif;

"Comic Sans", [1]


Arial, [1]
sans-serif; [1]
Must be in the correct order

b. add a markup to the table style to set a 3−pixel wide, dashed external border.

[4
]

table {border-color: #000000; border-style: dashed; border-width: 3px }

border-style: [1]
dashed;[1]

Page 20 of 21

© 2015−2023 Save MyExams, Ltd. · Revision Notes, Topic Questions, Past


Headtosavemyexams.comfor more awesome

border-width: [1]
3px [1]
Your notes
c. edit style h3 so that the colour is set to black.

[1]

h3 {color: #000000;

#000000; [1]

d. add a markup to the start of style h2 to display the text as bold.

[2]

h2 { font-weight: bold;

font-weight: [1]
bold;[1]

Exam T ip

You are being asked to write code in a speci c language so you must be exact: Don't forget quotes around items like Comic sans
Check spellings including color not colour
Make sure you include delimiters where necessary Make sure you include ;
Don't forget to write font-weight rather than font-type

Page 21 of 21

© 2015−2023 Save MyExams, Ltd. · Revision Notes, Topic Questions, Past

You might also like