HTML HYPERLINKS | Readstall

HTML HYPERLINKS

03-02-19 Gudditi Naganjaneyulu 0 comment

Hyperlink

Its simple link which refers data to user can directly access the data while clicking or tapping. Hyperlink points to a whole document or a specific elements in a document. The software system used to create hypertext called hypertext system. A document containing the hyperlink is known as the source document

FIG : HYPERLINK

 

Eg:  for example, Wikipedia  or Google contains lot of online books, many of words and keywords are hyperlinked to definitions  of those terms. Often easy accessibility to access the data  and content

Fig: hyperlinks

  • HTML links are defined with the <a> tag:
  • The link destination is specified in the href attribute
  • Attributes are used to provide additional information about HTML

Simple example: here, I’m taking example of redirecting to google page with hyperlink

Eg

  1.      <html>
  2.      <title>test</title>
  3.      <body>
  4.      <a  href=”http://www.google.com” target=”_self” >
  5.       Click here to open google
  6.      </a >
  7.      </body>
  8.      </html>

Output

Click here to open google

 Explanation :

In the above example :

  • Hyperlink is declare in an anchor tag <a> ..attribute href of anchor tag with (value=URL) specify the address of URL.
  • Another Property target with(value=”_self”) is open the url at the same page.
  • A statemenis declaredtype in middle recognize the url name like..google,yahoo.
  • While click on hyperlink redirect to the page

Opening page in next window

This type of link used to open linked page in next page or new window

Eg

  1.   <html>
  2.   <title>test</title>
  3.   <body>
  4.   <a  href=”url” target=”_blank”>
  5.   Click here to open google in new tab
  6.   </a>
  7.   </body>
  8.   </html>

Output :

Click here to open google in new tab

How To Make an Image Hyperlink

To make an image hyperlink you have to use both anchor tag and image tag.
First create a hyperlink using anchor tag, now put the image tag in between anchor tag.
like..

Eg  im taking a pic            while clicking  redirect to new page and open link page

  1.   <html>
  2.   <title>test</title>
  3.   <body>
  4.   <a href=”url“>
  5.   <img src=”C:\Users\gudditi\Desktop\r logo.png” height=”100px”/><a  href=”url” target=”_blank”>
  6.   Click here to open google in new tab
  7.   </a>
  8.   </a>
  9.   </body>
  10.   </html>

Output :

 

@@@



Leave a reply