HTML -- Lesson 4

Lesson 4

In this lesson we will be talking about horizontal lines, bullets, and preformatted text.

First off is the horizontal line. To make one you need to use the <HR> tag. There is no end tag for this one. It is as simple as that, but there are ways to manipulate it.....

First off is the original horizontal line:


That will create a line that seperates things from one another, like the one below.

Now to further manipulate this line, with the size attribute:

<HR SIZE="10">
<HR SIZE="20">

That will make 2 lines with sizes of 10 and 20 pixels. Shown below:

Another way to change the horizontal line is with the width attribute:

<HR WIDTH="50%">
<HR WIDTH="20%">

Now we will have 1 line that is 50% as wide as the original line, and one line that is 20% as wide as the original line, as shown below:

To finish off the <HR> tag teachings with the ALIGN attribute, which can be used to align a horizontal line, left, right, or center. We will align it to the right, using the other attributes weve already learned:

<HR WIDTH="30%" SIZE="15" ALIGN="right">

Now the result is below:

Looks sort of like a box, but its just a horizontal line that has been effected by attributes, so it is small, fat and to the right.


Now we will talk about bullets. Bullets are ways to list things, and sort of be organized. We are using the <UL> and <LI> tags.

<LI>First Hello
<LI>Second Hello
<LI>Third Hello

The above code will make 3 bullets, as shown below:
  • First Hello
  • Second Hello
  • Third Hello

We put our bullets between the UL tags and end it with the </UL> ending tag to tell it we are done using bullets.

Preformatted text

Preformatted text is pretty much just a way to show on your website exactly what you want to write.

Using the <PRE> and </PRE> tags.


   /--- /
   \--- \


Without PRE it would end up looking like this:

/--- / O-----} \--- \

But because of PRE it can end up just the way i wrote it like this:

   /--- /
   \--- \

Very useful if you want to draw things using text, or if you just want something to look exactly how you want it to look, do with it what you may.

Thats it for this lesson, check out the next one when its done.
Join Today
Join our Website's Jester Forum today!
Its FREE and easy......
Click Here


Enjoy the STAY

If you enjoyed this page,
add 2 favorites or tell a friend

Daily Event
Fortune of the Day

Quick Search
Ads & News
40199 visitors
=> Do you also want a homepage for free? Then click here! <=