Handcoding Your First WebPage Like a Pro

Table of Contents
Introduction Getting Started Look But Don't Touch -- the page frame
Editing Text Your Title Your Headings
Your Illustrations Your Links Unordered and Ordered Lists
Backgrounds and Background Colors Checking Your Work Uploading Your Work
template.html -- The page you need to use with this tutorial. A selection of links to graphics sites. Need a free web space provider, click here.
Additional HTML Tutorials Email ZOIDRubashov -- the author of this tutorial Back to the Main ZOID page.


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
top of the page.

Getting Started

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 work.

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
top of the page.

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....

</body> </html>

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
top of the page.

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
top of the page.

Changing the Title

This is your webpage after all. Look at the top of template.html It says <title> Put your title here</title> Cut the "put your title here" and write in your own title.

Back to the
top of the page.

Changing and Adding Headings

Headings mean that you don't need a Welcome sign on your web page. They also help organize different sections of your web page. Headings use the tags <h1> Big text goes here</h1> to <h6>Little text goes here. </h6> You can put any text you want inside heading tags. <h1> headings are the biggest. <h6> headings are the smallest. The most common heading sizes are <h1>,<h2>, and <h3> You can align headings left, center, or right. <h3 align="right" >text</h3> aligns a medium sized heading on the right side of the page. Aligning is another mark of a professional coder.

To change the heading above the first paragraph, cut out the text between <h1 align="center"> and </h1> and write in your own.

To add more headings pick a size and pick a place and then add <h1 align="center">text of your choice</h1> or any other <h#> tag aligned as you see fit and any text you want etween the <h#> tags.

Please remember to close all heading tags or your text will all be big and bold.

Back to the
top of the page.

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
top of the page.

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 <a href="#hereisananchor">

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 own.

You can use external links for your email address. <a href="mailto:ehkuhall7@tacheiru.every1.net">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" ></a> 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
top of the page.

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.

<li><a href="http://www.corbis.com">Corbis</a> for pictures
<li><a href="http://nakedmolerat.org.uk/zcsv"> 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
top of the page.

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 unreadable.

Back to the top of the page.

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 your way 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:

Endless blue (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
top of the page.

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 a pro.

Back to the
top of the page.