HTML – Image , Map , Frame , Link

HTML Images

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute specifies the URL (web address) of the image:

<img src=”url“>

AttributeValueDescription
aligntop
bottom
middle
left
right
Not supported in HTML5.
Specifies the alignment of an image according to surrounding elements
alttextSpecifies an alternate text for an image
borderpixelsNot supported in HTML5.
Specifies the width of the border around an image
crossoriginanonymous 
use-credentials
Allow images from third-party sites that allow cross-origin access to be used with canvas
heightpixelsSpecifies the height of an image
hspacepixelsNot supported in HTML5.
Specifies the whitespace on left and right side of an image
ismapismapSpecifies an image as a server-side image-map
longdescURLSpecifies a URL to a detailed description of an image
sizes Specifies image sizes for different page layouts
srcURLSpecifies the URL of an image
srcsetURLSpecifies the URL of the image to use in different situations
usemap#mapnameSpecifies an image as a client-side image-map
vspacepixelsNot supported in HTML5.
Specifies the whitespace on top and bottom of an image
widthpixelsSpecifies the width of an image

HTML <map> Tag

The <map> tag is used to define a client-side image-map. An image map is an image with clickable areas.

The required name attribute of the <map> element is associated with the <img>’s use map attribute and creates a relationship between the image and the map.

The <map> element contains a number of <area> elements, that define the clickable areas in the image map.

<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<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>
</body>
</html>

HTML <frame> Tag.

The <frame> tag is not supported in HTML5.

The <frame> tag defines one particular window (frame) within a <frameset>.

Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.

Optional Attributes

AttributeValueDescription
frameborder0
1
Not supported in HTML5.
Specifies whether or not to display a border around a frame
longdescURLNot supported in HTML5.
Specifies a page that contains a long description of the content of a frame
marginheightpixelsNot supported in HTML5.
Specifies the top and bottom margins of a frame
marginwidthpixelsNot supported in HTML5.
Specifies the left and right margins of a frame
nametextNot supported in HTML5.
Specifies the name of a frame
noresizenoresizeNot supported in HTML5.
Specifies that a frame is not resizable
scrollingyes
no
auto
Not supported in HTML5.
Specifies whether or not to display scrollbars in a frame
srcURLNot supported in HTML5.
Specifies the URL of the document to show in a frame
<!DOCTYPE html>
<html>
<frameset cols="25%,*,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>
</html>

HTML <link> target Attribute

Syntax

<link target=”_blank|_self|_parent|_top|framename”>

Attribute Values

ValueDescription
_blankLoad in a new window
_selfLoad in the same frame as it was clicked
_parentLoad in the parent frameset
_topLoad in the full body of the window
framenameLoad in a named frame
<head>
  <link rel="parent" href="wildcats.htm" target="_blank">
</head>

Leave a Comment