Beginners Guide to HTML Part 1

Written By: Kevin Jordan

- 27 Mar 2006 -
















Description: This tutorial is designed for beginners who are just starting on the path to learning web programming. We'll start by describing the parts that every HTML document has and then move all the way through tables and forms.

  1. Creating an HTML Page
  2. Paragraphs and Text
  3. Links and Images

Creating Links

So we have a page full of paragraphs, lists, and horizontal lines. But let's say we want to have more than one page, page2.html for instance. We need a way to get to page2.html from our index.html. To do that we use links. Links are created in a special tag known as an anchor, . An anchor is pretty much useless you give it a little extra information. Here's the standard way to create a link.

 href="page2.html">Click Here To Go To Page 2

The href is the http reference. What does that mean? Basically, it is where you want the link to take you. Anything that is within the < >'s of the tag will not be displayed on the page. However the "Click Here To Go To Page 2" will be. This is what the user is going to be able to click on to take them to the location specified during the whole href="..." part.

There are two ways to specify a location, full paths and relative paths. A full path is what we use when we want to go to a whole different web site like:

 href="">Click Here To Go To Google

If we want to go to a page that's on our own web site, relative paths are much easier.

 href="page2.html">Page 2

Instead of:

 href="https://scratchprojects.com/page2.html">Page 2

Not only is this a lot less to type, but it allows you to test the web site on you personal computer before uploading it to you web server.

Images Cost More Than 1000 Words

Ok, so you're probably wondering what I mean by switching up the old “Picture worth 1000 words” saying. While pictures can make your web site shiny and beautiful, they're usually what make your web site take 5 minutes to load. I can't stress this enough, use images responsibly. While it may seem really fast when your serving up images directly from your home computer, maybe even fast across your 15 mbit FIOS connection, it could still take forever on my granny's 56 kbps modem.

So maybe you're not developing a website for my grandma. Good, one good rule is to know your audience and what they will expect from your website. I've done a couple photography websites, and those high resolution images are bound to be large, but A. it's a photography website and B. I let the users view thumbnails before they have to wait for a full image to load.

Use a graphics tool to optimize your images for the web. If it's a couple colors pick .png or .gif. If it's a photo or has more than around 50 colors, you can probably get a better image size out of .jpg (or .jpeg, same thing). Believe it or not, all the images that are displayed on this page right now are less the 5 KB total.

Ok, ok, enough lecture. Here's how you put an image on your page.

 src="picturename.gif" />

Not too hard you have img (image) src (source) = and then specify where the image is located. We can also use absolute and relative paths for images, just like when we created our links.

Image Parameters

You can put a picture on your page without using the code above, but there are a couple other things you might want to include when calling an image.

 src="picturename.gif" height="100" width="100" alt="Title of the picture" />

Specifying the height and width of a picture is good for two reasons. First of all, your page will load faster since the browser will not have to retrieve that from the image file itself. Secondly, if the image doesn't show up or it takes a long time to load, a space will be held equal to the size specified. This allows your page to still be formatted correctly before the image is fully loaded.

Alt provides an alternative text whenever the image isn't loaded yet, when you put your mouse over the image, and also for people with disabilities. Blind people have special needs whenever it comes to browsing the internet, without the alt, they won't have any clue what your picture is. It's also a good idea to add alts because some search engines use this as part of their algorithm for assigning page rank.

 href="page2.html>" height="100" width="100" alt="Title of the picture" border="0" />

You can also use images for the clickable area when you create a link. Just include the img tag between the two anchor tags and you've got it. One thing you may notice is that browsers like to distinguish images that are links from other images by placing a different color border around them. If this looks ugly to you, get rid of it by adding border="0" within the img tag.

<< Previous