This page explains everything that is needed for anyone wanting to
create their own web page. Below this paragraph is the table of contents.
Click on any of the content subjects and it will take you to that section
of the guide. To return to the table of contents at any time, press the
Return to index link in the frame on the bottom of the page. NOTE: You
must have Netscape 2.0 or greater to view the frame. The link
back to the index will always be at the bottom of the page. I hope this
guide is helpful and if you have any questions don't hesitate to email
me.
In order to make a web page, you first need to get a program that can access your UNIX account. I recommend Telnet for the Mac or for the IBM.
Once you can access your account, you need to make a new directory
called "public_html". You can do this by typing:
After this, go to this new directory called "public_html".
If you want to, you can make other directories, one for all the web pages that you make, and one for all of the graphics that you have. Follow the same steps as above to do this.
Next, you need to think of a name for your page (this is not a title,
but what will be in the URL). Mine is called "dans.page". Once you've done
this, add ".html" to the end of it. Then type (i.e.)
Of course, use your page's name, instead of mine. Next, you need to
gain some knowledge of the many HTML commands. Lucky for you, I've already
gotten some of the basic commands for you. Follow the index below, to
decide what to put on your page, and how to do it. Once you've gotten
started, exit your page. You can do this by pressing control-x.
Then you need to type:
Only do this with the name of your page. You only need to do this the
very first time that you leave your web page. This command will make sure
that nobody else can delete your page. You will need to do this to any
other pages that you make in the future. Then, look at your page
on the WWW. Lets say that your server is "www.teleport.com", your
username is "danal", and the name of your page is
"dans.page.html". The URL would be:
If you have made separate directories for pages and graphics, then you need to include that in the URL also. Lets say that you made a directory for all of your pages, called "Pages". The new URL would be: http://www.teleport.com/~danal/Pages/dans.page.html
The first thing to put on your web page, is a title. The title is what
will show up in the very top of the window. Let's say that your title is
going to be "John Doe's Web Page", you would type:
In HTML, every command is surrounded by <'s, and >'s. And in most
commands, you need to tell the web browser when to end this command. You
do this by putting a back slash (/) in front of the ending command, as in
above. Since HTML isn't case sensitive, <title> is the same as
<TITLE>, which is the same as <TiTLe>. Next, you need to
decide what you want to put on your page. Text, links, graphics, and text
fields, are just a few ideas. Follow the table of contents below to decide
how, and what to put on your page.
HTML has six levels of headings, numbered 1 through 6, with 1 being the
largest. Headings are displayed in larger, or smaller fonts, and usually
bolder. If you wanted to type "Hello", this is what you would type for
each heading, and what the outcome is:
Whenever you have more than a sentence of writing, you should have
paragraphs. Personally, I don't see what the difference is, but I do it
any way, because then I can find a certain spot better in programing. To
Make a paragraph of "This is a web page. How do you like what I've done?
Please e-mail me with any suggestions at danal@teleport.com",
type:
The outcome is:
This is a web page. How do you like what I've done? Please e-mail me with any suggestions at danal@teleport.com
There are two types of lists that you can make in HTML, dotted, and
numbered. To make a dotted list of: red, orange, green, blue, purple,
black, and brown, type:
The result is:
To make a numbered list of: red, orange, green, blue, purple, black,
and brown, type:
The result looks like:
There are many cases in which you want to end typing on one line, and
start on the next. To do this, you can use an HTML command. This is one of
the few commands that you don't have to put an ending command on. Let's
say that you wanted to say "Hello, how are you?", but each word on a
separate line. All you have to type is:
The outcome is:
Every now and then, you might want to have a horizontal rule, or line
in your page. One example of this is below the index. Horizontal rules can
be many different sizes and lengths. You can also have the line be solid
black, by typing NOSHADE. Here are several examples of sizes
and widths, and what the outcome is:
There are several types of styles of fonts that you can use. Mainly,
there is BOLD, italic, and
Typewriter Text. To do
these type:
</b>
When you make a link, you are making colored text (or even a
graphic-talked about later). When somebody clicks on this text, it will
take them to another web page, or possibly a certain section of a web
page. Let's say that you wanted to make a link from your web page, to my
home page. The URL of my home page is:
http://www.teleport.com/~danal/Pages/dans.page.html
To do this, you would type:
The result would be:
You can go ahead and try it if you want to.
Sometimes, you might want to have a link that will take you further
down a page, or to a certain section of another page. An example of this
is the index. You click on the colored text, and it takes you to that
section. To do this, you need to do two things. The first, is to make the
link, and the second, is to make where the link will lead to.
NOTE: You cannot make links to specific sections
within a different document unless either
you have write permission to the coded source of that document or that
document already contains in-document named links.
1) To make the actual link, think of a name for the certain spot. Let's
say you are going to call it "spot". If this certain spot is on the same
page that the link is, you would type:
Otherwise, you would add "#spot" to the end of the URL.
2) Now, you need to make where the link will take you. Go to the spot
where you want the link to take you, and type:
Most people like to have a link on their web page that automatically
sends e-mail to an address. If you want to do this, and your name is
Danny, and your e-mail address is danal@teleport.com, type:
Here is the result of typing this (please click on it to send me
e-mail).
On almost EVERY web page on the net, there is some kind of graphic. I
would HIGHLY RECOMMEND that you have AT LEAST one picture on your page.
There are mainly two kinds of ways to have graphics on your web page. The
first, is to use a graphic that is on somebody elses' page. The second, is
to upload the graphic to your own account. Personally, I perfer to use the
upload method. If you are using the other way, there is always a chance
that the person who made that page will decide to delete that graphic.
Then a symbol with a circle, square, and triangle will appear where the
graphic was supposed to be, sometimes it will look like it has
been torn through the middle:
1)
To display a graphic on some one else's page, you need to find the URL. To
do this, I recommend that you have Netscape Navigator. Click and hold down
on the graphic, until a menu comes up. Choose "View this Image". Then ,
copy the URL that appears at the top of the screen, in the "location" box.
Let's say that the URL was:
http://www.teleport.com/~danal/Images/devil.gif. You would type:
The result is:
2)
To display a graphic that is in your account, all you have to do is type
in the URL. If you didn't make separate directories for graphics and
pages, then you just need to type the graphic's name.(i.e.
<IMG SRC="devil.gif">
Some World Wide Web browsers cannot display images. Some users turn
off image loading even if their software can display images
(especially if they are using a modem or have a slow connection).
HTML provides a command to tell readers what they are missing on your
pages. The "ALT" attribute lets you specify
text to be displayed instead of an image. For example:
In this example, "devil.gif" is the picture of a devil. With
graphics-capable viewers that have image-loading turned on, you
see the devil graphic. With a non-graphic browser or if image-loading is
turned off, the word "devil" is shown in your window. You should try to
include alternate text for each image you use in your document, as it is
a courtesy for your readers.
Some people like to put animation on their web pages. It actually is
not that hard. Here is some background history. You see most GIFs over the
years have only one image per file. According to "technical
specifications from 1987", a GIF could have had more than one image per
file, making it like a slide show presentation and not a single image.
However, most programs that work with GIF are designed around the idea of
one image per file. So the multi-image aspect of GIFs was forgotten. In
1989, they added timing and various other abilities to the GIF format,
including transparency. Nobody used these new additions either. Then the
Web took off. Transparency and interlacing became features people wanted
to use and software companies began supporting those features. In order to
have animation on your web page, you need to download a program that was
made to fit more that one GIF in a file. I recommend
GifBuilder for the Mac. IBM users can go here
to download
another program. Here is one example of a small animation:
On most pages, you want to have a specific color for the background,
text, unvisited links, visited links, and active links. In order to do
this, you need to find the code number for the specific color that you
are looking for. Here
is a HUGE list of code numbers, and here is
how you would display this in your page. NOTE:
Type these ONLY right below your title. NOTE: You must have the
"#" sign before the actual code.
You can also string two or more of these commands together:
Instead of having a solid color as a background, you might want to have
one graphic that repeats over and over to create a background. Here are
several places that you can go to find background graphics. The text that
you would type in for a background called "bk.gif" would be:
Sometimes on your web page, you might want to have a graphic that is a
link. This is quite simple, since you just mix the two commands of
linking, and displaying graphics. Here is an example of a graphic that
leads to Yahoo:
You can also have a text link next to the graphic that leads to the
same place.
Here is what you would type in for, first the plain graphic-link, and
second, the graphic-link with text:
Before you create an image map, you need to make sure that your server
supports them. Then, you can follow these steps. First, you need to create
an image. Draw a picture with sections that could lead to certain places.
Second, you need to create an image map file. There are several programs
that can do this for you. I recommend WebMap,
for the
Mac.
You can go to Yahoo's Image Map Directoryfor others. For
more
information, go Here.
Fill-out forms let a reader
return information to a Web server for some action. For example, suppose
you collect names and email addresses so you can email some
information to people who request it. This processing
of incoming data is usually handled by a script or program written in Perl
or another language that manipulates text, files, and information. If you
want to, you can write this program yourself, but I have no idea how to do
it. I would check with your server. I know that Teleport has several
scripts. The one that I'm going to use is called "fb.pl". This will send a
response to your fillout form directly to your email address.
The first thing that you type for your guestbook is the Form Method and
Action. This is where you enter the Perl script. The address of the one
that I'll be using is:
http://www.teleport.com/cgi-bin/fb.pl. If you would like the response sent
to your email address, and the address is "danal@teleport.com", you would
type this for the first two lines:
Here is what it will look like:
Netscape's Frames basically split your window in to sections. You cand display two or more web pages at a time with frames. A good example of Frames is at my guestbook. You must have Netscape 2.0 or greater to view Frames. Otherwise, you will get a blank screen (unless the programmer has done a good job). You don't necessarily have to have whole pages in a frame. You could put just plain graphics, too. If you are really interested in putting frames on your page, I recommend that you go here and read AT LEAST the first two lessons.
Java is a simple, robust, object-oriented, platform-independent
multi-threaded, dynamic general-purpose programming environment. It's best
for creating applets and applications for the Internet, intranets and any
other complex, distributed network.
The only Java that I know, is scrolling text. You can see it in action
here. Look along the VERY
bottom of the
window. If you would like to have this on your web page, here is what you
type. NOTE: I would recommend that you copy and paste this, because
it is very long, and one wrong letter can mess it up. If you would like to
change the text, you need to type in what you want yours to say on lines
15, 16, 17, 18, and 19, where it says "var m1" through "var m5". You will
also need to change the title, and the body text and background. But don't
mess with the "BODY ONLOAD" command, as that is part of Java. Go here to see
it.
Rather than give you a big list of things to check, I'm just going to
give you my email address. If you can't figure out why something isn't
working, or you couldn't understand what I was saying, just email me with
your page's address, and your problem, and I'll take a look at it. Don't
hesitate to email me, I really have nothing else better to do (besides rot
my brain out with TV:-)
danal@teleport.com.
There are many other pages that have to do with writing web pages. The
best one I've seen, is here
There are several people that I would like to thank. First of all,
Aaron Cook, sly5@teleport.com, who
gave me ideas, pointed out mistakes, and submitted this page to FIFTEEN
search engines. Thank you, Aaron. Secondly, and lastly, I'd like to thank
the fifteen search engines for putting my page in their indexes. Thanks
to:
Yahoo!
Open Text
Infoseek
Webcrawler
Starting Point
Lycos
The Elnet Galaxy
Infospace
Metroscope
Linkstar
The WWW Yellow Pages
AltaVista
MallPark
What's New Too
Nerd World Media
AND
Submit-it