HTML Class 3

 
covering:
lists
forms
tables

Providing you some helpful links

please stop this girl at any point if she moves along to fast or you have further questions

Lists
<UL>
<LI>they present information in an easy fashion.
<LI>the bullets look cool.
<LI>they make this girl happy.
</UL>

looks like this...

• they present information in an easy fashion.
• the bullets look cool.
• they make this girl happy.


UL stands for Unordered List. it means bullets will be used rather than numbers.

LI stands for List Item. it denotes the next thing that will receive a bullet. please note that no </LI> is required. neither is a Break or Paragraph command. the LI does all that good stuff for you.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The TYPE attribute can be used to set the bullet style on UL and LI tags.
The permitted values are "disc", "square" or "circle".
The default generally depends on the level of nesting for lists.

     with <li type=disc>


     with <li type=square>


     with <li type=circle>


the </UL> ends the entire list

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ but if you try this in a cork, your results can get screwy because a cork has embedded <ol> and and <li> so if your getting numbers instead of dots do a </ol> and a </li> first then starting, this one thought the bullets tons of fun

OL= ordered list

an extra you can make it come out with numbers by using this command:

numbered list:
<OL>
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</OL>

 
1. List Item 1
2. List Item 2
3. List Item 3


roman numerals:
<OL TYPE="I">
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</OL>
 

1. List Item 1
2. List Item 2
3. List Item 3


