Unit 3: Programme and Development
Learning Objectives
Learners will learn to:
define HTML
identify the features of HTML
understand the basic structure of an HTML file
create an HTML file
view an HTML file in the browser
use the basic HTML tags
to change the properties of a tag using attributes
to create lists in HTML
Vocabulary
tag
attribute
hexadecimal
Let Us Start
It is not magic, but it can be
Hey! I use many websites quite exciting! Websites are
on the internet. I wondered built using a special language
how websites are created called HTML.
and how they work.
1
Let Us Explore
We know that the internet is a network of computers connecting millions of people
worldwide and allowing them to communicate and share information. The World
Wide Web is a service provided by the internet that makes it easy to store, share and
search for information in the form of websites or web pages. HTML is the common
language that helps create these websites and web pages. Users can access these
web pages using the web browser application software.
Explore and find how web pages are created. List your findings below.
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
Get, Set, Go
3.1 What is HTML?
HTML is an abbreviation of Hyper Text Markup Language. It is the language used to
create web pages. HTML is made up of two parts:
Hyper Text is a special text that, when clicked, takes you to another web page
linked to it.
The Markup Language consists of tags that mark the text inside as a certain
type. For example, a tag can mark a text as italicised or a bulleted list.
Features of HTML
HTML uses tags to define an element in a document. These tags provide
instructions on how the content should be structured and displayed.
It defines the overall structure of a webpage, including headings, paragraphs,
lists, tables, and more. It organises content into a hierarchical structure,
making it easier for browsers to display the page correctly.
2
It allows connecting web pages using hyperlinks that connect different web
pages. Links can point to other web pages, files, or resources, enabling
navigation between different parts of the web.
It allows the developer to add images, audio, video, and other multimedia
elements directly within the content of a webpage. This enriches the user
experience and makes the page more engaging.
HTML is supported by all modern web browsers, ensuring that web pages
created using HTML can be accessed and displayed consistently across
different devices and platforms.
3.2 The basic structure of HTML
Given below is the basic structure of an HTML page.
<!DOCTYPE html>
<html>
<head>
<title> First HTML Page </title>
</head>
<body>
Welcome to HTML. My first web page.
</body>
</html>
Every HTML document must contain the following basic tags.
<!DOCTYPE html> declaration
This is the first line of an HTML document and is used to indicate to the browser
which version of HTML is being used.
<html> … </html> tag
This tag tells the browser that the web page will be formatted in HTML. This is the
main element of an HTML document and contains all other tags.
3
<head> … </head> tag
This tag is used to define the web page's title and other information about the HTML
document. Elements defined under the <head> tag generally do not get displayed
on the web page.
<title> … </title> tag
It is used to give a title to the web page. The title will be displayed in the title bar at
the top of the browser.
<body> … </body> tag
This tag encloses all the tags, attributes and information to be displayed on the web.
Page.
3.3 Creating a webpage
There are various ways to create an HTML document. Many online websites allow
you to type HTML tags and view the output as a web page. You can also use a simple
text editor to create an HTML document and then open it in a browser to view it as a
web page.
Using a text editor
An HTML file is a simple text document containing HTML tags. However, it has to be
saved with the extension .htm or .html. Only then will the browser consider it an
HTML file and display it as specified. You can create or edit an HTML file using any
text editor such as Notepad, Notepad++, Atom or Brackets. Some text editors have
extra features such as syntax highlighting and viewing the web page in the browser
directly.
We will use Notepad++ for typing and saving HTML files. Notepad++ is a free and
open-source code editor. It offers syntax highlighting and auto-completion features,
which can make typing easier and more efficient.
Tech Tickler
You can download and install Notepad++ from the given link.
https://notepad-plus-plus.org/downloads/
4
Once you open Notepad++, select the language as HTML as shown. This ensures the
tags are coloured correctly and the file is saved with the .html extension.
Steps to create and save a new HTML file in Notepad++
Step 1: Double-click the Notepad++ icon on the desktop.
Step 2: Click the FileNew option. A new tab will open for typing the content of the
file.
Step 3: Click the File Save As option from the File menu.
Step 4: Select the folder where you want to save the file.
Step 5: Type a file name.
Step 6: Click the Save button. The file is saved with the given file name. It will have
the extension .html. Start typing the HTML code in the saved file.
Title of the webpage
Content written inside
the <body> tag
5
Using Edublocks
Edublocks for HTML is a tool that allows you to create HTML documents by using
blocks instead of typing text. Similar to Scratch, it allows you to create an HTML
document by dragging and dropping blocks. Edublocks for HTML provide a
simplified way for users to understand and use HTML tags and its syntax.
One of the main advantages of Edublocks for HTML is that it uses the same block-
based interface as Scratch. This makes it easy for users who have experience with
Scratch to transition to creating web pages.
An HTML document in Edublocks An HTML document in a text editor
Output on the web page
Tech Tickler
Edublocks for HTML can be accessed using the given link.
https://app.edublocks.org/editor
6
Limitation of block-based coding
While Edublocks can be a great starting point for beginners to learn HTML, it has
some limitations.
It lacks the full range of features and capabilities in professional web
development environments. This can limit the complexity and sophistication
of the HTML documents you create.
It can get difficult to read and follow long pages of HTML code created using
blocks. It also becomes difficult to find and fix errors in block-based code.
3.4 Viewing a webpage
Once you have created an HTML file, you can view it in a browser. The HTML file
saved on your computer will appear in the saved location with the icon of your
default browser. To view in the default browser, navigate to the folder where you
have saved this file and double-click on it. The HTML file will now be visible as a web
page in your browser.
Activity 1
Perform the following tasks.
Task 1: Open Notepad++ on your computer.
Task 2: Create a web page containing a few lines on 'Save Water'.
Task 3: Save the file with the filename water.html.
Task 4: View the file on the web browser.
Task 5: Create a similar webpage using Edublocks.
7
3.5 HTML tags
Tags are instructions in an HTML document that tells the browser to do something,
such as display the text or image in a certain way. Each tag begins with a (<) and
ends with a (>). Tags are also called elements. HTML tags can be divided into two
types: paired and unpaired.
Paired tags
Paired tags, also known as ‘container tags,’ come in pairs with an opening and
closing tag. The tag name is enclosed in the '<' and '>' symbols. The content of the
tag is placed between the opening and closing tags.
For example, the header tag <h1> is a paired tag, its opening tag is <h1> and the
closing tag is </h1>.
<h1> Heading 1 </h1>
Unpaired tags
Unpaired tags, also known as ‘empty tags,’ do not have a corresponding closing tag.
For example, the line break tag ‘<br>’ is unpaired. It inserts a line break. <p>HTML
contains lots of predefined tags. <br>
Basic HTML tags
Let us look at some common tags used for text on a web page.
Header tag
Header tags are used to display headings and subheadings on a web page. All
headings are displayed in a larger size as compared to normal text. There are six
levels of headings according to their size, namely <h1>, <h2>, <h3>, <h4>, <h5>,
and <h6>. The <h1> tag displays the largest heading, while the <h6> tag displays
the smallest heading. The browser automatically adds a blank line above and below
each heading on a web page.
8
HTML code Output as a web page
Paragraph tag
The <p> tag is used to add paragraphs in HTML. Each paragraph starts on a new line
and some line spacing is added before and after a paragraph on a web page.
HTML code
Output as a web page
9
Line break tag
The <br> tag is used to begin a new line in the content on the web page. It generally
separates text into smaller, more readable portions or creates a visual break between
paragraphs. To add a line break, add the <br> tag where you want the line break to
appear. It is an empty tag, which means that it does not require a closing tag.
HTML code
Output as a web page
Formatting tags
Text can be displayed in different formats using formatting tags in HTML.
Bold <b>…</b> - The enclosed text appears bold.
Italic<i>…</i> - The enclosed text is italicised.
Underlined<u>…</u> - The enclosed text is underlined.
10
HTML code
Output as a web page
Superscript and subscript tag
Superscript text: The <sup>tag defines a superscript text. Superscript text
appears slightly above the normal line and is shown in a smaller size. It can be
used to show footnotes or exponents such as a2.
Subscript text: The <sub> tag defines a subscript text. Subscript text appears
slightly below the normal line and is shown in a smaller size. This tag can be
used to display chemical formulas such as H2O.
11
HTML code
Output as a web page
Horizontal Rule tag
The <hr> tag in HTML stands for ‘horizontal rule’ and is used to insert a horizontal
line on a web page. This is an empty tag, so it does not require a closing tag. It is
generally used to separate content on a page visually.
HTML code
12
Output as a web page
Comments tag
Comments are codes not executed by the browser; therefore, they are not shown on
the web page. They can add personal notes or descriptions in the HTML document.
To create a comment, enclose it in the <!--and--> tag.
Activity 2
Create an HTML page that contains information on ‘Chemical equations’.
Make use of the following tags:
o Paragraph tag
o Line break tag
o Bold and italic tag
o Superscript and subscript
o HR tag
o Comments tag
13
3.6 Attributes of a tag
HTML tags can also contain attributes. Attributes are extra bits of information used
to define some specific characteristics of a tag. Attributes are placed inside the
opening tag. Each attribute has two parts- name and value. The tag gives instructions
for doing something, while its attributes decide how it should be done. Let’s see the
general form of elements and attributes.
Let us see the general form of a tag and its attributes.
Opening tag Closing
<h1 align=center> My webpage</h1>
Attribute Value Content
For example, the align attribute can be used with the <body>,<P>, <HR>or heading
tags to specify the alignment of text. There are four values that can be used for the
align attribute: left, right, justify and center.
Attributes of the <body> tag
The <body> tag has several attributes that can be used to modify its behaviour or
appearance. Some of the common attributes of the <body> tag are
text: This attribute specifies the default text colour for the entire web page.
The value of this attribute should be a valid colour name or colour code of the
hexadecimal number system. Hexadecimal number system is an alphanumeric
code that represents different colours using alphabets and numbers ranging
from A-F and 0–9, respectively.
14
o Using the colour name
HTML code
Output as a web page
o Using the hexadecimal colour code
In HTML, there are some predefined colour names and their
corresponding hexadecimal codes for representing colours. Some of them
are given below. You can also use a hexadecimal code for specifying a
colour.
Name Hexadecimal code Colour displayed
Black #000000
Red #FF0000
Yellow #FFFF00
White #FFFFFF
Blue #0000FF
Green #00FF00
15
HTML code
Output as a web page
bgcolor: This attribute specifies the background colour of the entire web
page. The value of this attribute should be a valid colour name or colour code.
HTML code
Output as a web page
16
background: This attribute specifies an image that will be used as the
background for the entire web page. The value of this attribute is the file
name of the required image along with its extension.
HTML code
Output as a web page
Attributes of the <hr> tag
The attributes for the <hr> tag are as follows:
Attribute Used to Values
align specify the alignment of the left, centre, or right.
horizontal rule on the page
color set the colour of the horizontal rule Colour name or hexadecimal
value
size set the height of the horizontal rule Pixel or percentage
width set the width of the horizontal rule Pixel or percentage
noshade remove the shading effect of the -
horizontal rule
17
HTML code
Output as a web page
Activity 3
Refer to the code of the web page created in Activity 2 and perform the given tasks.
Make use of the following attributes to improve the look of the web page:
o align (to specify the alignment of the text)
o bgcolor (to add background colour)
o text (to change the text colour)
Use different attributes of the <hr> tag to divide the web page in different
sections.
18
3.7 Creating lists
A list is organising and presenting information as a group of related items. It makes
the content easy to read and understand. You can create different lists using HTML:
ordered lists and unordered lists.
Ordered lists tag
Ordered lists are lists in which the items are numbered. The <ol>... </ol> tag is used
to create an ordered list. Each item in the list is specified by the <li> tag.
HTML code Output as a web page
Attributes of the <ol> tag
Attribute Used to Values
type define the numbering style for each ‘1’, ‘I’, ‘a’, etc
item of an ordered list
start specify the starting value of the first any number
list item
19
HTML code Output as a web page
Unordered lists
In an unordered list, the items do not appear in a numbered sequence; instead, a
bullet appears before each item. The type attribute decides the style of the bullet. An
unordered list is created using the <ul> tag.
HTML code Output as a web page
20
Attribute of the <ul> tag
Attribute Used to Values
type specify the type of bullet disc, square, circle, and none
HTML code Output as a web page
Unit Review
1. HTML is an abbreviation of Hyper Text Markup Language. It is the language
used to create web pages.
2. Every HTML document has a basic created using different tags.
3. There are various ways to create an HTML document – using a text editor and
edublocks.
4. You can create or edit an HTML file using any text editor, Notepad++.
5. Edublocks allows you to create an HTML document by dragging and dropping
blocks.
21
6. To view in the default browser, navigate to the folder where you have saved
this file and double-click on it.
7. Tags are instructions in an HTML document that tells the browser to do
something. Tags are also called elements.
8. Each tag begins with a (<) and ends with a (>).
9. HTML tags can be divided into two types: paired and unpaired.
10. Header tags are used to display headings and subheadings on a web page.
11. The paragraph tag is used to add paragraphs in HTML.
12. The <br> tag is used to begin a new line in the content on the web page.
13. Formatting tags make the text bold, italic and underlined.
14. The <sup>tag defines a superscript text.
15. The <sub> tag defines a subscript text.
16. The <hr> tag in HTML stands for ‘horizontal rule’ and is used to insert a
horizontal line on a web page.
17. Comments are codes not executed by the browser.
18. HTML tags can also contain attributes.
19. Attributes are extra bits of information used to define some specific
characteristics of a tag.
20. A list is organising and presenting information as a group of related items.
21. You can create different lists using HTML: ordered lists and unordered lists.
Check for Understanding
1. Select the correct answer.
a. Which of the following heading tags will display the largest heading size?
i. H1
ii. H2
iii. H3
iv. H4
22
b. What is the file extension to save an HTML document?
i. .txt
ii. .html
iii. .htm
c. Which tag is used to insert a line break?
i. <hr>
ii. <br>
iii. <ol>
d. Which tag is used to type in a paragraph?
i. <b>
ii. <p>
iii. <i>
2. Answer the following questions.
a. What does HTML stand for, and what is its primary purpose
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
b. Give two features of an HTML document.
_________________________________________________________________________________________
_________________________________________________________________________________________
________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
________________________________________________________________________________________
23
c. What are attributes in HTML? Explain their use.
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________
d. Differentiate between paired and unpaired tags.
___________________________________________________________________________________
___________________________________________________________________________________
___________________________________________________________________________________
___________________________________________________________________________________
___________________________________________________________________________________
___________________________________________________________________________________
___________________________________________________________________________________
Lab Activity
Q1. Write an HTML code to display the formulas below on a web page.
(a+b)³ = a³+3a²b+3ab²+b³
H2SO4, H2O, NH3, SO3
Q2. Create a web page on ‘My Dream School’ using the instructions given below.
An introduction with the highest level of heading and any two formatting tags
A background image related to the theme.
An ordered list of five items related to the theme.
24
Resources
https://www.w3schools.com/html/
Reference Material
https://www.youtube.com/watch?v=x9bTBcron78
25
