Writing HTML

There are many other (and way better) tutorials out there. These just happen to be some I put together as a few people requested.

The way I learned HTML was by just piling right in and doing it. So this will be a "hands on" lesson. You will be able to see how things will look on your page, experiment, begin to realize what you might want to do with your page. A few rules to get started.

Every command of HTML code must be written with these brackets around it <>. Then when you want that particular command to cease, use /.

Next rule is that every HTML document must be saved with the extension .html, not .doc or .txt or .mid etc. So as you save your file, give it a name such as photos.html or me.html or mydog.html.

Next rule is that every HTML document must have a certain set of commands at the beginning and at the end, which tells the browsers this is something for them.

Here are the codes to put first thing on the page (don't forget each one goes between <>:

html
head
title
/title
/head
body

Here are the codes to put last thing on the page:

/body
/html

Now you can begin to build a page. Open your Notepad program shown under Accessories in Windows. Type in the opening codes each in <>.

html
head
title
/title
/head
body

Then, to write a headline for your page, specify the font face (style), size and color you'd like to use. For now let's choose
font face=arial size=5 color=red
Type this command I have in bold letters inside the brackets <>. Size 7 is the largest font size and 1 is the smallest. You'll learn by experimenting with the numbers what will work on your page. You'll want your headline centered, so use the command word
center
(of course, inside brackets). Following this command, type in your headline.

After you type your headline, you'll want a double space before you go into the text. Give the command for "paragraph" which is the letter p between <>. If you want only a line break (eg for poetry), use the command br inside <>.

For the text of your page, you may want the print to be aligned on the left margin, so close the center command by using /center (inside the brackets). Now to write text in smaller letters, give the command
font size=3
again inside <>.

At this point write a few sentences.

Finish off the page with these closing commands (each inside <>).
/body
/html

Save and test the work. I keep my pages on disks to save room on the hard drive, and so I can find them. But for now just save the page to your desktop. This brings us to one more rule. The first page of a webpage is always saved with the name index.html so the Browsers know where to start. It doesn't have to have your index of website; just has to be the first page.

Time to see the proof of the pudding. Double click on the index.html icon. The browser should pick up on it immediately and begin to display the page. If you see any kind of gobbledegook, it probably means a typo error, forgetting to use both brackets, etc. So how does it look?

You'll learn the most and the best by going back to your page, changing the font size, colors, etc, and eventually you'll start getting a glimmer of how this coding works. While you're practicing with the type, try using the command letter i to get italics and b to get boldface. Some of the font faces you can try are "comic sans ms," "impact," "tribune." You might want to save them for a later practice. Not everybody's browser can display all the type faces available.

Color is the most fun! There are about 16 colors you can call for by name, and 246 colors you can specify by code number. If you'll visit my Paintshed at Acton's Attic, go to the bottom of the page, I have a link to a colorchart that show the codes for each color. I also have two color charts I can email you.

One last thing to play with is background color. For this, type the code
body bgcolor=yellow
(or any color you want--and don't forget the <>). Put that code at the beginning of your page like this:

html
head
title
/title
/head
body bgcolor=yellow

You can do some dramatic things using just color, like black or indigo background and lettering in ffffc3 (a cream color). If your webpage will be for business, it's probably best to keep it traditional--white background and black lettering. You can use patterned backgrounds, too, but that is an advanced item.

While we're filling in the top of the page, might as well put in the title. Title is important because if a search engine finds your page, it will show what you have written as a title. I figured that out after seeing a search engine call my page rainbow.html. Mistakes make for good learning!

So here's where you put in your title.

html
head
title
Welcome To My Homepage (or whatever...)
/title
/head
body bgcolor=yellow

One last item. I'm posting a photo here to show how to capture a graphic and then include it on your page.

Save the graphic the same way you would save a midi--right click and then "Save as." Save it to your desktop. The browser will need it on the desktop to display it on your page.

Here's the code to post this graphic:
img src="nature047.gif"
(don't forget the brackets).

The images on the Website must be named with the extension of either .jpg or .gif
You post a .jpg the same way.

Once you get a page working right, you can use it as a template for future pages of similar style.

Well, I think that will keep you busy awhile.

Unless you want to go to recess or to setting up webpages or to learning Tables & Frames.