So you think you can't code html, well think again. If you start
simply, you will not only be able to code your own page, but have
a simple and handsome product that those in the know will respect
and appreciate. In other words, you will code like a pro. You
will also have a backup copy of your new page on your hard drive
or a floppy so that if you want to move the page or if it disappears,
you can find a new home and fix the damage.
What this tutorial DOES NOT teach is table code. Tables are
a necessity for triple or bordered backgrounds or for when you have
more than nine links in a list, but they are not necessary for producing
your first page. I'll write a table code tutorial later.
Back to the
You will need to make a space to work in on your hard drive
or you will need to have a floppy disk of your own to store your
Go into Windows Explorer and create a new folder and give
it a name you can remember.Then save the template.html into that
folder or to a floppy disk. Then save template.html again but before
hitting, save, give template.html a different name.
You can also copy template.html to a new file with a different name. The reason
for this is that you are going to want
one copy of template.html to work with again and again, to use for reference, or
to start over with if you mess up. Also save sample.jpg That's the wrinkly
green image which goes with the page.
Now open template.html in either Notepad or Wordpad. You should
see lots of <letter> and </letter> symbols. That is html code.
You should also see <! things that look like this>. These are rem statements
or explanations. You can always include your own in your work. I
don't usually include them in mine but since this is a tutorial page, I
thought they would help. OK, let's start editing.....
Back to the
Look but Don't Touch (Yet) -- The Page Frame
Look carefully at the top of template.html You will notice the following code.
<body bgcolor="#DEFFDE" text="#000000"
link="#388000" vlink="#602200" alink="#80FF00"
Now look at the bottom of the page. You will see....
These tags form the frame for template.html and all other
web pages. If you ever build a web page without the
template, you will need to include these tags first though you
may use a slightly different <body> tag and the name for
the <title></title> will of course be your own. All
web pages need a frame.
Back to the
Changing and Adding Text
Look between the <p> and </p> symbols. These are paragraphs.
Dividing your text into paragraphs is the mark of a professional coder.
To insert your own text, cut out mine and type in yours.
To add an additional paragraph, insert a <p>, skip a line, and write
your text. Then put in a </p> to close the paragraph.
To make text bold put it between <b> and </b> tags.
To make text italics put it between <i> and </i> tags.
You can align paragraphs in the center, to the right, or to the left.
<p align="center"> centers a paragraph.
<p align="left"> aligns it to the left of the page.
To put a poem, prayer, or list on a web page, open a paragraph <p> tag.
Use a <b>tag</b> to put the title in boldface. Put a
linebreak with two <br> tags after the title. Write a
line of your poem and end it with a <br> linebreak. Repeat this for
each line of your poem. After the last line
put two linebreaks <br><br> and the name of the author. Then close
the paragraph with a </p> tag.
Back to the
Changing and Adding Illustrations
To put illustrations in a web page, use the <img...> tag. You
don't have to close the image tag, but it has four pieces.
Here is the <img> tag as it appears in template.html
<img src="sample.jpg" align="right" alt="a
green wrinkly abstract jpg" border="0">
src is the name and address of the illustration. You should have
all illustrations for a web page in the same folder as the page
itself. This means they will have a short name and address. The name
and address are always in "quotes." Please remember to "close the quotes."
Align means that you can and should align images left, center, or right.
Aligning smaller (less than 300 pixels wide) images to the left or right
of a paragraph is the mark of a professional coder.You can also
align images when you sign guestbooks that take html.
Alt is the message that users see if the image doesn't load. It is
nice to know what is there even if you can't see it. Please include an
alt message in "quotes," and remember to "close the quotes."
Border is necessary if you are using the image as part of a link.
Border="0" prevents an ugly border from forming around the
image. And yes the number after the = sign is in "quotes."
To change the image in template.html wipe out the src name and
address put in the name of your image between the "quotes." Also
change the "alt statement." You can align the image to the
left or leave it aligned to the right.
To add an additional small image, find a place below
the <p> tag in any paragraph and put in
<img src="yourimage.jpg" alt="an alt statement" border="
0" align="right"> The text in the "quotes" will
of course be your own and depend on the name of your image.
Substitute the name of your illustration for yourimage.jpg or yourimage.gif
Likewise write in your own alt statement. Leave the border as "0."
You can align the image left or right.
To add an additional large image
(more than 300 pixels wide) find a place at the end of a paragraph.
BELOW THE</P> tag insert at least one linebreak <br>.
Then insert your image <img src="yourimage.jpg" alt="an
alt satement" border="0" align="center">
You can align a large image in the center as well as to the left or the right.
SEPARATOR BARS ARE LARGE IMAGES.
Back to the
To Change or Add Links
Links lead to other web sites, email, music,
and important places inside of your web page.
With one VERY IMPORTANT exception, they
take the form <a href="whereyou're going">text</a>.
"whereyou're going" can be any number of locations.
Internal links lead to important points on the SAME
web page. They are good on long text-rich web pages that are divided
by topic or on pages that require a lot of scrolling. Internal links lead to a
place in the page where you have put an anchor tag. This is an anchor tag:
<a name="hereisananchor"> Notice there is no </a> with
an anchor tag. An anchor of course can of course say anything. An internal
link is a link to the anchor and it includes the
text of the anchor preceded by a # mark. A link to the example anchor would be
One of my favorite kinds of internal links is one I call a topknot. The
anchor for the topknot is at the top of the page and it looks like this:
<a name="topknot"> The links that lead to the
topknot (and there are often more than one) are <a href="#topknot">
back to the top</a>. There is a topknot link in template.html
External links lead to places outside your page. If those places are
other pages or files in your folder at your site you can use relative addressing
which is short and sweet. For example, if you had a page in the same folder at
your site as template.html called aboutme.html and you wanted
to include a link to it on template.html, your link would
look like <a href="aboutme.html"> read about me.</a>
An external link has no anchor.
An external link that leads to a page that is in a different folder or directory
or that is not at your site at all requires an absolute address.
These are the kind of links that appear on template.html near
the bottom. They look like <a href="http://nakedmolerat.org.uk/zcsv/">
ZOID CITY Sound and Vision</a>. Notice the address begins with http://
A guestbook typically requires one or two external links with absolute addresses.
Usually the guestbook provider gives you the URL for the link. You can
remove the <img> or text that sits between the
<a href="htp://www.guestbook.com/myguestbook"> my guestbook
</a> tags and substitute text or an <img> of your
You can use external links for your email address.
<a href="mailto:email@example.com">email</a> is
an example that includes my email address.
You can use external links to play midi. <a href="yankeedoodle.mid">
Yankee Doodle</a> is an example. Substitute the name of your favorite midi.
And yes, you can have lots of midi links on one page. This gives
users a choice of tune or no tune at all, and your page still loads very fast,
because the songs don't load until a user clicks the link.
Links can also use a picture instead of text between the link tags. This is
how buttons work. Here is an example. It is a link to Corbis that uses sample.jpg
as the button.
<a href="http://www.corbis.com"><img src="sample.jpg"
align="left" alt="a green wrinkly abstract jpg" border="0"
Note: the border="0" to keep an ugly border from appearing
around the image.
To change links in template.html cut the text between the quotes
of <a href="http://ww...."> and put in your own
and also change the text between <a>text</a>.
To add links to template.html you can write them into your paragraphs. Here is
a <a href="yourlocation">link</a> with a URL
substituting for your location. Note, this can be a midi or an
email address as well as an outside page.
You can also add them to the unordered list at the bottom of
the page or to a new unordered or ordered list.
Please make sure you understand how links work before adding new ones.
Back to the
Unordered and Ordered Lists
The nice listing of links at the bottom of template.html is an unordered list.
There are also ordered lists that start with <ol> and end with </ol>.
An unordered list starts with <ul> and ends with </ul> Between <ul>
and </ul> are the individual list items which start with <li> You
don't have to close an <li> tag. To make skipped lines between the
items, end each item with two linebreak tags or <br>.
Here is an example.
ZOID CITY Sound and Vision</a><br><br>
<li>I'll add more stuff when I'm ready.<br><br>
To change an item in the unordered list, change the URL and
text in any of the links. Alternatively, you can wipe out the links and
write in plain text. Look at the third item in the example above.
To add an item to an unordered list just insert an <li> after a <br><br>
tag or just above the </ul>. Remember to start the new item with
<li> and that you don't have to close the </li>.
To create an unordered list of your own type <ul> and then start
adding the list items with <li> at the beginning of each and <br><br>
at the end. Remember an unordered list ends in </ul>
Ordered lists work exactly like unordered lists except they use <ol>
and </ol> where ordered lists have <ul> and </ul> Ordered lists
give items numbers instead of dots.
Back to the
Changing the Colors and Adding a Background
You couldn't wait to read this could you? OK, let's start with the colors.
The background and text colors are hexidecimal or base sixteen. You
can get the hex code for different colors using Paint Shop Pro's palette or
you can go to a colorserver to find colors.
Brian Hall's color server is at:
http://www-students.biola.edu/~brian/csapplet.html Background colors and
link and text colors are not linkware. Just choose the ones you want and go.
After you decide what colors you like and their hexidecimal codes,
look at the <body> tag.
Change bgcolor="#DEFFDE" to bgcolor number of your choice.
Change text="#000000" to "#yurnewcolor"
Do the same for the link, active link, and visited link colors. Remember to
leave the hash mark # in place and close the "quotes."
To add a background, ADD the following to the <body> tag background=
"mybackground.jpg" Of course your background can
be called anything and it can be a .gif instead of a .jpg too.
Remember pages with light background colors and dark text are printable
and a poorly chosen background can make your text
Back to the
Checking Your Work
This is the most important part of the whole tutorial. Lots of things
can go wrong with code.
Links <a href="....> that are missing quotation
marks</a> or that are maissing the </a> can make a
mess of our page, so can that lovely background that obscures your text.
This is why you need to test your page. Remember this page
is still on your hard drive or floppy.
OK, first save your page. Click on saveas and make sure you
end the page name in .html but save it as PLAIN TEXT.
You have to tell the computer that you want to do this if you are working in
Wordpad and no, you just don't care about the formatting. Also make
sure you save the file to your page making directory. Both Wordpad and
Notepad will want to save it somewhere else. Click on the
box at the top of the display that pops up when you
go to save, go to the C: icon and then work your
way down to your page making directory or finnd the A: (floppy disk) icon. This
will get to be second nature after a while.
Now, open up your browser, either Netsccape or Internet Explorer, and click on open.
Click on browse. Find your way to the C disk or to the A (floppy) drive. Find
to your page making folder or directory (remember when you had to make that.) or
to the A: (floppy) drive. Your page title should appear. It will most
likely still be template.html though it could be something else.
Click on it.
If you see mistakes, now is the time to fix them.
Here are some of the commonest mistakes:
(or other link colored text) means a missing </a> tag.
- Missing text means that you never put the second "quote"
in on a link. This often causes broken images as well.
- A page that scrolls horizontally means that one of your
illustrations is too large. Use line breaks and put it below the paragraph.
- Unreadable text means your lovely background is unusable. Find another background or switch
to a bgcolor.
- Lots of big and bold text means
you did not close a <h#> tag.
When the page is ready to go, it is time to upload it.
Go back into Wordpad or Notepad and make the appropriate changes.
Save your page and click on refresh/reload.
Back to the
Uploading Your Page
You may not believe it, but you are now an advanced user, at least
as far as Geocities or other free providers are concerned. For
browser upload (There is something else called FTP. Techies like FTP
better, but that is another story.) take the browser to your provider, log in
as a member of your free provider. If you are not
a member, you will need to set up an acount. Once you
have an account and are logged in, find your way to
the File Manager or Homepage Utilities. On Geocities the
File Manager is
an "advanced tool." Didn't I tell you, you are now an
advanced user. Crosswinds and
Internettrash make their file manager part of their homepage utilities.
Topcities and Envy.nu include a file manager link and no warning. You
don't need that warning. You are an advanced user.
Find your way to the upload area and click on browse. Find your
web page just as you would when testing it in your browser. That means
finding the folder on your hard drive or finding the A:(floppy drive) Do the same
for any illustrations, background, or midi that go with it. Then hit
the submit or upload button. For Freewebz, you will need
to upload items one at a time and edit each page to insert
tracking code. Techies may sneer at you, but for smaller sites and pages, this
is not a problem.
Test the uploaded page to make sure all the files made it. If not, upload the
missing items. These are usually midi that don't play or
graphics that appear broken.
Your creation is now ready for the world to view, and you have just coded like
Back to the