Home HTML and CSS Tutorials The Basics of HTML

The Basics of HTML

Author: Selena Sol More by this author

Added: Oct 10, 2005 Rating:

Level: All levels Software: Dreamweaver

Exercise Three

Okay, let's return to the page we made about ourselves and try to use some of the text sizes, positioning and style tags that we just learned to spice things up.
Below is an example of what your code might look like on the web:

Below is the actual code:

<HTML>
<HEAD>
<TITLE>Bob Frog</TITLE>

</HEAD>
<BODY>

<BLOCKQUOTE>
<BASEFONT = "Arial">

<ADDRESS>
<P ALIGN = "RIGHT">
Bob Frog
<BR>bob@frog.com

<BR>26 Ayer Rajah Cres. 12-01
<BR>Singapore, 12994466556
<BR>(65) 657-4586
</P>
</ADDRESS>

<P ALIGN = "LEFT">

<FONT SIZE = "4" COLOR = "RED">
<B>About me</B>

</FONT><BR>

<BLOCKQUOTE>
Hello, my name is <B>Bob the
Frog</B> and I am 278 years old
from the <I>Gamma Quadrant</I>.
I have 23 sisters and 1 brother.  I am the
oldest, though.  You can find out more about
me by sending me email!
</BLOCKQUOTE>

<P>

<FONT SIZE = "4" COLOR = "RED">
<B>About my work</B>
</FONT><BR>

<BLOCKQUOTE>
I am currently a software engineer working in

<FONT SIZE = "5">S</FONT>
<FONT SIZE = "4">i</FONT>
<FONT SIZE = "3">n</FONT>
<FONT SIZE = "2">g</FONT>
<FONT SIZE = "2">a</FONT>

<FONT SIZE = "3">p</FONT>
<FONT SIZE = "4">o</FONT>
<FONT SIZE = "5">r</FONT>
<FONT SIZE = "6">e</FONT>
doing <U>training</U> and

<U>development</U>.  I enjoy my work
and have all sorts of really cool projects.
</BLOCKQUOTE>

</BASEFONT>
</BLOCKQUOTE>

</BODY>
</HTML>

Lists

The final section today will focus on using lists within your HTML pages. There are several types of lists that are used commonly. These include:

Unordered lists like this one
Ordered lists in which bullets keep track of the hierarchy
Definition lists that look like glossary entries.

Unordered Lists

Unordered lists allow you to create lists with various bullet styles. However, those bullets are images, and thus, do not reflect the level of hierarchy except visually.
The basic unordered list involves three tags
The <UL> tag is used to open a list. The <LI> tag is used to signify a list element, and the </UL> tag is used to end a list.
For example, the following code could be used to create a list:

<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>

</HEAD>
<BODY>
<B>Food</B>

<UL>
<LI>Vegetables

<UL>
<LI>Broccoli

<LI>Carrot
<LI>Pea
</UL>

<LI>Meat

<UL>
<LI>Chicken
<LI>Beef
<LI>Pork

</UL>

</UL>
</BODY>
</HTML>

The previous code would produce the following HTML list:

Food

Vegetables
- Broccoli
- Carrot
- Pea

Meat
- Chicken
- Beef
- Pork

Modifying the Bullet

You can modify the look of the bullets by using the TYPE attribute in the <UL> tag.
The TYPE attribute supports the following VALUES: CIRCLE, DISC, or SQUARE
Below is some code that demonstrates the usage of the TYPE attribute.

<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>
</HEAD>

<BODY>
<B>Food</B>
<UL TYPE = "SQUARE">
<LI>Vegetables
<UL TYPE = "DISC">
<LI>Broccoli
<LI>Carrot
<LI>Pea

</UL>
<LI>Meat
<UL>
<LI>Chicken
<LI>Beef
<LI>Pork
</UL>
</UL>
</BODY>

</HTML>