Link to home page in html

HTML 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. A link can be an image or any other HTML element!

HTML Links — Syntax

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

Example

This example shows how to create a link to W3Schools.com:

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

HTML Links — The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

• _self — Default. Opens the document in the same window/tab as it was clicked
• _blank — Opens the document in a new window or tab
• _parent — Opens the document in the parent frame
• _top — Opens the document in the full body of the window

Example

Use target=»_blank» to open the linked document in a new browser window or tab:

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the «https://www» part):

Example

Absolute URLs

W3C

Google

Relative URLs

HTML Images

CSS Tutorial

HTML Links — Use an Image as a Link

To use an image as a link, just put the tag inside the tag:

Example

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):

Example

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:

Example

Tip: Learn more about JavaScript in our JavaScript Tutorial.

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.

Источник

HTML Tag – Anchor Link HREF Example

Kolade Chris

By default, it is underlined and given a bluish color, but you can override these style defaults with CSS (which a lot of people do).

Most importantly, though, this tag takes the href attribute, in which you specify which website, web page, or part of the same web page to link to.

Basic a href tag Syntax

Here’s the basic syntax for the tag:

In this tutorial, we will examine how to link to another website, link to another page on the same website, and link to a specific part of the same web page – all with the tag.

How to Link to Another Website (External Link)

We’ve already touched briefly on the href attribute. The value of this attribute tells which website to link to. The value must be an absolute URL, which means you have to specify the full web address of the website, for example, https://www.freeCodeCamp.org .

If you’re dealing with external links, it is better to open them in a separate tab so the user doesn’t have to click back and forth to scan links in the original site. This helps provide a more pleasant user experience.

How to Link to a Page on the Same Website

When you’re linking to a page on the same website, the value assigned to the href attribute is what makes the difference.

So, instead of specifying an absolute URL, you’ll use a relative one. For example, you’ll use contact.html instead of https://www.freeCodeCamp.org .

You can see how to link to pages on the same website below:

The code that does it looks like this:

To link to the Contact Page:

To link to the About Page:

How to Link to a Specific Part of a Web Page

