Adding HTML Images, Tables, and Hyperlinks

HTML Images - The <img> Tag, the Src, and the Alt Attribute

In HTML, images are defined with the <img> tag.  The <img> tag is empty, which means that it contains attributes only, and has no closing tag.  To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.

Example:

<img src="blabla.jpg" alt="error">

(Hello there! This picture was inserted using the <img> tag)

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.  The example given above has an alt attribute showing that if the image can’t be displayed, a text “error” is displayed.  The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection or an error in the src attribute).

HTML Images – How to Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image. 

Example:

<img src="blabla.jpg" alt="error" width="800" height="600">

            Changing the width and the height attributes can make the image bigger or smaller according to the size of the image.  By the way, the height and width is measured in pixels.  

HTML Hyperlinks

          The HTML <a> tag defines a hyperlink.  A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.  When you move the cursor over a link in a Web page, the arrow will turn into a little hand.  The most important attribute of the <a> element is the href attribute, which indicates the link's destination.  Between the start and the end tags is the text shown in the web site. . 

Example:

<a href=“http://www.google.com”>Google</a>

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red