Lesson Two

We'll start with some of the most basic changes you can make to your HTML document, I'll refer you to some other sources for the fancy stuff at the end of this lesson.


To change the size of the type in your document you use one of six Heading tags.


This is heading 1


This is heading 2


This is heading 3


This is heading 4

This is heading 5

This is heading 6

You would put one of these tags before the Type you want larger and then the appropriate closing tag after it. </H1> etc.

You can also use the tag <FONT Size=5> with size one being the smallest and six being the largest and with the closing tag </FONT>, but be warned that not all browsers recognize this tag.


To add a background pattern design to the page you alter the <BODY> tag at the top of the page-


In this case the FileName would be replaced by the name of a small GIF or JPEG of your background pattern. Background images are tiled across the screen so you only need a small one, the browser will fill the screen with the pattern.

I have some great links to background patterns and other design elements in the Graphics and Design section.

Once you have downloaded a pattern to your drive, just put it in the same folder or directory as your HTML file so the browser can find it.


The tag <HR> will place a thin line across the screen. Helpful to break up sections of your page or separate out portions. The length of the line can be altered by adding <HR Width=50%>. The number indicates the percentage of screen width you want the line to be.


The <BLOCK QUOTE> tag indents the right and left sides of a paragraph or block of text to set it apart from the rest of the text. Be sure to include </BLOCK QUOTE> at the end to close the tag.


To add graphic bars to separate portions of your page you simply place a GIF or JPEG of the bar where you want it on the page with the <IMG SRC="FileName"> tag. For a nice selection of ready made bars, check out my friend Nancy's collection.

(Note- If you are using Netscape and have the Crescendo Plug In you can enjoy a little music while you browse there. You may also want to spend a little time wondering around her wonderful site and experience some really fine Web craftsmanship.)


The tag to make a graphic act as a clickable link is just a combination of the link tag and the image tag-

<a href="FileName or URL"><img src="Image FileName"Border=0></A>

The Border=0 means that there will not be a blue line around the image. Sometimes it's a good thing to have the blue border because it tells users that the image is clickable. If you have doubt whether people will realize that it is just remove Border=0 from the code and the default border will appear.


So you really want to get fancy! I've tried to include here the *minimum* you need to know to create a nice looking and functional page. There are better sources for learning the more complex elements or HTML. There is a lot of fun and interesting stuff you can do. You'll find links to information on more advanced HTML on the Basic HTML page of The Crafter's Web Development Center.


Up to this point I've tried to avoid bringing up anything that might be extra confusing for you. Hopefully by now you have completed lesson one and created a simple page and feel a little more assured that all this HTML stuff really works and can be fun. I should let you know about some of the aspects of it that can be very confusing and frustrating though.

As with any language there are often different ways to say the same thing with HTML and not all browsers understand all of the language.

For example the <CENTER> tag is not recognized by the Mosaic Browser but you can have things centered by specifying it as an attribute of another tag, like this, <IMG SRC="FileName" ALIGN=Middle>. There are many commands commonly used on the web that some older versions of the AOL Browser does not understand.

I'm not going to go into all the different tags or which browsers understand them; I'll just tell you that Netscape and Internet Explorer seem to do the best at understanding whatever HTML you throw at them.

If you plan to do much on the web it's a good idea you have a copy of each of the popular browsers so you can check your pages to see how they look and operate with each.


It is likely at some point you will create a page of HTML and then go to look at it with your browser and *something* will not work. Perhaps a GIF will refuse to show up or a link won't work or something strange. You'll go back and carefully go over your HTML and you will not be able to find any reason for the problem. I have on several occasions spent hours searching for that little mistake lost somewhere in the HTML until I was tearing my hair out. Inevitably it would be there, perhaps a missing > or a comma where a period should be or a misspelled file name. Then also, you might have it all working fine as a local file on your computer but when you put it on the web something doesn't work. Most of the time the answer is there somewhere in the HTML.

Here are a few tips from my mistakes.

Remember, if you run into trouble you can't figure out you can always post your question on the WebCraft Bulletin Board and maybe I or someone else will have an answer for you.


Drag The Tag

If you are using a Macintosh computer with system 7.5, here's a neat way to edit your HTML docs. Make a "Text Clipping" file of each of the HTML tags you commonly use. Name them with the tag and keep them all in one folder. Arrange them in small icon view so that you can have access to all of them when the window is made into a long narrow strip when open. Keep this window open beside your SimpleText doc. Now you can simply drag the tags where you want them in the document and release.

So, you have an HTML document and a bunch of GIFs or JPEG files, now what do you do with them? Go on to the Hosting and Domains Section and find a host for your web site.

A Free Service Of The Crafts Fair Online
| Beginner's | HTML | Design | Hosting | CGI | Promotion | Bulletin Board |