Every day thousands of documents, images, movie clips, animation, streaming sounds, and more are added to sites around the world, and why not? Creating a web page is a fairly simple task in itself, its understanding the whole picture that can be tough sometimes. Sure there are tons of editors out there that can help you out, but you really don’t need them. First and foremost, read our tips section, to get an understanding of what to do, and what not to do. Create an image in your mind, or better yet on paper, what you want your site to look like. After you have done that, it’s time to start building your site. If you choose an editor to do the work for you, its highly recommended that you still understand the way HTML works. So read on!
HTML TAGS
Understanding HTML tags and the way they work is very important. First and foremost, most HTML tags come in pairs, meaning that if you have one, you need the other. Lets look at this example.
<TITLE>Your page title</TITLE>
This is the title tag. It determines what the title of your html document is going to be. Notice how it opens with <TITLE>, then closes with </TITLE>. An example of a tag that doesn’t need a closing bracket, is the <BR> tag, or break tag. It simply defines a break in the text, moving the remaining text to the next line, so it doesn’t need a closing bracket.
Many tags have attributes, or values that will modify that particular tags behavior. For example the <P> tag, or the paragraph tag, could be written as<P ALIGN=CENTER>, to center the paragraph.
Other then getting too deep into tags at this moment, lets start by what the general layout of the page should look like, if you were looking at the HTML code.
<HTML>
<HEAD>
<TITLE>Your page title here</TITLE>
</HEAD>
<BODY>
Your content here.
</BODY>
</HTML>
Now that we got our basic page layout done, you can see that we don’t have much so far.There are a few other tags that go in the <HEAD> section, that can be important to search engines, but we aren’t going to go into them in detail in this section. Lets give our page a better title.Using your editor ( You are following along aren’t you? ) change your title tag to something a bit more realistic. I’ll change mine to read <TITLE>Everything you wanted to know about the PBX.</TITLE>
Ok, now lets dive into the <BODY> of the page, were the good stuff can go. Remember just about everything that you will see happen on a web page goes inside the <BODY></BODY> tags. I’m saying just about because there are exceptions, but for the sake of simplicity I am not going to get into details in this section. Ok take a deep breath now and move on.
Lets add a bit of background color to our page. There are many values that can be added to the <BODY> tag, and it helps to control the look and color of the background to your page. To add a color, you can use the BGCOLOR value, an specify the color using either hexadecimal values, or a select few English words like white, black, blue, etc. Using the hexadecimal value will allow you much greater control and a wider selection of colors, so it is recommended you use those instead.
Got it? Ok. I’m going to use 0000FF, or regular blue for the background color. The format will look something like this: <BODY BGCOLOR=”#0000FF”>, so lets add that in place of the <BODY> tag. You can also use the <BODY BACKGROUND=”yourimage.jpg”> to use an image for your background, but we will stick with colors for now. Lets look at what we have so far…
<HTML>
<HEAD>
<TITLE>Everything you wanted to know about the PBX.</TITLE>
</HEAD>
<BODY BGCOLOR=”#0000FF”>
Your content here.
</BODY>
</HTML>
Ok now that we have some color on our page ( although it may not be great looking ) lets add a bit more. Change the text between the <BODY></BODY> tags to read anything you want. I will change mine to read “This page has information about the PBX”.
Now, lets add an image to this page. Images are called using the <IMG> tag. A simple image tag looks something like this:
<IMG SRC=”thepathtoyourimagehere”>
The text in between your quotes needs to specify the path to your image that you wish to use. For example, if you have a folder in the root of your directory called images, and your image name is ‘logo1.jpg’, the path would look something like this:
<IMG SRC=”your-domain.com/image-name.jpg”>
So now, we have a document that looks something like this. Looks kind of messy huh? Well lets clean it up a bit, using 2 different tags. The <BR> or break tag, and the <CENTER></CENTER> tags. Place the image statement between your two center tags, and add two <BR> tags after between your text that you wrote out and the image tag. Looks a little bit better. One variable of the IMG tag is that you can add what’s called ALT text to your image. For example:
<IMG SRC=”yourimagehere” ALT=”This is your image!”> This will make it so that when you move your mouse over the image and hold it there, whatever text you typed it will show up.
Well now that I’ve used an image with a white background on a page with a blue background, I’m going to change the background of the page to match the image, so white. I’ll replace #000FF with #FFFFFF, which is the hex code for white. I’m also going to trade placed with the text and the image tag. So far my source looks like this:
<HTML>
<HEAD>
<TITLE>Everything you wanted to know about the PBX.</TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF”>
<CENTER><IMG SRC=”http://www.icehousedesigns.com/images/logo1.jpg” ALT=”This is your image!”>
</CENTER>
<BR>
<BR>
This page has information about the PBX.
</BODY>
</HTML>
Ok now that’s a little better. Lets add a link that takes us to the main page. Generally speaking, a link is an image or a piece of text that when clicked on, will take you to another document. The format is something like this:
<A HREF=”pathtodocumenthere”>Click here!</A>
That above would look something like this:
Of course that link doesn’t work because I made it that way. So lets place a real link on the page, something like this:
Click <A HREF=”http://www.icehousedesigns.com”>here</A> to go home!
Whatever text is between the > and </A> will be the text that is linked.
Note: I’ve added a couple of <BR> tags also, feel free to experiment with them to get your spacing the way you want it.
In the previous sections, we learned the basic structure of an HTML document, how to create links using text, how to center content using the <CENTER></CENTER> tags, how to add breaks using the <BR> tags, and how to add images and ALT text to images. If your still a little fuzzy on the whole thing, or if you think by adding something it will make it more clear, please contact me and I will do my best to make it easier.