Lissa Explains it All -- HTML Help for KidsHTML Help, css, frames, tables, div layersCustom CursorsHTML Help ForumFree E-mail Service for Kids (and adults who love bright colors ;)Lissa Explains it All -- Free PostcardsLissa Explains it All -- MerchandiseLissa Explains it All -- Guestbook
HTML BasicsHTML TutorialCSS TutorialFrames TutorialTables TutorialColor TutorialFree JavascriptsFun Free Stuff for your siteMySpace TutorialHTML Tutorial
spacer
Lissa Explains it All -- HTML Help for Kids


| Section 1 | Section 2 | Section 3 | Section 4 |
| Section 5 | Section 6 | Section 7 | Section 8 |
| Section 9 |


How do I make numbered (ordered) lists?
How do I make bulleted (unordered) lists?
How do I make bulleted lists with images?
How do I make horizontal lines?
How do I make vertical lines?
How do I make a text area?



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:

  1. HTML
  2. CSS
  3. Frames
  4. 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">

  1. HTML
  2. CSS
  3. Frames
  4. Tables


To substitute Roman numerals replace the <OL> tag with this one:

<OL type="I">

This will be the result:

  1. HTML
  2. CSS
  3. Frames
  4. Tables


Need alphabetical order instead? Replace the <OL> tag with this one:

<OL type="A">

This will be the result:

  1. HTML
  2. CSS
  3. Frames
  4. Tables


up

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:

  1. Web Site Stuff
    • HTML
    • CSS
    • Frames
    • Tables

  2. Web Site Tools
    • Guestbooks
    • Polls
    • Tagboards
    • Forums


up


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:



up


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.

up


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.

up


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>





up




| About Lissa | Privacy Statement | Contact | Link Us |

Copyright 1997-2016 Lissa, All rights reserved
This Web site is registered with the Library of Congress Copyright Office.


lissaexplains.com