How do I make numbered (ordered) lists? Making a numbered list is really easy, and it's a great tool for organizing information on your Web site. Just copy and paste this code into your html document (substitute your own information):
<OL>
<LI>HTML
<LI>CSS
<LI>Frames
<LI>Tables
</OL>
It will look like this:
- HTML
- CSS
- Frames
- Tables
Sometimes your lists will be split up on your page between headers, and you may need to start a list from a different number. Replace the <OL> tag with this tag, remember to replace the "5" with whatever number you need to start with:
<OL start="5">
- HTML
- CSS
- Frames
- Tables
To substitute Roman numerals replace the <OL> tag with this one:
<OL type="I">
This will be the result:
- HTML
- CSS
- Frames
- Tables
Need alphabetical order instead? Replace the <OL> tag with this one:
<OL type="A">
This will be the result:
- HTML
- CSS
- Frames
- Tables
How do I make bulleted (unordered) lists? Bulleted lists are really cool. Just copy and paste this code (substitute your own information):
<UL>
<LI>HTML
<LI>CSS
<LI>Frames
<LI>Tables
</UL>
It will look like this:
Here's a variation of the above list, replace the <UL> tag with this tag:
<UL type="circle">
The result:
You can make the circles in the above list squares instead by adding type="square" into the code (<UL type="square">). It looks like this:
You can combine ordered and unordered lists to make outlines. The following code is just an example of what you can do, you can experiment with this to make your own:
<ol>
<li>Web Site Stuff
<ul>
<li>HTML
<li>CSS
<li>Frames
<li>Tables
</ul>
<br>
<li>Web Site Tools
<ul>
<li>Guestbooks
<li>Polls
<li>Tagboards
<li>Forums
</ul>
</ol>
This is the result:
- Web Site Stuff
- Web Site Tools
- Guestbooks
- Polls
- Tagboards
- Forums
How do I make bulleted lists with images? Find a small image that would be suitable for a list, and use the following code. The font properties, color and size, can be controlled by using a style sheet. Subsitute your own information where you see bold text:
<ul style="list-style-image: url(
yourfilename.gif)">
<li>HTML</li>
<li>CSS</li>
<li>Frames</li>
<li>Tables</li>
</ul>
Here is an example:
How do I make horizontal lines? This is pretty easy to do, and you can make them any size you want by changing the size property (height) and width property. The width can be specified in a percentage or actual pixel size. To specify actual width, remove the percentage symbol and add your own width:
<HR width="80%"> It would look like this:
<HR size=5 width="70%"> It would look like this:
If you're using the IE browser, you can even color in these lines which is really cool because they load a lot faster than regular gif images. Here's how you do it:
<HR size=5 width="70%" color="#9933cc">
For those of you who are concerned about
validating your code, if you use the above tag with color, it won't validate.
The size attribute determines the height in pixels of your line. The width attribute determines the width of your line in pixels.
How do I make vertical lines? Vertical lines work much the same as horizontal lines:
Without color:
<hr width="
2" size="
200">
With color:
<hr width="
2" color="
#9966ff" size="
200">
Again, for those of you who are concerned about
validating your code, if you use the above tag with color, it won't validate.
The width attribute determines how wide your vertical line is, the size attribute determines the height in pixels. The color attribute only works in the Internet Explorer browser.
How do I make a text area? Text areas allow you to type in a large amount of text so that it doesn't take up as much room on your page. Your visitor can scroll down the text area to read all the text in the box. Just include this tag in the body of your html, wherever you want the box to appear, you can change the "rows" and "cols" tag to make your text area any size you want:
<form ACTION=URI><textarea rows="
5" cols="
20" >
Put your text here</textarea></form>
This is what it would look like:
I would suggest changing colors and attributes of forms and text areas with
stylesheets instead of the following method:
You can dress up your text boxes with color, like the ones on my page. Adding a few style tags changes the color of the background, and you can also add a border. You can change the things that you see in bold text, the size of the box (rows and cols), the font, font color etc. The border color will be the same as your font color:
<form ACTION=URI><textarea rows="5" cols="26" style="background-color:#ffccff; font-family:verdana; color:#9900ff; border-style:solid">Put your text here</textarea></form>
Another variation on the text area is a background. You can add a background to your text area by adding a simple style tag. Here is the code:
<form ACTION=URI><textarea rows="5" cols="26" style="background-image:url(butback.gif)">your text here</textarea></form>
Copyright 1997-2016 Lissa, All rights reserved
