HTML Introduction

HTML stands for Hyper Text Mark-up Language. It is used to create webpages. In other words,
HTML documents are also called eb pages.
Hypertext is the text that is displayed on a computer or other electronic de!ice with hyperlinks
"references# to other text. Hypertext is an easy $ flexible format to share information o!er
internet.
%part from text, hypertext may contain tables, images, lists etc.
HTML is not a programming language like &, &'' or (a!a.
It is a mark-up language. % markup language is a set of mark-up tags. The purpose of these
markup tags is to describe the content of a page.
The markup tags used in HTML are called HTML tags. HTML tags are keywords surrounded by
%ngle )rackets ")etween * and + symbols# such as *HTML+, *)+.
%lmost all tags "except few# comes with an end tag "same as start tag but with a , symbol
before the tagname#. These HTML tags should be used in pairs such as *b+ and *,b+.
-xample, *b+ T &./01- *,b+ that displays as WT COURSE
HTML tags are case-insensiti!e. *HTML+, *html+ and *HtMl+ are the same. 2&
recommends tags to be lower-case.
1teps to create $ !iew HTML documents3
4. .pen 5ote6ad or any Text -ditor and rite HTML &ode in it.
7. 1a!e the file with .html , .htm extension.
2. .pen the HTML document in a browser"Internet -xplorer, 8irefox, &hrome etc.#to !iew
the webpage.
9. To make changes, edit the code in text editor $ sa!e it.
:. 0efresh the page to !iew the changes.
*HTML+
*H-%;+

,, 6lace to add Title, Link &11 $ (a!a1cript 8iles....

*,H-%;+
*).;<+

,, %ctual HTML code will go here.....

*,).;<+
*,HTML+
HTML tags can be used formatting text "bold, italic, color, si=e, etc.#> create tables, lists,
forms> add images, colors, hyperlinks, headings, paragraphs,etc., to webpages.
HTML Elements: %n HTML -lement is e!erything between the start and end tag including the
text.
8or example, ?*6+This is paragraph*,6+? is a HTML -lement where *6+ is the 1tart Tag,
@This is paragraph@ is the -lement &ontent and *,6+ is the -nd Tag.
HTML Attributes: Most HTML elements ha!e additional property called %ttribute.
8or example, *).;< bgcolorA@red@+. The tag @).;<@ has an attribute named @bgcolor@ with
!alue @red@.
Nested HTML Elements: HTML elements can be nested i.e., one HTML element can contain
another HTML element in it.
8or example, *6+ *)+*/+ The is 5-1T-;. *,/+*,)+*,6+. Make sure you close the tags in
the re!erse order of their oepning i.e., the tag opened first should be closed last.
HTML Comments: HTML comments can be inserted in HTML code for better understanding $
readability of the code. *B-- This is commented --+ is a HTML comment. &omments are
ignored by the browser and are not displayed in the webpage.
SOME BASIC TAGS:
Tag Usage Description
Heading Tags - <H1>,
<H2>, <H3>,
<H4>, <H5>, and <H6>
<H1> Heading </H1>
<H4> Heading </H4>
Used for creating headings. H1 is the Highest
& H6 is the smallest heading.
Paragraph - <>
<>!his is a "aragra"h
te#t</>.
Used for dis"la$ing te#t in a "aragra"h.
Bold - <%> <%>!his !e#t is %old</%>
Used for ma&ing the te#t 'old. !he o(t"(t
)o(ld 'e as follo)s* This Text is Bold
Italic - <+> <+>!his !e#t is +talic</+> Used for ma&ing the te#t italic. !he o(t"(t
)o(ld 'e as follo)s* This Text is Italic
Underline - <U>
<U>!his !e#t is
Underlined</U>
Used for (nderlining the te#t. !he o(t"(t
)o(ld 'e as follo)s* !his !e#t is Underlined
Line Break - <%,>
!his is -rst .ine.<%,>!his is
second line.
Used for gi/ing line 'rea&. !e#t follo)ing
<%,> tag )ill 'e dis"la$ed in ne#t
line. Note: %, has no close tag and hence is
also called em"t$ element as it does not
enclose an$ content.
Horizontal Line - <H,>
!his is a'o/e the
line.</H,>!his is 'elo) the
line.
Used for gi/ing a hori0ontal line on the
)e'"age. !his is (sed to se"arate content.
HTML Comments - <1--
234456! -->
<1-- !he follo)ing section is a
section heading -->
2omments can 'e )ritten in H!4. doc(ment
to ens(re reada'ilit$ and (nderstanding. !he
te#t )ritten 'et)een <1-- and --> are ignored
'$ the 'ro)ser and are not dis"la$ed.
ddress - <address>
<address>
7(resh 4(d(n(ri<%,>
8ssociate rofessor,<%,>
9e"t. of 275, :+!,
%hima/aram<%,>
hone* ;<666====2
</address>
Used to dis"la$ the contact information of a
"erson s(ch as address, tele"hone n(m'ers
etc.
Code - <code>
<code>
>incl(de <stdio.h>
main?@
A
"rintf?BHelloB@C
D
</code>
Used to dis"la$ a "iece of com"(ter code
s(ch as 2 rogram etc.
!trike Thro"gh -
<95.>
<95.>7ti&ed 3E </95.>.
Used for stri&ing oE a te#t. !he o("(t )o(ld
'e as follo)s* 7tri&ed 3E
!"#script - <s('> F<s('>n</s('>
Used for ma&ing te#t as a s('scri"t. !he
o("(t )o(ld 'e as follo)s* #n
!"perscript - <s("> F<s(">n</s(">
Used for ma&ing te#t as a s("erscri"t. !he
o("(t )o(ld 'e as follo)s* #
n
<H!4.>
<%39G>
<H1>Heading 1</H1>
<H6>Heading 6</H6>
!his is -rst .ine.<%,>!his is second line.<H,>
<>!his is te#t in a "aragra"h. !his is te#t in a "aragra"h.
!his is te#t in a "aragra"h. !his is te#t in a "aragra"h.
!his is te#t in a "aragra"h. </>
</%39G>
</H!4.>