Saturday, 16 June 2018

HTML Link Tag and Image Tag with attributes.

Link Tag and its attributes:

<a> Defines a hyperlink. Supports global and  event attributes.
Attributes:
  1. charset char_encoding  Not supported in HTML5. It specifies the character-set of a linked document
  2. coords coordinates Not supported in HTML5. It specifies the coordinates of a link
  3. download filename It specifies that the target will be downloaded when a user clicks on the hyperlink
  4. href URL Specifies the URL of the page the link goes to
  5. hreflang language_code Specifies the language of the linked document
  6. media media_query It specifies what media/device the linked document is optimized for
  7. name section_name Not supported in HTML5. Use the global id attribute instead. Specifies the name of an anchor
  8. ping list_of_URLs It specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking.
  9. rel alternate author bookmark external help license next nofollow noreferrer noopener prev search tag Specifies the relationship between the current document and the linked document
  10. rev text Not supported in HTML5. Specifies the relationship between the linked document and the current document
  11. shape default rect circle poly Not supported in HTML5.Specifies the shape of a link
  12. target _blank _parent _self _top framename Specifies where to open the linked document
  13. type media_type Specifies the media type of the linked document
<link> Defines the relationship between a document and an external resource(most used to link to style sheets)
Attributes:
  1. charset char_encoding  Not supported in HTML5.Specifies the character encoding of the linked document
  2. crossorigin anonymous use-credentials It specifies how the element handles cross-origin requests
  3. href URL Specifies the location of the linked document
  4. hreflang language_code Specifies the language of the text in the linked document
  5. media media_query Specifies on what device the linked document will be displayed
  6. rel alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet. It specifies the relationship between the current document and the linked document.
  7. rev reversed relationship Not supported in HTML5. Specifies the relationship between the linked document and the current document
  8. sizes HeightxWidth any Specifies the size of the linked resource. Only for rel="icon"
  9. target _blank   _self   _top  _parent frame  _name Not supported in HTML5. Specifies where the linked document is to be loaded
  10. type media_type It specifies the media type of the linked document.
<nav> Defines navigation links. Supports global and  event attributes.

Image Tag and its attributes:

<img> Defines an image. Supports global and  event attributes.
Attributes:
  1. align top bottom middle left right Not supported in HTML5. Specifies the alignment of an image according to surrounding elements
  2. alt text Specifies an alternate text for an image
  3. border pixels Not supported in HTML5. Specifies the width of the border around an image
  4. crossorigin anonymous  use-credentials Allow images from third-party sites that allow cross-origin access to be used with canvas
  5. height pixels Specifies the height of an image
  6. hspace pixels Not supported in HTML5. Specifies the whitespace on left and right side of an image
  7. ismap ismap Specifies an image as a server-side image-map
  8. longdesc URL Specifies a URL to a detailed description of an image
  9. sizes Specifies image sizes for different page layouts
  10. src URL Specifies the URL of an image
  11. srcset URL Specifies the URL of the image to use in different situations
  12. usemap #mapname Specifies an image as a client-side image-map
  13. vspace pixels Not supported in HTML5. Specifies the whitespace on top and bottom of an image
  14. width pixels Specifies the width of an image
<map> Defines a client-side image-map.  Supports global and  event attributes.
Attributes:
  1. name mapname Required. Specifies the name of an image-map
<area> Defines an area inside an image-map. Supports global and  event attributes.
Attributes:
  1. alt text Specifies an alternate text for the area. Required if the href attribute is present
  2. coords coordinates Specifies the coordinates of the area
  3. download filename Specifies that the target will be downloaded when a user clicks on the hyperlink
  4. href URL Specifies the hyperlink target for the area
  5. hreflang language_code Specifies the language of the target URL
  6. media media query Specifies what media/device the target URL is optimized for
  7. nohref value Not supported in HTML5.Specifies that an area has no associated link
  8. rel alternate author bookmark help license next nofollow noreferrer prefetch prev search tag Specifies the relationship between the current document and the target URL
  9. shape default rect circle poly Specifies the shape of the area
  10. target _blank _parent _self _top framename Specifies where to open the target URL
  11. type media_type Specifies the media type of the target URL
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript).Supports global and  event attributes.
Attributes:
  1. height pixels Specifies the height of the canvas
  2. width pixels Specifies the width of the canvas
<figcaption> Defines a caption for a <figure> element. Supports global and  event attributes.
<figure> Specifies self-contained content. Supports global and  event attributes.
<picture> Defines a container for multiple image resources. Supports global and  event attributes.
<svg> Defines a container for SVG graphics



<!DOCTYPE html> 
<html>
<head>
<p id="sample"></p>
<title> Image Tag and Link Tag </title>
</head>
<body bgcolor = "yellow">
<h1 align= "center">Image tag demo</h1>
<img src="logo.jpeg" alt="My logo" height="400px" width="600px"></img>
<h1 align= "center">Link tag demo</h1>
<a href="https://aryanschooltech.blogspot.com/" target="_blank">Visit to my website</a>
</body>
</html>

<!-- These are Basic HTML5 Link and Image Tag-->



No comments:

Post a Comment