SkTech 2022: *Episode 11.2* HTML (Refining the Page)

List: Changing Numbering and Markers

In Episode 5, you saw how to create Ordered and unordered list. Now you will see how to change the basic characteristics of the lists, such as their numbering and their markers.

Working with non ordered list:-

The TYPE option of the <UL> command allows specifying variation for the marker used in the lists. The possible values to be attributed to TYPE are square, circle and disc.

See the source code of the Examp12i.htm file.

<html>

<head>

<title>Non ordered lists Examp12i</title>

</head>

<body>

<h2>Different markers</h2>

<ul type=square>

<li>First item

<li>Second item

<li>Third item

</ul>

<ol type=circle>

<li>First item

<li>Second item

<li>Third item

</ol>

<ul type=disc>

<li>First item

<li>Second item

<li>Third item

</ul>

</body>

</html>

And now see what the page looks like:

Working with Ordered Lists:-

There are several options for changing the numbering and marker for ordered list. Its standard is to always start the list with the number 1. You can change the initial number and the list numbering type by using the TYPE parameter. The values allowed for TYPE are:

TYPE=1 Creates a normal numeric list (standard on need not be specified).

TYPE=A. Create an alphabetical list with uppercase letters starting with A.

TYPE=a. Creates an alphabetical list with lower case letters starting with a.

TYPE=I. Create a numeric list with Roman numerals (uppercase) starting with I.

TYPE=i. Create a numeric list with Roman numeral (lowercase) starting with I.

You can also change the initial number of the list through the START parameter, which should be followed by the equal sign and the initial number of the list. For example:

Start=12

In the case of alphabetical or Roman numeral lists, this value indicates the nth occurrence of the list. Take a look at the source code of the Examp12m.htm file:

<html>

<head>

<title>Alternate number list - Examp12m</title>

</head>

<body>

List with type=1 and start=25

<ol start=25>

<li>first item

<li>second item

<li>third item

<li>fourth item

<li>fifth item

</ol>

List with type=A and start=10

<ol type=A start=10>

<li>first item

<li>second item

<li>third item

<li>fourth item

<li>fifth item

</ol>

List with type=a and start=10

<ol type=a start=10>

<li>first item

<li>second item

<li>third item

<li>fourth item

<li>fifth item

</ol>

List with type=I and start=10

<ol type=I start=10>

<li>first item

<li>second item

<li>third item

<li>fourth item

<li>fifth item

</ol>

List with type=i and start=10

<ol type=i start=10>

<li>first item

<li>second item

<li>third item

<li>fourth item

<li>fifth item

</ol>

</body>

</html>

The next two figures shows the result of this program:

List with Graphic Markers :-

A little imagination is all we need to create some interesting effects on the page. Instead of using the traditional markers, you can get any graphic image in the GIF or JPG format and create a marker with it. In this case, just specify the image and the text corresponding to it. The Examp12i.htm file shows this technique, in which we use the figure of sphere as a marker. Such an image is loaded only once to the browser, which then uses a copy of the figure that is stored in the memory or cache area of the machine.

<HTML>

<HEAD>

<TITLE>graphic marker examp12o</TITLE>

</HEAD>

<BODY>

<H2>Example of list with graphic markers</H2>

<dl>

<IMG SRC="sphere01.gif" >first item

<IMG SRC="sphere01.gif" >second item

<IMG SRC="sphere01.gif" >third item

<IMG SRC="sphere01.gif" >fourth item

</dl>

</BODY>

</HTML>

See the effect:

Lists with Nested Graphic Markers:-

With a little more work, we can create nested menus using the <DL></DL> command. This command is used to create definition list. It simply shifts the text between the commands a little to the right.

Each level created by this command may have the marker size reduced by using the HEIGHT and WIDTH parameters of the <IMG> command. The values of these parameters are expressed in pixels.

Below is the listing from the Examp12p.htm file:

<HTML>

<HEAD>

<TITLE>Nested graphic markers examp12p</TITLE>

</HEAD>

<BODY>

<H2>example of list with nested graphic marker</H2>

<dl>

<IMG SRC="sphere01.gif">first item

<IMG SRC="sphere01.gif">second item

<dl>

<IMG SRC="sphere01.gif" WIDTH=15 HEIGHT=15>subitem of the second item

<dl>

<IMG SRC="sphere01.gif" WIDTH=15 HEIGHT=15> third level

