Menu
|
|
||
|
|
||
|
|
||
|
Show me da Colors!
|
|
|
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
Introduction
Hi Folks! So you want to learn HTML huh?
Well, there's nothing I can add to what has already been published about HTML,
but maybe I can explain it in a simpler fashion. After all this stuff is
supposed to be fun, right? I don't claim to be an expert here, quite the
contrary. Before I started my page in August of 1996 I didn't even know what
HTML was! I have learned a few things since then though. The fact that you're
sitting here reading this is proof of that. So let's get started.
What is HTML?
Just what is HTML anyway? Well, its
initials that stand for "Hyper Text Markup Language". Huh?!!!
The last word describes it best. It's a Language that Browsers look at to see
how a document should be displayed within the Browser. If you're using Netscape,
you can go to "View" then "Document Source" and another
screen will appear that shows the raw HTML document. Everything in that
document between the "<" symbol and the " >"
symbol is HTML language. Each individual command is entered within these
symbols.
How does this Language work exactly?
Beats Me! And who cares? Lets leave that
kinda stuff to the Super Nerds. We're here to have fun remember? As long as it
works we don't need to know exactly how it works. We just need to know what the
commands do, and how to write it.
OK Rick, I'm ready to
write my HomePage.
OK, but a couple suggestions first. Until
you learn the language and what each command does, lets stay away from those
automated editors. They're nice, but when you run into a problem in one of your
pages, and you don't know the language, it's darn near impossible to figure out
what your problem is. All you really need to write a HTML document is something
like Windows Notepad. Once you're comfortable with the biggest part of the HTML
codes and what they are telling your browser to do, then we'll find you one of
those fancy editors. Now I've already mentioned that the HTML codes go in
between the "<" and the ">" symbols, so
you know they are important. Another little symbol that's important is the
"/ " symbol. Think of it as an off switch. It cuts a previous
command off. Let's say you want to center your Welcome on your page. It would
be wrote like this in the HTML document:
<center> Your Welcome would go Here
</center> The </center> command is telling the browser to cut off the previous center command. If you left this out, everything after the <center> command would be centered in your page. So you can see where leaving out this off switch could cause you problems. Some commands don't require this off switch, such as a code that loads a graphic image in the page, it just loads the image and that's all. This off switch is mainly used in codes that have to do with the format of the page. Such as font size, center etc. Now let's look at the basic form of a HTML Document.
<HTML>
<HEAD>
<TITLE> What you put here will show up on the very top bar of your browser.</TITLE>
</HEAD>
<BODY>
This is the Main Document includes Text, Images, Sounds, whatever you want
</BODY>
</HTML>
The above is very basic, but it gives you an idea of the layout of every page you're gonna create. So study it over. Write it out in a notepad file putting whatever you want in the Title and Body section and then save it as something like "test.htm". Then in your browser menu bar click on "File", then "Open file in Browser" then choose " test.htm" file. You'll see your first HTML file. Ya Hoo!
Lets Jazz it up a Bit
When you loaded the previous
"test.htm" up it looked plain as a mud fence huh? Well that's easy to
fix with a few extra codes. First you'll probably want to ad a background color
or maybe even a gif, tiled as wallpaper. Now that we've actually started
writing HTML files. Let's make a directory on your hard drive called "Homepage"and
two subdirectories "Test" and "Index" - Test
is where we'll try things out and the Index is where all the files associated
with your own Homepage is gonna reside. As a rule, keep all files that the HTML
references in the same directory as the HTML file. Now let's open that "test.htm"
back up in your text editor and add the code for some background color. In the <Body>
line edit it so it look like this:
<Body bgcolor="00CCFF"> Now save the file. The "bgcolor" stands for background color and the numbers and letters represent the color in hexadecimal code for red/green/blue. Now load the "test.htm" up in your browser. It should now have a nice light blue background. I've made up a chart with a lot of these color codes that shows the actual color and the code. Click here if you want to see it. Some other things that you might want to control the color of are:
text="Hexadecimal Code" This will be the default color of any text.
link="Hexadecimal Code" This will be the color of any hyper link on the page.
vlink="Hexadecimal Code" This will be the color of a visited hyper link.
alink="Hexadecimal Code" This will be the color of hyper link at the very moment of the mouse click.
All these will be in the Body line. And your document will default to the color codes you entered there. Not to say that you can't change the color of an individual area in the document, because you can. This just sets the default for the HTML file. Text is any plain text in the document. Link is any text that you can click on and it will take you to another page, area or site. Vlink means visited link and is any link that you've already visited. Alink means active link and is the color of the link at the actual time of the mouse click. This time is so short, usually less than a second, that most people don't even bother with setting this parameter at all.
But I want to use a Graphic as my Background !
No problem there, but keep a few things in mind.
- Make
sure its something that will tile well without seeing a lot of seams.
- Keep
the gif or jpg as small as possible physically, and in file size.
- Don't
use something to Loud or Gaudy for your background. Make it something
pleasing to look at and something that the text will show up well on.
Remember it's called Background for a reason!
- Make it
something that you wouldn't mind using on several pages as your
background. This will conserve some of your precious Web Page space.
- Keep
the letters in the name of your gif or jpg all in lowercase letters when
making reference to them.
- Make
sure the gif you want to use resides in the same directory as the HTML
file that's calling for it.
Now, here's how to do it. in the body line we're gonna put a reference to the file you want to use for your background like this:
Substituting the name of your gif where "name" is. you can still add the text color and link colors after this in the same line as so:
<Body Background="name.gif" text="000000" link="0000FF" vlink="CC33FF">
This would use your gif as the background. The default text color would be black. The link color would be blue. And the visited links would be purple.
How do I make these Centered Headers ?
There are several different size headers
you can make. You might want to put a Header before a certain subject or at the
top of your page. Here's what the code looks like for sever different size
headers:
<H1>TEXT</H1><H2>TEXT</H2>
<H3>TEXT</H3>
<H4>TEXT</H4>
<H5>TEXT</H5>
<H6>TEXT</H6>
And all these would show up like this on your page when viewed in the browser:
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
To center these headers or anything else
you want centered use the center tags like this:
<center><h1>TEXT</h1></center>
And this will result in seeing this: <center><h1>TEXT</h1></center>
TEXT
How do I control the Size of the Font ?
When you start writing the information in
your Homepage you will probably want different areas of the page to have
different sized fonts. This can all be set with the "font size="
code. The size of the font can vary from:
This
to
This You can get smaller than this
but who could read it and why would you want to ? This is a size -1. This
to
Write the font size code like this:
<font size=+2>Any text here</font>
Substituting any number for the +2 from -1 to +7. Don't forget to cut the font size off where you want that size font to end with the </font>.
Can the text be different Colors ?
Sure it can! The font can be any color you want. The color can be controlled with the color code
in the font line. Say you wanted to have a size +3 Red font saying Hello. The
code would look like this:
<font size=+3 color=red>Hello</font> Which would result in this:
Hello
You could also use the hexadecimal color codes to come up with just the color you want. To see a chart with a good selection of hexidecimal color codes click here.
Other font attributes
You can also make the text Bold and
in italics. This is done with the < B > for Bold and
< i > for italics. When either of these codes are used always put
the off switch for the code where you want it to end like:
<B>Bold</B> and
<i>Italic</i>
All of these font attributes can be real eye catching when used creatively .
All links are underlined, but sometimes you may want text to be underlined without a link being associated with it. This can be done simply with the <u> command.
This text is underlined
The code for the above would look like this:
<u>This text is underlined</u>
Some other things to note when creating the text portions of your page. The Browsers don't pay any attention to the carriage return you make when creating the HTML file. It just fits the lines according to the width of the browser window. If you want to put a line break in it can be done with the code <br>. This will insert a carriage return. Another code that does this and also adds an extra line is the Paragraph code which is <p>.
In certain instances you may want the text to show up in the exact position you have typed in your editor. In these cases you would use the code for pre-formatted text which is <pre> One disadvantage to using this command the text will show up on a fixed size font. No choices in the size, but all line feed, tabs, spaces etc. will show up just as you have typed them in your editor.
Say you wanted to start your text here
and skip 2 lines, then put a bunch of spaces in, and then
put some text under the space,
the <pre> would let you
do that. But who'd want to do that?
Don't forget to cut the pre-formatted text area off with </pre>.
Making Text Work Out Evenly
|
Somtimes you may want your lines of text to work out
perfectly even on your page or within a table on your page. This effect can
make things look really neat and uniform. This can be done simply with the
html code on the right. |
<p align=justify>
You can also use
"left" and "right" instead of justify to
align the text on your page or table.
<p
align=left>
<p
align=right>
|
Using Specific Screen Fonts
|
Arial
Arial Black Comic Sans MS Courier Courier New Helvetica |
Impact
Lucida Console Tahoma Times Times New Roman Verdana |
The code to set the font to Tahoma
would be the following:
<font face=Tahoma>Your actual text would go here then the command to
end the font change would be at the end</font
face> |
Putting
Pictures on Your Page
|
You've been very attentive up to this
point and have learned quite a bit I think. So let's take a break, go to the
kitchen and get yourself a nice refreshing beverage, not unlike the one shown
here.
|
 |
