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:
- <a herf= “url” >Link text </a>
Example
- <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
- <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 as 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
- <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:
- <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
- <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
- <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
- <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
- <html>
- <head>
- <style>
- img {
- width:100;
- }
- </style>
- </head>
- <body>
- <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
- <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
- </body>
- </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
- <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
- <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
- <img src="http://www.google.com/images/google_gogreen.jpg">
Animated Images
- The GIF standard allows animated images.
Example
- <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
- <a href="default.asp">
- <img src="smiley.gif" alt="HTML" style="width:42px;height:42px;border:0>
- </a>
Image Maps
For an image, you can create an image map, with clickable areas.
Example
- <img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px">
- <map name="planetmap">
- <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
- <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
- <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
- </map>
Image Floating
You can let an image float to the left or right of a paragraph.
Example
- <p>
- <img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px">
- A paragraph with an image. The image floats to the left of the text.
- </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