INTRODUCTION TO HTML
INTRODUCTION:
A webpage is a page containing text, images, audio, videos and links to other webpages.
These pages are written using a special language called Hyper Text Markup Language
(HTML). It describes the content, format and layout of the webpage.
HISTORY OF HTML:
HTML is derived from SGML, which stands for Standard General Markup Language. HTML
was invented by Tim-Berners-Lee in 1990.
TOOLS USED TO WRITE AN HTML PROGRAM:
The tools used for writing an HTML program are HTML editor and Web browser.
HTML Editor:
To create an HTML document, you require an HTML editor. There are two types of HTMLeditors—
WYSIWYG editor and Text editor.
WYSIWYG stands for What You See Is What You Get. These editors provide an interface
where you can create web pages without writing programs. Examples of WYSIWYG editors
are Adobe DreamWeaver, Kompozer etc.
Text Editors let us create HTML documents by writing HTML programs. Examples are
Notepad and Wordpad.
Web Browser:
Web browsers are used to view the webpages. Examples are Google Chrome, Mozilla
Firefox, Opera, Internet Explorer etc.
HTML TAGS
Commands in HTML are known as tags. All HTML tags are enclosed within the angle
brackets (< >). A tag can be a container tag or an empty tag.
Container Tag
A container tag is a tag that needs to be closed. A tag is closed by putting a forward slash (/)
in front of the tag name.
Example : <Hl> Hello World </Hl>
In this example, <H1> is the opening tag or the start tag and </Hl> is the closing tag or the
end tag.
Empty Tag
An empty tag is the tag that need not be closed. It has only opening tag.
Example: <img>, <br>
STRUCTURE OF AN HTML DOCUMENT:
An HTML document has two main components – HEAD and BODY.
• HEAD section contains the title and other information about the HTML document.
• BODY section contains all information that is displayed on the web page.
<html>
<head>
<title> ...... </title>
</head>
<body>
..........
........
</body>
</html>
RULES FOR WRITING AN HTML PROGRAM:
• The names of HTML tags are case-insensitive, which means it can be written in any
case (upper, small or mixed)
• Container tags must always be closed.
• Tag names should not have spaces.
• There should not be any space between < and > in a tag.
• When two or more tags are used the inner tag should be closed before closing the
outer tag.
BASIC HTML TAGS:
• <HTML>
This is a container tag. An HTML program always begins with <HTML> tag and
ends with </HTML> tag. The complete program is written within the opening and
closing of <HTML> tags.
• <HEAD>
<HTML> tag is followed by the <HEAD> tag. It contains the <title> tag which is
used to display the title of the web page. <title> tag is also a container tag. The title is
displayed on the title bar of the browser window.
• <BODY>
This is also a container tag. It contains all the other formatting tags used in the HTML
program. It is closed just before the </HTML> tag.
CREATING, SAVING AND VIEWING A WEB PAGE
• Go to Start and Open Notepad.
• Type the HTML code.
• Save the file using the extension .html
• The saved file can be viewed with the help of a web browser.
FORMATTING TAGS IN HTML:
Formatting tags are used to change the appearance of text. The different formatting tags in
HTML and its uses are given in the table given below:
TAG USE EXAMPLE
<p> Paragraph tag – used to make <p>This is an example of
a paragraph. It is a container paragraph tag</p>
tag.
<b> Bold – Used to make text <b>Hello</b>
bold. It is a container tag
<i> Italics – Used to make text <i>Hello</i>
italized. It is a container tag
<u> Underline – To underline a <u>Welcome</u>
text or sentence.
<br> Break – Used to split a Hello <br> world
sentence into two lines. It is
an empty tag.
<hr> Horizontal rule – Used to <hr>
draw a horizontal line. It is
an empty tag
<marquee> Used to create scrollable text. <marquee>Good
It is a container tag. morning</marquee>
<center> Makes the text to be aligned <center>Hello
to the center world</center>
<sub> Defines subscript H<sub>2</sub>O
<sup> Defines superscript X<sup>2</sup>
Heading Tags:
HTML defines six levels of headings from H1 to H6. Each level implies the different font
sizes. H1 is the highest level and H6 is the lowest level. Heading tags are container tags.
Eg : <H1>Hello</H1>
Font tag:
<font> tag is used to change the appearance of text in a webpage. It is a container tag. The
attributes of the <font> tag are:
• Size – change the size of the text.
• Color – change the color of the text
• Face – change the style of the text
Example:
<font size=20 color=red face=”Arial”>
Computer Science
</font>
Image Tag:
Images are inserted into the webpage using <img> tag. It is an empty tag. The attribute of image tag
include the following:
• src : specifies the URL/path of the image.
Example:
<img src=”[Link]>
Setting background color and background image:
• To apply background color to a webpage, use the attribute “bgcolor” with the <body> tag.
Example:
<body bgcolor=red>
• To apply an image as background in a webpage, use the attribute “background” with the
<body> tag.
Example:
<body background=”[Link]”>