Word processor (such as Word, WordPerfect), text tool (Notepad on the PC, TeachText on the Mac) or an HTML editor--there are many different Editors but Coffee Cup has the best prices.
You will also need a FTP tool (File Transfer Protocol)to upload and download your HTML and Images to your Web Site account and at the Coffee Cup website you will find an array of programs for your Web Page creations once you learned how to create a Web Page in Notepad.
But before you buy a Program that makes your creations speedier play with Notepad first to see if you really would like to create Web Pages.
Winzip quickly zip (compress) your files which is a definite win-win for your and your recipient. You both will save a significant amount of storage space on your PC or device allowing you room for other important files.
If you are new to creating web sites open your Notepad on your computer and play with the instructions I give you. Once you are familiar with the interface of it all you are ready to use any program of your choice.
All the images and pages go into the same Folder.
Whip open Notepad, and type the following:
<HTML>
<HEAD>
<TITLE>My Personal Web Page!</TITLE>
<BODY>
(Type:) Wow I am learning how to create beautiful Web Pages.
</BODY>
</HTML>
Now save it as index.html in your Folder and double click
to see what you have created.
Now that you have saved it as an html extension
should you ever close your Notepad and wanting to add more info,
just right click on your index.html and select open with Notepad.
You now can add more text etc.
and then click save that will update your info.
When viewing the page here how it should look
click VIEW below it will open in a seperate window.
Just click the close window button or x the browser out.
<HTML>
<HEAD>
<TITLE>My Personal Web Page!</TITLE>
<BODY>
<P Align="Center">(Type:) Wow I am learning how to create beautiful Web Pages.</P>
</BODY>
</HTML>
HTML stands for HyperText Markup Language.
HTML is simply a set of standardized tags that
web browsers read and then interpret for displaying the Web page.
If you ever have used the older desktop publishing programs,
the HTML tags work in the same way.
All HTML tags start and end with the lesser than and
greater than keys used as brackets, for example:
<HTML>
or
<BODY>
Most HTML tags use a beginning and ending tag, for example:
<TITLE>This is a HTML Lesson</TITLE>
or
<H2>Headline Size 2</H2>
The best Learning exerience is by doing it--lets have fun!
<HTML>
<HEAD>
<TITLE> My Personal Homepage </TITLE>
</HEAD>
Here is the explanation of what you have just accomplished:
<HTML> identifies the page as an HTML document;
<HEAD>tells the browser that the header information will be appearing;
<TITLE>tells the browser what to show in the title bar of the browser
(it's the top bar of the browser);
"My Personal
Homepage"
will appear in the top bar of the browser;
</TITLE>ends the title entry;
</HEAD>ends the header entry.
It is best if you use all capital letters as it is much easier
to read thru your HTML
for any mistakes or changes you would like to make later.
It will show up correct in smaller lettering also
but use capital letters--you
will not regret it until you get used to it.
Now enter the following on the next line:
<BODY>
<H1> Welcome to My Web Site! </H1>
Recap:
<BODY>tells the browser that the body of the page or document is next;
<H1> tells the browser that the headline size 1 is to be used;
"Welcome to my Web Site!"will appear in large text;
</H1> ends the headline entry.
There are six levels of headlines,
1 being the largest and 6 the smallest.
You can use the different sizes to
indicate subtopics for your page if you have a lot of text.
As a design issue, it is recommended that
you only use the headlines for dividing
up pages and to keep the headlines fairly brief
In your <BODY> tag, it is also determined what
color background or maybe a background image,
and which Font Color you use for your Text.
Also the Links going to different URLs or
one of your other Pages you wrote.
{LINK = This Attribute
will let you define the color
that ALL of your Links are displayed as}
{VLINK =[Visited Link] defines the color
that ALL the Visited Links appear in.
If you click on a Link and go to a page,
and then come back to the original page,
the Link you just clicked on is now another color.
You can define that color using VLINK}
{ALINK =[Active Link] sets the color the Links will turn
as you click on them.}
Always save after adding new info
Final Recap:
</BODY>closes the body of the page;
</HTML>closes the HTML.
now save it as index.html or index.htm
The htm was used way back in win3.x
Nowadays we use the html extension.
Let'sType:
<HTML>
<HEAD>
<TITLE>My Personal Homepage</TITLE>
</HEAD>
<BODY>
<H1>Welcome to my Website!</H1>
<P>Welcome to my Homepage. It is in the beginning stages.
Soon I will add information about my interests, hobbies, or business.
And also add pictures and other images.
</BODY>
</HTML>
Now save it as index2.html or index2.htm
The Browser by Default aligned it to the left unless you enter
the <CENTER> tag and close it after your Text with </CENTER>.
So lets do the same thing again with adding the tag <CENTER>.
Type again:
<HTML>
<HEAD>
<TITLE> My Personal Homepage </TITLE>
</HEAD>
<BODY>
<CENTER><H1> Welcome to My Web Site! </H1></CENTER>
<P>
<CENTER>Welcome to my Homepage. It is in the beginning stages.
Soon I will add information about my interests, hobbies,
or business. And also add pictures and other images.</CENTER>
</BODY>
</HTML>
Now save it as index2.html or index2.htm
<HTML>
<HEAD>
<TITLE> My Personal Homepage </TITLE>
</HEAD>
<BODY>
<CENTER><H2>Welcome to My Web Site!</H2></CENTER>
hit the enter key for your next line and type:
<P>
hit the enter key for your next line and type:
<CENTER><A HREF="http://www.renate-designs.us/">Renate Designs</A></CENTER>
hit the enter key for your next line and type:
</BODY>
hit the enter key for your next line and type:
</HTML>
Now save this as index3.htm or index3.html
Now let's add an Image to the Link. So instead seeing the
writing of the Web Site
we will add the Image thats shows you the Site on it.
Type:
<HTML>
<HEAD>
<TITLE> My Personal Homepage </TITLE>
</HEAD>
<BODY>
<CENTER><H2>Welcome to My Web Site!</H2></CENTER>
<P>
now watch where the image is written
<CENTER><A HREF="http://www.renate-designs.us/">
<IMG SRC="renate-designs.png" WIDTH="160" HEIGHT="50" BORDER="0"></A></CENTER>
</BODY>
</HTML>
now save it as index4.html or index4.htm
Recap:
Now remember: the first Page you write is always
index.html or index.htm
but the other pages you can name anything you would like
for instance pictures.html and so on.
Also Note when you add a Image it is very Important to add
the WIDTH and the HEIGHT
(Pages load much faster) and the Border="0".
****
On some Images you just don't want a Border around the Image
especially if the Image is odd shaped.
Another thing to write into your Image is:
<CENTER><A HREF="http://www.renate-designs.us/">
<IMG SRC="renate-designs.png" WIDTH="160" HEIGHT="50" BORDER="0" ALT="come visit
Renates Corner"> </A></CENTER>
the Alt="come visit Renates Corner"
will show in text form when you hover over the image.
This is for People that have the Images turned off in their Browser
otherwise they wont know there is a URL to go to or where it leads to.
One of the things to learn is how to add a background
color or a background image to a web page.
You will notice notice an html tag
labeled <Body> in your HTML right after the </Head>.
From within the Body tag, we can set the background color
or a background image to use for your web page.
To use a background color of white for our page, we'd add
the following to our<Body> tag
<BODY BGCOLOR="#FFFFFF">
You can use all different colors besides white.
To use a background image instead of a color, we'd add the
following to the <BODY> tag:
<BODY BACKGROUND="filename.gif">
Just, substitute filename.gif with the name of your image file.
Don't forget, that when you use a image file for a background,
you'll need to upload that image file to
your web site separately from,
and in addition to your html file.
Your Images can be in gif, png or jpg format.
It is also important that the file size has a
limit on KB (Kilo Bytes) or it takes too long
for the pages to load on the Internet.
Adding images to your web page is lots of fun!
Choose an image that you want to add to
your page. In this example here,
I've included an image called heart.gif
To add the image heart.gif to your web page,
I'd use the following html:<IMG SRC="heart.png">
There are other attributes for images as shown below.
<IMG SRC="heart.png" HEIGHT="90" WIDTH="90" BORDER="0"
ALT="Welcome to my Home Page">
the height and width of the image are specified in pixels.
Using the height and width tags,
speeds loading of the image in the web browser.
The border="0" attribute specifies that there is to be
no border around this image.
The alt= specifies alternate text that will display in
browsers that have the graphics turned off.
And here is the Image--right click on it
a window will open and you can save as
to a folder in your Computer--enjoy!
I like to use the png format. The backgroung of png and gif files can have a transparent background. However the png format has a bit more KB than the gif file but it is a better quality. In some cases I do use the gif format because the png would be to big on KB and makes loading a page slow.
Using subdirectories, things can get a little complicated
when you tell your page where to find all the graphics files it needs.
Here are three different cases you might have:
If your graphics file is in the same directory as the HTML file
for your page, simply give the graphic filename
as part of your IMG SRC tag.
For example, if your graphic is named "mygraphic.gif":
<IMG SRC="mygraphic.gif">
If your graphics file is in a subdirectory and your HTML file
is in your main Member Directory, you'll need to include the name of the
subdirectory in your IMG SRC tag. For example, if your graphics
file is named "mypicture.gif," and it is in your "images" subdirectory,
specify the pathname:
<IMG SRC="images/mypicture.gif">
HINT: Notice that there is no "/" character before the
name of the
subdirectory. That's because if you put a "/" in front, the server
will try to find a top_level member directory with that name, instead
of one of your subdirectories. We recommend that you play it safe
by always including the full path.
If your HTML file is in a subdirectory and your graphics file
is in another directory, you'll need to include the name
of your main directory in addition to the location
of the graphic. For example, if your member
name is TriMember, your graphic "mygraphic.gif" is located an "images"
subdirectory, and the HTML file is located in another subdirectory,
the image reference would be:
<IMG SRC="/TriMember/images/mypicture.gif">
In general, it may be safer to always specify the whole path as in the
above example so you don't have to worry about where the graphic is in
relation to where the HTML file is located.
Another thing for you to pay attention to are the Images.
If they have to many KB (KiloBytes)
and you add too many with a large amount
of KB (KiloBytes),
your Web Page will load very slow and
some people will get impatient
and not stick around to view your Site
(sure would be a shame after all that work
you put into your beautiful Site).
So watch out for those KB in Images, Midis and Wave files.
Bit - A binary digit; 0 or 1
Byte - 8 bits, or 1 character
Kilobyte (K or KB) - 1,024 bytes
Megabyte (MB) - 1,024,000 bytes
Gigabyte (GB) - 1,024,000,000 bytes
Terabyte (TB) - 1,024,000,000,000 bytes
you'll learn how to use the Font Face, Font Size, and Font
Color tags.
The Font Face you specify, must be installed on the computer
of the visitor to your site,
in order for them to see the font you've specified.
If the visitor to your site doesn't have the font installed,
most likely they will see your text with the default font face for their web
browser.
To use the Font Face tag on your web page, enter the following
tag into your HTML:
<FONT FACE="arial">This text is shown
with the Arial Font.</FONT>
You can get many Fonts from
or
Google FontsTo use the Font Size tag on your web page, enter the following
tag into your HTML:
<FONT SIZE="20">This
is font size 20</FONT>
<FONT SIZE="14">This is font size 14</FONT>
The Font Color tag does exactly what it says... it changes
the color of your fonts.
To use the Font Color tag on your web page, enter the following
tag into your HTML:
<FONT COLOR="blue">This Font
is shown using the color Blue.</FONT>
..that would be the Hex color: #3e8ed0 and the rgb(62,142,208)
Below is the Color Cube again just make sure to put
the # infront of all your color selection. Very Important
If you want to use color and size at the same time, enter
this tag into your HTML:
<FONT SIZE="16" FACE="Arial" COLOR="#7e297d">
This is FONT SIZE="16"
and the COLOR="#7e297d" and FONT FACE="Arial"</FONT>
Adding emphasis to a web page can be done in many ways,
including use of the Bold, Italic and Underline tags.
To create BOLD text within html,
use the following tag around your text like this:
<b>This text is Bold</b>
To create Italicised text, use the following around your text:
<i>This text is in italics</i>
To create Underlined Text,
use the following around your text:
<u>This is underlined text</u>
If you choose to use these tags, keep in mind
that you'll want to use them sparingly to create emphasis.
If you use them too much on one web page,
the emphasis will be lost or diminished.
Looking for an orderly method to present your information?
If so, you'll want to use this tutorial to learn
about creating lists for your web page.
HTML supports several types of lists.
Three of the most popular
forms of lists are shown below:
<DL> ... </DL> - Definition list.
<OL> ... </OL> - Ordered list
<UL> ... </UL> - Unordered list
The Definition list is simply a list of terms, and their definitions.
Here is an example of how you would add the html
to your page for a definition list:
<DL>
<DT>Term<DD>This is the definition of the first term.
<DT>Term<DD>This is the definition of the second term.
</DL>
The Ordered list is used to present a numbered list.
Here is an example of how you can create an ordered list:
<OL>
<LI>These are the Tags</LI>
<LI>to use just copy and paste</LI>
<LI>Got more Questions?</LI>
</OL>
The Code:
<UL>
<LI>First list item</LI>
<LI>Second list item</LI>
<LI>Third list item</LI>
</UL>
The Code:
<OL>
<LI>This is a Ordered List</LI>
<LI>This is a Ordered List</LI>
<LI>This is a Ordered List</LI>
</OL>
Code:
<DL DESCRIPTION-LIST>
<DT><B>This is the bold Text</B></DT>
<DD>This is the normal text</DD>
<DT><B>This is the bold Text</B></DT>
<DD>This is the normal text</DD>
</DL>
Lets write an E-Mail Link into your Web Page
One of the most widely used HTML tags is the "mailto" Tag.
Using the mailto tag, allows visitors to your site to send you E-mail by simply
clicking on your "mailto" link.
<A HREF="mailto:webmaster@renate-designs.us">E-Mail</A>
write your email Name after mailto: and instead of
just writing E-Mail
you can write anything you would like into it (Sample--Write to Renate)
Add A Link To Other Pages
Soon, you'll want to add more web pages to your Server,
and once you do, you'll want to create a link from your home page to the additional
pages.
So if your index.html file is your home page,
and the new page you want to create a link to is called welcome.html
And to create a link from index.html to welcome.html you'd enter the following
html
on the index.html page.
<A HREF="welcome.html">Click here to view the welcome page</A>
If you're file named welcome.html
was in a different directory on your server, you'd have to name the directory
also as follows:
<A HREF="http://www.tripod.com/username/directory/welcome.html">
Click here to view the welcome page</A>
Of course, substitute your username at Tripod with username,
and the directory with the name of the directory you created on the server.
Now you are ready to upload your first Web page and then
come back and learn some more HTML Lessons.It is very important to remember
that web file names are case-sensitive.
So for instance if you wrote a Image into your HTML and named it "picture.jpg" or "gif"
make sure you also upload it as such and not(Sample--"PICTURE.jpg" or "gif").
Watch for lower case or upper case lettering.
And also most web servers accept the file name "index.htm" or "index.html"
as the default home page.
Now you can go through the steps to upload your file to the
web server.
To transfer the file to the server, we use an FTP tool.
FTP stands for "File Transfer Protocol".
With the FTP tool you copy files from your hard drive to the server
or from the server
to your hard drive.
So lets pretend you have a Web Account at Tripod,
open your WS_FTPLE and enter the following information
***
Profile Name: www.tripod.com
Host Name: ftp.tripod.com
Host Type: Automatic Detect
User ID: Insert your TRIPOD MemberName here.
Password: Insert your TRIPOD password here.
***
Once you have logged into the TRIPOD server, you will be
in your home directory.
Simply select your file from the harddrive,
click on the -> arrow key in WS_FTPLE and your file will
be uploaded to the Tripodserver.
The same applies for all Web Site accounts
***
Now that the file is uploaded to the server,
you can view your web page live and online!
All you need to do is double click on your browser to open
it up
and enter in your URL (Uniform Resource Locator) in
the Address bar in Microsoft Internet Explorer or Location bar in Netscape
Navigator.
Your URL is your web address.
Your URL (Web Page at Tripod would be: "http://members.tripod.com/yourMemberName/"
Remember, your Screen Name is case-sensitive too.
If your Member Name is reah, all in lowercase, then your URL will be http://members.tripod.com/reah/.
However, if your screen name is REAH, with the capital "REAH",
then your URL will be "http://members.tripod.com/REAH/".
Should you encounter any problems, be sure to send email
to me
and I will help you wherever I can . My E-Mail is: renate@renate-designs.us
Can't find your Images
at your Web Site
***
Check to see
that you've uploaded the graphics files.
As simple as this may sound, it's quite common, especially if you have a great many files,
to neglect uploading one or two.
The easiest way to do this is to log into your account via FTP,
and actually look at the files listed to see if it's there.
Filenames are
case sensitive.
If you use a mixture of upper and lowercase letters to name a remote
file;
then you must also use the EXACT same letters in your HTML
file to reference your graphics.
A file named chickens.jpg and Chickens.jpg, or even
Chicken.JPG,
would not be seen as the same file by your browser. You must match,
exactly,
the case of the filename you use in both your HTML document
and the actual filename itself.
Does your image
tag resemble this in your HTML file?
<IMG SRC="..\..\program files\homesite3.0\projects\images\chickens.jpg">
If so, that's your problem. The above line is still referencing
a file on your hard drive. Even if you've uploaded it, it still
won't work. Your image tag should look similar to this:
<IMG SRC="chickens.jpg">
Did you place
your files in a subdirectory?
Let's suppose that everything else is okay, and your tag looks a lot
like the one above.
Your image still doesn't show up though.
If you have placed your file in a subdirectory of your base,
you'll need to reference it a bit differently.
When you FTP into your account, a folder icon will be shown
if you've created a subdirectory. Lets say you created a folder and
named it "images."
This means that now, instead of this:
<IMG SRC="chickens.jpg">
you need to use this:
<IMG SRC="images/chickens.jpg">
This tells the browser where to find the file at.
You should note that directory names are case sensitive as well.
So Images and images won't be the same directory either.
It's ALWAYS best to use all lowercase letters when naming files and
directories,
to avoid problems at a later date.
Are you using
the correct file type?
The most commonly recognized file types on the web are JPG and GIF.
If you upload a bitmapped file (bmp) and simply rename it to GIF or
JPG,
it is unlikely to work.
BMP files are not commonly recognized by most browsers.
(Yes, there are some plugins out there,
but most people will bypass your site rather than get one for something
like this.)
To use a bitmapped file, you'll need to actually convert it to JPG
or GIF format.
You'll need a graphics program, such as Jasc's
Paint Shop Pro to do this correctly.
Are you using
the image tag correctly?
Also! After all, if your tag is wrong, the rest won't matter.
There are two types of tags: relative and absolute.
This is an example of an absolute tag:
<IMG SRC="http://members.tripod.com/MemberName/filename.gif">
This tag gives an exact location on the server of where the file can be found.
This is an example of a relative tag:
<IMG SRC="filename.gif">
This tag gives a location, relative to the current URL,
of where the file is located. It is often used in conjunction with the
BASE HREF tag.
Where possible, use relative tags on your site.
They'll reduce the load time and are easier to keep track of.
This is an example of an image tag used correctly,
with several additional attributes turned on:
<IMG SRC="tripod.gif"
WIDTH=85 HEIGHT=30 ALT="Free Hosting at Tripod!" BORDER=0>
The WIDTH and HEIGHT are the actual dimensions,
in pixels, of the image itself.
Any good HTML editor will insert these for you.
Using these; speeds up the load time of your images.
ALT is text that will be displayed in place of the graphic,
in the event that your visitor has shut off graphics.
A great way to tell visitors what they're missing by not loading the
graphic!
BORDER turns the border around the image on or off.
A value of "1" or higher is on (and sets how thick the border will be
as well), and "0" is off.
If your tag looks a lot like this, you should be doing fine.
Make sure you've uploaded all needed files. As simple as this may sound, it's quite common, especially if you have a great many files, to neglect uploading one or two. The easiest way to do this is to log into your account via FTP, and actually look at the files listed to see if it's there.
Check your filenames. In naming your files, be sure you have not used any blank spaces or odd chracters. Using blank spaces will cause the filenames to truncate (get cut off) and will usually result in a
"404 File Not Found" error.
Do your best to keep the names to 12 characters or less (not including the filename extension, so this gives you a 12.3 or 12.4 file naming convention), and use all lowercase letters if at all possible to avoid confusion and problems with case sensitivity.
Filenames are case sensitive. If you use a mixture of upper and lowercase letters to name a remote file; then you must also use the EXACT same letters in your HTML file to reference your links. A file named main.htm and Main.HTM, or even MAIN.HTM, would not be seen as the same file by your browser. You must match, exactly, the case of the filename you use in both your HTML document and the actual filename itself. This applies to the ENTIRE filename, even the file extension. Again do verify your file names and their case.
Are you using the link tag correctly? There are two types of tags: relative and absolute.
This is an example of an absolute
tag:
<A HREF="http://members.tripod.com/membername/main.html">CLICK
HERE</A>
This tag gives an exact location
on the server of where the file can be found.
This is an example of a relative
tag:
<A HREF="main.html">CLICK
HERE</A>
This tag gives a location, relative
to the current URL, of where the file is located.
It is often use in conjunction with the BASE HREF tag.
Where possible, use relative tags
on your site.
They'll reduce the load time and are easier to keep track of.
Are you using a BASE HREF? If you are using
a BASE HREF tag on Tripod, it should look like this:
<BASE HREF="http://members.tripod.com/your_membername/">
with your actual member name replacing
"your_membername" in the URL. Don't forget the closing
"/" either, as many older browsers require it. Using this
tag incorrectly will cause many of your links and images to fail,
even if everything else is correct. This tag should be placed between
the <HEAD> </HEAD> elements, and not outside
of them.
Does your link tag resemble this in your HTML
file?
<A HREF="C:\program
files\projects\main.html">CLICK HERE</A>
If so, you have a problem. The
above line is still referencing a file on your hard drive. To have
your settings correct), your link tag should look similar to this:
For a relative link:
<A HREF="main.html">CLICK
HERE</A>
For an absolute link:
<A HREF="http://members.tripod.com/membername/main.html">CLICK
HERE</A>
Did you place your files in a subdirectory?
Let's suppose that everything else is okay, and your tag looks a
lot like the above examples. Your link still doesn't work though.
Have you placed your file in a subdirectory of your base, you'll
need to reference it a bit differently. When you FTP
into your account, a folder icon will be shown if you've created
a subdirectory. We'll say you created a folder and named it "hot_links."
This means that now, instead of this:
<A HREF="main.html">CLICK
HERE</A>
you need to use this:
<A HREF="hot_links/main.html">CLICK
HERE</A>
or this:
<A HREF="http://members.tripod.com/membername/hot_links/main.html">CLICK
HERE</A>
This tells the server where to
find the file at. You should note that directory names are case
sensitive as well. So HOT_LINKS and hot_links won't
be the same directory either. It's ALWAYS best to use all lowercase
letters when naming files and directories, to avoid problems at
a later date.
***
Hopefully, we covered all
the possible problems that could occur.
Once you've edited your file(s), be sure to upload your corrected files
via your FTP .
Remember to refresh your browser when you visit the page in order to
insure that you are seeing the latest changes.
You can do this by holding down the SHIFT key while viewing your page
online,
and clicking your browsers refresh/reload button to force the page to
reload.
Keep in mind that if you have used the same link across several pages,
you will need to correct each and every link,
and upload all of those files again as well.
You can add a sound file that plays automatically when your web page is opened with the <EMBED SRC="sound.wav"> tag. You can use the EMBED SRC tag along with the BGSOUND SRC tag to make sure that your background sound plays for visitors to your web site whether they are using Netscape or Internet Explorer to view your page.
<EMBED SRC="sound.wav" AUTOSTART="True" HIDDEN="True">
<BGSOUND SRC="sound.wav">
The HIDDEN="True" part of the EMBED tag will play the sound as a background sound in Netscape.
Inside the main EMBED command, you have the ability to place a bunch of different attributes or sub_commands. They are as follows: <HEIGHT="__"> and <WIDTH="__"> This sets the height and width of the space in which the embedded item will play. With a sound, this mattered little. You could have set it to 1X1 and you'd have still heard the sound. Now we're dealing with video and it matters.
<LOOP="__"> This states if the video will play again and again ("true") or if it should play once and stop ("false" or no use of the LOOP command.)
<HIDDEN="__"> This will work to hide the control panel. The problem is in this case it also hides the video. That's not good. Don't use it.
<AUTOSTART="__"> This tells the browser to start the video right away ("true") upon its download completion or to wait for viewer clicks to start playing ("false" or no use of the command). This command works in Internet Explorer, but not in Netscape Navigator. No matter what it is set to, Navigator requires you to click on the start button.
MIDI files
MIDI stands for Musical Instrument Digital Interface. A MIDI
file is a data file that stores musical notes as digital information,
so that the music is playable by computers equipped with MIDI sound cards.
Embedding MIDI files
You can embed MIDI music files in your Web page just as you would embed
any other file such as a picture, by using a link. The command looks like
this: <EMBED SRC="my_midi_file.mid" HIDDEN=TRUE>
Putting MIDI music on a Web page
To make a MIDI file play automatically (on browsers like Netscape 3.0
and others, with the proper plug_in) you can take advantage of the EMBED
tag, like this:<EMBED SRC="my_midi_file.mid" HIDDEN=TRUE AUTOSTART=TRUE>
Movies
Once you have a movie file ready, you can link to it like any other file,
using a tag: <A HREF="movie.mov">Click here to
see a movie!</A>
When
including a movie, it's a good idea to include a thumbnail, some text
showing how big the movie file is, and even a link to a viewer,
such as http://www.supernet.net/cwsapps/video.html
Instead of adding a background sound to your web page, you may want to opt for
adding a link to a sound file. To create a link to your sound file, first pick a sound
file you wish to use.In the example below, I've chosen a sound file "welcome.wav"
<A HREF="welcome.wav">Click
here to listen to my welcome</A>
As with all links that link to other files, be sure to upload the file welcome.wav in addition to your html file.
Add A Downloadable File
You may wish to include files for your visitors to download directly from your web page.If you are going to include a downloadable file, it is recommended
that you first compress the file into a .zip format (for
Windows users) or a .sit format (for Mac users)
Popular Zipping and Stuffing programs are available from Shareware.com
Once you've zipped or stuffed your file or files, you can add a link to the file or files as follows:
<A HREF="filename.zip">Click
here to download file</A>
Of course, substitute filename.zip with the filename of the downloadable file you've compressed.You must also upload your compressed file to your web server.
Learn how to create a horizontal rule (page divider)!
Throughout your web travels, you'll see lots of horizontal rules.
A horizontal rule looks like this:
To create the above example, simply type <HR>
Now let's learn how to customize our horizontal rules
The following attributes will allow you to choose how your
horizontal rule will appear:
Size
Width
Align
NoShade
Color
To demonstrate, lets create a horizontal rule with a size
of 4px and a widthh of 50% and set the align attribute to the left.
The Code:
<HR Size=4 width=50% Align="left">
<HR ALIGN="CENTER" WIDTH="75%" SIZE="5"
noshade COLOR="#2c814a">
You can also embed and image as a Rule that you have created or aquired.
Meta Tags Examples
<TITLE> Tags The <TITLE>
tag is the first thing that a user sees when your site is returned by a
search query.
You only have a split second to grab your targets attention.
Place keywords that are most pertinent to your business in the title tag.
Effective title tags
include only relevant keyword or keyword phrases.
Avoid non-indexing filler words, such as a, an, the, welcome and home page.
Example:
<TITLE>Dog
Groomers Salon: Professional Dog Grooming Tips, Pet Care and more</TITLE>
<META> tags
<META>
tags are HTML code that enable the search engines to determine
what keywords are relevant to this specific site.
The META "description" tag will contain a description of your site.
Make sure your description contains some of your relevant keywords.
The META "keywords"
tag will contain a listing of your keywords and keyword phrases
that are relevant to your site and enable a search engine to find you.
Example:
<META name="DESCRIPTION"
content="Dog Grooming Tips From Top Professional Pet Groomers">
<META name="KEYWORDS"
content="dog grooming, pet care, animal groomers, Dog Grooming, Pet Care,
Animal Groomers, DOG GROOMING, PET CARE, ANIMAL GROOMERS">