At the end of this lesson-
- 1. You will be able to add image on the web page.
- 2. You will be able to create hyperlink on the web page.
- 3. You will be able to create hyperlink with image on the web page.
- 4. You will be able to add audio and video on the web page.
Adding Image on the web page: For inserting pictures into the web page, we can use the <img> tag. The <img> tag is an empty tag which mean it has no ending tag (i.e. no </img>) associated with it. The syntax of using <img> tag is:
<img src = “path or URL” alt = “alternate_text”>
Attributes used in <img> tag:
|src||image_path/name.format||Specifies the url of image|
|width||any number(pixel)||Specifies the width of an image|
|height||any number(pixel)||Specifies the height of an image|
|alt||alternative text||Specifies an alternate text for an image|
|border||pixels||Specifies the width of the border around an image|
|Specifies the alignment of an image according to surrounding elements|
The attributes: align, border, hspace, and vspace are not supported in HTML5.
SRC attribute of IMG Tag:
–This attribute helps in specifying the image’s source, which means this, instruct your web browser from which location it must fetch the particular picture (in other words specify the path). SRC attribute takes path or URL as its value in quotes.
–The source’s image may exist locally on your computer (need a path to specify) or may reside somewhere in the web server (need URL to specify).
–For images in your local PC, wither you have to set the entire path or bring that particular image’s copy in a particular folder in which your .html file (in which you want to add image) is also residing.
<img src=”http://xyz.com/wallpaper.jpg” alt=”Wallpaper”>
The alt attribute of IMG Tag:
–This attribute of Image Tag or <img> tag allows you in defining an alternative text in case your browser becomes unsuccessful in loading the image.
–There may be situations when your browser might not be able to display that particular image either because of slow connection or server error or any other reason.
–Moreover, search engines take up those alternate texts given to images and help to find articles or content related to that text.
<img src= “logo.jpg” alt =“SAGC”>
The height and width attribute:
–In case you need a specific size of the image for fitting it into your web page, you can use the height and width attribute of the IMG tag.
–Here’s an example:
<img src=”guitar.jpg” height=”40px” width=”80px”>
<img src= “guitar.jpg” title= “Forest” height=”25%” width=”30%”>
You can use both px (pixels) and % (percent) as a relative unit for specifying size (here height and width) of the image.
Example-1: HTML code for displaying an image(logo.jpg) in 200×300 dimension which is in “photo” folder of “E” drive.
<img src="E:\photo\logo.jpg" width="200" height="300">
Hyperlink: You might know that hyperlink which is a powerful means of browsing from web pages and websites. It is developed for sending the readers or those who will perform surfing from one web page to another without opening a new tab or window. This is in general term said to as link and is given a reference to jump to another page or document or from one part of the same page to another using a hypertext. The Anchor tag in HTML can be defined as a means to create a hyperlink.
Anchor can link your current page on which the text is being converted to hypertext via <a> (anchor tag) to another page. This anchoring from one page to another is made possible by the attribute “href”, which can be abbreviated as (hypertext reference).
<a href= “url” > link text/image </a>
href attribute specifies the destination address of the link. The link text or image is the visible part (Visit our HTML tutorial). Clicking on the link text or image will send you to the specified address.
Types of hyperlink: Three types of hyperlink. They are-
- Global: Linking with different websites.
- Local: Linking with different web pages of the same website.
- Internal: Linking with different sections of the same web page.
Attributes used in anchor(<a>) tag:
|href||url||Specifies the URL of the page the link goes to|
(specifies where to open the linked document.)
|_blank||Opens the linked document in a new window or tab|
|_self||Opens the linked document in the same window/tab as it was clicked (this is default)|
|_parent||Opens the linked document in the parent frame|
|_top||Opens the linked document in the full body of the window|
<a href="http://www.edupointbd.com"> EduPointBD </a>
Anchor tags can also be used to create hyperlink through images also. Here’s a code snippet to show how to perform that.
<a href= “http://www.edupointbd.com” > <img src="logo.png"> </a>
HTML code for adding audio:
<source src="audio-file-name.mp3" type="audio/mpeg">
HTML code for adding video:
<video width="320" height="240" controls>
<source src="video-file-name.mp4" type="video/mp4">
Knowledge Based Questions:
- a. What is hyperlink?
Comprehension Based Questions:
- b. What is hyperlink?-explain.
- b. Today hyperlink is an important element on web page-explain.
- b. To create hyperlink href attribute is mandatory-explain.
- b. Explain <img>.
- b. ‘src’ attribute is mandatory for <img> tag-explain.
Multiple Choice Questions: