3.

HTML –links,images
HTML Links
• A link or hyperlink is a connection from one web resource to another.
Links allow users to move seamlessly from one page to another, on
any server anywhere in the world.
• A link has two ends, called anchors. The link starts at the source
anchor and points to the destination anchor, which may be any web
resource, for example, an image, an audio or video clip, a PDF file, an
HTML document or an element within the document itself, and so on.
• By default, links will appear as follow in most of the browsers:
• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.
• HTML Link Syntax
• <a href="url">Link text</a>
• Example: <a href="https://www.google.com/">Google Search</a>
• <a href="images/kites.jpg">
• <img src="kites-thumb.jpg" alt="kites"> </a>
• The href attribute specifies the target of the link. Its value can be an absolute or
relative URL.
• An absolute URL is the URL that includes every part of the URL format, such as
protocol, host name, and path of the document, e.g., https://www.google.com/,
https://www.example.com/form.php, etc.
• While, relative URLs are page-relative paths, e.g., contact.html,
images/smiley.png, and so on. A relative URL never includes the http:// or https://
prefix.
Setting the Targets for Links
• The target attribute tells the browser where to open the linked document. There
are four defined targets, and each target name starts with an underscore(_)
character:
• _blank — Opens the linked document in a new window or tab.
• _parent — Opens the linked document in the parent window.
• _self — Opens the linked document in the same window or tab as the source
document. This is the default, hence it is not necessary to explicitly specify this
value.
• _top — Opens the linked document in the full browser window.
• Example
• <a href="/about-us.php" target="_top">About Us</a>
• <a href="https://www.google.com/" target="_blank">Google</a>
• <a href="images/sky.jpg" target="_parent">
• <img src="sky-thumb.jpg" alt="Cloudy Sky">
• </a>
• You can even jump to a section of another web page by specifying the
URL of that page along with the anchor (i.e. #elementId) in the href
attribute, for example,
• <a href="mypage.html#topicA">Go to TopicA</a>.
• Creating Download Links
• <a href="downloads/test.zip">Download Zip file</a>
• <a href="downloads/masters.pdf">Download PDF file</a>
• <a href="downloads/sample.jpg">Download Image file</a>
HTML Images
• Images enhance visual appearance of the web pages by making them more interesting
and colorful.

• The <img> tag is used to insert images in the HTML documents. It is an empty element
and contains attributes only. The syntax of the <img> tag can be given with
• <img src="url" alt="some_text">
• Example
• <img src="kites.jpg" alt="Flying Kites">
• <img src="sky.jpg" alt="Cloudy Sky">
• <img src="balloons.jpg" alt="Balloons">
• The required alt attribute provides alternative text description for an image if a user for
some reason cannot able to view it because of slow connection, image is not available at
the specified URL, or if the user uses a screen reader or non-graphical browser.
Setting the Width and Height of an Image
• <img src="kites.jpg" alt="Flying Kites" width="300" height="300">
• <img src="kites.jpg" alt="Flying Kites" style="width: 300px; height:
300px;">
• It's a good practice to specify both the width and height attributes for
an image, so that browser can allocate that much of space for the
image before it is downloaded.
• Otherwise, image loading may cause distortion or flicker in your
website layout.
Using the HTML5 Picture Element
• Sometimes, scaling an image up or down to fit different devices (or screen
sizes) doesn't work as expected.
• Also, reducing the image dimension using the width and height attribute or
property doesn't reduce the original file size.
• To address these problems HTML5 has introduced the <picture> tag that
allows you to define multiple versions of an image to target different types
of devices.
• The <picture> element contains zero or more <source> elements, each
referring to different image source, and one <img> element at the end.
• Also each <source> element has the media attribute which specifies a
media condition (similar to the media query) that is used by the browser to
determine when a particular source should be used.
Example
• <picture>
• <source media="(min-width: 1000px)" srcset="logo-large.png">
• <source media="(max-width: 500px)" srcset="logo-small.png">
• <img src="logo-default.png" alt="My logo">
• </picture>
• The browser will evaluate each child <source> element and choose
the best match among them; if no matches are found, the URL of the
<img> element's src attribute is used.
• Also, the <img> tag must be specified as the last child of the
<picture> element.
Working with Image Maps
• An image map allows you to define hotspots on an image that acts just like a hyperlink.
• The basic idea behind creating image map is to provide an easy way of linking various
parts of an image without dividing it into separate image files. For example, a map of the
world may have each country hyperlinked to further information about that country.
• Example
• <img src="objects.png" usemap="#objects" alt="Objects">
• <map name="objects">
• <area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">
• <area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">
• <area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">
• </map>
• The image map should not be used for website navigation. They are not search engine
friendly. A valid use of an image map is with a geographical map.