Click Here!
  Web Development, Web design, HTML code, HTML tutorials, Javascripts, DHTML, ASP, Perl, CGI scripts  
YOU ARE HERE: Home : Articles : Introduction to HTML. Images and Links
Web Hosting  •  Website Tools  •  HTML Tutorials  •  PHP Resources
Introduction to HTML (Images and Links)
By Virtual Mechanics
Last week I introduced basic HTML concepts for those of you with little or no HTML experience. This week I shall continue with several more advanced concepts. As with last week's newsletter, my intent is not to teach HTML. There are many excellent books on the topic. Two tags in particular however, should be understood. These
are the Image and the Anchor tags. As with last week's article, if you already have a good grasp of HTML please feel free to skip to the next topic.

Basic HTML is comprised of series of Tags that instruct the Browser on how to display the web page. If you recall, I mentioned that an HTML page is separated into a <HEAD> component with header information such as the title, and a <BODY> component that contains the actual text and images to be displayed. Numerous tags
are available for basic Page Layout and Header information. These are always enclosed between the "<" less than and ">" greater than brackets.

I have made reference to numerous tags in past articles. There are two tags in particular however, that need to be discussed. These are the Anchor and the Image tags. The Image tag is used to place a picture on your web page. The Anchor tag is used to create an HTML link to another web page or file.

The Image tag can display several different image formats in most Browsers. The most common are GIF, JPEG, and BMP. What are the differences between these formats and which is better to use?

GIF images are highly compressed and will accurately maintain the detail in a picture. The GIF format also supports a simple frame animation capability that is very common on Web Pages. The primary disadvantage with the GIF format is its limitation to 256 colors. This makes it unsuitable when high quality multicolored images are displayed.

The JPEG format provides extensive compression capabilities at high color resolution. It also provides the ability to choose between quality and compression when the file is saved. JPEG is consequently the preferred format when large, high quality non-animated images are to be displayed. The primary disadvantage with the JPEG format apart from its lack of animation support, is that its compression method may actually loose information. This can
sometimes be seen in a JPEG picture as a halo near distinct color changes within the picture.

BMP does not compress a picture at all and should consequently be avoided if possible. In fact, a BMP picture can easily be 20 to 50 times larger than the equivalent JPEG picture causing significant download times. The primary advantage with a BMP is that it does not modify a picture or loose data. It is consequently sometimes used
if a picture must be transmitted in its pure format without modification.

Most Browsers also support several other image file formats. Care should be taken however, that the file format is supported by the majority of Browsers that are used to visit your site.

The Image Tag takes the form <img src="fileurl" Width=pixels Height=pixels Alt="description" Border=Size Align=location Vspace=pixels Hspace=pixels>. As with most tags, it is not always necessary to enter all the components of the tag since the Browser will provide a default value for those not entered.

Src=fileurl This attribute identifies the location of the image file. If it is located in the same directory as the HTML file then only the file name and extension needs to be included. It is also possible to include the full URL path to an image on another web site. Although this may seem to provide some advantages, care should be taken before linking to someone else's image. First of all they may not like you using their bandwidth for your Web Site. Second, they may move or rename the image causing your Web Page to display an empty box. Finally, even though you may have the full co-operation and support of the other Web Site, these types of external
links can slow down the download speed of your web page. This is especially true if the other Web Site is on another server that goes down a lot.

Width=pixels,Height=pixels These tags tell the Browser what size to display the image (usually in pixels). If they are excluded, the Browser will display the image at its actual resolution. It is worth including these attributes even if you are not scaling the image larger or smaller. This is because the Browser will actually be able to display the picture faster if it knows the resolution before it loads the picture.

Border=Size Sets the size (in pixels) of a border to be placed around an image when it is used as an anchor (see below). Specifying a size of 0 will disable the border. If omitted, the Browser will place a 1 pixel border around the image.

Align = location, Vspace = size, Hspace = size. These tags work best when the Web Page is being designed to work with older Browsers. The Align attribute can be set to "LEFT" or "RIGHT" and is used to position the image against the Left or Right edge of the Browser window. Non CSS Text will then flow around the image. The space
between the image and the text can be set with the Hspace and Vspace attributes in pixels. As discussed in past newsletters, the newer Browsers can now position text and Images under full user control anywhere on the web page.

The other tag that should be understood is the Anchor tag. This is used to create a link to another page or file. I have discussed the Anchor tag several times in past issues so I shall be brief here.

The format for the anchor tag is <a href="fileurl">...</a> The href attribute identifies the address of the file. As with the image "src" attribute, this can just be a local file name in the same directory as the HTML file or it can be a full URL link to a page somewhere else on the Internet. The file is usually a HTML Web Page that ends with the file extension ".htm" or ".html". It does not have to be an HTML page however. If the file extension is recognized by your computer it will start the program that is assigned to handle it. A common example is a "zip" file that will be
Opened or Stored to your local computer by the PKZIP or WinZip programs. Another example could be an image file that will often be displayed by your Browser or paint program.

The anchor tag is delimited by the </a> end anchor tag. Text between the first part of the tag and the </a> will be highlighted so that the user can select it to activate the link. Instead of text, you can also use a picture to activate the link by placing the Image tag between the two parts of the anchor tag.

<a <img
here </a>

A combined text and picture link

Next week, more advanced HTML topics.

Source: "IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on creating, maintaining and promoting their web sites.

To subscribe send an email to or visit for subscription information and a list of past articles.

More Articles


  " TARGET="_blank">...





More News  
[an error occurred while processing this directive]

Join our newsletter!
Join our eNewsletter
for software updates,
freebies and more!


Registered Worldwide
...more statistics

Click Here!


  Articles are submitted to EDN and licensed from various content sites.
  To report abuse, copyright issues, article removals, please contact [violations (at@)]

  Copyright © Evrsoft Developer Network. Privacy policy - Link to Us

Contact Evrsoft