CHAPTER

HTML and CSS

Introduction A URL is a unique identifier and is similar in concept to a

telephone number. A URL can be used to locate, request,
In this chapter, we will cover two of the fundamental and view a web page over the Internet, for example,
languages used for web development: Hypertext Markup https://www.google.com. In this case, google.com is
Language (HTML), and Cascading Style Sheets (CSS). Both referred to as the domain. An example of a URL for an
HTML and CSS are vital in the design and development of individual web page at that domain is
many modern web pages. https://www.google.com/maps.

These languages control the overall layout of a web page

and how it displays text and graphics. They allow you to
Web browser
create a set of instructions to display content across the A web browser is a computer program used for accessing
web to users. sites of information on a network (such as the World Wide
Web). It is a piece of software that needs to be installed on
HTML is used to describe the content in a web page and your computer.
CSS is used for the visual presentation and design of the
page. A third language, called JavaScript, is used to control A web browser has two main functions:
the interactive behaviour within a web page. JavaScript is
• It requests the web page from a web server using a
covered in Chapter 10.
http request (based on the URL).
• It then displays the web page when the request is
By the end of this chapter, you should be able to produce a answered by the web server via a http response.
high-quality web page. This is a fundamental starting point
for developing an interactive information system. You will This communication is carried out using the standard http
need to be able to do this to carry out ALT 1 (Applied (hypertext transfer protocol). See Chapter 6 for more on
Learning Task 1). http.

A useful reference tool for HTML, CSS and JavaScript can

be found at: https://www.w3schools.com/.

uu3school5.com
Communication between a web browser and a web server
Note that Chapter 6 covers how the Internet works, and
using http
how the World Wide Web and the Internet are related.
Note that when requesting a website URL, the default start
Web page page returned is index.html, unless otherwise
requested.
A web page is a document containing information that can
be displayed by a web browser. An individual web page
There are many web browsers available, such as Google
hosted on the Internet has a unique address, or URL
Chrome, Microsoft Edge, Mozilla Firefox and Apple Safari.
(uniform resource locator), and can include combinations
of HTML, CSS and JavaScript.

A website is a collection of related web pages. These

usually have a common name in their URL and are stored
together on a web server.

95 COMPUTER SCIENCE FOR LEAVING CERTIFICATE

HTML and CSS CHAPTER 4

Web server HTML

A web server is a computer that is dedicated to storing
HTML is used for describing and structuring the content in
resources such as web pages and their content. It is an
a web page. Each web page is created using, at a minimum,
Internet-connected computer that can receive a request
a HTML file containing HTML code.
for a web page sent by a web browser.

Web servers deliver web pages to browsers and other HTML IDEs
software systems (over the Internet) using http. Servers HTML files are created and saved in plain text format. This
are called servers because they provide services to other means that they can be created in almost any program that
computers. can be used to create a text file, e.g., Notepad.

You can simply start writing HTML in Notepad (or similar),

Test yourself save the document with the extension . html and then
view it from any web browser by opening the file.
I. What does HTML stand for?
However, using basic text editors can have some
2. What does CSS stand for?
drawbacks. In general, most people use an IDE which can
3. What is the difference between HTML and CSS?
make the development process easier. For example,
4. What is the function of JavaScript in a web page? Code.org’s Web Lab and Glitch allow you to create a web
5. What is a web page? page and see the output in real-time.

6. How can I find a web page?

Code.org and Glitch (among others) can also host your
7. What is a web browser? website on their web server and provide you with a URL
8. Using a diagram, describe the two main functions of to access the website from a web browser.
a web browser.
There are many other free IDEs, such as:
9. What is a web server?
• Visual Studio Code (works with all operating systems)
10. What protocol does a web browser and a server
use to communicate? • Notepad++ (Windows)
• TextWrangier (Mac OS X)
1 1. What is the default web page returned when you
request a URL (if no other path is specified)?
Your teacher will help you to select the most appropriate
IDE. In this chapter, we will just show the code and the
web page output.

Tasks
HTML basics
1. Research the history of HTML. Write a short
HTML describes the layout, format and content of a web
account summarising your findings. Include the
following points: page, i.e., it allows you to control and modify its
appearance.
• Who invented it

• Where and when it was invented Unlike Python, HTML is not a programming language, it is a
markup language. A markup language is a computer
• Why it was invented
language that uses “tags” (instead of code blocks) to define
elements within a document
2. There was no such thing as CSS when HTML was
invented. Research the history of CSS. Outline Tags
three points about its development.
Tags tell the web browser how to display the content that
sits inside the tags. We can think of tags and content as
two separate components of a web page.

First, let’s create a web page without tags. We can then

understand why we need them.

GOLDEN KEY 96
CHAPTER 4 HTML and CSS

Open your IDE and create a new file. Enter something Using this example, we will now explain each of the aspects
similar to: of tags in more detail.

I love HTML
Element
A web browser displays the web page as follows:
A HTML element consists of the opening tag, the content
| I love HTML inside the tag that you want to display, and the closing tag.

This text is displayed without any formatting. Content

The text that the tag acts upon.
Remember, a web page is a HTML document and must be
written using a language called HTML. The file above simply
Opening tag
has content, but no HTML code.
Each tag needs to be placed inside the anchor o brackets.
The content is the information that you want to display, In the example above, the tag is b for bold. The < marks
but to format it, you also need to add HTML code to the the beginning of the tag name and the > marks the end of
file. This tells the web browser how you want that content the tag name.
displayed on the screen. Without the HTML code, the web
browser does not know how to display your content, so it Closing tag
displays it with no formatting.
in our example, the <b> tag that has been opened, must be
closed so that the web browser knows when to stop a
The formatting is done using HTML “tags”.
particular action. The </b> tag tells the web browser that
the action of bolding the word is complete.
Tag structure and rules
In general, a HTML element consists of an opening tag and The closing tag should be the same as the opening tag so
a closing tag, with content in between them. Some rules for that the browser knows which tag is terminating. However,
writing HTML tags are: it must also include a forward slash (/).

• Tags are always surrounded by anchor brackets, like

this: <tag goes here>. (Use greater than and less
Void elements
than symbols for the anchor brackets). A void element is one that does not have content. This
• All tags should be written in lowercase. means that it does not need an opening and a closing tag.
• You need to tell a web browser when the action of a
tag is finished. This means that most tags come in pairs Instead, the single tag "self-closes”. For example: <br/> or
with an opening tag and a closing tag. <img/>. These tags do not surround any text, so they
• The closing tag always starts with a forward slash /. self-close. Note that both <br> and <br/> are valid
HTML elements as the use of the forward slash / is
For example, to display text in bold on a web page, you optional, The tag <br/> represents a line break (like
place it inside the bold <b> tags: pressing the enter key in a word document).

