How to Build a Website
Basic Content

by Craig Walker

Now, let's add some fun content.

Create a directory in your buildweb directory called pictures (lower case). If you use any upper case letters, you have to remember to make that change each time you refer to that directory, because I will always refer to it as I have it, lower case.

You can save any picture on the internet to your own computer by right clicking on the image, and saving the image to a directory on your hard drive. Right click the image here, select Save Image As, then save it to your pictures directory.

If not already open, open your itsme.htm file in Notepad. Then also open it in your web browser. That way as we make additions or changes you can see the progress.

By the way, you can have this tutorial open and your active itsme.htm page open too by opening a second browser window. Then, in Windows 95/98, you use the Taskbar at the bottom of the screen to switch open windows from the tutorial, to the itsme.htm page or to Notepad.

Very Important! When you make changes to your HTML code page, you must save it before the browser can see the changes. Then you will need to hit the Reload or Refresh button on your browser so it will pick up the new changes. Otherwise it may be looking at an old copy from your browser's cache files, stored browser memory files.

In order to save space, the HTML samples will be written on the page instead of screen shots like in the first lesson. The bold text will be the new code lines you should add.

There are several ways to approach this, but here's how we will do it here. Type the content you want, or copy what I have written, with the appropriate paragraph spacing. Add a picture using the proper tag. Then we'll see what we have.

Like I said before, you can personalize this tutorial by using your own name, phrases, and/or images. I have added some greetings and a picture. If you copy the code exactly as written, how do you think it will turn out? Try It. If you use a picture other than the one I have provided, be sure to make the appropriate changes to the file name in the IMG SRC tag.

The new code is BOLD

**Click Here** to see the page
<HTML> <HEAD> <TITLE>It's Me! Craig</TITLE> </HEAD> <BODY BGCOLOR="#33ffcc" TEXT="#0033ff"> Hi! Welcome to My Website My name is Craig and I'm a real swell guy. Don't you think so? <IMG SRC="pictures/craighome.jpg"> and Pretty Too! </BODY> </HTML>

Click the link under the code to see my page. Use the BACK button to return here.

Not too pretty, HUH? I used the keyboard return to start a new paragraph with a space in between but it all came out in a line. Well, HTML text code will word wrap in a browser window without being told, but that is about all it will do without being told. You have to tell it when to start a new line, bolt text, italicize, start a new paragraph with a space between, etc.

HTML formatting codes are called tags. We laid out the basic page tags on the Get Started page. Now we need to learn about the content tags. In the Table of Contents, in the Guides section, you will find the Tags Guide, where all the basic tags are explained.

Now let's add the formatting tags to make our page look like we intended it to look. At least how I intended it to look.

The new code is BOLD. Add the new tags to your document.

**Click Here** to see the page
<HTML> <HEAD> <TITLE>It's Me! Craig</TITLE> </HEAD> <BODY BGCOLOR="#33ffcc" TEXT="#0033ff"> <CENTER> <H1>Hi!</H1> <H2><I>Welcome to My Website</I></H2> <B>My name is Craig and I'm a real swell guy. Don't you think so? </B> <P> <IMG BORDER=3 SRC="pictures/craighome.jpg"> <P> <FONT FACE=ARIAL,HELVETICA SIZE=6 COLOR="#ff3333">and Pretty Too!</FONT> </CENTER> </BODY> </HTML>

Click the link under the code to see my page. Use the BACK button to return here.

WOW! Now it's looking like a web page. Email Me Let me know if it's working.

New Tags explained, as used: Also see the Tags Guide for more about these and other tags.

<CENTER> </CENTER>

I placed the CENTER opening tag before all the content because I wanted to center the main greeting. I placed the CENTER closing tag after the last comment because I wanted everything on the page, up to this point, to be centerd. You can center a single object or a group of objects by enclosing them in the CENTER tags.

<H#> </H#>

The header font tag lets you specify a font size from 1 to 5, where 1 is the largest. This is typically used for a page header or title at the top of the page because of the automatic bold and paragraph attributes it comes with. Once you place the H# closing tag, there is an automatic paragraph break with a space between lines. This makes this tag unsuitable for mid line font changes for emphasis. I used it here because then I wouldn't have to add the bold tags or paragraph tags that I would have wanted there anyway. In this case it was code efficiency because it saved me some steps.

