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:
code</CODE></ADDRESS>
preformatted text
</PRE>
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
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>
</H1>
<H2>
</H2>
<H5>
</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.
To start the numbering at a specific place, add SEQNUM=num to the
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
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.
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
Similarly,
A border can the placed around all the cells by using
</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>, where ## is a number 1-7, 1 being smallest. It can also be done
with
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
abcdefg">
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:
For an example, click on TexasCook.Com above.
To include a picture in your page, you use a slightly different link.
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 TexasCookdotCom
<img
src="/ma/mar1/images/texas100x100.gif">
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>
You can get rid of that colored border by using picture"
BORDER=0>
It can turn links like this:
Into links like this:
<a href="www.TexasCook.Com">
<img src="texasflag.gif" border=0>
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.
Top Aligned
Middle Aligned
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:
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:
combined with the font size, so you'd have:
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.)
The image you specify has to be a GIF.
I have put together a library of backgrounds and images you can use.
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:
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
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 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 name ROWS=## COLS=##>
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
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.
For submit/reset and other buttons see Forms.
Page Design By
**FREE** INCREASE YOUR HITS AND GET 20MB'S OF WEBSPACE! **FREE** |
