txban.gif (6549 bytes)


mimidesign.gif (7912 bytes)


This Page Will Hopefully Put into Perspective in one
Place the Things You've Learned on Other Pages

Questions/Requests


 

While everyone's web page is different, they all have to have the same basic structure.
This language allows browsers  to read the page and understand what the author means.

The framework of a web page is this:

<HTML>
<HEAD>
<TITLE> Your Page's Title </TITLE>
</HEAD>
<BODY>
The Body of Your Page
</BODY>
</HTML>

The <HTML> </HTML> tells the browser that your page is definitely HTML code.
The <HEAD> </HEAD> encloses the header of your page. In the page header,
you can add lots of other commands which give the browser special information about your page.
The <BODY> </BODY> sections off the part of your page that will actaully be displayed.

Now that you have the framework, what actually goes in it? Well, think of the
body of a web page as an old WordStar-style document. It consists mainly
of text, modified by Tags. There are a wide variety of tags, some of which
are interpreted differently by different browsers.

NOTE: In general, all HTML commands will take the form:
<COMMAND> text </COMMAND>.


Style Tags modify the way your text looks. The following list is
not comprehensive, but it's close:

NOTE: HTML does not recognize more than one consecutive whitespace
as separate entities, so ten spaces, 2 carriage returns, 3 tabs and 5 more
spaces will look like a single space on your web page when viewed by a
browser. One of the only ways to get HTML to recognize multiple whitespace
characters is to use preformatted text. The downside is that it's displayed in a
blah, typewriter-like font.

Since HTML interprets carriage returns as spaces, special tags must be used
for carriage returns. The <BR> tag is the same as a carriage return, and
<P> is the same as two carriage returns.

NOTE: Since HTML condenses whitespace, two <BR> tags together are still
only equivalent to one carriage return. <P> must be used to get a space between lines.

Along the same lines as <P> and <BR>, is the <HR> tag. The difference
is that instead of a space between lines, it draws a line between them.
The thickness of the line can be controlled by using <HR SIZE=##>,
where ## is the thickness of the line you want.

There is also a No Break tag. It tells the browser that the enclosed text
should not be broken up unless absolutely necessary. The No Break tag
looks like this: <NOBR> text not to be broken </NOBR>.


Heading Tags are very similar to style tags. Headings come in six sizes,
1-6. 1 is the largest. 6 is smallest. The heading tag also includes an implicit
<P> at the beginning and end. The format for the heading tags is
<H#>heading</H#> with # being a number 1-6, and they look like this:

<H1>

This is a size 1 heading

</H1>

<H2>

This is a size 2 heading

</H2>

<H5>

This is a size 5 heading

</H5>


Another important HTML tag type is the List.
HTML supports four types of lists: ordered lists, unordered lists,
definition lists and menus. Menus are equivalent to basic unordered lists.
All lists begin and end with an implicit <BR> and, except for the definition
list (see below), they all take the form:

<OPEN LIST>
<LH> Optional list header </LH>
<LI> Item in the list </LI>
...
<LI> Item in the list </LI>
<CLOSE LIST>

Ordered Lists
use <OL> to open the list and </OL> to close the list.

  1. The items in an ordered list look like this.
  2. But the list doesn't have to be numbered!
  1. <OL TYPE=A> causes the list
  2. to be lettered in CAPS
  1. <OL TYPE=a> causes the list
  2. to be lettered in lower case
  1. <OL TYPE=I> causes the list
  2. to be numbered with large Roman Numerals
  1. <OL TYPE=i> causes the list
  2. to be numbered in small Roman Numerals
  1. And you can even start somewhere
  2. other than the beginning with <OL START=##>,
  3. where ## is the starting number. (Translate letters and numerals into their corresponding numbers, i.e. E=5, b=2, III=3, etc.)

 

To start the numbering at a specific place, add SEQNUM=num to the <OL ... > tag,
where num is the number to start the numbering with.
Adding CONTINUE to the <OL ... > tag will pick up the numbering
of this list where the last list left off.

So, a list starting at 49 would look like this:

<OL SEQNUM=49>
...
</OL>