|
Ahhhhhhh, hits the spot huh? Let's see
what would go well with this beverage.....hmmmmmmmmm....A sandwich perhaps?
|
 |
Or maybe just a couple of headache pills
of your choosing. I'll leave that up to you. Once all that's settled, let's
move on.
|
Pictures can add a lot to your page if used
wisely. There are some guidelines that are good to go by when using graphics on
your page.
- As a
general rule for photographs use the JPG file format, and for
artwork use the GIF format.
- Keep the
file size of these graphics in mind when using them on your page.
Don't make someone wait for a 300kb file to load if it's not really
necessary.
- Use
thumbnails for the bigger photographs. This way the surfer can see a
small picture, which won't take long to load, and click on it if they
decide they want to see the bigger one.
- Use the
Height and Width numbers of the image in the line that loads
the graphic. This tells your browser the size of the image in Pixels that
the HTML file is wanting to load. With these figures in place the page
will put a faint line on the top and one side of where the graphic will
be, and let the text go ahead and load without having to wait on the
graphic to load.
- Don't put
too many graphics on one single page. This will make it very slow loading
and discourage future visits to your page. This is especially true with animated
graphics.
<img src="name.jpg" width=### height=###>
Substituting the appropriate where "name.jpg" is. This is the name of the file you want to use and can be .jpg or .gif format. Where the ### is after the height and width is where you put the size of the file in pixels. Use a program such as Paint Shop Pro to find this information out about the file.
A couple more things you might want to include in the image line is the alt= and border= command. The alt command prints out a line of text before the graphic loads that can give information pertaining to the picture. Can be extremely helpful to people using a browser where graphics are disabled. The border command makes a border around the picture and can be set to different numeric values. They would be put in the line like this:
<img src="name.jpg" width=### height=### alt="information about the file goes here" border=4>
Include the quotation marks as shown.
How do I Make those Horizontal Lines?
You mean like the one just above this
sentence? ;-) That's an easy one. Anywhere you want one of those lines to show
up just put the "<hr>" command. The hr stands for
horizontal rule. The "<hr>" command alone will
produce a thin line that is full width and slightly shaded. You can add some
more things to this command to make the line appear differently. For instance,
the thickness of the line can be controled with the "size=number"
inserted within the "hr" line. Substituting a suitable numeral
where it says number. You can also control the width and shade and
alignment of the horizontal rule. These extra commands will do that. "width=%number"
"noshade " will give you the darkest line, and "align=left
right or center" will put the line where you want it on the page. <hr
align=left size=5 width=25% noshade>" would produce a line that
looks like this.
How
do I create Lists?
A list can be a real asset to your page and
in some cases a necessity. There are three different kinds of lists we're gonna
dicuss here.
- Numbered
list.
- Bulleted
list.
- Definition
list.
<ol>
<li> Numbered list.
<li> Bulleted list.
<li> Definition list
</ol>
The above is an example of a numbered list. A numbered list is referred to as an ordered list and is created with the <ol> command. Each individual item in that list is called a list item. A list item is created with the <li> command. Each time you place this command in front of a line, it will assign it the appropriate number. At the end of your numbered list, close it with the </ol> command.
Another list that you sometimes see is a bulleted list. This type of list looks like the following:
- Numbered
list.
- Bulleted
list.
- Definition
list.
<ul>
<li> Numbered list.
<li> Bulleted list.
<li> Definition list
</ul>
A bulleted list is most often used when the items don't have to be place in any particular order. For this reason, a bulleted list is referred to as an unordered list and is created with the <ul> command. Each individual item within a bulleted list still starts with the list item, <li> command. The list ends with the </ul> command.
The last list we'll go over is a definition list. Here is an example of this kind of list:
Numbered list.
A list that
places items in numerical order.
Bulleted list.
A bulleted list
is most often used when the items don't have to be place in any particular
order. A bulleted list is easily recognized by the black dot in front of each
item.
Definition list.
A list that
contains the meaning of each item on the list, under that particular item.
HTML for the above looks like this: <dl>
<dt> Numbered list.
<dd> A list that places items in numerical order.
<dt> Bulleted list.
<dd> A bulleted list is most often used when the items don't have to be place in any particular order.
A bulleted list is easily recognized by the black dot in front of each item.
<dt> Definition list.
<dd> A list that contains the meaning of each item on the list, under that particular item.
</dl>
The definition list is created with the <dl> command. Then <dt> (definition term) goes before the actual term or phrase that's to be defined. Then <dd> (definition definition) goes before the actual defintion. Finally close the defintion list with the </dl> command.
Tell me all about Tables please
Are you sure you want to hear about the
tables? OK then, don't come crying to me when you wake up with a nightmare. By
strategically using a table you can take a very simple HTML page and make it
look pretty impressive. It also comes in handy for placing text and pictures
where you want them on the page. The basic commands we'll be using for making
tables are:
<table>
Starts your
table.
<tr>
Indicates a
table row.
<td>
Indicates table
data in a single cell of the table.
Most any other command used in tables has to do with the
appearance of these 3 basic commands. First determine how much of the total
page width that you want to dedicate to the table in percentage. If you want it
to take the full width you would type <table width=100%> This
would make the widest table. Next decide if you want the table to have a border
or not. The wide of the border is determined by a number. Generally between 3
and 10 will suffice for the border width. Lets say you decide on 5 for a
border. With this attribute added to our table line we now have <table
width=100% border=5>. If you wanted no border at all replace 5
with 0. Now we'll start a table row with the <tr> command.
Usually within this command you'll have an align= either left, right,
or center, depending on how you want the data within each cell aligned
within that cell. For this example we'll use left. So the table row line
would be typed as follows: <tr align=left>. This would align
everything in that row to the left side of a cell unless stated otherwise. The
only lines left for our first table is the <td>, table data lines
that creates a cell to hold data within a row of a table. For the <td>
line you need to determine how much of the total width of the table you want
each cell to have. Sometimes this takes some experimenting to come up with a
combination that suits your needs. For simplicity let's make two cells, each
half the width of our table. The table data line would be typed as: <td
width=50%>. Then the information you want in that first cell, then close
that first cell with the </td> command. And repeat the process for
the next cell. Here's a table made with these commands. |
This is the information for the first
cell.
|
This is the information for the second
cell.
|
<table width=100% border=5>
<tr align=left>
<td width=50%>This is the information for the first cell.</td>
<td width=50%>This is the information for the second cell.</td>
</tr>
</table>
If you had specified border=0 the table lines would be invisible and would look like this.
|
This is the information for the first
cell.
|
This is the information for the second
cell.
|
|
First
cell.
|
Second
cell.
|
Third
cell.
|
|
Fourth
cell.
|
Fifth
cell.
|
Sixth
cell.
|
|
Seventh
cell.
|
Eighth
cell.
|
Ninth
cell.
|
Here's what the HTML would look like for
this table.
<center><table width=60% border=5>
<tr align=center>
<td width=33%>First cell</td>
<td width=33%>Second cell</td>
<td width=33%>Third cell</td>
</tr>
<tr align=center>
<td width=33%>Forth cell</td>
<td width=33%>Fifth cell</td>
<td width=33%>Sixth cell</td>
</tr>
<tr align=center>
<td width=33%>Seventh cell</td>
<td width=33%>Eighth cell</td>
<td width=33%>Ninth cell</td>
</tr>
</table>
</center>
The 33% refers to a section width of the table, not the page. Also keep in mind that the line will wrap within the cell as information increases. These line wraps will increase the following cells within that table row also.
|
Here's
what I'm talking about with the line wraps. So some forethought in your
design of the table would be desireable.
|
Second
cell.
|
Third
cell.
|
|
Fourth
cell.
|
Fifth
cell.
|
Sixth
cell.
|
|
Seventh
cell.
|
Eighth
cell.
|
Ninth
cell.
|
If for any reason you want an individual
cell to span multiple rows or columns, you can do this by using the Colspan
and Rowspan commands in the Table Data row. Here's an example of one
using Rowspan.
|
This
cell spans 3 rows.
|
First
cell.
|
Second
cell.
|
Third
cell.
|
|
Fourth
cell.
|
Fifth
cell.
|
Sixth
cell.
|
|
|
Seventh
cell.
|
Eighth
cell.
|
Ninth
cell.
|
Here's what the HTML looks like for the
above table with the Rowspan.
<center><table width=60% border=5>
<tr align=center>
<td width=25% Rowspan=3>This cell spans 3 rows.</td>
<td width=25%>First cell</td>
<td width=25%>Second cell</td>
<td width=25%>Third cell</td>
</tr>
<tr align=center>
<td width=25%>Forth cell</td>
<td width=25%>Fifth cell</td>
<td width=25%>Sixth cell</td>
</tr>
<tr align=center>
<td width=25%>Seventh cell</td>
<td width=25%>Eighth cell</td>
<td width=25%>Ninth cell</td>
</tr>
</table>
</center>
Another alignment command that you might need when using the Rowspan is vertical align command, Valign=Center ( Top or Bottom could also be used.) This would align whatever you are putting in the cell that is spanning the rows. The Valign command would go in the line just about the Rowspan command. Here's an example using the Valign=Top command.
|
Top
of table.
|
First
cell.
|
Second
cell.
|
Third
cell.
|
|
Fourth
cell.
|
Fifth
cell.
|
Sixth
cell.
|
|
|
Seventh
cell.
|
Eighth
cell.
|
Ninth
cell.
|
Here's what the HTML looks like for the
above table with the Valign command.
<center><table width=60% border=5>
<tr align=center valign=top>
<td width=25% Rowspan=3>Top of table.</td>
<td width=25%>First cell</td>
<td width=25%>Second cell</td>
<td width=25%>Third cell</td>
</tr>
<tr align=center>
<td width=25%>Forth cell</td>
<td width=25%>Fifth cell</td>
<td width=25%>Sixth cell</td>
</tr>
<tr align=center>
<td width=25%>Seventh cell</td>
<td width=25%>Eighth cell</td>
<td width=25%>Ninth cell</td>
</tr>
</table>
</center>
Now, here's a similar example using the Colspan command.
|
This
cell spans 3 columns.
|
||
|
First
cell.
|
Second
cell.
|
Third
cell.
|
|
Fourth
cell.
|
Fifth
cell.
|
Sixth
cell.
|
|
Seventh
cell.
|
Eighth
cell.
|
Ninth
cell.
|
Here's the HTML for this table using the Colspan
command.
<center><table width=60% border=5>
<tr align=center>
<td width=100% Colspan=3>This cell spans 3 rows.</td>
<tr align=center>
<td width=33%>First cell</td>
<td width=33%>Second cell</td>
<td width=33%>Third cell</td>
</tr>
<tr align=center>
<td width=33%>Forth cell</td>
<td width=33%>Fifth cell</td>
<td width=33%>Sixth cell</td>
</tr>
<tr align=center>
<td width=33%>Seventh cell</td>
<td width=33%>Eighth cell</td>
<td width=33%>Ninth cell</td>
</tr>
</table>
</center>
Lastly before we leave tables. A question that I see on the help pages a lot is, "How do I put text next to a picture?". You might have noticed how the text was next to the pictures in the graphics help section. This is easily done using tables. The reason you may not realize this is most times the border is set to a value of "0" ( Zero ) so that there are no lines visble between the cells. So when you want to put text next to your pictures use all the above principles and apply them to get the effect you want. One thing that helps me when making tables with "no border" , I always set the border to a value like border=2 just so the line will show up and keep it there until I've completed the table. It makes it less confusing as you're building your table. Once you're finished and happy with the way it's layed out, you can go back and change the border value to 0 and the lines will disappear. Don't be afraid to experiment.
Let's
make some links!
Once you get your page made, in most cases
it will include several pages, you'll want to be able to link them together or
maybe even want link to something at another site. This can easily be done with
the Anchor and Hyper reference commands. Let's say you want some
text to link to one of your secondary pages. If you click on this text you will travel to
another page. The HTML to acheive this is as follows:
<a
href="another_page.htm">text</a>
You would place this command just before any text or graphic that you want to use as a reference to where ever you are sending the person surfing your page.
Sometimes the link you want to create is just a jump within the same single page. In this case you have to use a little different command in two different places within the document. At the place where the trip starts, and at the place where the trip ends up. At the starting point you would place the following HTML:
<A HREF="#exact_name_of_destination">Here's where the link text would go</A>
At the destination point you would enter the following HTML:
<A NAME="exact_name_of_destination">Destination arrived!</A>
Lastly, if you need to make a link to a complete other website you would use the following HTML:
<A href="http://www.exact.address.of.where.you.want.to.go.would.go.here">Link text or picture goes here.</A>
Just remember to keep all your text for your targets exactly as it is in the place your referencing. If you don't it won't work. If it don't work the first time you try it, go back and check the text and make sure it's exactly like the point you're trying to jump to. It can be case specific also.
Making an Email Link
<a href="mailto:your_email_address@domain.com"> Send Me Email </a>
Place your actual email address where I have your_email_address@domain.com
Making
Secondary Pages
Making
Jump Links
This would be the link:
<a href="#cookies">My Chocolate Chip Cookie Recipe</a>
This would be the spot on the page where it would jump to when you click the link:
<a name="cookies">My Chocolate Chip Cookie Recipe</a>
You can even jump to a specified spot on anther page, as long as you have that spot named on the other page and have the link reflecting that name.
What Is
An Image Map?
In order to make the image map, first you will have to decide on what image you want to use. You can use multiple images, but a map will have to be made for each image used. Once you have decided on the image, you will need a program to select the areas of the image you want to associate links to. There are many image map programs out there and a whole lot of them are freeware, so look for one of those. Go to Winfiles and do a search of their acchives using the keywords "image map" and it will come up with a whole bunch of image map programs to choose from.
Once you find a good image map program and get it installed, open the image you want to make the image map for, in the image map program. Once the image is open, the program will let you select areas on the image and then type in a hyper link for that area. Most all of the image map programs will let you select rectangular, square, circular, triangular or freehand shapes on the image. Each time you select an area of the image and then associate a hyper link to it, the program makes code that maps that area of the image with coordinates. When you finish you will have code that is your map for that image. This code has to be on the html file that your image is being loaded in. I usually put the image map code down at the very bottom of the htm file, just before the </body>. Then in the line of html that loads the image you will have an extra parameter that tells your browser to use the image map for that image. Below is an example of the code related to an image map.
This is the line that would load the image:
<img src="menu.gif" USEMAP="#menu" width=600 height=35 border=0>
The above code loads an image called "map.gif" and tells your browser to use the map called "menu". This map will be located in the same html file somewhere below where this image line is.
This is the map code that the image map program made that is inserted in your html file down near the bottom:
<MAP NAME="menu">
<AREA SHAPE="rect" COORDS="134,2,251,28", HREF="links.htm">
<AREA SHAPE="rect" COORDS="281,2,450,31", HREF="contact.htm">
<AREA SHAPE="rect" COORDS="482,2,597,29", HREF="home.htm">
</MAP>
Notice the map name is the same as indicated in the line that loads the image, except the "#" has to be in front of the name in the image line. This particular map has 3 rectangular areas on it. The series of numbers you see are the coordinates for the different areas. The areas are associated with different links with the HREF= command.
Adding
Sound To Your Page
- Midi
- Wav
- Real Audio
- MP3
Netscape and I.E. don't recognize the same html command to load sounds on your page. Netscape uses the <EMBED> command and Mirosoft I.E. uses the <BGSOUND> command. Below are two example lines of code that you would put on your page to load a midi file.
<BGSOUND SRC="yoursong.mid" height=55 width=200 volume="25%" loop="true" autostart=true>
<embed img src="yoursong.mid" height=55 width=200 autostart=true LOOP="true" volume="25%">
<BGSOUND> and <EMBED> load the midi file that you define. The height and width tags are the size of the standard midi player in your browser. You can set them to a value of "0" and the player will not be seen. Loop can be set to "true" and it will loop indefinately, or you can set a number value for it. If you set "Autostart" to true, the midi will start playing once it's loaded. If you set it to false it will have to be manually started on the midi player. The Volume can also be set to a percentage value. Make it a setting that would a normal listening level so that it don't scare the bejeebers out of your visitor when the midi starts playing. You can use a wav file instead of a midi file in the same manner. Just keep in mind to use as small a wav as possible ( in bytes ) so that the download time can be kept to a minimum. If you want to align the player on your page, use the same alignment commands such as <center> etc. that we went over previously.
Real Audio, Wav files and MP3 files are the other formats that are most common on the internet.
I
Never "Meta Tag" I Didn't Like!
<META NAME="keywords" CONTENT="The keywords and pharses that you think people would use to find your web page would go here">
This next Meta Tag is called "Description. In it, put a very accurate and to the point description of your site. This shows up once the search engine finds your site and lists it out for the person searching.
<META HTTP-EQUIV="description" CONTENT="An accurate description of your web page would go here">
The next Meta Tag will prevent a search engine Robot from listing a particular page in it's catalog. It's handy for guestbook sign-in pages or pages within frames that you don't want to be listed where someone could just link into them and not be able to navigate cause the menu is missing.
<META NAME="ROBOTS" CONTENT="NOINDEX">
If you want the page to be cataloged by the search engine, change "NOINDEX" to "ALL".
This next Meta Tag is very useful if you happen to move your website or a particular page on your site, and want visitors who wander onto the old page to be redirected to it's new location. The 30 is the amount of seconds before it automatically loads the new page location. You can change that value to suit you.
<META HTTP-EQUIV="refresh" CONTENT="30; URL=http://www.domain.com/newpage.htm">
One more Meta Tag worth mentioning will prevent any visitor from receiving your page via disk cache. If you web site is updated often this can be helpful. This Meta Tag ensures that a new page is loaded from the server each time.
<META HTTP-EQUIV="Pragma" Content="no-cache">
There are the major Meta Tags to be concerned with. There are a lot of other Meta Tags that I haven't mentioned here. If you want to learn more about them, do a search on any of the major search engines using the keywords "Meta Tags" and you will come up with a lot of more in depth information.
How Do
I Upload My Web Page To My Server?
Once you find the ftp program that you want to use and you have it installed, there are a few settings you have to make in the preferences before you can upload your files. The main settings you have to have are:
- Site Label
( This is what shows up in your ftp program to identify your site )
- Host
address ( this will be something like - ftp.domain.com )
- User ID
- Password
- Intial
Remote Directory ( this will be your web page directory at the server )
- Intial Local
Directory ( this is the directory on your hard drive where you web page is
)
Rick's
HTML Guide Graduates
If
you find this page helpful, or have any suggestions, let me know about it. - Ricky
This page created by Ricky Lee Ponder ©
1997. All rights reserved.
More to Come in the
not so Distant Future
|
Ricky's Big 'o Color
Chart
|
Do
you remember that kid in first grade that had the big 124 count box of crayons,
while you had the standard 8 pack, and the red in your's was missing it's
wrapper, and the purple was broke? Well now's your chance to show that kid up!
Here's more colors than Carter's got liver pills, and they're all for you!
Enjoy :-) Ricky
|
Alice Blue - F0F8FF
|
Antique White - FAEBD7
|
Aqua - 00FFFF
|
Aquamarine - 7FFFD4
|
|
Azure - F0FFFF
|
Beige - F5F5DC
|
Bisque - FFE4C4
|
Black - 000000
|
|
Almond - FFEBCD
|
Blue - 0000FF
|
Blue Violet - 8A2BE2
|
Brown - A52A2A
|
|
Burly Wood - DEB887
|
Cadet Blue - 5F9EA0
|
Chartreuse - 7FFF00
|
Chocolate - D2691E
|
|
Coral - FF7F50
|
Cornflower Blue - 6495ED
|
Cornsilk - FFF8DC
|
Crimson - DC143C
|
|
Cyan - 00FFFF
|
Dark Blue - 00008B
|
Dark Cyan - 008B8B
|
Dark Goldenrod - B8860B
|
|
Dark Gray - A9A9A9
|
Dark Green - 006400
|
Dark Khaki - BDB76B
|
Dark Magenta - 8B008B
|
|
Dark Olive Green -
556B2F
|
Dark Orange - FF8C00
|
Dark Orchid - 9932CC
|
Dark Red - 8B0000
|
|
Dark Salmon - E9967A
|
Dark Sea Green - 8FBC8F
|
Dark Slate Blue -
483D8B
|
Dark Slate Gray -
2F4F4F
|
|
Dark Turquoise - 00CED1
|
Dark Violet - 9400D3
|
Deep Pink - FF1493
|
Deep Sky Blue - 00BFFF
|
|
Dim Gray - 696969
|
Dodger Blue - 1E90FF
|
Fire Brick - B22222
|
Floral White - FFFAF0
|
|
Forest Green - 228B22
|
Fuchsia - FF00FF
|
Gainsboro - DCDCDC
|
Ghost White - F8F8FF
|
|
Gold - FFD700
|
Goldenrod - DAA520
|
Gray - 808080
|
Green - 008000
|
|
Green Yellow - ADFF2F
|
Honeydew - F0FFF0
|
Hot Pink - FF69B4
|
Indian Red - CD5C5C
|
|
Indigo - 4B0082
|
Ivory - FFFFF0
|
Khaki - F0E68C
|
Lavender - E6E6FA
|
|
Lavender Blush - FFF0F5
|
Lawn Green - 7CFC00
|
Lemon Chiffon - FFFACD
|
Light Blue - ADD8E6
|
|
Light Coral - F08080
|
Light Cyan - E0FFFF
|
Light Goldenrod - FAFAD2
|
Light Green - 90EE90
|
|
Light Grey - D3D3D3
|
Light Pink - FFB6C1
|
Light Salmon - FFA07A
|
Light Sea Green - 20B2AA
|
|
Light Sky Blue - 87CEFA
|
Light Slate Gray - 778899
|
Light Steel Blue - B0C4DE
|
Light Yellow - FFFFE0
|
|
Lime - 00FF00
|
Lime Green - 32CD32
|
Linen - FAF0E6
|
Magenta - FF00FF
|
|
Maroon - 800000
|
Med. Aquamarine - 66CDAA
|
Medium Blue - 0000CD
|
Medium Orchid - BA55D3
|
|
Medium Purple - 9370DB
|
Med. Sea Green - 3CB371
|
Med. Slate Blue -7B68EE
|
Med. Spring Green - 00FA9A
|
|
Med. Turquoise - 41D1CC
|
Med. Violet Red - C71585
|
Midnight Blue -
191970
|
Mint Cream - F5FFFA
|
|
Misty Rose - FFE4E1
|
Moccasin - FFE4B5
|
Navajo White - FFDEAD
|
Navy - 000080
|
|
Oldlace - FDF5E6
|
Olive - 808000
|
Olive Drab - 6B8E23
|
Orange - FFA500
|
|
Orange Red - FF4500
|
Orchid - DA70D6
|
Pale Goldenrod - EEE8AA
|
Pale Green - 98FB98
|
|
Pale Turquoise - AFEEEE
|
Pale Violet Red - DB7093
|
Papaya Whip - FFEFD5
|
Peach Puff - FFDAB9
|
|
Peru - CD853F
|
Pink - FFC0CB
|
Plum - DDA0DD
|
Powder Blue - B0E0E6
|
|
Purple - 800080
|
Red - FF0000
|
Rosy Brown - BC8F8F
|
Royal Blue - 4169E1
|
|
Saddle Brown - 8B4513
|
Salmon - FA8072
|
Sandy Brown - F4A460
|
Sea Green - 2E8B57
|
|
Seashell - FFF5EE
|
Sienna - A0522D
|
Silver - C0C0C0
|
Sky Blue - 87CEEB
|
|
Slate Blue - 6A5ACD
|
Slate Gray - 708090
|
Snow - FFFAFA
|
Spring Green - 00FF7F
|
|
Steel Blue - 4682B4
|
Tan - D2B48C
|
Teal - 008080
|
Thistle - D8BFD8
|
|
Tomato - FF6347
|
Turquoise - 40E0D0
|
Violet - EE82EE
|
Wheat - F5DEB3
|
|
White - FFFFFF
|
White Smoke - F5F5F5
|
Yellow - FFFF00
|
Yellow Green - 9ACD32
|
Phwew! Hey view the document source on this
one. I got one heckuva headache typing this one out I'll tell ya!
No comments:
Post a Comment