Hyperlinks in HTML - ProgrammerTech


Hyperlinks in HTML

  • Share this:
Hyperlinks in HTML

Hyperlinks HTML

Hyperlinks are the soul of the Internet, and if the Internet is a spider's web, then these links are the threads that make up that web.

Hyperlinks are links that take you to another page or website, a link embedded in an image, or perhaps a link to a file on the Internet that the browser asks you if you want to download or not.

Today we will learn how to use links in building a website, specifically in structuring html, and it has several tags used in html and its tag is <a>.


Common forms of hyperlinks

  1. The link should be a text link, and when you click on this text, it will direct you to another page or file according to the purpose for which the link was placed.
  2. The link should be a button, and when you click on it, it will direct you to another page or file.
  3. The link should be an image, and when you click on this image, it will direct you to a page or file to download.

The general form of creating a hyperlink in html

<a href="url"/>text</a>
  • The <a> and </a> tags are the Inclusion Hyperlinks tag, which is an abbreviation of the term Anchor.
  • The href is a property by which we specify the URL of the site that we want the visitor to go to.
  • In the url we replace the link that we want to direct the user to when clicking on the text.
  • And text we put in its place the word that appears to the visitor when we ask him to click on it to direct it.


Add the hyperlink as text

We will build a link and have a text (Text Link) you go to our site and the code will be as follows.

<a href="https://www.programmer-tech.com"/>click here</a>

When you click on it, it will take you directly to the site in the word.


Add the hyperlink as an image

We want there to be a link inside the image (Image Link), when we click on it, it will direct us to this link. It will be as in the example.

<a href="https://www.programmer-tech.com"/><img src="datafiles.jpg"/></a>

We have created a hyperlink bearing an image and the image name is datafiles.jpg and when you click on the image it will take us immediately to our site.


Add the hyperlink as a button

We can put the link inside a button (Button Link), when the user clicks on it, it will take it to another page, and it will be in the form.

<button onclick="document.location='https://www.programmer-tech.com/'">click here</button>

We created a button with the <button> tag and placed an onclick feature that we recognized in the JavaScript course.

Then we put a link to our site to go to it when you click on the word click here.


Hint when hovering over the link

If we want to show a hint or speech when the mouse pointer is hovered over the word or button containing the link.

You can add a title property inside the <a> tag and pass the text we want to hint as its value.

<p><a href="https://www.programmer-tech.com"/ title="link website">click here</a></p>

We created a paragraph and within that paragraph we created a hyperlink and set the go to our site when the word was clicked.

And we put a title for a hint when the mouse is hovered over the link.


Put a hyperlink to an email

Using the word mailto: we can put a link inside the page. When clicking on the link, it will open the email application on the visitor's device.

And we determine to whom the mail will be sent.

We just put the word mailto: and then we write the email we want to receive the mail and specify it as the value of the href attribute.

<p><a href="mailto:javascript23685@gmail.com">Send Email</a></p>

We created a paragraph and inside the paragraph we hyperlinked the text and typed mailto: in order to go to the e-mail.

And specify the mail that will receive messages from the user.


Add a fake hyperlink

While designing a web page, the page designer does not need to specify the href attribute for each link that he places on the page.

Usually until the text of the link is shown as a normal link and not text that can be clicked.

The symbol can be set in the # box as the value of the href attribute, as if you were telling the browser to direct this user to nothing.

<a href="#">Visiting site</a>

Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com