There are basically two ways to make a
web page. The first way is to create the page(s) offline and then upload them to
your Internet Service Provider (ISP) via FTP. The second way is to create your
web page(s) online using a Telnet program by accessing your UNIX account, if you
have one.
If you are creating your web page(s)
offline, do so in any text editing or word processing document. Make sure that
when you save your document, you save it as a "text", "plain text" or "text
only" document. Otherwise it will not be read properly by a web browser. Once
you have created your page(s), you will need to contact your ISP about how to go
about uploading them to your server.
If you have a UNIX account, you can
create your web page(s) online. You first need to get a program that can access
your UNIX account. I recommend WS_FTP98 is easy to use and is free
WS_FTP98 for Windows 95/98.
Once you can access your account, you
need to make a new directory called "public_html". (if not already there) You can do this by
typing:
mkdir public_html
After this, change your directory to this new directory called
"public_html".
cd 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 filename for your page (this is not a title, but
what will be in the URL). A common filename for a main web page, is "index".
Once you've decided on this, add ".html" to the end of it. Then type
(i.e.)
pico index.html
Of course, use your page's filename, instead of this one. 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:
chmod 744 index.html
Only do this with the filename 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.domain.com", your username is "username", and the name of
your page is "index.html". The URL would normally be:
http://www.domain.com/~username/index.html
However, you will need to contact your ISP for your URL.
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 web pages, called "Pages". The new URL would be:
http://www.domain.com/~username/Pages/index.html
Hyper Text Markup Language. Don't be frightened. In lamen's terms, it simply
means the code you use to create a web page. Behind the scenes of every web page, is HTML. Whether you used a plug in editor, such as MS FrontPage or Dreamweaver, or if you used a text editor, such as Notepad or NoteTab Pro.
Your page will always contain the tags <html> and </html> at the top and bottom of every page. This tells the browser that it's a web page.
The head is where you will put in information about your web page for search engines, add style sheets and write scripts. We will only cover what you need to get started. In between the
<head> and </head> tags is where you put all the information. For example:
The title of your page - <title>This is the title</title>
Email information - <link rev="made" href="mailto:lol@hahaha.com">
Author of page - <meta name="author" content="TechBearBiz.Com Staff 1">
Your web page description - <meta name="description" content="new page">
And your keywords - <meta name="keywords" content="template, etc.">
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:
<title>John Doe's Web Page</title>
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 forward 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 above to decide
how, and what to put on your page.
The body is the next tag you will put on your page. <body> and </body> must be in your web page, after the head tags. Whatever you put in between those tags is what your viewers will see.
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 anyway, because then I can find a certain spot better when
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 a@a.com", type:
<P>This is a web page. How do you like what I've done? Please e-mail
me with any suggestions at a@a.com</P>
The outcome is:
This is a web page. How do you like what I've done? Please e-mail me with any
suggestions at a@a.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:
<UL> <LI> red <LI> orange <LI>
green <LI> blue <LI> purple <LI> black <LI>
brown </UL>
The result is:
red
orange
green
blue
purple
black
brown
To make a numbered list of: red, orange, green, blue, purple, black, and
brown, type:
<OL> <LI> red <LI> orange <LI>
green <LI> blue <LI> purple <LI> black <LI>
brown </OL>
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 a simple
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
with each word on a separate line. All you have to type is:
Every now and then, you might want to
have a horizontal rule, or line in your page. 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:
You may want to format some of your text
differently than others using text styles. There are several types of styles of
text that you can use: bold, italic, underline,
strikeout, superscript, subscript,
teletype, and text are examples. To do these
styles, surround your text with the following commands:
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
Yahoo!. The URL of Yahoo! is: http://www.yahoo.com To do this, you would
type:
<A HREF="http://www.yahoo.com">What ever text that you want to be
colored goes here</A>
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 to this web page. 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:
<A HREF="#spot">Colored Text
Otherwise, you would add "#spot" to the end of the URL.
<A HREF="http://www.YOURSITE.com/page.html#spot">Colored Text
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 Whobear, and your e-mail address is a@a.com, type:
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 another web page
somewhere on the web. The second, is to upload the graphic to your own account.
Personally, I prefer 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, like this:
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. Right click or 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.colorteam.com/graphics/pic.gif You would type:
2) To display a graphic that is in your account, all you have to do is
type in the filename. 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="pic.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:
<IMG SRC="pic.gif" ALT="How to make a web page">
In this example, "pic.gif" is the picture of a sign. With graphics-capable
viewers that have image-loading turned on, you see the graphic. With a
non-graphic browser or if image-loading is turned off, the words "How to make a
web page" 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.
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. Windows 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.
<body bgcolor="#code">for background color
<body text="#code">for color of text (all non-links)
<body link="#code">for color of unvisited links
<body vlink="#code">for color of visited links
<body alink="#code">for color of active links (while being selected)
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.
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 Directory for others.
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 many servers have
scripts available for its users. Let's pretend that the one that I'm going to
use is called "fb.pl". This will send a response to your fill out form directly
to your email address. This script is not real,
it is just an example. Check with your ISP to see if they have built-in
scripts.
The first thing that you type for your
guestbook is the Form Method and Action. This is where you enter the Perl
script. Most servers and Internet Providers have scripts like this that they
provide for you. Check with yours. You cannot have any kind of forms without
having a script. The address of the one that I'll be using
is: http://www.domain.com/cgi-bin/fb.pl. If you would like the response sent
to your email address, and the address is "a@a.com", you would type this for the
first two lines:
