Kumail.pk is a Free Platform of

Hyperlinks

Hyperlinks allow a user to navigate from one web page to another. It also enables users to navigate to different sections within the same web page. Hyperlinks convert text or other media into clickable objects

Hyperlinks

Hyperlinks

 
 
 Links within the same document: Setting the link within the same page requires two steps: 
1. Use id attribute of any HTML tag to give a name to the section of the page, where a user should reach after clicking on the link. 
2. Create a hyperlink and set the above name as href attribute of this link, starting with hash (#) symbol. e.g.
 

Hyperlinks are one of the most exciting innovations the Web has to offer. They’ve been a feature of the Web since the beginning, and are what makes the Web a web. Hyperlinks allow us to link documents to other documents or resources, link to specific parts of documents, or make apps available at a web address. Almost any web content can be converted to a link so that when clicked or otherwise activated the web browser goes to another web address (URL).

For example, the BBC homepage contains many links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools), and more.

A basic link is created by wrapping the text or other content, see Block level links, inside an <a> element and using the href attribute, also known as a Hypertext Reference, or target, that contains the web address.

Another attribute you may want to add to your links is title. The title contains additional information about the link, such as which kind of information the page contains, or things to be aware of on the web site.

<p>I'm creating a link to 
<a href="https://www.mozilla.org/en-US/" 
title="The best place to find more information about Mozilla's 
 mission and how to contribute">the Mozilla homepage</a>. 
</p>

 

 

 

 

Create an HTML document using your local code editor and our getting started template.

 

 

    • Inside the HTML body, add one or more paragraphs or other types of content you already know about.

 

    • Change some of the content into links.

 

    • Include title attributes.

 

 

 

 

 

As mentioned before, almost any content can be made into a link, even block-level elements. If you have an image you want to make into a link, use the <a> element and reference the image file with the <img> element.

 

<a href="https://www.mozilla.org/en-US/"> 
<img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> 
</a>
 

A quick primer on URLs and paths

To fully understand link targets, you need to understand URLs and file paths. This section gives you the information you need to achieve this.

A URL, or Uniform Resource Locator is a string of text that defines where something is located on the Web. For example, Mozilla’s English homepage is located at https://www.mozilla.org/en-US/.

URLs use paths to find files. Paths specify where the file you’re interested in is located in the filesystem. Let’s look at an example of a directory structure, see the creating-hyperlinks directory.

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

The root of this directory structure is called creating-hyperlinks. When working locally with a web site, you’ll have one directory that contains the entire site. Inside the root, we have an index.html file and a contacts.html. In a real website, index.html would be our home page or landing page (a web page that serves as the entry point for a website or a particular section of a website.).

There are also two directories inside our root — pdfs and projects. These each have a single file inside them — a PDF (project-brief.pdf) and an index.html file, respectively. Note that you can have two index.html files in one project, as long as they’re in different filesystem locations. The second index.html would perhaps be the main landing page for project-related information.

  • Same directory: If you wanted to include a hyperlink inside index.html (the top level index.html) pointing to contacts.html, you would specify the filename that you want to link to, because it’s in the same directory as the current file. The URL you would use is contacts.html:

    <p>Want to contact a specific staff member?
Find details on our <a href="contacts.html">contacts page</a>.</p>

  • Moving down into subdirectories: If you wanted to include a hyperlink inside index.html (the top level index.html) pointing to projects/index.html, you would need to go down into the projects directory before indicating the file you want to link to. This is done by specifying the directory’s name, then a forward slash, then the name of the file. The URL you would use is projects/index.html:

    <p>Visit my <a href="projects/index.html">project homepage</a>.</p>

  • Moving back up into parent directories: If you wanted to include a hyperlink inside projects/index.html pointing to pdfs/project-brief.pdf, you’d have to go up a directory level, then back down into the pdf directory. To go up a directory, use two dots — .. — so the URL you would use is ../pdfs/project-brief.pdf:

Apply for Free E-Certification

E-Certification