How to Create Links between Website pages?

How to Create Links between Website pages?

How to Create Links between Website pages?

DESCRIPTION

Links are an important feature of the web because they permit us to change from one web page to another. They enable the very idea of browsing or surfing. We will usually come across the following types of links:

  • From one website to another
  • From one page to another on a similar website
  • From one part of a web page to another part of the similar page
  • That open in a new browser window
  • That start up our email program and address a new email to someone

Writing Links

By using the element Links are created. Users may click on anything between the opening tag and the closing tag. We identify which page we want to link to using the href attribute. The link text is known as the text between the opening tag and closing tag. Our link text should explain where visitors will be taken if they click on it where possible. We can see below the link to IMDB that was created on the previous page. By scanning the text for links, many people navigate websites. Clarity in link text may help invitees find what they want. This will encourage them to visit it for longer and give a more positive imprint of our site. We can think of words people might use when searching for the page that we are linking to write good link text.

Linking to Other Sites

The element which has an attribute called href. The page that we want people to go to when they click on the link is due to the value of the href attribute. Users may click on whatever that appears between the opening tag and the closing tag. This would be taken to the page specified in the href attribute. The value of the href attribute will be the full web address for the site, when we link to a different website. Browsers display links in blue with an underline by default.

<p>Movie Reviews:

<ul>

<li><a href=”http://www.empireonline.com”>

Empire</a></li>

<li><a href=”http://www.metacritic.com”>

Metacritic</a></li>

<li><a href=”http://www.rottentomatoes.com”>

Rotten Tomatoes</a></li>

<li><a href=”http://www.variety.com”>

Variety</a></li>

</ul>

</p>Result

Movie Reviews:

  • Empire
  • Metacritic
  • Rotten Tomatoes
  • Variety

Absolute URLs

All web pages have their own URL. It stands for Uniform Resource Locator. This is the web address which we would type into a browser if we wanted to visit that specific page. The absolute URL flinches with the domain name for that site. This may be followed by the path to a specific page. The site would show the homepage if no page is specified.

Linking to Other Pages on the Same Site

We don’t need to specify the domain name in the URL when we are linking to other pages within the same site. We may use a shorthand known as a relative URL. The value of the href attribute is just the name of the file if all the pages of the site are in the same folder. We can use a slightly more complex syntax to indicate where the page is in relation to the current page, if we have different pages of a site in different folders. We will see that the index.html file contains links that use relative URLs.

</p>

chapter-04/linking-to-other-pages.html

href=”index.html”>Home</a></li>

href=”about-us.html”>About</a></li>

href=”movies.html”>Movies</a></li>

href=”contact.html”>Contact</a></li>

Result

  • Home
  • About
  • Movies
  • Contact

Relative URLs

We can use relative URLs after linking to other pages within the same site. We do not need to specify the domain name because these are like a shorthand version of absolute URLs. We can create links between pages without having to set up our domain name or hosting therefore relative URLs help when building a site on our computer.

Relative URLs may be used when linking to pages within our own website. They deliver a shorthand method to the browser where to find our files. We do not need to specify the domain name when we are linking to a page on our own website. We may use relative URLs which are a shorthand way to tell the browser where a page is in relation to the current page. This is particularly supportive when creating a new website or learning about HTML because we can make links between pages when they are only on our personal computer. We do not need to repeat the domain name in each link because they are also quicker to write. We just use the file name for that page if all of the files on our site are in one folder. We need to tell the browser how to get from the page it is currently on to the page that we are linking if our site is organized into separate folders. We might need to write two different relative URLs if we link to the same page from two different pages.

Email Links

Mail to:

We use the element to create a link that starts up the user’s email program and addresses an email to a specified email address. Though, this time the value of the href attribute starts with mail to: and is followed by the email address we want the email to be sent to. We can see on the right that an email link looks just like any other link. The user’s email program will open a new email message and address it to the person specified in the link when it is clicked on.

Email Mansoor Ahmed

<a href=”mailto:Mansoor Ahmed@example.org”>Email Mansoor Ahmed</a>

Result

Email Mansoor Ahmed

Opening Links in a New Window

Target: We can use the target attribute on the opening tag if we want a link to open in a new window. The value of this attribute would be _blank. The user will return to the window containing their site after final looking at the other one. We should avoid generally opening links in a new window. But it is considered good practice to inform users that the link will open a new window before they click on it if we do.

Internet Movie Database (opens in new window)

<a href=”http://www.imdb.com” target=”_blank”>

Internet Movie Database</a> (opens in new window)

Result

Internet Movie Database (opens in new window)

Linking with a Specific Part of the Same Page

We may need to add a list of contents that links to the matching sections lower down at the top of a long page. We might want to add a link from partway down the page back to the top of it to save users from having to scroll back to the top. We need to identify the points in the page that the link will go to before we can link to a specific part of a page. We can do this by the id attribute. We may understand that the and elements in this example have been given id attributes. The value of the id attribute would start with a letter or an underscore. We use the element again to link to an element that uses an id attribute. The value of the href attribute starts with the # symbol, followed by the value of the id attribute of the element we want to link to.

Film-Making Terms

<h1 id=”top”>Film-Making Terms</h1>
<a href=”#arc_shot”>Arc Shot</a><br />
<a href=”#interlude”>Interlude</a><br />
<a href=”#prologue”>Prologue</a><br /><br />
<h2 id=”arc_shot”>Arc Shot</h2>
<p>A shot in which the subject is photographed by an
encircling or moving camera</p>
<h2 id=”interlude”>Interlude</h2>
<p>A brief, intervening film scene or sequence, not
specifically tied to the plot, that appears
within a film</p>
<h2 id=”prologue”>Prologue</h2>
<p>A speech, preface, introduction, or brief scene
preceding the the main action or plot of a film;
contrast to epilogue</p>
<p><a href=”#top”>Top</a></p>

Arc Shot

Interlude

Prologue

Arc Shot

the subject has photographed a shot in which by an encircling or moving camera

Interlude

intervening film scene or sequence in brief, not specifically tied to the plot that appears within a film

Prologue

Top

Result

Film Making Terms

Arc Shot

Interlude

Prologue

Arc Shot

A shot in which the subject is photographed by an encircling or moving camera

Interlude

Intervening film scene or sequence, in brief, not specifically tied to the plot that appears within a film

Linking to a Specific Part of another Page

We can use a similar technique if we want to link to a specific part of a different page. We may only add the same syntax to the end of the link for that page; as long as the page we are linking to has id attributes that identify specific parts of the page. So, the href attribute will contain the address for the page followed by the # symbol, and the value of the id attribute that is used on the element we are linking to.

 

Leave a Comment