I get asked this a lot... folks just want to be able to show
the kids school pictures to Aunt Mable, or have a information site for their pet bird, or
somewhere to show off their poetry... and they don't even know where to begin.
It's not that hard, trust me!
First, you can use the plain old text editor, that comes built
into your computer. With Windows, it's called Notepad, and you can find it by
clicking Start, then Programs, then Accessories, and then select Notepad. On a Mac,
open Simple Text.
On the blank page that is now staring at you, now type this:
<HTML>
<HEAD>
<META name="Author"> content="Put your name
here">
<META name=Description"> content="Put a couple of
lines here describing your site">
META name="Keywords"> content="put a list of words
separated by commas here so the search engines can find you">
<TITLE>Whatever Your Are Going To Call Your Main
Page</TITLE>
</HEAD>
<BODY>
[Top] |
This will set your document type declaration, tell the browser what
version of html code you are using and begin your page
|
The HEAD is not only a part of the basic html elements of the page,
but is an element of it's own, and can contain the title of your page, which is what will
show up on the user's tool bar, and as the title when someone bookmarks your site.
It can also contain META tags for such things as AUTHOR and KEYWORDS and other META
elements.
|
The BODY element is where the rest of your page will be. When
you get done, don't forget to "close" the body and html elements like this:
</BODY>
</HTML>
|
bold - <b> This will make your text bold
</b>
This will make your text bold
italic - <i> This will make your text
italic>/i>
This will make your text italic
[Top] |
Type <h1> This heading is size 1</h1>
This heading is size 1
The heading tags all work the same way, and are H1, H2, H3, H4, H5
and H6 with H1 the biggest, and H6 the smallest
[Top] |
Type this:
<font size="1"> This is font size 1</font>
This is font size 1
The font sizes go from 1 - 6, with 1 being the smallest, and 6 being
the largest
[Top] |
To put an image on your page you type:
<img src="nameof image.gif"> or <img
src="nameofimage.jpg"> depending, of course on if it's a .gif formatted
image, or a .jpg formatted image...
Make sure your image is saved in the same file as your page, or else
this won't show up! When you upload the page to the server, upload the image too, to
the same folder as the page, so that it will be a local file.
[Top] |
These are kinda tacky, but if you are using a free server, like
Geocities, Tripod, Fortunecities, Xoom, or Anglefire, they come in handy when the server
makes you put their yucky little graphic at the bottom of the page.
Type:
<hr>
and that will make a line like this:
[Top] |
Type:
<center> This will center stuff</center>
This will center stuff
Type:
<p align="right"> This will make the
text go right </p>
This will make the text go right
The automatic default is left, and if you want it that
way, don't do anything, but if you really want to know:
Type:
<p align="left"> This will make the
text go back to the left after you fiddle with it</p>
[Top] |
Type <dd> and it will indent the text, until you type
this...</dd>
and it will indent the text, until you type this...
[Top] |
Bulleted list:
<li>
| Un-numbered
lists <ul>
<li>lists for links
<li> or items
</ul>
|
Numbered
lists <ol>
<li>Numbered lists for ratings,
<li>or other personal hobbies
</ol>
- Numbered lists for ratings
- or other personal hobbies
|
Nested
Lists <ul>
<li>listfor
<ul>
<li>outlines
<ul>
<li>or menus
</ul>
</ul>
</ul>
|
[Top] |
Type:
<a href="www.servername.com/thepage.htm"> Page
Description</a>
Page Description
this is an example of the link to my web page:
<a
href="webdesign2.htm" target="newpage">Page Description</a>
Targeting a page, as I have done
here, allows the user to break out of a frames page, like this one. If you don't,
the page will open in the frame, and it's really, really annoying!
[Top] |
An e-mail link works pretty much like a link to another page.
Instead of "calling" another page, you are "calling" the person's
e-mail program.
Type:
<a
href="mailto:whateveryoure-mailaddressis@yourserver.com">Send me e-mail</a>
This example sends me e-mail (why
wasted a perfectly good link?)
Send me
e-mail
[Top] |
You will probably really like this! You can pre-set the
subject line of e-mail coming from your page! This is great, because
you can tell
what page the person was looking at. You can also set the subject to indicate the
difference between say, a husband's working on cars page, and a wife's genealogy
page...
or your businesses Employment Opportunities page, vs your Product Information page - that
sort of thing can be handy!
<a
href="mailto:lanat@javanet.com?subject=I visited your HTML Helper Page!">Send
me e-mail</a>
Send me e-mail
[Top] |