HTML Tutorial

Structuring your Web Page
You can use headings to organize your web

into hierarchical levels. Headings also act as
separators in a word processing document.
The top level heading (H1) actually is the title
for your page, ie. it appears in a browser
window at the top of the web page. There are
6 levels of heading. You can also use a
second – level heading (denoted by the H2
tag) to define a major division in your page,
and a third level heading (using the H3 tag )
to define a sublevel division
Web Development within a major
& Resource Mgmt. 1
<BODY>
<H1> This is a top-level Heading
</H1>
<H2> This is a second-level Heading
</H2>
<H3> This is a third-level Heading
</H3>
<H4> This is a fourth-level Heading
</H4>
<H5> This is a fifth-level Heading
</H5>
Web Development & Resource Mgmt. 2
Paragraph and Line Break Tags
The P (paragraph) and BR (break)
tags lets you insert block and lines of
text on your page.
The P (Paragraph) tag:
In Paragraph tag you do not have to
include the </P> end tag. So when you
use the P tag, just insert the <P> start
tag at the beginning of a paragraph.

<HTML>
<HEAD>
<TITLE> My First Web Page </TITLE>
</HEAD>
<BODY>
<H1>Indian Institute Of Planning and Mgmt</H1>
<P>
IIPM has already made a name in imparting
professional education not only in India, but also at
the international level……….
</BODY>
</HTML> Web Development & Resource Mgmt. 4
The BR (Line Break) tag:
The BR (Line Break) tag simply inserts
a line break.
Example:
<P> For Further details contact <BR>
IIPM <BR>
AHMEDABAD

Formatting your Text
Using Italics and Bold Highlighting:
HTML has two ways to include italics or
bold text on your web page. The first
way involves using literal tag: the B
(Bold) tags and I (Italic). The second
way is to use logical tag: the EM
(emphasis) and Strong (strong
emphasis) tags. Most browsers
displays the I (Italic) and EM
(Emphasis) Web
tags and
Development & ResourceB
Mgmt. (Bold) and
6
Block Quotes: The Blockquote tag double-
indents a block of text from both margins.
Example:
<H1> IIPM </H1>
<BLOCKQUOTE>
<P>
IIPM has already made a name in imparting
professional education not only in India, but
also at the international level……….
</BLOCKQUOTE>
</BODY>
</HTML>

Preformatted Text:
The PRE (Preformatted text) tag is used
to display a block of “preformatted’ text
in a monospace, fixed-pitch font. One of
the primary uses of the Pre tag is to
display text in a tabular or columnar
format in which you want to make sure
that the columns remains properly
aligned. Web Development & Resource Mgmt. 8
Example:
<BODY>
<PRE>
SALES FIGURES FOR FIRST QUARTER OF 2006
----------------------------------------------------------------------------
----
JAN FEB MAR
TOTAL
ABC Rs. 10,000 Rs.20,000 Rs. 30,000
Rs.60,000
DEF
GHI
JKL
------------- ----------- -----------
------------
</PRE>
</BODY>
</HTML>
Creating Lists
Headings and paragraph text elements
are used more commonly than lists.
Many Web pages are nothing but lists of
hypertext links. You can create two
types of list: Ordered and Unordered.
An ordered list is a numbered list,
and an unordered list is a bulleted
list. Web Development & Resource Mgmt. 10
The OL (Ordered List) Tag
The OL tag defines a sequentially numbered list of
items. It is used in conjunction with the LI (List
Item) tag, which is used to tag individual list items in
a list.
Example:
<BODY>
<OL>
<LI>COMPUTER CONCEPTS
<LI>MS-WINDOWS
<LI> MS-EXCEL
<LI> FOXPRO
</OL>
</BODY>
</HTML>
The UL (Unordered List) Tag
The UL tag defines a bulleted list of items. The LI (List
Item) tag is nested inside the UL tag and defines each
item within the list
Example:
<BODY>
<UL>
<LI>MS-WINDOWS
<LI>MS-EXCEL
<LI>MS-WORD
</UL>
</BODY>
</HTML>
Nesting Lists
You can nest a list inside another list. The browser automatically
indents nested list levels. You can nest the same or different kinds of
lists.
Example:
<BODY>
<UL>
<LI>SOFTWARE
<OL>
<LI>MS-WINDOWS
<LI>MS-EXCEL
</OL>
<LI>HARDWARE
<OL>
<LI>CPU
<LI> INPUT DEVICES
<LI> HARD DISK
</OL>
</UL>
</BODY>
</HTML>

HTML Tutorial

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tutorial

Uploaded by

Copyright:

Available Formats

Structuring your Web Page

You can use headings to organize your web

Web Development & Resource Mgmt. 3

Web Development & Resource Mgmt. 5

Web Development & Resource Mgmt. 7

You might also like