I <b>love</b> HTML
The void element <img/> is used to display an image.
We will look at this element later in the chapter.
This displays in a web browser as:

I love HTML HTML web page structure and rules

The HTML code for the basic structure of a web page is as
The structure of the <b> tag applies to all tags. In general,
follows:
it looks like this:
<!DOCTYPE html>
Element
<html>
<head>
Content </head>
<body>
Hello World <br/>
</body>
Opening tag Closing tag </html>

97 COMPUTER SCIENCE FDR LEAVING CERTIFICATE

HTML and CSS CHAPTER 4

All HTML 5 files require the following: Heading elements

<! DOCTYPE html>, <html>, <head>, and <body>. These elements define a heading level for a section of the
web page. The elements belonging to this category
The table describes each of these in a little more detail. are <hl> to <h6>. Here is an example:
<body>
Element Description <hl>This is a hl heading</hl>
<!DOCTYPE html> The first line of every HTML <h2>This is a h2 heading</h2>
file must be the DOCTYPE <h3>This is a h3 heading</h3>
declaration. This declaration
<h4>This is a h4 heading</h4>
defines the document to be
<h5>This is a h5 heading</h5>
<h6>This is a h6 heading</h6>
HTML5. This declaration is
</body>
not a HTML element.
<html></html> The <html> element is This code displays in a web browser as follows:
known as the root element.
<head></head> The <head> element
contains the web page This is a hl heading
metadata (data about data)
and is located between the
<html> opening tag and the
<body> opening tag.
This is a h2 heading
<body></body> These tags enclose the body
of the web page. This is the
This is a h3 heading
content that will be visible in
the web browser. This is a h4 heading
All of your HTML content
needs to be contained within
these tags.
This is a h5 heading

This is a h6 heading
In the rest of the examples in this chapter, all of the
HTML code is written in between the <body></body>
tags, unless otherwise stated. For ease of reading, the other
Nested elements
tags are not included. You will need to add them to each
web page when you create it. An element can be nested inside another element, for
example:

Common basic HTML elements <i>I <b>love</b> HTML</i>

The following table lists some basic HTML elements.
This displays in a web browser as follows:

Element Use I love HTML

<hlx/hl> Heading text can vary from hl to
All of the content “I love HTML" is in italics, but only the
h6.
“love” text is in bold. It is analogous to using brackets in
<px/p> Paragraph text BIMDAS in maths.

<b></b> Bold text

Italics
<ix/i> Italicised text

<ux/u> Underlined text

(I (love) HTML)
<br/> A line break (newline) ’--- !--- '
<hr/> Bold
(horizontal rule or line) Nested elements

GOLDEN KEY 98
CHAPTER 4 HTML and CSS

Block-level and inline elements HTML special characters

Block-level elements There are some useful special characters in HTML. These
Block-level elements force a new line by default: display various symbols and always begin with the
ampersand symbol (&). Some examples of special
<hl>Block Level l</hl>
characters are listed below.
<hl>Block Level 2</hl>

This displays as follows in a web browser: HTML Character

&nbsp; Space (useful if you need several)
Block Level 1
seuro; €

Block Level 2 &frac14; 4

. &frac34; %

Notice that for each element, a new line is started. This

concept is similar to the behaviour of a Python print ( ) &times; X

function. &divide; —

&bull; •
Inline elements
Inline elements display on the same line by default and can
occur within a block-level element A block-level element Metadata
however, cannot be created inside an inline element. Before we move onto the next set of HTML elements, we
Additionally, inline elements can contain many nested inline will look at metadata. We mentioned previously that
elements. We have already seen a nested inline element in metadata is located inside the <head> element. This
this example: metadata includes information about the web page’s title,
<i>I <b>love</b> HTML</i> styles, scripts, and the character set of the web page. It
typically contains, at a minimum, the following two nested
Let’s look at the following inline elements: elements: <title> and <meta>.

<i>Inline K/i>
<i>Inline 2</i> The <title> element
As its name suggests, this element defines the title for the
This displays as follows in a web browser: web page. For example:

Inline 1 Inline 2 <title>Web page Title</title>

This title appears in the title bar or tab of the web

There can be a number of inline elements, one after the browser.
other, but the content will all be displayed on the one line.
• Web Page Title X
The table below shows which common HTML elements
are block-level, and which are inline.
If you accidentally leave this element out, your web page
Element Block-level or inline title might display as "Untitled Document” or similar.

<hlx/hl> Block-level
HTML attributes
<P></p> Block-level
A HTML attribute provides additional information about a
<b></b> Inline HTML element.
<ix/i> Inline
<ux/u> Attributes will be used in the example of a <meta> tag:
Inline
<br/> <meta name="author"/>
Inline (however, this element adds a
new line, so it looks as if it behaves
like a block-level element)
name = “value”
<hr/> Block-level

99 COMPUTER SCIENCE FOR LEAVIN G CERTIFICATE !

HTML and CSS CHAPTER 4

The attribute in this case is name, and the value that the
Test yourself
attribute is set to is " author".
5. Do all HTML elements need an opening and closing
Attributes are always placed inside the opening tag. tag?

6. List five basic HTML elements and say what each

element does.
The <meta> element
This element defines the metadata of the web page, and it 7. What is a void element?
is created using the following name="value" attribute. It 8. Describe how each of the following web page
should at a minimum specify the character set: elements is used;

<meta charset="UTF-8"/> <!DOCTYPE html>

<html></html>
<head></head>
name = “value” <body></body>
9. Give an example of a nested element.
This tells the web browser that the web page encodes
10. What is the difference between a block-level
characters according to UTF-8 (Unicode Transformation
element and an inline element?
Format - 8 bit). See Chapter 7 for more on this.
11. Can a block-level element contain an inline
element!
The meta tag allows you to set additional metadata.
12. Can an inline element contain a block-level
The author of the web page can be specified: element!

<meta name="author" content="Jane 13. What is metadata?

Brown"/> I4. Why is metadata added to a web page?
15. Which metadata elements are typically included
The description of the web page can be specified:
within the <head> element on a web page?
<meta name="description" content="This 16. What is a HTML attribute?
is my first web page"/>
17. Provide an example of a HTML attribute, and label
the name and the value.
We can set the keywords for a search engine (where each
keyword is separated by a comma): 18. How is a comment written in HTML?

