Post
Ask Question

HTML For Beginners: Part 7

Introduction

 
Before reading this article please visit the following links:
HTML Links and Images
  • Links are found in nearly all web pages. Links allow the user to click their way from page to page.
  • Images are of various types.
For example, JPEG images, GIF images, PNG images and so on.

HTML Link: Hyperlink
 
HTML Link
  • HTML links are hyperlinks.
  • A hyperlink is a text or an image you can click on and jump to another document.
HTML Links: syntax

In HTML, links are defined with <a> tag as in the following:
  1. <a herf= “url” >Link text </a>  
Example 
  1. <a herf= www.c-sharpcorner.com> c#corner </a>   
  • The href attribute specifies the destination address (http://www.c-sharpcorner.com).
  • The link text is the visible part (c#corner).
  • Clicking on the link text will send you to the specified address.
Local Links

The example above uses an absolute URL (a full web address). A local link (link to the same web site) is specified with a relative URL (without http://www....).

Example
  1. <a href="htmlimages.gif">HTML Images</a> 
HTML Links: Colors and Icons

When you move the mouse cursor over a link, two things will normally happen:
  • The mouse arrow will turn into a little hand.
  • The color of the link element will change.
By default, links will appear like this in all browsers:
  • An unvisited link is underlined and Blue.
  • A visited link is underlined and Purple.
  • An active link is underlined and Red.
HTML Links: The target Attribute

The target attribute specifies where to open the linked document. This example will open the linked document in a new browser window or in a new tab.

Example
  1. <a href="http://www.c-sharpcorner.com/" target="_blank">Visit c#corner</a>   
HTML Images
 
HTML Images

HTML Images Syntax
  • In HTML, images are defined with the <img> tag.
  • If the <img> tag is empty, it contains attributes only and does not have a closing tag.
  • The src attribute defines the URL (web address) of the image as in the following:
    1. <img src="url" alt="some_text"> 
The alt Attribute
  • The alt attribute specifies an alternate text for the image if it cannot be displayed.
  • The value of the alt attribute should describe the image in words.
Example
  1. <img src="html5.gif" alt="The official HTML5 Icon">   
  •  The alt attribute is required. A web page will not validate correctly without it.
HTML Screen Readers
  • Screen readers are software programs that can read what is displayed on a screen.
  • Used on the web, screen readers can "reproduce" HTML as text-to-speech, sound icons, or braille output.
  • Screen readers are used by people who are blind, visually impaired or learning disabled.
Image Size: Width and Height
  • You can use the style attribute to specify the width and height of an image.
  • The values are specified in pixels (use px after the value).
Example
  1. <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">   
  • Alternatively, you can use width and height attributes.
  • The values are specified in pixels (without px after the value).
Example
  1. <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">   
Width and Height or Style
  • Both the width, the height, and the style attributes are valid in the latest HTML5 standard.
  • We suggest you use the style attribute. It prevents style sheets from changing the default size of images.
Example
  1. <html>    
  2.    <head>    
  3.       <style>    
  4.          img {     
  5.            width:100;     
  6.          }    
  7.       </style>    
  8.    </head>    
  9.    <body>    
  10.       <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">    
  11.       <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">    
  12.    </body>    
  13. </html>   
Images in Another Folder
  •  If not specified, the browser expects to find the image in the same folder as the web page.
  •  However, it is common on the web, to store images in a sub-folder and refer to the folder in the image name.
Example
  1. <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">   
  • If a browser cannot find an image, it will display a broken link icon.
Example
  1. <img src="htmltags.gif" alt="HTML5 Icon" style="width:128px;height:128px">  
Images on Another Server
  •  Some web sites store their images on image servers.
  •  Actually, you can access images from any web address in the world.
Example
  1. <img src="http://www.google.com/images/google_gogreen.jpg">   
Animated Images
  • The GIF standard allows animated images.
Example
  1. <img src="programming.gif" alt="Computer Man" style="width:48px;height:48px">   
Note that the syntax of inserting animated images is no different from non-animated images.

Using an Image as a Link

It is common to use images as links.

Example
  1. <a href="default.asp">    
  2. <img src="smiley.gif" alt="HTML" style="width:42px;height:42px;border:0>    
  3. </a>   
Image Maps

For an image, you can create an image map, with clickable areas.

Example
  1. <img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px">    
  2. <map name="planetmap">    
  3. <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">    
  4. <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">    
  5. <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">    
  6. </map>   
Image Floating

You can let an image float to the left or right of a paragraph.

Example
  1. <p>    
  2. <img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px">    
  3. A paragraph with an image. The image floats to the left of the text.    
  4. </p>   

Chapter Summary

  • Use <a herf= “url” >Link text </a> tag to link to a website
  • Use the HTML <img> element to define images
  • Use the HTML src attribute to define the image file name
  • Use the HTML alt attribute to define an alternative text
  • Use the HTML width and height attributes to define the image size
  • Use the CSS width and height properties to define the image size (alternatively)
  • Use the CSS float property to let the image float
  • Use the HTML usemap attribute to point to an image map
  • Use the HTML <map> element to define an image map
  • Use the HTML <area> element to define image map areas


Similar Articles