Unordered Lists
use <UL> </UL> to open and close the list.

 

The unordered list can be modified by adding tags to the opening <UL ... > tag.
Adding PLAIN will create a list with no bullets.
Adding WRAP= will make your list "wrap" into columns.
WRAP=vert will make the list start a new column after reaching the bottom
of the page. WRAP=horiz will make the list divide into as many columns as the page has room for.
To use some other image instead of the standard bullet, include SRC="picture",
where picture is a link to the image you want to use. (See the next lesson: images)

An unordered list with no bullets that wraps vertically would look like this:

<UL PLAIN WRAP=vert>
...
</UL>


Definition lists

are two-part lists, useful for things like glossaries or defining lists of terms.
<DL> </DL> is used to open and close the list. The list items have two parts:
the term and the definition. The definition term is enclosed in <DT> </DT>
and should preceed the definition definition. The definition definition is
enclosed in <DD> </DD>. A list header can also be added as with the
other list types. So, the whole thing looks like:

<DL>
<LH> list header <DL>
<DT> term </DT> <DD> definition </DD>
...
<DT> term </DT> <DD> definition </DD>
</DL>

NOTE: The definition term and the definition definition do NOT
have to be on the same line like in the example.

Definition List:
This is how they look when viewed with a browser.
Their Use:
They are useful for any list shaped like this!

One useful feature of lists is that they can be nested, i.e.
one lists is a List Item of another list, like this:

<UL>
<LI>You can have one list...</LI>
<OL>
<LI>Inside of another list...</LI>
<OL TYPE=A>
<LI>Inside of another!</LI>
</OL>
</OL>
</UL>

Which looks like this:


Tables

are 2-dimensional lists. They are coded similarly to definition lists.
They have an implicit <BR> at the beginning and end. The format is:

<TABLE border=3 cellpadding=3 cellspacing=3>
<TR> <TD> Table Entry </TD> ... <TD> Table Entry </TD> </TR>
...
<TR> <TD> Table Entry </TD> ... <TD> Table Entry </TD> </TR>
</TABLE>

Each row is enclosed in <TR> </TR>. Within the row are cells, enclosed
in <TD> </TD>. The whole table is opened and closed with <TABLE> </TABLE>.
There can be as many rows and columns as you want and as will fit on the screen.
The browser will autoformat the rows, vertically centering cell contents if necessary.
If you want a cell to span more than one column, encolse it in
<TD COLSPAN=##> </TD>, where ## id the number of columns to span.
Similarly, <TD ROWSPAN=##> </TD> will cause the cell to span ## rows.
A border can the placed around all the cells by using <TABLE BORDER=##>
</TABLE>, where ## is the number of pixels thick the border should be.

Tables can contain
any amount of
INFORMATION !!!
INFORMATION

Another very useful ability is changing the Font Size.
This can be done two ways. First, is can be done with <FONT SIZE=##>
</FONT>, where ## is a number 1-7, 1 being smallest. It can also be done
with <FONT SIZE="##"> </FONT>, where ## is a number from -2 to +4.
There is a direct correlation between the two, i.e. 1="-2", 2="-1", etc.

Using the font tags, the whole text can be changed
Or just a part of it.
One of the cooler tricks with font tags is to simulate an ALL CAPS FONT.
Just make the caps a size or more larger than the lower case letters.

Centering can be accomplished with the <CENTER> </CENTER> tags,

<CENTER>Like this!</CENTER>

NOTE: Structures such as centering, tables, lists, and headings sometimes ignore
formatting applied outside of the structures limits. So,
<B><CENTER> text </CENTER></B> may not make "text" bold.
<CENTER><B> text</B> </CENTER> may be needed in this case.

Finally, we come to the topic of Links. Links are what makes an HTML
page be more than just a text document. Links come in three basic varieties:
links to other files, links to same file and links to pictures.
To link to another file on another server, use
<A HREF="http://www.address.com/path/filename.html"> anchor text </A>.
This is called absolute linking. The tag is called an anchor.

Example: TexasCook.Com

To link to another file on the same server, use <A HREF="path/filename.html">
anchor text </A>. That is called relative linking.

