How to create your own web site - Part 2

Brought to you by The Phoenix On-Line Foundation and Slippy...AKA...Ian


Well, I hope you've had a chance to grab some web space and make a start on your very own home page. I know some of you have, and enjoyed the results. For this part of our simple how to. I want to look at making a few refinements to your page and explain how to upload & add a picture. So lets get started.

A home page is a very personal and individual thing. We all have our own likes and dislikes when it comes to content and lay out. One of the things you may have noticed from the BASIC Angelfire editor, is the limited scope for laying out your page. So Its time to introduce you to some very simple and easy to use HTML commands. (usually called TAGS). These Tags are used to tell your page browser to display something in a certain way, or to do some specific thing. For example, to show some text in BOLD, underlined or in a particular color. Maybe it's to display a picture, play a WAV, or go to a different page. No matter what, to spice up your page, you might like to try out some of the basic text formatting tags. With few exceptions all 'html tags' have an opening tag and a closing tag. In order to identify a tag from your displayed text the tag is enclosed within "<>". The tag to display text in BOLD print is "B" so you would enter the tag as <B> at the start of the text you want in bold... but where does it stop and go back to normal text??.. to close the tag you use the same command but add the forward slash hence </B> would turn bold text OFF..

Look at the following example..

Hi My name is <B>IAN</B>

Here the word IAN would be displayed in BOLD while the other text remained as normal text. Here are a few other simple Tags for you to try..

<B> BOLD </B>
<U> Underlined </U>
<center>Center this across the page</center>

You may also have noticed that a carriage return does not show on your home page. HTML requires a Tag to create a line break or carriage return. There is also a separate tag to start a new paragraph. These tags are some of the few that do NOT need a closing tag.

<BR> Carriage Return / Line Break
<P> Start new paragraph
<HR> Draw a horizontal line across the page.

The last thing I want to share on text formatting, today, is on text size. HTML recognizes a fixed number of text/font sizes. the simplest way to address them is using the "h" tag. The font sizes are numbered from 1 to 5 with 1 being biggest

<h1> Biggest Font Size </h1>
<h2> ................. </h2>
<h5> Smallest Font Size </h5>

I'll cover more on using fonts in a later part. But Now its time to move to a more exciting element of your home page... Pictures!!!

Have ya ever been to a web site that hasn't got some form of picture, animation or sound??.. If ya have, did ya go back??.. nope!! didn't think so... One word describes a site like that.. BOOOORRING!!!! Lolol.

Pictures bring a page to life. A picture can say a thousand words and how much more so on a web page. There's a divide in opinion about showing a picture of yourself.. some feel an element of intrusion into personal privacy, some find a new sparkle and closeness by being able to identify and picture the person your chatting too. Personally I like to chat with a person rather than a computer screen, but I do draw the line about giving out personal telephone numbers and address, that's getting to close to the risky zone!!. So for those of ya that have a picture or two you want to add to that home page.. here goes.

Browsers will only recognize pictures saved in certain formats, The best of these is either "JPG" or "GIF". Its also worth remembering that bigger files take longer to load, risking your page visitor getting bored and moving on without waiting. Soo.. Try and keep the picture size small and in a JPG or GIF format. You will need to upload it from your computer to your personal web space, that can be done very simply once you have logged on at Angelfire. From the main screen, where your pages are displayed, scroll down and you will find a text entry box, with some buttons. One of those will be a "Browse" button. Use this to locate the file you want to upload. Click on that file and its path will be entered in the text area. Next select the UPLOAD Button.. That's IT!!!..

Once done, you will note a new directory on web space called images/ all uploaded pictures, wavs etc are placed in that area. Once there, it is available for you to add to your home page. To display that picture you use another of those Tags, we've talked about. For demonstration purposes lets say that your picture filename is "mypic.jpg".. that will be displayed in your page directory as "images/mypic.jpg".. exact match of filename, is important, as the browsers are case sensitive. To display "mypic" I would enter the following instruction:

<img src="/images/mypic.jpg">

If you make a mistake in the path name, or if the file can't be found, then you will find the page will display a small box with an "X" in it instead of the picture. To be certain of locating the pic, I have adopted the habit of entering the full path name, which if on my web page, would be...


You can enter this in the area where you are writing your text, and the picture should pop up in the text where you put it. You may find you need to use start a new paragraph before and after the picture to give a better display. Alternatively, use the facility within the Angelfire Basic editor and enter the path url where indicated.

There are other fancy things you can do to format the picture, but I think that's more than enough for now.. best ya get to your home page and try some of this out. If you run into problems I'll be happy to take a peek and help you out.. Just let me know.

Happy web making!!!


| Part 1 | Part 3 | Home |