</dl>

<IMG SRC="sphere01.gif" WIDTH=15 HEIGHT=15>subitem of the second item

</dl>

<IMG SRC="sphere01.gif">third item

<IMG SRC="sphere01.gif">fourth item

</dl>

</BODY>

</HTML>

And now see the effect this produced:

You can choose a different colour sphere to represent different levels of the list.

Load the Taballs.htm file and see the models of spares that are on the CD.

Horizontal Menus with Lists and Tables

By combining list command the tables, you can create menus in several columns, maintaining sequential numbering for each column. With this technique, instead of creating a vertical menu larger than the the screen can show at once, you break up the menu into several columns, starting each column with the proper number. Once again, if you are not familiar with tables, read next episode before continuing with this example. The Examp12l.htm file shows this technique.

<html>

<head>

<title>Horizontal menu lists Examp12l</title>

</head>

<body>

<table>

<tr>

<td>

<ol>

<li>first item

<li>second item

<li>third item

<li>fourth item

<li>fifth item

</ol>

</td>

<ol start=6>

<li>first item

<li>second item

<li>third item

<li>fourth item

<li>fifth item

</ol>

</td>

<td>

<ol start=11>

<li>first item

<li>second item

<li>third item

<li>fourth item

<li>fifth item

</ol>

</td>

</tr>

</table>

</body>

</html>

See the result:

Changing the Colour and the Size of the Text Fonts

With Netscape's command, you can individually change the size of the text letters. There are 7 possible font sizes, size 3 being the standard. Through the command, you can specify a specific or relative font size by using the SIZE parameters. The basic Syntax for is:

You can specify a size relative to the standard font, which is size 3, using the plus or minus sign before the desired increment. For example, changes the font size to 6, as it adds 3 to the standard font size. On the other hand, the command changes the font size to 4.

A specified font size remains active until another size is specified or the command is found. In this case, the text reverts to the standard size.

If you wish to change the standard font size, use this command:

<basefont size=1 | 2 | 3 | 4 | 5 | 6 | 7>

The SIZE parameter with the + or - specification will then use the new standard size as reference. Load the examp12q.htm file and examine its contents:

<html>

<head>

<title>Size and color of texts: examp12q</title>

</head>

<body>

Text exhibited with standard size by the Netscape 

Text exhibited with size 1 

Text exhibited with size 2 

Text exhibited with size 3 

Text exhibited with size 4 

Text exhibited with size 5 

Text exhibited with size 6 

Text exhibited with size 7 

<hr>

Text exhibited with size 2 

Text exhibited with size 6 

<basefont size=2>

Text exhibited with size 5 

</body>

</html>

The following figure shows the effect of these commands.

The COLOR option of the command allows specifying a colour, using the colour codes can covered in previous episode, to be applied to a text reason. Just like The SIZE option, the COLOR option continues working until the command is specified.

Below is the source code of the Examp12r.htm file:

<html>

<head>

<title>Size and color of texts: examp12r</title>

</head>

<body>

Text exhibited with standard size by the Netscape 

Text exhibited with size 1 

Text exhibited with size 2 

Text exhibited with size 3 

Blue text exhibited with size 4 

Green text exhibited with size 5 

Text violet with size 6 

Text exhibited with size 7 

<hr>

Text cyan exhibited with size 2

Text exhibited with size 6 

<basefont size=2>

Text exhibited with size 5 

</body>

</html>

Even though this book is only in black and white, the differences caused by these commands are noticeable in the following figure.

We could write an entire book just with tips on how to improve a page. However, let's stop here, as we have other important topics to cover. These includes tables, frames, and image maps.

👈Episode 11.1 Episode 12.1👉

Share This Post

PRINT THIS POST

SkTech 2022

Pages

Thursday, 24 June 2021

Episode 11.2 HTML (Refining the Page)

2 comments:

Featured post

Episode 1 MCQ for Govt. Job/ Private Job/ MNCs

Popular Posts

My Policies

Pages

Thursday, 24 June 2021

*Episode 11.2* HTML (Refining the Page)

2 comments:

Featured post

*Episode 1* MCQ for Govt. Job/ Private Job/ MNCs

Popular Posts

My Policies

Episode 11.2 HTML (Refining the Page)

Episode 1 MCQ for Govt. Job/ Private Job/ MNCs