Ordered list types: (you would replace the "I" above with whatever type you desired below
1  - Arabic numbers - 1, 2, 3, ...
a - lower alpha - a, b, c, ...
A - upper alpha - A, B, C, ...
i  - lower roman - i, ii, iii, ...
I - upper roman - I, II, III, ...

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Definition lists take the form:

  <DL>
    <DT> term name
    <DD> term definition
 </DL>

DT elements can only act as containers for text level elements, while DD elements can hold block level elements as well, excluding headings and address elements.
DT = (Definition List) Term
DD = (Definition List) Definition
so you have a term or word and are defining it like in a dictionary

For example:

<DL>
<DT>Term 1<dd>This is the definition of the first term.
<DT>Term 2<dd>This is the definition of the second term.
</DL>

which could be seen as:

Ar
     One of the oldest city on Gor, it has 10,000 years of recorded history.
Arani
     (noun): a minor tribe of the Tahari; they are a vassal tribe of the Aretai
 

 
Forms

This is used to define an HTML form, and you can have more than one form in the same document. Both the start and end tags are required. Forms can contain a wide range of HTML markup including several kinds of form fields  such as single and multi-line text fields, radio button groups, checkboxes, and menus. Forms are something that isn't used alot, so this girl won't go into them to much, mostly  just the ones you might use on a page which off hand would more then likely be the mail to form or as in some of the family rooms and the StrongHold of Thentis page the drop down box form, but there again even with drop down boxes, there are many different ways to tag them and make them, some seem to work better in some places then others
 
 

Mail To: Form
<a href="mailto:[email protected]">[email protected]</a>

[email protected]

when you click on this form link you can directly email this person

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Drop Down boxes forms:

you will notice variations in drop down boxes, there is a large selection of things one can do
with them, there are some in some of the StrongHold of Thentis rooms different then this one as
most of you have probably seen. Some drop down boxes act as links as in this example, some
are used more like a list.  Remember opening and closing tags are needed here

This example is on the StrongHold of Thentis entrance page made by Master AShton
you will notice some familiar tags built into this to that are extras
the <b> making the text bold
<font color> coloring the text red that you see below
<br> putting a line space in

<form action ="http://soi.hyperchat.com/cgi-bin/soi.cgi" method="post">
<b>
<font color="#FF0000">Choose a room:
<input type="hidden" name="vqvaa" value="directory">
<select name="vqxfi">
<option value=larltarn>The Larl and Tarn Tavern
<option value=nightlib>Library La Luna
<option value=athos@gor>Upon the pages of
<option value=ships>The Silver Ships Hall
<option value=slknlthr>The Silk n' Leather Tavern
<option value=greenca>The Green Caste Inn
</font></b></select>
<br>
<b>
<font color="#FF0000">
Enter a handle and hit the button:
</font></b>
<br>
<input type="text" size=16 name="vqxus" value="Visitor">
<input type="submit" name="vqvai" value="I Am Over 18">
</form>

Choose a room:The Larl and Tarn TavernLibrary La LunaUpon the pages ofThe Silver Ships HallThe Silk n' Leather TavernThe Green Caste Inn
Enter a handle and hit the button:

 

Tables
table border= the width of the border surrounding you table
<td>= represents the table cell's data

with <table border> you designate the width of the border around you table you make
<table border=8><td>tables </td></table>

 

tables

 

<table border=8><td>table cells automatically adjust to whatever
you place within them</td></table>

 

table cells automatically adjust to whatever you place within them

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

tables can have multiple cells or rows also
<tr>= stands for table row

<TABLE>
<CAPTION>StrongHold of Thentis Masters</CAPTION>

<TR>
<TD>AShton</TD>
<TD>Athos</TD>
<TD>Red Tarn</TD>
</TR>

<TR>
<TD>Hades</TD>
<TD>Euan</TD>
<TD>Yellow Wolf</TD>
</TR>

<TR>
<TD>Chapin</TD>
<TD>Foreign Seeker</TD>
<TD> </TD>
</TR>

</TABLE>
 

StrongHold of Thentis Masters

AShton	Athos	Red Tarn
Hades	Euan	Yellow Wolf
Chapin	Foreign Seeker

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

you will notice that the above table has no border, this girl purposely left out the attribute
<table border> and just made it <table> instead to show you what it would look like
the one below was made with <table border=5> instead of leaving out the border
that's the only difference

and you might notice this girl has purposely left one cell unfilled so you could see the effect
 
 

StrongHold of Thentis Masters

AShton	Athos	Red Tarn
Hades	Euan	Yellow Wolf
Chapin	Foreign Seeker

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Remember that whatever follows the <TD>command will appear in the cell. And the cells, by
column, will be of equal size using the largest cell as the model for the others.

you can also use the align attribute with tables just like with images and text, can add
colored backgrounds within the table and space the cells further apart, you can make your text within the cell a link like you can any wording, or add a picture within a cell, make the picture in the cell a link, the possibilities go on and on
you have already learned how to do the links, align and images but here are a couple of attributes you don't have yet

CELLSPACING= gives the amount of space between cells. I'd keep this kind of small. Large
spacing tends to defeat the purpose.

CELLPADDING= gives the amount of space (or padding) between the cell border and the
cell contents. Note the cell border walls tend to fill out.A higher number fills out more. Try a few different settings. Sometimes bigger is better.

WIDTH= width of the entire table

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Framing an image

this is the same idea as the first frame this girl showed you except instead of text between the <TD> and <TD> tags you insert a image link, also added the align attribute here so you could see it work

<TABLE BORDER="10" >
<TR>
<TD ALIGN="center">
<IMG SRC="http://soiuser.hyperchat.com/mistie/slave.jpg">
</TD></TR></TABLE>
 
 

the next class with get you started on web page building now you have the basics
for it all and when done will be building yourself a character page as Master Ashton
calls them
giggling softly
inother words a page you can post in soi to represent who you are here as this girl has here
http://soiuser.hyperchat.com/ashtonsmistie/homepage.html
some call it a homepage, others will be able to click on the ~ posted after you name once loaded
to soi and see who you are
smiling

so for now begin looking at backgrounds, think about what you want to express about who
you are here in gor@soi, collect images if you want to add to it

Netscape Users:
right click on the object and scroll down to save image as and click
then just pick where on your hard drive or disc you want to save the image to and save it

IE users:
right click on the object and scroll down to save picture as and click
then just pick where on your hard drive or disc you want to save the image to and save it

Providing you some helpful links

HTML class #4
covering: web page building

Html Guides
Html Basics

Stone Throw's qwic and easy html course

Html Primer

Colors
Lick Me's Color Specifier for Netscape 3.0

Basic Color Code

Colors in Netscape

Backgrounds
there are alot of background sights out there with free graphics, if you want more just message this girl
Background tiles

Absolute Background textures - over 3100 textures here

Teaser's Backgrounds

Giant background page

Marvelous Backgrounds

Wallpaper
Smoking Dragon Wall Paper links

Wallpaper by Stormi

Desktop Wallpaper

Desktop Heaven

Music
Master AShton's Music Page

SeaDance Midi and wave files

Ultimate Midi collection

The Midi Library

Fantasty Artwork
ImageNETion

Lots of Fantasy art links

Huge list of artists

Graphics
Doctor Draac's animated gif's

Fantasyland Graphics

Chosen Graphics

Clip art and graphic links

Other helpful links
Free Guestbooks

All kinds of free stuff - from counters, guest books, email accounts

Cool Text - online graphics generator

Design your own web graphics

 
 

Hosted by www.Geocities.ws