Anchor & Image Tags along with their attributes

Anchor & Image Tags along with their attributes

Anchor TAG

Anchor and Image Tag :

Anchor or A Tag :

HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink to other web page as well as files, location, or any URL.For example : in our Regular innovations Website we can find so many links to the other pages which will be useful for going from one web page to another webpage.

Sarting Tag : <a> Ending tag : </a>

Attributes :

href
- mailto:
- tel:
Target
download

Image or img Tag :

HTML Image tag is used to embed an image in an HTML page. Images are not technically inserted into a web page; images are linked to web pages.For example : In our Regular innovations Website we are using this tag for creating attractive look for the website.

Sarting Tag : <img> Ending tag : </img>

Attributes :

src
alt
title
height
width

1. href attribute : This is used to give the link of particualr web page . The values for this Attribute will be actual link of web page, mailto:to send mail to the provided mail address , tel: it is used to make call to particular mobile Number

CODE <html> <head> <title> A TAG </title> <style type="text/css"> </style> </head> <body > <a href="https://www.youtube.com/channel/UCurLHTvkk9-mZ2YjqsLHtKg"> Go to MSR WebTech Youtube channel </a><br/> <a href="mailto:msrwebtech@gmail.com"> Send a mail to Msr WebTech </a><br/> <a href="tel:9848******"> Make a call to Msr WebTech </a><br/> </body> </html>

OutPut (Click on above execute Button)

2. Target attribute : This is used to specify where your web page has to be opened . The values for this Attribute will be Blank,new,top,self,in frames we can fix the target by using frame name

CODE <html> <head> <title> A TAG </title> <style type="text/css"> </style> </head> <body > <a href="https://www.youtube.com/channel/UCurLHTvkk9-mZ2YjqsLHtKg"> Go to MSR WebTech Youtube channel on same page </a><br/> <a href="https://www.youtube.com/channel/UCurLHTvkk9-mZ2YjqsLHtKg" target="blank"> Go to MSR WebTech Youtube channel in new tab </a><br/> <a href="https://www.youtube.com/channel/UCurLHTvkk9-mZ2YjqsLHtKg" target="self"> Go to MSR WebTech Youtube channel (Self - Effect will be appear on only Frames) </a><br/> <a href="https://www.youtube.com/channel/UCurLHTvkk9-mZ2YjqsLHtKg" target="top"> Go to MSR WebTech Youtube channel ( top- Effect will be appear on only Frames) </a><br/> </body> </html>

OutPut (Click on above execute Button)

3.Download attribute : This is used to Download file when you click the link

CODE <html> <head> <title> A TAG </title> <style type="text/css"> </style> </head> <body > <a download="" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgShqznfbydYS5_ftfsZPA0TUM7WzAMle82eQ09y8TnZXsqy2_DCncZuhVe0yeoK9n2YLpIA9mrFL7a3wL9JBxJKyQZ59MyNvpZ-Ik57TtKvVqdryzxuJGt1JJiLVuwkq4PBcOfY-K_0A/s0/anchor_tag.jpg"> Download MSR WebTech Youtube channel Image </a><br/> </body> </html>

OutPut (Click on above execute Button)

Img or Image Tag :

1.Src : This is used to Display image on web page

CODE <html> <head> <title> Img TAG </title> <style type="text/css"> </style> </head> <body > <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgShqznfbydYS5_ftfsZPA0TUM7WzAMle82eQ09y8TnZXsqy2_DCncZuhVe0yeoK9n2YLpIA9mrFL7a3wL9JBxJKyQZ59MyNvpZ-Ik57TtKvVqdryzxuJGt1JJiLVuwkq4PBcOfY-K_0A/s0/anchor_tag.jpg"> </img><br/> </body> </html>

OutPut (Click on above execute Button)

2.Alt : This is used to Display Name of the image when website is failed to load image.

CODE <html> <head> <title> Img TAG </title> <style type="text/css"> </style> </head> <body > <img alt="Sorry Failed to load Msr WebTech Youtube channel Image" src="1.jpg"> </img><br/> </body> </html>

OutPut (Click on above execute Button)

3.Title : This is used to Display Name of the image when take the mouse Over to the image

CODE <html> <head> <title> Img TAG </title> <style type="text/css"> </style> </head> <body > <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgShqznfbydYS5_ftfsZPA0TUM7WzAMle82eQ09y8TnZXsqy2_DCncZuhVe0yeoK9n2YLpIA9mrFL7a3wL9JBxJKyQZ59MyNvpZ-Ik57TtKvVqdryzxuJGt1JJiLVuwkq4PBcOfY-K_0A/s0/anchor_tag.jpg" title="Msr WebTech Youtube channel Image"> </img><br/> </body> </html>

OutPut (Click on above execute Button)

4.Height & Width Attributes : These are used to set the Hight and width of the image interms of Pixels like 10,20....etc

CODE <html> <head> <title> Img TAG </title> <style type="text/css"> </style> </head> <body > <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgShqznfbydYS5_ftfsZPA0TUM7WzAMle82eQ09y8TnZXsqy2_DCncZuhVe0yeoK9n2YLpIA9mrFL7a3wL9JBxJKyQZ59MyNvpZ-Ik57TtKvVqdryzxuJGt1JJiLVuwkq4PBcOfY-K_0A/s0/anchor_tag.jpg"> This is Normal Msr WebTech Image </img><br/> <img height="50px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgShqznfbydYS5_ftfsZPA0TUM7WzAMle82eQ09y8TnZXsqy2_DCncZuhVe0yeoK9n2YLpIA9mrFL7a3wL9JBxJKyQZ59MyNvpZ-Ik57TtKvVqdryzxuJGt1JJiLVuwkq4PBcOfY-K_0A/s0/anchor_tag.jpg" width="100px"> This is Msr WebTech Image after setting height 50 and width 100 pixels </img><br/> </body> </html>

OutPut (Click on above execute Button)

Combination of Anchor tag ,Image and Marquee tag :

CODE <html> <head> <title> Combination of Anchor tag ,Image and Marquee tag </title> <style type="text/css"> </style> </head> <body > <marquee id="test" bgcolor="orange" onmouseover="document.all.test.stop()" onmouseout="document.all.test.start()" > <a download="" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgShqznfbydYS5_ftfsZPA0TUM7WzAMle82eQ09y8TnZXsqy2_DCncZuhVe0yeoK9n2YLpIA9mrFL7a3wL9JBxJKyQZ59MyNvpZ-Ik57TtKvVqdryzxuJGt1JJiLVuwkq4PBcOfY-K_0A/s0/anchor_tag.jpg"> <img height="100px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgShqznfbydYS5_ftfsZPA0TUM7WzAMle82eQ09y8TnZXsqy2_DCncZuhVe0yeoK9n2YLpIA9mrFL7a3wL9JBxJKyQZ59MyNvpZ-Ik57TtKvVqdryzxuJGt1JJiLVuwkq4PBcOfY-K_0A/s0/anchor_tag.jpg" title="Msr WebTech Image" width="150px"> </img> <a> </marquee> <br/> </body> </html>

OutPut (Click on above execute Button)

Comments