Title
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 "NetINS Web Page", you would
type:
<title>NetINS 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 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
|
Text
Headings
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 in bold. If you wanted to type "Hello",
this is what you would type for each heading, and what the outcome is:
<h1>Hello</h1>
Hello
<h2>Hello</h2>
Hello
<h3>Hello</h3>
Hello
<h4>Hello</h4>
Hello
<h5>Hello</h5>
Hello
<h6>Hello</h6>
Hello
Paragraphs
Whenever you have more than a sentence of writing,
you should have paragraphs.
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 this
guy@netins.net", type:
<P>This is a web page. How do you like what
I've done? Please e-mail me with any suggestions at this
guy@netins.net.</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 this guy@netins.net
Lists
There are two common 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, and purple, black, and brown type:
<OL>
<LI> red
<LI> orange
<LI> green
<LI> blue
<LI> purple
<LI> black
<LI> brown
</OL>
The result looks like:
- red
- orange
- green
- blue
- purple
- black
- brown
Forced Line Breaks
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:
Hello, <BR>how<BR>are<BR>you?
The outcome is:
Hello,
how
are
you?
Character Formatting
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:
<b>, </b> for bold
<i>, </i> for italic
<u>, </u> for underlined
<strike>, </strike> for strikeout
<sup>, </sup> for superscript
<sub>, </sub> for subscript
<tt>, </tt> for teletype
<blink>, </blink> for blinking text (very annoying)
You can also mix styles together like
this.
^ Back to Top
|
Linking
URLs
When you make a link, you are making colored text
or even a graphic. When somebody clicks on this text, it will take him
or her 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
the netINS homepage. The URL of netINS is: http://www.netins.net
To do this, you would type:
<a href="http://www.netins.net">This is a
link to netINS!</a>
The result would be:
This is a link to
netINS!
Anchors
Sometimes, you might want to have a link that will
take you further down a page, or to a certain section of another page.
To do this you need to do two things; first is to make the link and
second is to make where the link will lead.
Note: You cannot make links to
specific sections within a different document unless you have write
permission to the coded source of that document or that document
already contains in-document named links.
- 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">Go to Spot
Otherwise, you would add "#spot" to the end of
the URL.
- 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:
<A NAME = "spot">
Mailto Links
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 e-mail address is someone@netins.net, type:
<A href="mailto:someone@netins.net">Send me
Email! </a>
Here is the result of typing this: Send me Email!
^ Back to Top
|
Graphics
Putting Images on A Page
Almost every web page has some sort of picture. I
would highly recommend that you have at least one picture on your page.
To display a graphic, 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. <IMG
SRC="pic.gif">
Alternate Text for Images
Some Web browsers cannot display images. Some
users turn off image loading even if their software can display images
(especially if they have a slow connection). HTML provides a command to
tell readers what they are missing on your pages. This also provides a
text pop-up on some browsers, telling the viewer what the picture is.
The "ALT" attribute lets you specify text to be displayed. For example:
<IMG SRC="pic.gif" ALT="How to make a web
page">
In this example, "pic.gif" is the picture. 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" are 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.
Background, Text, and Link Color
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.
http://www.htmlhelp.com/cgi-bin/color.cgi has a large list of code
numbers. Below is how you would display them 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:
<body bgcolor="#000015" text="#000020" link="#000050"
vlink="#7a7777" alink="#8f8e8d">
Background Graphics
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. The text that you would type in for a background called
"bk.gif" would be:
<body background="bk.gif">
^ Back to Top
|