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.
FONT SIZE
To change the size of the type in your document you use one of six Heading
tags.
<H1>
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.
BACKGROUNDS
To add a background pattern design to the page you alter the <BODY>
tag at the top of the page-
<BODY BACKGROUND="FileName">
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.
BLOCK QUOTE
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.
A TIP FOR MAC USERS 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.
HORIZONTAL RULE
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.
BARS & PAGE DIVIDERS
ICONS, BUTTONS & CLICKABLE GRAPHICS
SOUND, ANIMATION, TABLES, FORMS...
THE CONFUSING PART
THE MOST FRUSTRATING THING
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.