Almost every HTML element takes the id attribute. So when you identify the portion of the web page you want to link to, assign it an id and then pass it to the href attribute as a value with the number symbol (#) preceding it.

The code snippets below demonstrate how to link to specific parts on the same web page:

Intro About Contact 
Intro: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque nostrum magni dolore laboriosam aspernatur minima officia unde voluptate porro nisi animi illo voluptas labore, at harum expedita tenetur vel quaerat sit rerum nulla fugit debitis repellat! Rem veniam suscipit at?
 
About me: Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis quos nesciunt nemo dignissimos quisquam quasi harum, vero illum, ducimus similique placeat ut rerum hic non aliquid itaque dolores expedita libero consequuntur sit rem quod officia? Fugiat explicabo natus optio dolorem?
 
Contact me: Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis quos nesciunt nemo dignissimos quisquam quasi harum, vero illum, ducimus similique placeat ut rerum hic non aliquid itaque dolores expedita libero consequuntur sit rem quod officia? Fugiat explicabo natus optio dolorem?
 

How to Make Buttons with the Tag

You typically use the input type of button ( ) and the button element … to do this. But you might have to add some JavaScript to get them to do what you want them to do.

What does the code above do?

With the :hover pseudo-class provided by CSS, we were able to specify a slight change in the background color any time a user hovers their mouse over the button.

In the end, we have the result below:

Conclusion

I hope this tutorial helped you figure out all the things you can do with the tag so you can start making good use of it on your websites.

Thank you for reading, and keep coding.

Источник

How to Make HTML Hyperlinks Using the HREF Attribute on Tags

Ibrahima Ndaw

A website is a collection of web pages. And these pages need to be linked or connected by something. And to do so, we need to use a tag provided by HTML: the a tag.

This tag defines a hyperlink, which is used to link from one page to another. And the most important attribute of the a element is the href attribute, which indicates the link’s destination.

In this guide, I will show you how to make HTML hyperlinks using the href attribute on the a tag.

What is a link?

A link is clickable text that allows you to browse from one page to another, or to a different part of the same page.

In web development, there are several ways to create links, but the most common is by using the a tag and the href attribute. This last is where we specify the destination address of the link.

The a tag helps us create three main kinds of links: an internal link, an external link, and an anchor link. That said, we can now dive into how to create an internal link in the next section.

How to create internal links

When it comes to building a website, it makes sense to have a connection between pages. And as long as these links allow us to navigate from page A to page B, it’s called an internal link (since it’s always in the same domain name or on the same website). So, an internal link is a link that allows navigating to another page on a website.

Now, considering our folder is structured as follows:

├── folder1 | └── page2.html ├── page1.html ├── index.html 

Here we have three use cases, and for each, we will create an example.

Browse to pages on the same level

As you can see, the page page1.html is on the same level, therefore the path of the href attribute is just the name of the page.

Browse to pages located in another folder

Here, we have a different use case since the page we want to visit is now not on the same level. And to be able to navigate to that page, we should specify the complete path of the file including the folder.

Great! Let’s now dive into the last use case.

Browse from a page located in a folder to the root

Now, here to navigate to the index.html page, we should first go one level up before being able to browse to that page.

We have now covered internal links, so let’s move on and introduce how to navigate to external links.

How to create external links

It’s always useful to have the ability to navigate to external websites as well.

As you can see here, to navigate to Google, we have to specify its URL to the href attribute.

External and internal links are used to navigate from page A to page B. However, sometimes we want to stay on the same page and navigate to a specific part. And to do so, we have to use something called anchor link, let’s dive into it in the next section.

How to create anchor links

An anchor link is a bit more specific: it allows us to navigate from point A to point B while remaining on the same page. It can also be used to go to a part on another page.

Navigate on the same page

Compared to the others, this one is a bit different. Indeed it is, but it still works the same way.

Here, instead of a page link, we have a reference to an element. When we click on the link, it will look for an element with the same name without the hashtag ( about ). If it finds that id, it browses to that part.

Navigate on another page

This is pretty the same as the previous example, except that we have to define the page in which we want to browse and add the anchor to it.

Conclusion

The href is the most important attribute of the a tag. It allows us to navigate between pages or just a specific part of a page. Hopefully, this guide will help you build a website with plenty of links.

Feel free to reach out to me!

Источник

How to make page links in HTML Page?

A link is a connection from one Web page to another web page.

To create page links in an HTML page, we need to use the href attribute of the and tag. Make sure that the tag is placed with in the … tags.

The link text is visible. Clicking on the link text will navigate to the specified URL address. By default, links will appear as follows on the web page of the browser.

• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

Syntax

Following is the syntax to make a page link on the web page.

Example

Following example program to make a page link on the web document.

DOCTYPE html> html> body> h1>HTML Article on Links h1> p>a href="https://www.Google.com/">Click this to navigate to the Google home pagea>p> body> html> 
 

Following is the output for the unvisited link. When we click on the link it will navigate us to the home page of the google search engine. Thus, the link will get visited and appear underlined and purple.

Example

In the example below, we linked the official page of tutorialspoint on the web document.

DOCTYPE html> html> head> title>HTML Linkstitle> head> body> h1>Click the link below and navigate the official page of tutorialspointh1> a href="https://www.tutorialspoint.com/index.htm">TUTORIALSPOINTa> body> html> 
 

If we click on the link it will redirect you to the destination page. When we click on the link it will navigate us to the home page of the webpage of tutorialspoint.

Using an image as a Hyperlink

We can add an image as link and other HTML elements as a link.

Syntax

Following is the syntax to add an image as a link on the web page.

Example

Following is the example program to make an image as a link.

DOCTYPE html> html> body> h1>HTML Article on Links h1> p>a href="https://www.Google.com/">img src="https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg" style="width:50px;height:50px;">a>p> body> html> 
 

Following is the output for the image as a link, clicking on the image will navigate us to the google home page.

Источник