Rules for computer lab usage:

1. Do not turn on the PC until instructed by the teacher.

2. Please sit accordingly to the seating plan. Take good care of all the equipment in the
computer lab.
3. Before the lesson starts, check the computers and report any broken parts.
4. Strictly no games, chatting, or any other activity/browsing that is not authorized by
the teacher or is not relevant to the lesson.
5. Ensure that you arrange your chair neatly before leaving the lab. Do not leave any
rubbish behind.
Title Page

HTML
Introduction to HTML
Title Page Learning Objectives

Learning Objectives
1. State the building blocks of a webpage and their functions
2. Identify components of the anatomy of HTML
3. Customize title of a web page
Title Page Learning Objectives

Expectation
1. Complete the worksheet and submit it by the end of the class.
2. Complete the hands-on practice in the Assignment tab
Attach your file, and change the status to 'Turn in'

Failing to complete the assigned tasks three times will result in a demerit.
Title Page Learning Obj... Introduction

What is a website?
Title Page Learning Obj... Introduction

What is a website?
A website is a collection of individual but related webpages that
are often stored together and hosted by a web server.
 Title Page Learning Obj... Introduction

What are the building blocks of a website?

 Title Page Learning Obj... Introduction

Introduction
The building blocks of a webpage are:
Hypertext Markup Language (HTML)
Cascading Style Sheets (CSS)
JavaScript (JS)
HTML CSS JS
Title Page Learning Obj... Introduction

Hypertext Markup Language (HTML)

 Title Page Learning Obj... Introduction

Hypertext Markup Language (HTML)

Refers to the way in which webpages
(HTML documents) are linked together
Title Page Learning Obj... Introduction

Hypertext Markup Language (HTML)

HTML uses a system of markup, where tags are used to
define elements within a document
Title Page Learning Obj... Introduction

Hypertext Markup Language (HTML)

To structure and organize the content on a webpage

(Text, Images, Audios, Lists, Tables, Hyperlinks, etc.)
Title Page Learning Obj... Introduction

Example 1
Title Page Learning Obj... Introduction

Example 2
Title Page Learning Obj... Introduction

You can imagine as HTML is skeleton of your webpage

Just as a skeleton provides the basic structure for a body,
HTML provides the foundational structure for a webpage.
Title Page Learning Obj... Introduction

Cascading Style Sheets (CSS)

To style and format the webpage

(Font styles and Colour schemes)
Title Page Learning Obj... Introduction
Title Page Learning Obj... Introduction

You can imagine as CSS is

"skin" and "clothing" of your webpage.

CSS provides the appearance, style

and visual presentation to the webpage
Title Page Learning Obj... Introduction

JavaScript (JS)

To make webpages interactive and

handle complex functions & features
Title Page Learning Obj... Introduction

Text is changed
after clicking the button
Title Page Learning Obj... Introduction

You can imagine as JS is brain of your webpage.

JS provides providing the logic, interactivity, and
dynamic functionality to your webpage
 Title Page Learning Obj... Introduction

Key takeaway
HTML CSS JS

Hypertext Markup Language Cascading Style Sheet JavaScript

To structure and organize To style and format the To add interactivity and
the content on a webpage dynamic behavior
webpage
 Title Page Learning Obj... Introduction

Learning Objective 1:
State the building blocks of a webpage and their functions
Title Page Learning Obj... Introduction HTML elements

HTML elements
Title Page Learning Obj... Introduction HTML elements

HTML elements

<p>This is a paragraph of text.</p>

The opening tag The closing tag

Elements typically start with an
opening tag, containing the element's
name enclosed in angle brackets <>.
The opening tag marks the beginning
of the element.
The closing tag is the same as the
opening tag, but with a forward slash /
before the element name. It signals
the end of the element and where its
effects conclude.
Title Page Learning Obj... Introduction HTML elements

HTML elements
HTML tags will not be displayed, but they are used to determine how to display the document

<p>This is a paragraph of text.</p>

The opening tag The closing tag

Elements typically start with an
opening tag, containing the element's
name enclosed in angle brackets <>.
The opening tag marks the beginning
of the element.
The closing tag is the same as the
opening tag, but with a forward slash /
before the element name. It signals
the end of the element and where its
effects conclude.
Title Page Learning Obj... Introduction HTML elements

HTML elements

<p>This is a paragraph of text.</p>

The content
This is the content of the element,
which can be text, other elements, or
a combination of both.
Title Page Learning Obj... Introduction HTML elements

HTML elements

<p>This is a paragraph of text.</p>

The element
The opening tag, the closing tag, and
the content together make up the
element.
Title Page Learning Obj... Introduction HTML elements

Key takeaway
The element

<p>This is a paragraph of text.</p>

The opening tag The content The closing tag

Title Page Learning Obj... Introduction HTML elements

Learning Objective 2:
A

<title>Web page name</title>

B C D
Title Page Learning Obj... Introduction HTML elements Sections of Web Page

Sections of Web Page

Title Page Learning Obj... Introduction HTML elements Sections of Web Page

A webpage has one head followed by one body

just like you.

Head section

Body section
 Title Page Learning Obj... Introduction HTML elements Sections of Web Page

Head section
Head section
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website!</h1> The head starts with a <head> tag and
<p>This is a paragraph of text.</p> ends with a </head> tag. The head section
</body> should always contain a title. This is the
</html> name displayed in the browser toolbar.
 Title Page Learning Obj... Introduction HTML elements Sections of Web Page

Head section
<!DOCTYPE html> Title
<html>
<head>
<title>My First Web Page</title> The <title> HTML element in head section
</head> defines the title of the document that is
<body> shown in a browser’s title bar or a page's
<h1>Welcome to My Website!</h1> tab.
<p>This is a paragraph of text.</p> In order to change the title, you can edit
</body> the content between the <title> </title>
</html> tags.
 Title Page Learning Obj... Introduction HTML elements Sections of Web Page

Body section
<!DOCTYPE html>
<html>
<head>
Body section
<title>My First Web Page</title>
</head>
<body> The body starts with a <body> tag and
<h1>Welcome to My Website!</h1> ends with a </body> tag. All of the text
<p>This is a paragraph of text.</p> and pictures in a web page go in between
</body> the <body> </body> tag.
</html>
 Title Page Learning Obj... Introduction HTML elements Sections of Web Page

Key takeaway
<!DOCTYPE html>
<html>
The head uses <head> </head> tag.
<head>
Contain a title to be displayed in the
<title>My First Web Page</title>
browser toolbar.
</head>
<body> The body uses <body> </body> tag.
<h1>Welcome to My Website!</h1> Contain all of the text and pictures in a
<p>This is a paragraph of text.</p> web page.
</body>
</html>
Title Page Learning Obj... Introduction HTML elements Sections of ... Conclusion

Conclusion