Example: Menu.Html

To link to a different place in the same file, you have to do two things.
First you must leave a pointer to the place in the file you want to link to.
The pointer looks like <NAME="abcdefg">. Then the link will look like
<A HREF="#abcdefg"> anchor text </A>.

Example: Link to the top of the page

Links to places in other documents can be done the same way.
<A HREF="Other.html#abcdefg"> anchor text </A> will do it.

Here's a cool trick from HTML 3.0: To have the link displayed in a new window,
add TARGET="_blank" to your anchor tag like this: <A HREF="url" TARGET="_blank">.
For an example, click on TexasCook.Com above.


To include a picture in your page, you use a slightly different link.
<IMG SRC="picture">. picture can be a relative or absolute link,
but absolute links are strongly discouraged because of the bandwidth they eat up.
(It's much quicker to access a local drive than to go out over the net for a picture.)
Here's an example picture from TexasCook.Com

<img src="/ma/mar1/images/texas100x100.gif">texas100x100.gif (8768 bytes)

A thing you will often see is an image as a link. It's easy, just put the image link in as the anchor text like this:

<a href="www.TexasCook.Com">

<img src="texasflag.gif></a>

texas68x50.gif (6994 bytes)

You can get rid of that colored border by using <IMG SRC="picture" BORDER=0>.
It can turn links like this:

 

Into links like this:

<a href="www.TexasCook.Com">

<img src="texasflag.gif" border=0>

texas68x50.gif (6994 bytes)

All images should have at least these attributes:
<img src="address of picture" height="XX" width="XX" alt="alternate name">
Using height and width allows your text to load while it's waiting for the Image

Another important feature of images is alternates. In case your image
doesn't load, or if the viewer is using a non-graphical browser, your text alternate will be diplayed.
Alternates are done with <IMG ALT=text ... >. If text contains any whitespace, it must be enclosed in quotes.

Other interesting things can be done with IMG links.

By using <IMG BORDER=## ... >, with ## equal to a number, a border
can be added to pictures whether they are anchors or not.
By using <IMG HEIGHT=## WIDTH=## ... >, the height and width of the image
can be controlled. ## is the height or width you want to image to be. This is useful in formatting.
By using <IMG ALIGN=?????? ... >, a variety of things can be done. ??????
can be one of five things: TOP, MIDDLE, BOTTOM, LEFT or RIGHT. Default is BOTTOM.

 

blankjewel.gif (1638 bytes)Top Aligned
    blankjewel.gif (1638 bytes)Middle Aligned
    blankjewel.gif (1638 bytes)Bottom Aligned

That's it! That's all the basic HTML you need to know to write an really impressive
homepage. It may seem like a lot, but most of it is really rather intuitive, and
you should pick it up pretty quickly once you start using it.


Now we come to the frilly stuff. I've shown you how to make a basic page and
how to create the structures and links that go into it. Now I'll teach you how
to make it pretty. That includes backgrounds and color. I'll add more frills later.

Let's start with color. The first thing you need to know about color in HTML
is the way it's always coded. Colors are coded as a 6 digit hex RGB number.
English translation: colors are represented by their composition: red, green,
and blue, hence RGB. The amount of each of the prime hues present in
a color ranges from 0 to 255, which is 00 to ff in Hexidecimal.
Since each color contains mixtures of the three primary hues, each taking
2 digits to represent in hex (short for hexadecimal or base 16), the whole color takes
6 digits.
Easy Solution: Go Here and Write down the #'s
Here are some examples:

Red: ff0000
Green: 00ff00
Blue: 0000ff
Magenta: ff00ff
Purple: 9900dd
Light Gray: bbbbbb

Colors can be used in several ways. Here's a list:

 

All but the last item are done in the <BODY> statement. The last is done
similarly to font size. (From here out, I'll use "RRGGBB" to represent colors.)

To add color to the body statement, you just add your color statement to
the body declaration, like this: <BODY colortag=RRGGBB>.
Each thing you want to color has a different tag to replace colortag.

To make the background some color other than the usual dull gray, use BGCOLOR="#RRGGBB"
To change the overall text color, use TEXT=RRGGBB. The individual text color
tag will override the overall text color for the text it encloses. (See below.)
To change the color of links that haven't been visited yet, use LINK=RRGGBB.
To change the color of links that have been visited, use VLINK=RRGGBB.
When you click on a link, it momentarily changes color. (I believe the default is red.)
To change that color, use ALINK=RRGGBB.
On this tutorial, I have LINK, VLINK, and ALINK all set to the same default.
Also, remember to make your text color readable
over your background color!

Coloring specific text is done very much like changing the font size. The tag is: <FONT COLOR=RRGGBB> text to be colored </FONT>. This tag can be
combined with the font size, so you'd have: <FONT COLOR=RRGGBB SIZE=#> text </FONT>.
This font coloring will override the TEXT color, but not LINK, VLINK or ALINK.

To add a background image, add BACKGROUND="path/picture" to the body
declaration like we did with background color. the path and file name should
be specified as though it were an image link. (See Links.)

Example: <BODY BACKGROUND="textile.gif" TEXT=d0d0ff LINK=a0a0ff>

That's all there is to it. With these few tags you can do some pretty amazing stuff.
The real key to a great looking page is a good background image. One that tiles well is preferable.
If you see a background that you'd like to use on someone else's page, right
click the page, hit save background as... and save away, now it's yours.
Try it now with this page if you'd like.

Comments are an important part of any coding. They let you annotate your
work so you know what you were thinking when you wrote it. In HTML,
comments aren't as useful as in conventional programming languages, but they are
still pretty handy.
The comment tag looks like this: <!-- Your Comments Here -->
Nothing inside the comment tag will show up when your page is viewed.
It's there just to leave a note to yourself or to anyone else who views your source code.
I've seen comments used to note places for future changes and even to give copyright information.


Forms  must be used with cgi functions. The HTML will only
give the visual effect of a form.

Now we'll step a little into the grey areas of HTML. Forms are a way to
allow interactive use of your page. Forms allow the user to enter all sorts of
information. That information is sent to a script for processing. Eventually, I'll
add something on scripting, but until then, ask your ISP or sysop about how to write scripts.
Forms begin with the <FORM ACTION="path/script.pl" METHOD="get">
tag and end with </FORM>. In between you can have entry blanks, text areas,
checkboxes, buttons, radio buttons and any usual HTML construct.
path/script.pl is the address of your script. Talk to your system administrator to find out about that.

Entry Blanks take the form <INPUT NAME=name SIZE=##>.
When the data is sent to the script for processing, every data element has a name.
name is the name the data recieved from that entry blank will be called.
## is the number of characters wide the blank will be. If a user types in more than
## characters, the blank will scroll, but only ## will be displayed at a time.

Example:

This blank is 20 characters wide.

Text Areas are like big entry blanks. Entry Blanks can only be one line,
but Text Areas can be as big as you'd like. The workspace on the Scratch Pad is a Text Area.
Text Areas take a different form from the other form elements. They begin with <TEXTAREA NAME=name ROWS=## COLS=##> and end with </TEXTAREA>.
Any text between the tags will come up as the default text in the Text Area. name
has the same meaning for all form elements. ## is the number of ROWS or
COLumnS the Text Area will take up. Just like with entry blanks, if more
than that is entered, it will scroll, but it will only display ##x## characters.

Example:

Radio Buttons and Checkboxes take the form
<INPUT NAME=name TYPE="type" VALUE="value">.
type is either radio or checkbox. Checkboxes let the user check
things from a list. Radio Buttons are similar, but only one button with a
particular name came be pressed at a time. So, if you had two radio
buttons named ANSWER, the user could only select one of them.
If the user tries to pick a second button, the first one is unselected.
value is the data value the item passes to the script if the item is clicked.
So, if a checkbox named Skemar, with a value of YES was checked,
it would pass the script Skemar=YES.

Example:

Radio Button #1 Checkbox #1
Radio Button #2

Checkbox #2

For submit/reset and other buttons see Forms.

Return to Menu

More TexasCook Destinations

Associates of TxCk Family


Page Design By
skemar.gif (1279 bytes)