This code, <H1>Size H1 Biggest</H1> <H3>Size H3 Middle</H3> <H5>Size H5 Smallest</H5>, creates the lines below. Notice the automatic bold and paragraph breaks.

Size H1 Biggest

Size H3 Middle

Size H5 Smallest

 

Text enclosed in these tags will be formatted as italic and/or bold text. These tags can be used by themselves or as part of a group of tags, as I did here, combining the H# tag with the I tag. Don't forget to close your format tags if it comes with a closing tag.

There is also an underline tag set,  .

This code creates the line below. Italics and Bold can also be used for emphasis together.

Italics and Bold can also be used for emphasis together.

 

Without these tags, all text will be treated as one large paragraph on your web page. Text will automatically word wrap to a new line in paragraph style, but you must use these tags to start new lines or paragraphs. The BR tag, line break, starts a new line immediately below the last one. The P tag, paragraph, starts a new paragraph with a space between them.

Code Page: What we had in mind. (check out the code page, then the results)

The first paragraph starts here. It's moving along nicely, don't you think?

The second paragraph is especially pleasing because it's very personal. I feel naked now.

The third paragraph should be used to:

salvage my dignity
pull myself together
get back to the topic
what did he say?

Result: Not what we intended. The paragraph below is the result.

The first paragraph starts here. It's moving along nicely, don't you think? The second paragraph is especially pleasing because it's very personal. I feel naked now. The third paragraph should be used to: salvage my dignity pull myself together get back to the topic what did he say?

Code Page: How it should be done.

The first paragraph starts here. It's moving along nicely, don't you think?

The second paragraph is especially pleasing because it's very personal. I feel naked now.

The third paragraph should be used to:

salvage my dignity
 
pull myself together
 
get back to the topic
 
what did he say?

Results: That's the ticket!

The first paragraph starts here. It's moving along nicely, don't you think?

The second paragraph is especially pleasing because it very personal. I feel naked now.

The third paragraph should be used to:

salvage my dignity
pull myself together
get back to the topic
what did he say?

<IMG SRC="xxxx.xxx">

Image Source = "path and/or filename.ext". This tells your browser to find the image named at the path specified and place it in your web page. If the image and the web page file are in the same directory, all you need is the "filename.ext", <IMG SRC="sunshine.jpg">. The image, sunshine.jpg will be placed on your web page.

If your image is in a different directory, but at the same web site, you need to specify a ralative path to the file. In our situation, the picture is in a subdirectory, so our image tag looks like this, <IMG SRC="pictures/craighome.jpg">. Of course that sends the browser to look for the craighome.jpg file in the pictures directory, and then places it on your web page.

The BORDER=# (pixels) option is nice because it adds the little border around the picture. It takes on the color of the text. I used it because I didn't like the way the picture looked with the white edges just ending. The border captures it and gives it presence. My mother would be so proud that I was able to color coordinate my pictures and text.

There are many IMG SRC options explained in the Tags Guide.

 

The FONT tag has a few font formatting options you can use. You can set the font FACE, SIZE, & COLOR by specifying these options in the opening FONT tag. The FONT tag is different than the H# tag because it does not automatically bold and does not include an automatic paragraph break. This makes it suitable for mid stream font changes, just in case that is your preference.

Font FACE refers to which font you want the computer to use. In this case I chose ARIAL,HELVETICA. Notice there is no space between the two, just a comma. Arial and Helvetica are on almost all computers and make a very nice sans-serif font. If you choose a special font that you have, it does no good if your viewer does not have the same font. If I was to use MS Comic Sans, one of my favorites for example, half the people wouldn't have it and then my page wouldn't look as I planned it and might even skew everything on the page. If the font you specify is not present on the viewing computer then it will revert to the default font. The default font is a serif font like Times Roman.

You can set the SIZE of the font by setting the SIZE=# option, where 1 is the smallest and 7 is the largest. The COLOR is also variable by using the COLOR="#xxxxxx" option, where the xxxxxx is replaced by a six digit color code. You can find the color codes in the Color Chart. Notice that the 6-digit color code is enclosed within quotation marks and preceded by a # (pound sign).

Sample Code:

SIZE1 SIZE4 SIZE7

Result:

SIZE1 SIZE4 SIZE7

I think you are ready for Links & Lists

by Craig Walker

HTML written in Notepad
Best Viewed @ 800 x 600
WebMaster: Craig Walker
cwalker1@cox.net