<meta name="keywords" content="First web

page, HTML, Jane Brown"/>

Tasks
Metadata is not included in the remaining examples in this
chapter, unless explicitly needed. 1. Create a web page that displays the text “Hello
World!”. Ensure that the page has the required
page elements: <! DOCTYPE html>, <html>,
Commenting in HTML <head> and <body>.
Just as in Python, comments are added to make the source
code easier to understand. The web browser ignores 2. Modify the page from Task 1 to include two
comments and does not display them. A comment in heading elements and a paragraph element, with the
HTML looks like this: text of your choice.

<!— This is a comment in HTML —>

3. In the paragraph element from Task 2, modify some
of the text to include an underlined section of text
and section of text in bold.
Test yourself
4. Add metadata to the web page from Task 3, to
I. In what format are HTML files saved? include a title, an author and some search engine
keywords.
2. What is a markup language?
3. What is a tag in HTML? 5. Open the web page in a browser. Look at the
source code to see if your metadata is present (in
4. What is a HTML element?
Chrome use Ctrl + U).

GOLDEN KEY 100

CHAPTER 4 HTML and CSS

Navigating to other web pages using HTML sections

hyperlinks A <div> element is referred to as a section in a HTML
Now that we have created a single web page, we will look document. It is a block-level element with no style applied
at how to hyperlink two web pages together. This is by default. These are useful if you wish to change style in a
typically done when a user clicks on a hyperlink. To create section within the web page and do not want the default
a hyperlink, we will use the anchor <a> element. style. We will cover style using CSS later in this chapter,
but all you need to know now is that a <div> element is
In its simplest form, a hyperlink displays as underlined text simply an unstyled block-level element.
that allows you to navigate to another URL, when clicked;
HTML lists
I am a hyperlink
There are a number of list elements that are useful such as:
• <ul> for unordered lists of items.
We need to define the URL of the hyperlinked web page. • <ol> for ordered lists of items (e.g., numbered lists).
To do this we need to use HTML attributes.
List items for both of the above types of list are written
The attribute name for a hyperlink is href. The value, in surrounded by <li> and </li> tags.
this case, is the URL of the web page that you want the
user to go to if they click on the hyperlink. Here is an Let’s look at some examples. First, we will use an
example with a blank attribute value: unordered list of all of the Leaving Certificate Computer
<a href=" ">I am a hyperlink</a> Science applied learning tasks:
<ul>
There are two types of href URLs, an absolute URL and a <li>ALTl</li>
relative URL. <li>ALT2</li>
<li>ALT3</li>
An absolute URL takes the user to another URL using the <li>ALT4</li>
full address. This can be on the current web server or </ul>
located on another web server.
This displays as follows in a web browser:
The following example takes you to the computer-
science-f or-leaving-cert web page on the • ALTI
. ALT2
goldenkey . ie web server:
• ALT3
<a href="https://goldenkey.ie/computer- • ALT4
science-for-leaving-cert/">I am a
hyperlink</a>
HTML indentation
A relative URL does not use the full address. It assumes Notice the indentation in the last example. This helps us to
that the page that you are accessing is located on the same see the multiple nested HTML elements in the code. We
site. have multiple <li> elements within a <ul> element. We
could have written the code for the unordered list as
Let’s assume that you have created two web pages, one follows:
called index.html and the second called
<ul><li>ALTl</li><li>ALT2</li><li>ALT3</
secondPage. html. If you want to create a hyperlink
li><li>ALT4</li></ul>
from the secondPage . html to index. html you
could use the following relative URL:
You do not have to use indentation in HTML. However, it
<a href="index.html">I am a is good practice as it makes the code easier to read and
hyperlink</a> understand. It is also much easier to remember to include a
closing tag if you are using indentation.
Additional HTML elements
Next, we will use an ordered list of all of the Leaving
This section covers three additional HTML elements that
Certificate Computer Science applied learning tasks. Notice
are useful when developing web pages. These elements are
that we only change the outer tag.
used to define sections, lists and tables.

101 COMPUTER SCIENCE FOR LEAVING CERTIFICATE

HTML and CSS CHAPTER 4

The ordered list still requires the <li> tags: We can also add table header cells to the standard table
<ol> cells:
<li>ALTl</li> • <thx/th> is used for a header table cell. By default,
<li>ALT2</li> the text in these cells is in bold and is centred.
<li>ALT3</li>
• <td></td> is used for a standard table cell. By
<li>ALT4</li>
default, the text in these cells is regular and left-
</ol>
aligned.

This displays as follows in a web browser:

The structure of the HTML code for a table looks like this:

1. ALTI <table>
2.ALT2 <tr>
3.ALT3 <th></th>
4. ALT4 <th></th>

HTML tables <td></td>

A <table> element allows content to be arranged in <td></td>
tabular format. You can hard-code values into the table as
shown in the following example. Later on (in Chapter 10),
we will use JavaScript to populate a table with data. <tdx/td>
<tdx/td>

Tables are created using the <table> tags:

<table> <tdx/td>
</table> <td></td>

A table has multiple nested HTML elements, specifically

related to the table element. These are rows and cells. You <td></td>
can think of cells as columns. <td></td>
</tr>
The tags required for each row of the table are <tr> </table>
</tr>. Let’s add five rows to the table:
Now we can add our table data:
<table>
<tr> <table>
</tr> <tr>
<tr> <th>Province</th>
</tr> <th>Number of Counties</th>
<tr>
</tr>
<tr> <td>Connacht</td>
</tr> <td>5</td>
<tr> </tr>
</tr> <tr>
</table> <td>Leinster</td>
<td>12</td>
For each row, we are going to add two cells (columns). In
this example, we want to display the four (geographical)
provinces of Ireland in the first column, and the number of <td>Munster</td>
counties in each province in the second. If we wish to add <td>6</td>
further information, e.g., the population of the province, we
can add more cells to each row.
<td>Ulster</td>
<td>9</td>
</tr>
</table>

GOLDEN KEY 102

CHAPTER 4 HTML and CSS

