Home > Courses, Tutorials & eBooks > HTML Tutorial > Formatting

HTML Tutorial - Formatting

Page 3 of 3

The example given below illustrates the HTML code of this web page:

Example:

< html>

< head>

< title> My bag of jokes </ title>

</head>

< body background = "myimage.jpg" text = “blue”>

< code> this document is written in HTML</ code>

< h1 align= left> I want to make you laugh</ h1>

< em> Hello, this is My Jokes website.</ em>

< p>< pre>< strong>Now you will read some rib-tickling jokes.< strong>< br />

< em>These jokes are meant for people of all
ages.< abbr>TASVGJWWMYL</ abbr>

< b>It means</ b>< br />Some of them are good, and will have you in
splits.</ em></ pre></ p>

< h2>Maths jokes.</ h2>

< blockquote>If I had only one day left to live, I would live it in my statistics class, it would seem so much longer.</ blockquote>

< strong> Variables like < var> X,Y,Z </ var> are not used in this site.</ strong>< br />< hr />

< address>Mickey Mouse < br /> Box 123 < br /> Disneyland </ address>

</ body>

</ html>

Lists

Lists are the next element of an HTML document. Lists are an often–used constituent in a web page.

A great way of laying out information is through lists. Lists are simple to read and easy to look at. They make the web page look attractive and readable. The user can understand and retain more if the information is presented to him in a list.

List index tag; the primary concept of list, is discussed below.

List Index Tag

The list index tag is written as <li>. It defines the start of a list item. The <li> tags are used in both unordered and ordered lists.

Note: The example of list index tag is shown with the example of unordered and ordered lists.

Lists can be classified under Ordered Lists and Unordered Lists.

Unordered Lists

An unordered list is defined by the tag <ul>. It is a list of items in which the items are preceded by bullets or by markers.

Example:

<ul>

<li>Classic jokes </li>

<li>Math jokes </li>

<li>Food jokes</li>

</ul>

Output:

Classic jokes

Math jokes

Food jokes

Ordered Lists

An ordered list is defined by <ol>. An ordered list is quite similar to unordered list. The only difference is that numbers precedes the list items of ordered list. The first list item gets the number “1” and so on.

The following example illustrates how lists are used in the web page:

Example:

<ol>

<li>Crazy jokes</li>

<li>Ethnic jokes</li>

<li>Golf jokes</li>

</ol>

Output:

1. Crazy jokes

2. Ethnic jokes

3. Golf jokes

The following example illustrates how lists are used in the web page:

Example:

< html>

< head>

< title> My list of jokes </ title>

</ head>

< body background = "myimage.jpg" text = “blue”>

< h1>This is my list of jokes </ h1>

< ul>

< li>Classic jokes </ li>

< li>Math jokes </ li>

< li>Food jokes</ li>

</ ul>

< hr />

< ol>

< li>Crazy jokes</ li>

< li>Ethnic jokes</ li>

< li>Golf jokes</ li>

</ ol>

</body>

</html>

The web page looks like this:

ExpertRating HTML Certification - Get Certified Now!!