Scribd
Upload
218 views

HTML Tutorial

The document discusses how to structure a web page using headings (H1-H6) to organize content hierarchically. It also covers using paragraph (P) and line break (BR) tags to insert blocks of text and line breaks. Lists can be created as ordered (OL) or unordered (UL) using list item (LI) tags, and lists can be nested within each other.

Uploaded by

netpirate.dev4381
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
218 views

HTML Tutorial

The document discusses how to structure a web page using headings (H1-H6) to organize content hierarchically. It also covers using paragraph (P) and line break (BR) tags to insert blocks of text and line breaks. Lists can be created as ordered (OL) or unordered (UL) using list item (LI) tags, and lists can be nested within each other.

Uploaded by

netpirate.dev4381
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 13

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.

Web Development & Resource Mgmt. 3


<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

Web Development & Resource Mgmt. 5


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>

Web Development & Resource Mgmt. 7


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>
Web Development & Resource Mgmt. 9
</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>
Web Development & Resource Mgmt. 11
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>COMPUTER CONCEPTS
<LI>MS-WINDOWS
<LI>MS-EXCEL
<LI>MS-WORD
</UL>
</BODY>
</HTML>
Web Development & Resource Mgmt. 12
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>COMPUTER CONCEPTS
<LI>MS-WINDOWS
<LI>MS-EXCEL
</OL>
<LI>HARDWARE
<OL>
<LI>CPU
<LI> INPUT DEVICES
<LI> HARD DISK
</OL>
</UL>
</BODY>
</HTML>
Web Development & Resource Mgmt. 13

You might also like