This displays as follows in a web browser: There is a problem with the display here. An image displays
in its original size (pixel width and pixel height). If it is a
Province Number of Counties very high-quality image, it may be larger than the screen.
Connacht 5 This is exacerbated if you view it on a mobile device.
Leinster 12
Munster 6 We can fix this using the width attribute and/or the
Ulster 9 height attribute. If you only use one of these attributes
(as in the following example), the aspect ratio (ratio of the
width to the height) of the image is preserved. If you use
We can improve the presentation of the table by adding a
both attributes, this may alter the aspect ratio.
table border and a table caption. To do this, we add the
following elements just after the <table> tag at the top
For either of these attributes (width and height), you
of the previous example:
can specify two values, pixel, or percentage.
<table border>
<caption> If you specify a pixel size, the size is static (it will not
Provinces of Ireland change if the screen size changes. It will display the same
</caption> pixel width (or height) on a desktop screen and a mobile
device. For example:
This displays as follows in a web browser:
<img src="CSinc-01.png" width="200px">
Provinces of Ireland
The image displays like this in a web browser, with a fixed
Province Number of Counties
—-------- width of 200 pixels:
Connacht .5—= .-----------------.__________
Leinster 12
Munster : 6
Ulster 9
Computer Science Inclusive

Images If you specify a percentage, the size is dynamic. It will

Images are used in the majority of web pages. They always be the percentage width of the screen of the device:
improve the user experience visually. An image element is a <img src="CSinc-01 -png" width="100%">
void element, it simply displays an image:
<img> The image displays like this in a web browser:

For the image element, you need to specify the source of

the image, using the sre attribute. This is very similar to
using a href attribute. You can specify an absolute
location (one on the Internet using the URL of the image
or a local file path), for example:

<img src="http: //csinc. ie/Images/CSinc- Computer Science Inclusive

01.png">

This is useful for responsive web pages (web pages that

You can also specify a relative location, stored locally
adapt to screen size). Just as the HTML image size adapts
(perhaps in the same folder), for example:
to the size of the screen, so do many other HTML
<img src="CSinc-01.png"> elements.

Both images display like this in a web browser:

103 COMPUTER SCIENCE FOR LEAVING CERTIFICATE

HTML and CSS CHAPTER 4

The following image shows what an image using the width MIME is a standard that indicates the nature and format of
attribute with a value of 100%, might look like on different a file. In this case, the MIME-type is a video with format
devices. .mp4.

Some common MIME-types that can be used for video are

listed below. Not all formats are supported by all browsers.
There are many more types, but these are the only file
types supported by HTML.

MIME-type Description

video/mp4 Recommended. Common video file

type, supported by all web browsers
and recommended by many of the
video hosting sites.
Video and audio
video/webm A format developed by Mozilla and
Video element
others. Not supported in Internet
Using a <video> HTML element is similar to using an Explorer and Safari web browsers.
image element. In this example, we will look at using a
relative file location (locally stored) and in the next section video/egg A format developed by Xipha.org.
we will use an absolute URL location from YouTube. Not supported in Internet Explorer
and Safari web browsers.
The video file is called CSinc_Camp . mp4 and it is
stored in the same folder as the web page. Audio element
This code sample shows how to use an audio file in a web
The HTML code is:
page. The HTML element structure and attributes for the
<video width="100%" controls <audio> element are almost identical to that for a
<source src="CSinc_Camp.mp4" <video> element:
type="video/mp4">
</video> <audio controls>
<source src="myMusic .mp3"
type="video/mpeg">
The display should look like this:
</audio>

The controls attribute allows the audio to appear with

controls such as play, pause and volume controls.

The source void element is nested inside the <audio>

<Computing Camps/> element. The src attribute again specifies the URL of the
audio file, either absolute, or relative. The type attribute
► 0:0410:53 • zz •
specifies the MIME-type. In this case it is a .mpeg file type
(which is an mp3).

The <video> element uses the width and/or height Additional attributes can be added for both audio and
attributes to ensure that the video displays correctly on the video, but those described here are sufficient to allow you
screen of the device. The controls attribute provides to embed locally stored basic video and audio content into
video controls such as play, pause and volume. a HTML file.

The source void element is nested inside the video

element. The src attribute specifies the URL, either
absolute or relative of the video file. The type attribute
specifies the MIME-type (Multipurpose Internet Mail
Extensions).

GOLDEN KEY 104

CHAPTER 4 HTML and CSS

Some common media types that can be used for audio are There are many ways to share a video, for example using
listed in the following table. Facebook or Twitter. However, we will select the “Embed”
option.
MIME-type Description

audio/mpeg Often referred to as mp3.

Recommended. Common audio file
type, supported by all web browsers
and recommended by many of the
00000
Embed Facebook Twitter Blogger reddit Tumblr

podcasting/music hosting sites.

https. youtu.be/wUn05hdkhjM COPY
audio/wav A format developed by IBM and
Microsoft. Supported by all web
browsers. The following screen is then displayed, showing a sample of
audio/ogg the code for embedding the video and some options, for
A format developed by Xipha.org.
example, to allow you to show (or not show) player
Not supported in Internet Explorer
controls.
and Safari web browsers.

Embed Video X
Embedding
YouTube video
<iframe width=’ '560" height="315*
Sometimes the video that you want for a website is already
src="https: / /www. youtube. com/embed/
hosted on a video hosting service such as YouTube. The
wUn05hdkhjM" frameborder="0"
video could belong to a third party or you may have
allow="accelerometer; autoplay;
uploaded your own. YouTube and many other video
encrypted-media; gyroscope;
hosting sites allow you to embed a video that they host
picture-in-picture’'
into your website.
allowfullscreens«/iframe»
There are benefits to using a hosted video. Video files can • Start at
be very large, so using a hosted video saves storage space
on your web server. Another advantage is that there may
EMBED OPTIONS
already be an appropriate video for your purpose created
by someone else. Using this video can save you the effort
Q Show player controls.
of creating your own.
• Enable privacy-enhanced mode. Q
Let’s have a look at an example of embedding a YouTube
video into a web page. COPY

You Tube
This code is a HTML element that is required to embed the
video into your web page. Click the copy button and it will
copy the element and all of its attributes.

First, find the video that you would like to embed, then The HTML element above is an <if rame>. These are
select the share button, which is located under the video used to embed another HTML document into a web page.
(towards the bottom right corner). In this case, it is a video from YouTube:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/wUnO5
hdkhjM" frameborder="0"
allow="accelerometer; autoplay;
encrypted-media; gyroscope; picture-in-
it 31K 411.5K - SHARE = SAVE picture " allowfullscreenx/iframe>

You can modify some attributes, such as the width and

SUBSCRIBE
height to change how the video is displayed.

105 COMPUTER SCIENCE FOR LEAVING CERTIFICATE

HTML and CSS CHAPTER 4

micro:bit When you click on “Publish project”, the window below

The <iframe> element can also be used to embed appears. If you click on the “expand” icon beside “Embed”,
programming projects into a web page. This is useful for you can access the HTML code for embedding the link to
digital portfolios and project demonstrations as it allows your microrbit project. This is very similar to the YouTube
you to share the link to your project with teachers or example where you copy the <if rame> HTML element.
friends.
A useful feature of the MakeCode IDE, is that it allows you
This option is available both with Scratch and the micro:bit. to share individual elements of your project: the code only,
(Chapter 2 covers the micro:bit.) Here, we will look at a a simulator only, or the editor. This is perfect for
micro:bit example. developing a digital portfolio as you can present different
aspects of the project on different areas of a web page (or
Let’s say that we have finished creating a microrbit project, on different web pages).
which has some basic code.

Gomicro:bit # HOT < SOT.

Test yourself
iil Besi

© Ipat
I. What attribute do you use to create a hyperlink
6 Vusic
inside an anchor <a> tag?
• Led
2. What is the difference between a relative URL and
ill Radio
an absolute URL for image or video sources?
C Loops

x Logie 3. In the context of HTML lists, what do the following

s* = Vonobies tags represent?
= Math
• <ol></ol>
“ Advanced
• <ulx/ul>
• <li></li>
4. Why should we use indentation in HTML?
To embed the project, click on the “Share” option at the 5. When creating a HTML table, explain what the
following tags are used for;

• <table>
• <tr>
• <th>
• <td>
6. The following two HTML code examples insert an
image into a web page. Explain, using a diagram, the
difference between the two images when they are
displayed on the web page:
You next have to create a name for the project, for • <img src="CSinc-01.png"
example, “HTML_Test”, and then publish the project. width="200px">
• <img src="CSinc-01.png"
j Share Project O width="80%">

I-------------------------- . — 7. In the <video> and <audio> opening tags, what

! HTML_Test is the controls attribute used for?
You need T pubalityour project to share i o embed i in other wet pages You acktowledge harvin consent 8. What attributes should we expect to see inside the
to publish this project
<source> tag?
9. What does MIME-type stand for? What does it
Publish project =
indicate?
10. State a benefit of using a hosted video on a website.
I I. What is an <if rame> element used for?

GOLDEN KEY 106

CHAPTER 4 HTML and CSS

Test yourself Task

12. Why might it be useful to embed a micro:bit 3. Create a website that is a digital portfolio for a
project in a digital portfolio? project that you have completed using the micro:bit
(this could be your ALT4).
13. Which aspects of a project does the MakeCode IDE
allow you to share individually?

Task

I. Create a website that will be used as a healthcare

information site for COVID-19. The website must
have three web pages, and each page should be The project website should have four web pages:
linked to the other two web pages using hyperlinks.
• The first web page should describe the project,
The first page should have general information and it’s objective.
about the COVID-19 virus. The second page should • The second web page should explain the design
contain a list of the recognised symptoms with at and implementation stages. Use images to
least two images. illustrate the process.
• The third web page should have the embedded
micro:bit project. Split this into two, with the
code and emulator included separately.
Describe each part.
• The final web page contains the summary and
your conclusions. Mention here how you tested
your code, and how well the project met its
objective.
The third page should contain HSE contact numbers
Each web page should be linked to the other web
in case a user suspects that they have the virus.
pages using hyperlinks.

2. Create a website for displaying the top 10 chart

songs (of your choice). Interactive elements
The website should have two web pages. On the Some HTML elements are interactive. They are used to
first, there should be a table with three columns. create interactive controls to accept data or instructions
The first column shows the number of the song in from the user. In Chapter 10 we will use these elements
the charts (1, 2, 3... etc), the second column with JavaScript to control the interactive behaviour within a
contains the song name and the third column shows
web page.
the artist’s name.

Buttons
A <button> element is a clickable element. We generally

TOP 10 use buttons when we want to allow a user to complete or

start an action, for example, when submitting data in a

HOTrS form.

Buttons are created using the button tags:

<button>Press me</button>
The second web page should have the YouTube
video (or any other suitable video service) This displays as follows in a web browser:
embedded for each of the 10 songs. Use
appropriate HTML for the headings above each | Press me
embedded video.
Each web page should be linked to the other using
hyperlinks.

107 COMPUTER SCIENCE FOR LEAVING CERTIFICATE

HTML and CSS CHAPTER 4

Input
attribute in web
An <input> element is a void HTML element. It is used values
to allow a user to enter alphanumeric (textual or numeric)
values on a website. You will have seen this many times
before when filling in online forms. Once the data is
entered into the text box, we normally click a button to
submit the data. There are many kinds of input tags, each
representing a different type of input.

To create a basic input, type:

<input>

This displays as follows in a web browser. You can type in

the box:

Some very useful attributes can be used with input

elements. Let’s look at text-based attributes first. We can
set the type attribute to text:
<input type="text">

We can add some additional attributes with text-based

inputs, for example, text for a placeholder:

cinput type="text" placeholder^' Please

enter your name">

This displays as follows in a web browser:

[please enter your name

As soon as the user starts to enter data in the box, the

placeholder text disappears.

Another attribute is readonly. The readonly attribute

does not require a value.
<input type="text" readonly>

This means that a user cannot enter any values into the
<input> element, but it can be used as an output field
(see Chapter 10).

There are some very useful values for the type attribute,
which can be used to improve the user experience. A
selection of these can be seen in the following table.

Further examples can be found at www.w3schools.com.

GOLDEN KEY U 108

CHAPTER 4 HTML and CSS

Text area The user selects the province that they live in:
A <textarea> element is similar to an <input> <select>
element However, it allows a multi-line text input and it is <option value="Connacht">Connacht
not a void element. The text area can hold an unlimited </option>
number of characters: soption value="Leinster">Leinster
</option>
<textarea>< /textarea>
<option value="Munster">Munster
</option>
This displays as follows in a web browser:
<option value="Ulster ">Ulster
</option>
</select>

This displays as follows in a web browser:

If you stretch the text area box in the web browser, and
also if you enter several lines, a vertical scroll bar appears | Connacht v
automatically. Connacht
Leinster
We can specify the number of rows and the number of Munster
columns using the rows and cols attributes: Ulster

<textarea rows="10" cols="10">

</textarea> The <select> element defines the dropdown list. The
nested HTML element <option> is used for generating
This displays as follows in a web browser: each item in the dropdown list, for example:
coption value="2">
I Love CS Leinster
I Love CS </option>
I Love CS
I Love CS The attribute in the opening <option> tag value=" 2 "
I Love CS is data that will be extracted when we use JavaScript but
I Love CS the content between <option> tag is what the user sees.
I Love CS
I Love CS This allows us to display text differently to the value that
I Love CS the text represents. Here is an example:
I Love CS
<select>
<option value="0">
Note that a “row” is a line of text, and a “column” is one Please select a
character or space. We have entered some text to province/ option>
illustrate the appearance of the scroll bar, if more than ten <option value="1">
rows of text are entered. Also note that the width is ten Connacht</option>
“columns” or characters wide. <option value="2">
Leins ter</option>
<option value="3">
Dropdown list
Munster</ option>
A <select> element is used for a dropdown list. These <option value="4">
HTML elements are useful for allowing a user to select one Ulster</option>
of several specific values. There are several ways to </select>
accomplish this, one of which we will illustrate using the
following example. This displays as follows in a web browser:

i Please select a province

Please select a province
Connacht
Leinster
Munster
Ulster

109 COMPUTER SCIENCE FOR LEAVING CERTIFICATE

HTML and CSS CHAPTER 4

The values that are returned when we use JavaScript, are CSS
just the numbers, 0, 1, 2 etc. This would make the option
chosen easier to use with if statements. introduction to CSS
The second language needed to create well-designed web
We included an initial prompt “Please select a province". If pages is called Cascading Style Sheets (CSS).
the user does not choose a province, the value returned is
0. We could add some logic to inform the user that this is CSS provides the instructions for presenting the web page
not a valid option. We will cover retrieving the values from content that you have created in HTML. It is designed to
interactive HTML elements in Chapter 10. enable the separation of content from the presentation of
that content.
Test yourself
CSS was first proposed by Hakon Wium Lie in 1994 while
I. What are interactive HTML elements used for? he was working with Tim Berners-Lee, (the inventor of the
World Wide Web, see Chapter 6). He then created CSS in
2. What is a <button> element used for?
conjunction with Bert Bos around 1996.
3. Name three values that can be used in an
<input> element for the attribute type.
Describe what each value does for the element, and
sketch a picture of what it will look like for the
user.
4. What do the attributes readonly and
placeholder do for the <input> element?
5. What is the difference between a <textarea>
and an <input> element, from a user’s point of
view?
6. Explain how you would use the <select>
Hakon Wium Lie
element and the nested HTML element <option>
in the HTML code for a dropdown list.
While HTML specifies the content and structure of your
web page, CSS defines its visual presentation. Presentation
details include colours, borders, margins, fonts etc. This is
illustrated in the graphic below.
Tasks

I. Look up all the possible attributes of the interactive

element <input> on the Internet and experiment
with them.

2. Create a web page for a school enrolment system

that has multiple interactive elements.
Select appropriate HTML headings, content, and
interactive HTML elements to emulate a web page
input form. CSS also provides flexibility when specifying how a web
Design and create appropriate HTML elements to page is viewed on different devices, such as desktop
read in the following: computers and mobile phones.
• Name
There are three ways to add CSS to a HTML document:
• Age
• Address • Inline - using style attributes inside HTML elements.
• Date of birth • internal - using the <style> element in the
• County <head> section.
• Email address • External - using a <link> element to use an
external CSS file.
Finally, add a button to submit.
Other than minor surrounding structure or placement
differences, the CSS itself is identical for each method.

GOLDEN KEY 110

CHAPTER 4 HTML and CSS

Inline CSS Values

Style attribute Each property must be given a value. In the previous
As with many previous HTML element attributes, CSS can example, the colour value was red:
be added using the style attribute. In the following color:red;
example, let's look at a <h4> HTML element with text:
As with property names, you must use a valid value. You
<h4 style="color:red;">
can get a full list of valid CSS values from
I am HTML with style!
</h4> https://www.w3schools.com/css/.

This displays as follows in a web browser: Multiple CSS declarations

The style attribute allows you to apply multiple CSS
I am HTML with style! declarations to a HTML element. To do this we just add
other CSS declarations to the attribute.

The style applied in the above example means that all of

Remember that each CSS declaration needs a semicolon at
the HTML content of the <h4> element is displayed in red.
the end to signify that it is completed. Let’s look at an
We can apply a style in this way to many more HTML
example:
elements.
<h4 style="color:red; font-size:4Opx;
The text inside the style attribute is called the CSS I am HTML with style!
declaration. </h4>

This displays as follows in a web browser;

CSS declaration
A CSS declaration consists of a property and a value. The
structure of a declaration is shown below.
I am HTML with style!
Declaration Some properties allow multiple values to be specified in
one declaration. One way of doing this is to use a comma
color:red; as a separator. The comma tells the web browser that this
is an ordered list of choices for one CSS property. For
example:
Property Value
<h4 style="font-family:Arial, sans-
Structure of a CSS declaration
serif; ">
I am HTML with style!
A semicolon is placed at the end of the declaration.
</h4>

Properties
This displays as follows in a web browser:
A property is the name of the stylistic feature that you
| ( am HTML with style!
want to specify. For example: color, background-color, or
font-size:
Here the values are applied in order. The web browser
color:red;
checks whether the first font (Arial) is installed on the
device. If it is not, then it finds out whether another sans-
The US spelling of words has been agreed as the standard,
serif font is available. If no sans serif fonts are available, the
which means that color is used instead of colour. You must
web browser uses the default font on the device.
use a valid property name. If you do not, then the web
browser will simply ignore that styling.
Examples of CSS properties
There are over 500 distinct CSS properties. You can find a While it is not possible to go through all of the CSS
full list of them here: https://www.w3schools.com/css/. properties, the following tables provide a quick guide to
some that you may find useful. The first table provides
examples of styles that apply to the HTML content. The
second table provides examples of styles that apply to the
HTML element.

ill _________________________________________________ COMPUTER SCIENCE FOR LEAVING CERTIFICATE

HTML and CSS CHAPTER 4

"■ ........ -----

CSS properties that apply to HTML content CSS properties that apply to HTML element

Property Description Example values Property Description Example values

।
color Sets the black border- Sets the width 12px etc...
colour of the silver width of the border
text. red itself.
green
border- Sets the colour black
blue
color of the border. silver
white
red
(and more)
green
font-size Sets the font 12px blue
size of text. 50% white
1.2em (and more)
font- Sets the font arial border- Sets the radius 2px
family style, called times new roman radius of the corners
the family. serif of the HTML Or multiple using
sans-serif element. spacing:
cursive

font­ Changes the normal 2px 5px lOpx

style italic 20px
face of the
font. oblique
Top-left =
text- Aligns the left 2px
align text within right Top-right =
the HTML center 5px
element. justify Bottom-right
i
= lOpx
Bottom-left =
CSS properties that apply to HTML element
2 Opx
Property Description Example values
margin Sets the 2px
background­ Sets the colour black spacing around
color of the silver the HTML Or multiple using
background of red element, spacing:
the HTML green outside any
element. If it is blue borders. 2px 5px lOpx
an inline HTML white 2 Opx
element, it is (and more)
Top = 2px
just the width
Right = 5px
of the content.
Bottom = lOpx
If it is a block­
Left = 20px
level element it
will apply for padding Sets the 2px
the full width spacing around
of the page or the HTML Or multiple using
parent element. content inside spacing:
the HTML
border­ Sets the border none
element, inside 2px 5px lOpx
style style of the dotted
any borders. 2 Opx
HTML element. dashed
solid
Top = 2px
double
Right = 5px
(and more)
1 Bottom = lOpx
Left = 2 Opx
! . _.....................- J _____________

GOLDEN KEY 112

CHAPTER 4 HTML and CSS

The difference between border-width, margin, and padding Hex Calculator

can sometimes be difficult to remember. To help with this
#9 f338
we can visualise the differences using a CSS HTML element
rgb(217, 243, ss)
box model.
hl 1(68, sox, 50%)

Margin Border Padding Content

You can change the red, green, or blue (RGB) colour

components to make any colour that you want. Then you
can set the CSS color property to this value. You just
need to put the “#” symbol before it:
<div style="background-color:#d9f33a;">
CSS HTML element box model I am HTML with style!
</div>
Let’s look at an example combining multiple CSS
declarations from the last two tables: This displays as follows in a web browser:
<div style="font-family:arial; font-
size:30px; color:blue; border- I am HTML with style!
style: solid; border-color:black; border-
width:lOpx; padding:lOpx; border-
radius:Opx 20px 60px lOpx; background­ For more on hexadecimal numbers, see Chapter 7.
color : yellow; ”>
I am HTML with style!
Internal CSS
</div>
Before we look at examples of internal CSS, we should ask
This displays as follows in a web browser; why this may be useful. Let’s look at an example where
there are many CSS declarations:

I am HTML with style! <div style="font-family:arial; font-

size:30px; color:blue; border­
style: solid; border-color:black; border-
width:lOpx; padding:lOpx; border­
It can be useful to combine CSS declarations in this way,
radius : Opx 20px 6Opx lOpx; background­
for example, to display hyperlinks.
color : yellow; ">
I am HTML with style!
Hexadecimal colours </div>
You may have noticed that the colour choices that we have
used so far were not extensive. We were restricted to This code is not complicated to write, but it becomes
limited colours such as “blue”. There are of course many cumbersome and difficult to read as more and more
shades of blue. declarations are used.

To address this CSS allows you to use hexadecimal colours Another factor is the re-use of CSS. If two or more
or “hex colours” for short This allows you to select any elements have the same CSS, we need to replicate the
colour or shade. There are many online “colour code. If we applied it to 10 elements, and we wanted to
calculators” but let’s look at the following example from change say one property value, we would have to change it
w3schools.com. in all 10 elements. This could lead to errors.

Using internal CSS allows us to avoid having multiple CSS

declarations in a HTML element. The CSS declarations are
exactly the same, it is only their location and structure that
changes.

113 COMPUTER SCIENCE FOR LEAVING CERTIFICATE

HTML and CSS CHAPTER 4

To do this we use the <style> element, which needs to </style>

be located inside the <head> element </head>
<body>
<!DOCTYPE html>
<hl>
<html>
I am HTML with style!
<head>
</hl>
<style>
</body>
CSS goes here
</html>
</style>
</head>
This displays as follows in a web browser:
<body>
<hl>
I am HTML with style! I am HTML with style!
</hl>
</body>
</html> In the following examples, we will not show the entire web
page code. We will just show the internal CSS inside the
<style> element (inside the <head> element) and any
Selector
required HTML elements in the <body> element.
We use CSS selectors to select the HTML elements that
we wish to style. Every CSS rule must start with at least For each CSS rule you can have multiple CSS declarations.
one selector, which is placed inside the <style> element. These are located inside the curly brackets. As we use the
hl selector, the style rule below is applied to all hl HTML
In HTML each tag is surrounded by < anchor > brackets. elements on the web page, for example:
With internal CSS, you simply state the tag or element
<style>
without using the brackets. For example, when we select
hl{
the element <hl> to style. <hl> becomes hl (where the
font-family:arial;
style will be applied to every <hl> element on the page).
font-size:30px;
color:blue;
Let's look at our first example of a CSS rule with selector border-style:solid;
hl. The structure is as follows: border-color:black;
CSS rule: border-width:lOpx;
padding:lOpx;
border-radius:Opx 20px 60px lOpx;
Selector Declaration background-color:yellow;
}
L </style>
1
<body>
hl { color:red } <hl>
I am HTML with style!
You can specify multiple selectors to apply the style to </hl>
multiple elements. They must be separated by a comma. </body>
Notice that the CSS declarations are between a pair of
open and closed curly brackets. For example: This displays as follows in a web browser:

hl,h2,h3{
color:red; I am HTML with style!
}

The following code brings all of these ideas together: We have separated the CSS from the HTML elements. This
is generally considered good practice as:
<!DOCTYPE html>
<html> • It is easier to read both the CSS and HTML.
<head> • If the style needs to be modified for all of the HTML
<style> hl elements, it only needs to be changed once in the
hl { CSS rule.
color:red; • The code is easier to maintain.
}

GOLDEN KEY 114

CHAPTER 4 HTML and CSS

The general process of separating aspects of your code is Note that when you insert the CSS class name into the
known as separation of concerns (SoC). class attribute as the value, you drop the dot

The CSS declaration in our previous example was applied The CSS rule myStyle is only applied to the hl HTML
to a hl HTML element. We can apply a declaration to hl element where the class is applied. It is not applied to all
- h6, body and p elements and to many others. hl elements.

While this approach is useful, it has limitations. If we use We can illustrate how this CSS rule is applied to some
the previous declarations, they are applied to all instances HTML elements and not others as follows:
of those elements. You may not want this. You might want
<style>
to apply a CSS rule to only certain HTML elements. There .myStyle{
are many ways to do this. The method that we will use is font-family:arial;
the class attribute. font-size:30px;
color: blue;
CSS classes border-style:solid;
border-color:black;
Instead of attaching a CSS rule to every instance of a HTML
border-width:1Opx;
element, we can give the CSS rule a name (just like a
padding: 10px;
variable name). These are called classes. A class is a CSS
border-radius:Opx 2Opx 6Opx lOpx;
rule which can then be applied to HTML elements (or,
background-color:yellow;
not). A class is created in a similar way to a CSS rule,
}
except that it begins with a dot in the declaration, for
</style>
example:

.myStyle { <body>
color:red; <hl class="myStyle">
} I am HTML with style!
</hl>
This can then be applied to a HTML element by using the <hl>
class attribute. Let’s look at an example: I am HTML with no style!
</hl>
<style>
<div class="myStyle">
. myStyle {
I am HTML with style!
font-family:arial;
</div>
font-size:30px;
</body>
color: blue;
border-style:solid;
This displays as follows in a web browser:
border-color:black;
border-width:1Opx;
padding:lOpx; am HTML with style!
border-radius:Opx 20px 60px lOpx;
background-color:yellow; I am HTML with no style!
}
</style> I am HTML with style!
<body>
<hl class="myStyle">
I am HTML with style!
Note that the <hl> HTML element font is in bold but the
</hl>
<div> HTML element font is not. This is because the
</body>
original hl element default style is also applied, whereas
the <div> element has no default style.
This displays as follows in a web browser;

I am HTML with style!

115 CO
HTML and CSS CHAPTER 4

External CSS This displays as follows in a web browser:

Internal CSS is useful for many reasons but it also has some
limitations. If you were building multiple web pages or am HTML with style!
websites and wanted to keep the style consistent, you
would have to copy all of the CSS rules from the
<style> element in the header on the first web page, and Note that in the code above, we have used the rel
paste them into the headers of the other web pages. Also, attribute after the href attribute, inside the <link> tag.
if you wanted to change a CSS declaration, for example, a This is used to define the relationship between the current
colour, you would have to edit the CSS for each web page. document and the linked file.

Having to do this would be time-consuming and could give The modularity applied here by using external CSS, means
rise to errors. that we can link the style. css to any web page. If we
modify/add a declaration inside a rule in the style.css,
Using external CSS allows us to achieve modularity. The the modified rule applies to each HTML element where
CSS rules and declarations (including for class declarations) that class is applied.
are exactly the same but are stored in a CSS file. We
create a new file with a .css extension. In this example
the file is stored in the same folder as the web page. Test yourself

The .css file does not require the <style> tags. You I. What is CSS designed to do?
can just add CSS rules, as shown below:
2. Who proposed and created CSS?
.myStyle{
3. List the three ways to add CSS to a HTML
font-family:arial;
document, with a short explanation of each.
font-size:30px;
color: blue; 4. What is a CSS declaration, property, and value?
border-style:solid; Provide an example of each.
border-color:black; 5. Provide an example of multiple inline CSS
border-width:1Opx; declarations.
padding:lOpx; 6. What symbol is placed at the end of a declaration?
border-radius:Opx 2Opx 6Opx 10px;
background-color:yellow; 7. What happens if you do not use a valid property
name in a CSS declaration?
}
8. Provide an example of multiple values for one CSS
To link the .css file to the HTML file, you add a <link> declaration.
element into the web page header: 9. State two different types of value for the CSS
property font-size.
dink href="style.css" rel="stylesheet">
10. Name three values for the CSS property border-
The .myStyle class can then be applied to any element in style. What is the default value if the property is
not specified? (You may have to try them all to find
a HTML file as before, except this time the CSS is located
out.)
in a different file. Here is the HTML code for the web page:
11. What is the difference between the CSS properties
<!DOCTYPE html>
margin and padding?
<html>
<head> 12. Sketch the CSS HTML box model for the
<link href="style.css" properties padding, border and margin.
rel="stylesheet"> 13. Provide three examples of hexadecimal CSS
</head> colours.
<body> 14. What does RGB stand for in RGB colour codes?
<div class="myStyle">
I am HTML with style! 15. How does internal CSS differ from inline CSS?
</div> 16. What advantages does internal CSS have compared
</body> to using inline CSS?
</html> 17. What is a selector used for in internal (and
external) CSS?

GOLDEN KEY 116

CHAPTER 4 HTML and CSS

Test yourself Tasks

18. What symbols are used to signify the start and end
6. Create a website for any one of your school's sports
of the CSS declarations associated with a CSS rule?
teams or clubs.
19. What does SoC stand for, and what does it mean?
The website should consist of three web pages, and
20. What is a CSS class? each page should be linked to the other two web
pages using hyperlinks. Each page should provide
21. What are the benefits of using external CSS over
different information to the user, such as event dates
internal CSS?
or results.
22. What HTML element and attributes are used to
The website must be styled using a similar colour
link an external CSS file to a HTML document?
scheme and format to your current school's website
23. What does the term modularity mean? (if one exists). You should use external CSS for the
styling.

7. Create a website consisting of three web pages

Tasks where one of the web pages has multiple interactive
elements. This website should be for a concert ticket
Using inline CSS:
booking website.
1. Create a web page that has a heading, a paragraph, The index or landing
an image, and three hyperlinks (using an anchor
page should be
element) to external websites of your choice.
designed with
Apply at least eight CSS properties to the heading minimal text and
and paragraph of your web page. For each external clear eye-catching
hyperlink, style each one to look like the following images. This page
example: should have links to
the other two pages.

Videos
The next page should have information about the
events/bands. This should be informative and clear to
read.
2. Create a website that consists of three web pages. Finally, the last page is for booking tickets. Although
Create a navigation bar using <div> and <a> tags it will not allow for the collection/storage of data, it
with hyperlinks to navigate to each web page and should appear to be able to take in values for the
back. The navigation bar should look like the following:
following example:
• Name
• Age
Page 1 Page 2 Page 3
• Address
• Number of tickets
• Email address
3. Add to your solution for Task 2, by creating a • Credit card information:
paragraph title and a paragraph content section with Cardholder name
suitable CSS. Use the text of your choice in the Expiry date
paragraph. Card number
CVC number
Using internal and external CSS:
You can make up the card details. Do not use any
4. Make a copy of your solution for Task 3, and change real data for testing.
the current inline CSS to internal CSS.
All pages should have suitable and user-friendly CSS
properties. The web pages should have a consistent
theme. (Designing this beforehand may help.)
5. Make another copy of your solution to Task 3. and
change the current internal CSS to external CSS. The ticket interactive elements should also have CSS
applied so that they look as though they are part of a
real ticket purchasing system.
(Hint as there are multiple pages, use an external
CSS file.)

117 COMDI ITFR SEIFMCE FOR I EAYNI CEDTIECATE