HTML5 LINKS CHAPTER 9


Ninth tutorial on links




Links are found in nearly all web pages. Links allow users to click their way from page to page.


HTML Links – Hyperlinks

HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. It can be an image or any other HTML element.

HTML Links – Syntax

 

Hyperlinks are defined with the HTML <a> tag:

<a href="url">link text</a>

 

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Links</h2>

<p><a href="https://unknownprogramming.blogspot.com/ ">Visit our HTML tutorial</a></p>

 

</body>

</html>

 

OUTPUT

 

HTML Links

 

Note: Without a forward slash at the end of subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the end of the address, and then create a new request.

Local Links

The example above used an absolute URL (a full web address).
A local link (link to the same web site) is specified with a relative URL (without https://www....).

<!DOCTYPE html>

<html>

<body>

<h2>Local Links</h2>

<p><a href="html_images.asp">HTML Images</a> is a link to a page on this website.</p>

<p><a href="https://unknownprogramming.blogspot.com/">U P</a> is a link to a website on the World Wide Web.</p>

</body>

</html>

OUTPUT

Local Links

HTML Images is a link to a page on this website.
UP is a link to a website on the World Wide Web.

HTML Links - The target Attribute

 

The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
  • _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
  • framename - Opens the linked document in a named frame
This example will open the linked document in a new browser window/tab:
<!DOCTYPE html>
<html>
<body>

<h2>The target Attribute</h2>

<a href="https://unknownprogramming.blogspot.com/" target="_blank">Visit our HTML tutorial!</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>

</body>
</html>

 

OUTPUT

The target Attribute

Visit our HTML tutorial!
If you set the target attribute to "_blank", the link will open in a new browser window or tab.

Tip: If your webpage is locked in a frame, you can use target="_top" to break out of the frame:

<!DOCTYPE html>
<html>
<body>

<p>Locked in a frame? <a href="https://unknownprogramming.blogspot.com/"target="_top">Click here!</a></p>

</body>
</html>

OUTPUT

Locked in a frame? Click here!




HTML Links - Image as a Link

 

It is common to use images as links:

<!DOCTYPE html>

<html>

<body>

<h2>Image Links</h2>

<p>The image is a link. You can click on it.</p>

<a href="default.asp">

  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">

</a>

<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.</p>

</body>

</html>

OUTPUT

Image Links

The image is a link. You can click on it.



We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of a button:
<!DOCTYPE html>
<html>
<body>

<h2>Button as a Links</h2>

<p>Click the button to go to the default page.</p>

<button onclick="document.location = 'default.asp'">HTML Tutorial</button>

</body>
</html>

OUTPUT

Button as a Links

Click the button to go to the default page.

Link Titles

 

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

<!DOCTYPE html>

<html lang="en-US">

<body>

 

<h2>Link Titles</h2>

<p>The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>

<a href="https://unknownprogramming.blogspot.com/" title="Go to HTML unknown programming section">Visit our HTML Tutorial</a>

 

</body>

</html>

OUTPUT

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

External Paths

External pages can be referenced with a full URL or with a path relative to the current web page.
This example uses a full URL to link to a web page:

<!DOCTYPE html>

<html>

<body>

 

<h2>External Paths</h2>

 

<p>This example uses a full URL to link to a web page:</p>

<p><a href=" https://unknownprogramming.blogspot.com/ default.asp ">HTML tutorial</a></p>

 

</body>

</html>

OUTPUT

External Paths

This example uses a full URL to link to a web page:
This example links to a page located in the html folder on the current web site:

<!DOCTYPE html>
<html>
<body>

<h2>External Paths</h2>

<p>This example links to a page located in the html folder on the current web site:</p>

<p><a href="/html/default.asp">HTML tutorial</a></p>

</body>
</html>

OUTPUT

External Paths

This example links to a page located in the html folder on the current web site:



This example links to a page located in the same folder as the current page:

<!DOCTYPE html>

<html>

<body>

<h2>External Paths</h2>

<p>This example links to a page located in the same folder as the current page:</p>

<p><a href="default.asp">HTML tutorial</a></p>

</body>

</html>

OUTPUT

External Paths

 

This example links to a page located in the same folder as the current page:


You can read more about file paths in the chapter HTML File Paths.

 

 



Popular posts from this blog

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS ...
Read more

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">...
Read more

HTML5 ELEMENTS CHAPTER 4

Image
FOURTH TUTORIAL IS HTML ELEMENTS HTML  Elements An HTML element usually consists of a  start  tag and an  end  tag, with the content inserted in between: < tagname > Content goes here... < /tagname > The HTML  element  is everything from the start tag to the end tag: < p > My first paragraph. < /p > Start tag         Element content         End tag <h1>                      My First Heading                  </h1> <p>                        My first paragraph.        ...
Read more