Subject: Computer Studies

Topic: Introduction to HTML

CB/21-22 Introduction to HTML 1 of 30

 Learning Objectives
• Defining HTML
• Differentiating between a webpage, website
and web browser
• Create ordered and unordered lists
• Change the properties of a tag using its
attributes
• Designing a web page using various HTML tags

CB/21-22 Introduction to HTML 2 of 30

 HTML
Information on the World Wide Web is stored on Websites.

A Website is a collection of interlinked web pages.

CB/21-22 Introduction to HTML 3 of 30

 Web Pages

CB/21-22 Introduction to HTML 4 of 30

 Web Browsers
You can view an HTML file as a web page only in a Web browser.

All browsers can understand and interpret HTML.

Some popular browsers that are used today are Internet Explorer,
Mozilla Firefox and Google Chrome.

CB/21-22 Introduction to HTML 5 of 30

 What is HTML?

HTML is an abbreviation of Hyper Text Markup

Language. It is the language used to create web pages.

Hyper Text is a special text which when clicked, takes

you to another web page linked to it.
Markup Language: The Markup Language consist of
tags that are used to mark the text contained inside
them as being a certain type.
CB/21-22 Introduction to HTML 6 of 30
 Features

1. HTML is simple. It is very easy to understand and modify.

2. It uses tags to define an element in a document, therefore, it

provides a flexible way to design web pages.

3. It allows connecting web pages using hyperlinks and

therefore, enhances the user’s browsing experience.

CB/21-22 Introduction to HTML 7 of 30

 Features

4. An HTML document can be displayed on any operating

system, therefore it is platform independent.

5. It allows the developer to add pictures, audio and videos to

web pages making them more attractive and interactive.

6. HTML is not case sensitive. You can type tags in lower case or

upper case.

CB/21-22 Introduction to HTML 8 of 30

 Basic Structure of HTML File

Tags contain
the title and
other header
information of
the web page.

This tag
contains the This tag is used to
entire give a title to the
content of web page. It
the web appears at the top
page. of the browser
window.

CB/21-22 Introduction to HTML 9 of 30

 Creating a web page
A web page is a file with a .html or .htm
extension.

This type of file is created using Hyper Text

Markup Language (HTML).

We can use any text editor to create an

HTML file.

For example, Notepad (PC) or TextEdit

(Mac).

CB/21-22 Introduction to HTML 10 of 30

 Steps to Save a HTML file

Type the HTML code in Notepad.

Click the File → Save As option. A dialog box appears.

Select the location where you want to save the file and type the
name of the file with the .html extension.

Open the file location; you will see that the file has the icon of
your default browser. Double-click on it to open the file.

CB/21-22 Introduction to HTML 11 of 30

 Web page

CB/21-22 Introduction to HTML 12 of 30

 Basic HTML Tags

HTML consists of tags, each of which conveys a special meaning to

the browser.
Each tag is normally paired with a starting and ending tag.
The ending tag has a ‘/’ placed before the tag name.

CB/21-22 Introduction to HTML 13 of 30

 Types of tags

Paired Tags Unpaired Tags

A tag which has an There are some other

opening and closing pair tags which do not have a
is called a container tag. corresponding closing tag.
These tags usually contain They are called empty
some other tags or text. tags.

For example, For example,

<i>Sentence</i> <br>, <hr>

CB/21-22 Introduction to HTML 14 of 30

 Creating Headings

• Formats the text

<H1>…</H1> enclosed as the
largest heading.

• Formats the text

<H2>…</H2> enclosed as the next
largest heading.

• Formats the text

<H6>…</H6> enclosed as the
smallest heading.

CB/21-22 Introduction to HTML 15 of 30

 Other Tags
<P>…</P> <center>…</center>

Creates a Makes the text appear at

paragraph of the centre of the page.
the text.

Paragraph Tags Center Tags

<BR>

Line break Tag Inserts a single

line break.

CB/21-22 Introduction to HTML 16 of 30

 Formatting Tags

<B>…</B> <U>…</U> <I>…</I>

• Makes the • Make the • Make the

