Manav Goyal

Hyperlinks - H T M L

  • HyperLinks
    • <a href = "URL"> => Unvisited/Visited/Active link
      • <a href = "mailto:emailId">
      • <a href = "tel:phoneNo">
      • <a href = "#idValue"> => Linking one part of website to another
    • <a href = "URL" target = "_self/_blank/_parent/_top">
    • <a href = "URL" title = "value"> => Tooltip when mouse hovers over link
    • <a href = "URL" alt = "value"> => Alternate text shown when image is not leaded
    • <a href = "URL" download> => Downloads file instead of navigating
      • <a href = "URL" download = "value"> => New name of file after its downloaded
  • Images
    • Basic
      • Low quality images should be shown in low resolution screen to load images faster
      • Art direction problem => Showing cropped images in small screen size devices
      • Device pixel ratio (DPR) = Physical pixel/Logical pixels
    • <img src = "url/imgPath"> => Image with Absolute and Relative path
      • <img src = "url" alt = "val"> => Alternate text to be displayed if image is not loaded
      • <img src = "url" height = "val" width = "val"> => In pixels by default
      • <img src = "url" srcset = "url1 1x, url2 2x"> => Set multiple images based on DPR
      • <img src = "url" srcset = "url1 400w, url2 600w" sizes="sizes="(max-width: 400px) 400px, (max-width: 600px) 600px, 800px> => Set multiple images based on screen size
    • <map name = "val"> => To select different part of image
    • <area shape = "rect/circle/poly/default"> => Make different shapes to select
      • <area coords = "val">
    • <picture> => To use different images based on screen size/format/bandwidth
    • <source media = "(min-width: 67px)">
  • Video
    • <video width/height = "val">
    • <video src = "val">
    • <video controls> => Adds control buttons on video
    • <video autoplay>
    • <video loop>
    • <video muted>
    • <video type = "val">
  • Audio
    • <audio controls>
      • .mid/.midi/.rm/.ram/.wma/.aac/.wav/.ogg/.mp3/.mp4
      • <audio preload = "metadata">
    • <source src = "val">
      • <source type = "audio">
  • IFrame
    • <iframe src = "url"> => Embed another document within the current HTML document
    • <iframe title = "val">
    • <iframe height/width = "val">
    • <iframe allow = "autoplay">
    • <iframe name = "val"> => Target attribute of link must refer to name attribute of the iframe
Share: