Scribd
Upload
68 views

Controlling How Ordered Lists Are Displayed

The document discusses various HTML tags for controlling formatting of lists, images, and text. It provides examples of using the TYPE attribute to specify numbering styles for ordered lists and bullet styles for unordered lists. It also covers inserting images with the IMG tag and controlling image alignment, height, and width. Tags for superscripts, subscripts, underlining, and strikethrough are demonstrated. The ALIGN attribute is shown to control alignment of paragraphs and headings. Finally, using a background image with the BODY tag is described.

Uploaded by

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

Controlling How Ordered Lists Are Displayed

The document discusses various HTML tags for controlling formatting of lists, images, and text. It provides examples of using the TYPE attribute to specify numbering styles for ordered lists and bullet styles for unordered lists. It also covers inserting images with the IMG tag and controlling image alignment, height, and width. Tags for superscripts, subscripts, underlining, and strikethrough are demonstrated. The ALIGN attribute is shown to control alignment of paragraphs and headings. Finally, using a background image with the BODY tag is described.

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/ 14

Controlling how Ordered lists are

Displayed
The type attribute allows you to specify
the number type for an OL.
Specifying the number type: The
values that you can use with the TYPE
attribute are “A”, “a”, “ I ”, “ i ”, and “
1” for specifying uppercase letters,
lowercase letters, uppercase roman
Web Development & Resource Mgmt. 1
Example:
<OL TYPE=“I”>
<LI>This is item one.
<LI> This is item two.
<LI> This is item three.
</OL>

Web Development & Resource Mgmt. 2


<HTML>
<HEAD> <TITLE>ABCD</TITLE>
</HEAD>
<BODY>
<OL TYPE=“1”>
<LI>LEVEL ONE OUTLINE LEVEL
<OL TYPE=“A”>
<LI> LEVEL TWO OUTLINE LEVEL
<OL TYPE=“1”>
<LI> LEVEL THREE OUTLINE LEVEL
<LI> LEVEL FOUR OUTLINE LEVEL
</OL>
<LI> LEVEL THREE OUTLINE LEVEL
</OL>
<LI> LEVEL TWO OUTLINE LEVEL
</OL>
</BODY>
</HTML>
Web Development & Resource Mgmt. 3
Controlling the display of
Unordered list

Specifying a bullet type: The TYPE


attribute can be used to specify the
type of bullet for an unordered list. The
values that you can use with the TYPE
attribute are “disc”, “circle” and
“square”.
Web Development & Resource Mgmt. 4
Example:
<HEAD>
<TITLE> ABC</TITLE>
</HEAD>
<BODY>
<UL TYPE=“SQUARE”>
<LI>SOFTWARE
<UL TYPE=“DISC”>
<LI> MS-WINDOWS
<LI> MS-EXCEL
</UL>
<LI> HARDWARE
<UL TYPE=“CIRCLE”>
<LI>CPU
<LI>INPUT DEVICES
</UL>
</UL>
</BODY>
</HTML>

Web Development & Resource Mgmt. 5


Inserting Images
The IMG (Image) tag allows you to
display images on your web page.
Syntax: <IMG SRC=“imagefile”>
The SRC (source) attribute is a
required attribute that identifies the
full or partial address or just the name
of the file to display.
Example:
<IMG SRC=“flowers.gif”>

Web Development & Resource Mgmt. 6


Using the ALIGN attribute
The ALIGN attribute allows you to position
an image relative to the line of text that it is
on. All current graphical web browser
recognize these values: “top”, “middle” and
“bottom”.
Example:
<P>The image on this line <IMG
ALIGN=“TOP” SRC=“flower.gif” is top
aligned.
<P>The image on this line <IMG
ALIGN=“MIDDLE” SRC=“flower.gif” is middle
aligned.
<P>The image on this line <IMG
ALIGN=“BOTTOM” SRC=“flower.gif”
Web Development & Resource Mgmt.
is7
Setting the Height and Width of
Image
The height and width of an image can
be specified.
Example:
<IMG SRC=“FLOWER.GIF”
WIDTH=“100%”>
The height of the image will also be
resized correspondingly.
Web Development & Resource Mgmt. 8
Text Highlighting Tags
HTML recognizes a number of additional
character rendering tags, including the SUP
(Superscripts), SUB (Subscript), U
(Underline) and STRIKE (Strikethrough) tags.
The SUP and SUB tags are highly useful tags
that you should use wherever you need
superscripts or subscripts. The STRIKE
command is more limited to using the Web
in workgroup document preparation
processes, rather than for displaying final
renditions. TheWeb
U Development
tags is& Resource
usedMgmt.
for underline a9
Example:
<HTML>
<HEAD><TITLE> ABC </TITLE>
</HEAD>
<BODY>
<SUP> Use SUP for Superscripts. </SUP>
<SUB> Use SUB for subscripts. </SUB
<U> Use U for underlining. </U>
<STRIKE> Use Strike for Strikethrough </STRIKE>
</BODY>
</HTML>

Web Development & Resource Mgmt. 10


Text Alignment
You can align paragraphs, headings, and
other document in a number of ways. You
can use the ALIGN attribute with paragraphs
or heading to center-align, right-align, or
left-align these elements.

Using the ALIGN Attribute in Heading


and Paragraphs
Example:
To center align a level-two heading
<H2 ALIGN=“CENTER”> Your Heading Here
</H2>
To right-align level-two heading
<H2 ALIGN=“RIGHT”> Your Heading
Here</H2>
Web Development & Resource Mgmt.
Web Development & Resource Mgmt. 11
11
<BODY>
<CENTER>
<H2> Level-Two Heading</H2>
<P> This paragraphs, and the level-two
heading above it, is centered using the
center tag.
<UL>
<LI>First List item
<LI> Second List Item
</UL>
</CENTER>
</BODY>
</HTML>

Web Development & Resource Mgmt. 12


Using a Background Image
The background attribute of the BODY
tag allows you to specify a background
image. The graphic file for the
background image can be a GIF or JPEG
image. The general format for entering
this attribute is as follows:
<BODY BACKGROUND=“filename”>

Web Development & Resource Mgmt. 13


Example:
<BODY
background=“c:\abc\flower.gif”>

Web Development & Resource Mgmt. 14

You might also like