text text text
enclosed enclosed enclosed
inside it inside it inside it
appear underlined. appear in
bold. italics
format

CB/21-22 Introduction to HTML 17 of 30

 Formatting Tags Example

You can also apply more than one formatting to a part of the text
using multiple tags.
For example to you can make a word appear both bold and
underlined.

CB/21-22 Introduction to HTML 18 of 30

 Subscript & Superscript

<SUP>…</SUP> <SUB>…</SUB>

• Makes the text • Make the text

enclosed inside it, enclosed inside it,
appear as appear as subscript.
superscript.

For example, For example,

(a+b)²+(a- (a+b)₂+(a-
b)² b)₂

Output: Output:
(a+b)2+<(a-b)2 (a+b)2+<(a-b)2
CB/21-22 Introduction to HTML 19 of 30
 Comment <!...> tag

Comments are codes that are not executed by the browser;

therefore, they are not shown in the web page. They can be used
to add personal notes or descriptions in the HTML document.

Example:
<h1>HTML</h1><!--Example of the largest heading-->
<h6>HTML</h6><!--Example of the largest heading-->

Output:
HTML
HTML

CB/21-22 Introduction to HTML 20 of 30

 Elements and Attributes

Elements: Tags in HTML are also called elements.

Attributes: A tag can have additional parts called

attributes. These attributes help to change specific
features of the tag.

<TAG_NAME= “VALUE”>

CB/21-22 Introduction to HTML 21 of 30

 Attributes BODY Tags

<BODY text=”Red” background=”rose_back.jpg”>

CB/21-22 Introduction to HTML 22 of 30

 Practical

CB/21-22 Introduction to HTML 23 of 30

 Attributes of <font> tag

face : It is used to change the font of the text.

size : It is used to set the size of the displayed text.

color : It is used to set the colour of the line.

CB/21-22 Introduction to HTML 24 of 30

 Attributes <HR> tag
ALIGN : Specifies the alignment of the horizontal line.

WIDTH : Specifies the width of the line. Can be given in percentage or

pixels.

SIZE : Specifies the height or thickness of the rule in pixels.

COLOR : Specifies the colour of the line.

NOSHADE : Specifies that the line should not be shaded but

shown in one colour.

CB/21-22 Introduction to HTML 25 of 30

 Attributes of <p> tag

The <p> tag has an align attribute to specify the alignment of text in
the paragraph. The heading tag also has a align attribute.

The align attribute has four values:

 Left - It is used to move the paragraph to the left.
 Right - It is used to move the paragraph to the right.
 Center - It is used to place the paragraph to the center of the page.
 Justify - It is used to stretch the lines so that each line has equal
width (like in newspapers and magazines)

CB/21-22 Introduction to HTML 26 of 30

 Ordered List
In ordered list, the points are numbered in sequence.

Types of Attributes:
type : The type attribute specifies the type of numbering.
start : The start attribute specifies the number of the first
point in the list.
Example:
<ol type=’i’ start=5> Output:
<li>Ditvi v. Ditvi
<li>Rekha vi. Rekha
<li>Jaya vii. Jaya
<li>Aditya viii. Aditya
</ol>
CB/21-22 Introduction to HTML 27 of 30
 Unordered List
In unordered list, the points are bulleted.

Types of Attributes:
type : The type attribute specifies the type of numbering.

Example: Output:
<ul type=‘circle’> • Ditvi
<li>Ditvi • Rekha
<li>Rekha • Jaya
<li>Jaya • Aditya
<li>Aditya
</ul>
CB/21-22 Introduction to HTML 28 of 30
 Definition List

A definition list is a list of terms along with their definition or

description

Example: Output:
<dl> Storage Devices
<dt>Storage Devices CD
<dd>CD Pen drive
<dd>Pen drive
</dl>

CB/21-22 Introduction to HTML 29 of 30

 Nested Lists

Lists contained inside an outer list are called nested lists

Example: Output:
List of main subjects
<OL>
<LI>English
<LI>Maths
<LI>Social Science
<UL>
<LI>History
<LI>Geography
</UL>
<LI>Science
</OL>
CB/21-22 Introduction to HTML 30 of 30