Lesson 07: HTML Links in a Webpage

	Links in a Webpage

Introduction to Links

Overview

Besides displaying text and objects to a webpage visitor, probably the second most important feature of the Internet is to link documents. This provides the ability to navigate or jump from one document or piece of information to another document, another library, another distraction, etc. HTML supports various types of links. HTML supports various types of links

The primary technique to initiate a link is to create an element named a. The primary attribute of a link is named href. This attribute is used to indicate what to link. The formula to follow is:

<a href="">label</a>

The value of the href attribute must be a valid path, otherwise the browser may produce an error. Between the start and the end tags, you must provide something that will indicate to the visitor what the link is used for. It can be a symbol, a letter, a word, a picture, or a whole paragraph.

Practical Learning: Introducing Links

Open the aboutus.htm file

Change the document as follows:

<html>
<head>

<meta name="author" content="Catherine Watts">
<meta name="keywords" content="watts, personal, business, loan, about, us, wattsaloan, mission, statement, business, strategy, communitty, outreach">
<meta name="description" content="This webpage describes Watts A Loan business. The page also provides information about the management and the leadership personnel of the company.">

<title><b>Watts A Loan</b>: About Us</title>

<head>
<body>

<h1 align="center"><b>Watts A Loan</b>: About Us</h1>

<p><b>Watts A Loan</b> is a financial management business founded in 2002 
by Catherine Watts. The company creates loans and lends money to people 
as well as businesses. <b>Watts A Loan</b> combines innovation in financial 
services, expertise in loan management, and specialization in particular 
needs. The company&apos;s customers include regular people (personal loans, 
vehicle and boat financing, etc), small businesses (business startup), and 
organizations (commercial or <abbr title="Non-Governmental Organization">NGO</abbr>).</p>

<p><b>Watts A Loan</b> started with one office. It has lately expanded and 
is now represented in many communities. <b>Watts A Loan</b> has offices at 
Wheaton Plaza (<i>mall</i>), at Montgomery Circle, and in Columbia. The 
company plans to open new office in other cities while it is growing.</p>

<p>Besides regular business activities, <b>Watts A Loan</b> is committed 
to financial responsibility (<em>risk management</em>), research &amp; 
development, and community outreach. The goals are to be financially 
accountable and community oriented towards its customers and other 
stakeholders.</p>

<h2 id="mission" title="A sentence that defines why a company exists and what its goals are.">Mission Statement</h2>

<h3>Our Mission</h3>

<p>To build-up people who inspire.</p>

<h3>Our Strategy</h3>

<p>To be the most recommendable financial lending institution in the 
areas where its offices are located.</p>

<h3>Our Ambition</h3>

<p>To re-invent the way people interpret commercial lending.</p>

<h2>Company Leadership</h2>

<p><b>Watts A Loan</b> is lead by a team of business-minded and 
family-oriented professionals.</p>

<h3><b>Watts A Loan</b> Owner and <abbr title="Chief Executive Officer">CEO</abbr>: Catherine Watts</h3>

<p><strong>Catherine Watts</strong> founded <b>Watts A Loan</b> from a 
shining idea of creating personal loans that rebuild people&#39;s lives 
and challenge other financial institutions. Although primarily aiming 
to cater to individual (<i>the personal niche</i>), Cathy quickly found 
some individual personal needs and the increasing demanding world of 
small businesses.</p>

<p>Catherine holds a Bachelor&#039;s degree in business management and 
a Master&#x00027;s degree in banking processes.</p>

<h3>Marketing Director and Business Strategist: Frank Heyman</h3>

<p><strong>Frank Heyman</strong> is a former business executive. His 
r&eacute;sum&eacute; includes many major financial firms of different 
types of businesses, including accounting firms, consumer services, 
and Internet startups.</p>

<p>Frank holds a Bachelor&apos;s degree in financial accounting and a 
Master&#039;s degree in banking strategies. Frank is in charge of the 
<b>Watts A Loan</b> business orientation 
and financial goals.</p>

<h3>Human Resource and Corporate Outreach Officer: Justine Bene</h3>

<p><strong>Justine Bene</strong> manages human resources as well as 
community outreach. She is in charge of all hiring steps and other 
personel issues. When it comes to community outreach, Justine  ensures 
that the company is accountable to  the community.</p>

<p>Justine has a Bachelor&#039;s degree in human resources and holds 
many professional certifications.</p>

<h2 id="finances">Finances &amp; Revenues</h2>

<p><b>Watts A Loan</b> is currently managing a budget of <b>$15,000,000</b> 
and growing. The budget is shared among the company departments:</p>

<pre>===========================================
Department	<span title="This section includes the budget allocated to each department">Revenues</span>	<span title="This section shows the budget fraction available for each department of the company">Margin</span>
===========================================
<span title="The administration includes employees payroll, community services, etc">Administration</span>	3.5<abbr title="Millions">M</abbr>		23.33%
-------------------------------------------
Loans/Services	9M		60.00%
-------------------------------------------
Marketing	1.12M		6.80%
-------------------------------------------
R &amp; D		1.35M		7.33%
-------------------------------------------
<abbr title="Community Outreach">CO</abbr>		480<abbr title="K stands for kilos. It represents thousands">K</abbr>		2.53%
===========================================</pre>

<p align="center">Home | Offices Locations | Services | Top | Mission Statement | SBA - Accountability</p>

</body>
</html>

Save the aboutus.htm file

Local Links

A local link is a means of jumping from one section of a document to another section. This functionality is available for vertical sections. One way to provide the ability to jump to a section of a document is to add an identifier to an element. This is done by adding an id attribute to an element.

To provide a local link in a document, provide the identifier of the element as the value of the href attribute. The name of the identfier must be preceded with #.

Practical Learning: Introducing Local Links

Change the document as follows:

. . .

-------------------------------------------
R &amp; D		1.35M		7.33%
-------------------------------------------
<abbr title="Community Outreach">CO</abbr>		480<abbr title="K stands for kilos. It represents thousands">K</abbr>		2.53%
===========================================</pre>

<p align="center">Home | Offices Locations | Services | <a href="#top">Top</a> | <a href="#mission">Mission Statement</a> | SBA - Accountability</p>

</body>
</html>

Save the file
Open the file in a browser

Linking to a Website

By default, a website has a default webpage, which is usually named index.htm, index.html, default.htm, or default.html, etc. Based on this, you can create a link to the website and the default webpage would automatically display when the link is accessed.

Practical Learning: Linking to a Website

Open the offices.htm file

Change the document as follows:

. . .

<u><h3>Columbia Town Center</h3></u>

<pre><b>Watts A Loan - Columbia Town Center</b>
6204 East Patuxent Rd
Columbia, MD 21042
Office #: 410-730-2748
Fax #:    410-730-2718</pre>

<p align="center">Home | About Us | Products | <a href="http://www.sba.gov/">Small Business Administration</a></p>

</body>
</html>

Save the file

Linking to a Webpage

Introduction

The easiest way to create a link is to a Webpage on the Internet. Before doing this, you must have the complete address of the webpage. The easiest way to get it is to go to the webpage, select the string in the address bar and copy it (in most browsers, if you click the string in the address bar, it automatically gets highlighted; you can then simply press Ctrl + C, or right-click the selected string and click Copy).

Once you have the address of the page, provide it as the value of the href attribute.

Practical Learning: Linking to a Website

Open the index.htm file

Change the content of the document as follows:

. . .

<p align="center"><b>Watts A Loan</b> is involved in community outreach activities, such 
as road clean-up, events sponsoring, and school supply needs. The goal is 
to make <b>Watts A Loan</b> accountable to the community and the 
environment by following the strict rules of 
<a href="http://www.federalreserve.gov/bankinforeg/reglisting.htm">government 
regulations</a>.</p>

<p>About Us | Products | Offices Locations | Loan Process | Services</p>
</body>
</html>

Save the file

Linking to a Local Document

Compared to the document that will initiate a link, a document is said to be local if it is located in the same folder or directory. To link to such a document, provide its file name (including its extension) as the value of the href attribute.

Practical Learning: Linking to a Local Document

With the index.htm document still opened, change it as follows:

<html>
<head>

<meta name="author" content="Catherine Watts">
<meta name="keywords" content="watts, personal, business, loan, watts a loan, wattsaloan">
<meta name="description" content="This is the corporate website of Watts A Loan, a small business that provides loans and financial services.">

<title>Watts A Loan</title>

<head>
<body>

<h1 align="center">Watts A Loan</h1>

<p>Welcome to <b>Watts A Loan</b>. We provide personal and business loans 
as well as various financial services. We are your one-stop shop for 
all types of financial needs.</p>

<p>Our customers include:</p>

<p>Individuals: Personal loans, boat buyout, vehicle financing, musical 
instruments purchase, etc.</p>

<p>Businesses: Business startup, business improvement, late payroll, etc.</p>

<p>Organizations: Non-government organizations, not-for-profit organizations, 
limited liability needs, etc.</p>

<p><b>Watts A Loan</b> is involved in community outreach activities, such 
as road clean-up, events sponsoring, and school supply needs. The goal 
is to make <b>Watts A Loan</b> accountable to the community and the 
environment by following the strict rules of 
<a href="http://www.federalreserve.gov/bankinforeg/reglisting.htm">government 
regulations</a>.</p>

<p align="center"><a href="aboutus.htm">About Us</a> | <a href="products.htm">Products</a> | <a href="offices.htm">Offices Locations</a> | <a href="process.htm">Loan Process</a> | Services</p>

</body>
</html>

Save the file

Linking and Relative Paths

Two webpages can belong to the same website but located in different folders or directories. When two documents are in different folders, they are said to have different parents. To provide a link from document to another, you will provide a relative path, which is done using the // characters. Consider that a document A needs to provide a link to a document B.

Practical Learning: Using Relative Paths

In the root directory (html_public or wattsaloan), cerate a new file named products.htm

Set the content of the file as follows:

<html>
<head>

<meta name="author" content="Catherine Watts">
<meta name="keywords" content="watts, personal, business, loan, product">
<meta name="description" content="This webpage describes the products provided by Watts A Loan.">

<title>Watts A Loan: Products</title>

<head>
<body>

<h1 align="center">Watts A Loan: Products</h1>

<p>Personal loans present various types of reasons to solve immediate and 
insurmountable problems. <b>Watts A Loan</b> is the premier stop to address 
such personal issues in a timely and up-to-the-point manner. Besides 
personal loans, <b>Watts A Loan</b> provides many more solutions.</p>

<h3>Personal Loans</h3>

<p>Financial needs surround us and surprisingly sometimes arrive at a 
critical time. <b>Watts A Loan</b> has previous experience on such issues 
as house remodeling, family urgent matters (funeral, graduation, school 
project, etc) uncontainable debt, bond posting, IRS past taxes, etc. Are 
you in immediate need for cash? Do you urgently need financial assistance? 
Contact us immediately and come directly to one of our offices</p>

<h3>Business Loans</h3>

<p> A good business must always be ready to seize an opportunity or to 
make payments on time. Most of those situations require cash. A reliable 
business always needs to keep cash in hand. Unfortunately, cash is not 
always available at the right time, or the amount needed to solve an 
important problem is not completely available. What do you when in 
problem? Call us or drop to our office and we will carefully address 
your concerns.</p>

<p align="center"><a href="index.htm">Home</a> | <a href="aboutus.htm">About Us</a> | <a href="offices.htm">Offices Locations</a> | <a href="services/index.htm">Services</a></p>

</body>
</html>

Save and close the file
In the services folder, create a new file named index.htm and open it

Set the content of the file as follows:

<html>
<head>

<meta name="author" content="Catherine Watts">
<meta name="keywords" content="watts, personal, business, loan, watts a loan, service">
<meta name="description" content="This webpage describes the services that Watts A Loan provides.">

<title>Watts A Loan: Services</title>

<head>
<body>

<h1 align="center">Watts A Loan - Services</h1>

<p>Besides providing personal and business loans, <b>Watts A Loan</b> 
is committed to its communities and the environment.</p>

<p><a href="outreach.htm">Community Outreach</a></p>

<p>Events Sponsorship</p>

<p>Support to Local Schools</p>

<p align="center"><a href="../index.htm">Home</a> | <a href="../aboutus.htm">About Us</a> | <a href="../offices.htm">Offices Locations</a></p>
</body>
</html>

Save and close the file
Create a new file in the services folder and name it outreach.htm and open it

Set the content of the file as follows:

<html>
<head>

<meta name="author" content="Catherine Watts">
<meta name="keywords" content="watts, personal, business, loan, community, outreach">
<meta name="description" content="This webpage describes the community activities in which  Watts A Loan is involved.">

<title>Watts A Loan: Community Outreach</title>

<head>
<body>

<h1 align="center">Watts A Loan: Community Outreach</h1>

<p><b>Watts A Loan</b> is seriously involved in the communities where its 
offices are located. In recent years, <b>Watts A Loan</b> invested in the 
purchase of school supplies for various institutions in the area. 
<b>Watts A Loan</b> also participated in the sponsoring of a 5K marathon.</p>

<p align="center"><a href="index.htm">Home</a> | <a href="../aboutus.htm">About Us</a> | <a href="../offices.htm">Offices Locations</a></p>

</body>
</html>

Save the file
From the root directory (html_public or wattsaloan), open the index.htm file

Edit it as follows:

<html>
<head>

<meta name="author" content="Catherine Watts">
<meta name="keywords" content="watts, personal, business, loan, watts a loan, wattsaloan">
<meta name="description" content="This is the corporate website of Watts A Loan, a small business that provides loans and financial services.">

<title>Watts A Loan</title>

<head>
<body>

<h1 align="center">Watts A Loan</h1>

<p>Welcome to <b>Watts A Loan</b>. We provide personal and business loans 
as well as various financial 
services. We are your one-stop shop for all types of financial needs.</p>

<p>Our customers include:</p>

<p>Individuals: Personal loans, boat buyout, vehicle financing, musical 
instruments purchase, etc.</p>

<p>Businesses: Business startup, business improvement, late payroll, etc.</p>

<p>Organizations: Non-government organizations, Not-For-Profit organizations, 
limited liability needs, etc.</p>

<p><b>Watts A Loan</b> is involved in community outreach activities, 
such as road clean-up, events sponsoring, and school supply needs. The goal 
is to make <b>Watts A Loan</b> accountable to the community and the 
environment by following the strict rules of 
<a href="http://www.federalreserve.gov/bankinforeg/reglisting.htm">government 
regulations</a>.</p>

<p align="center"><a href="aboutus.htm">About Us</a> | <a href="products.htm">Products</a> | <a href="offices.htm">Offices Locations</a> | <a href="process.htm">Loan Process</a> | <a href="services/index.htm">Services</a></p>

</body>
</html>

Save the file

The Base of a Relative Path

By default, relative links are those created for documents on the same website. In reality, you can create links to a file in any website as long as you have the webpage address. Before doing this, you must provide the address of the website. This is done by creating an element named base in the head section of the webpage. After doing this, create the link that point directly to the webpages on that website. Unfortunately, HTML allows only one base element per webpage.

Other Topics on Links

Bookmarks and Anchors

A bookmark, also called an anchor, is link to a section in a document. We had an introduction to such links already although we only referred to local documents. In reality, you can create a link to a section in any document, including documents that someone else created, but there are rules you must follow.

Before linking to a section in a document, you must have a bookmark:

If the targeted document belongs to you, that is, you are the author or webmaster of the document, you must first create a bookmark or anchor in the desired section. This is done using the following formula:
```
<a name="anchor-name"label></a>
```
You don't have to provide a value to a bookmark. This means that you can omit the label. The formula would then be:
```
<a name="anchor-name"></a>
```
If you are not in charge of the document, you cannot create a bookmark: You cannot add code to any page on the Internet. You have two alternatives:
- If the webpage already contains a bookmark in the section that interests you, get the name of that bookmark (you can right-click the webpage and access its code)
- If it is possible, contact the webmaster and ask him or her to add a bookmark to the section that interests you (remember that you cannot do it yourself). If that is done, get the name of the bookmark

Once a bookmark exists, to link to it, in the value of the href attribute, provide the path to the document using any of the rules we reviewed previous. To get to the bookmar, type # followed by the name of the bookmark.

Practical Learning: Linking to an Anchor

Access the outreach.htm file and edit it as follows:

<html>
<head>

<meta name="author" content="Catherine Watts">
<meta name="keywords" content="watts, personal, business, loan, community, outreach">
<meta name="description" content="This webpage describes the community activities in which  Watts A Loan is involved.">

<title>Watts A Loan: Community Outreach</title>

<head>
<body>

<h1 align="center">Watts A Loan: Community Outreach</h1>

<p><b>Watts A Loan</b> is seriously involved in the communities where its offices 
are located. In recent years, <b>Watts A Loan</b> invested in the purchase of 
school supplies for various institutions in the area. <b>Watts A Loan</b> also 
participated in the sponsoring of a 5K marathon.</p>

<p align="center"><a href="index.htm">Home</a> | <a href="../aboutus.htm">About Us</a> | <a href="../offices.htm">Offices Locations</a> | <a href="http://managementhelp.org/businessfinance/#anchor1860217">Financial Management</a></p>

</body>
</html>

Save the file

Targeting a Window

By default, when a visitor clicks a link, the intended document replaces the document that is currently displaying. As an alternative, you can ask the browser to display the linked document either in another window (or tab) or to a specific window (or tab). To support this, the a element has an optional attribute named target.

The values of the target attribute are:

_self: This is the default value, applied if you don't use the target attribute. With this value, the intended document displays in the same window as the document that initiated the link
_parent: This most works as the _self value
A name: You must provide the name of the window or tab that will show the targeted document
_blank: When the visitor clicks the link, a new window or tab will be created and display the intended document
_new: The first time the visitor clicks a link, a new window or tab will be created and display the intended document. If the visitor clicks another link that also has the _new value, the new document will replace the one in the other window, but that other tab will stay in the background. If you want to access that other document, you must click its window or tab
_top: When the user clicks the link, another window or tab may be created to display the intended document and that window or tab will display in front of the other windows or tab

Practical Learning: Targeting a Window

With the outreach.htm file still opened, change its contents as follows:

<html>
<head>

<meta name="author" content="Catherine Watts">
<meta name="keywords" content="watts, personal, business, loan, community, outreach">
<meta name="description" content="This webpage describes the community activities in which  Watts A Loan is involved.">

<title>Watts A Loan: Community Outreach</title>

<head>
<body>

<h1 align="center">Watts A Loan: Community Outreach</h1>

<p><b>Watts A Loan</b> is seriously involved in the communities where its offices 
are located. In recent years, <b>Watts A Loan</b> invested in the purchase of 
school supplies for various institutions in the area. <b>Watts A Loan</b> also 
participated in the sponsoring of a 5K marathon.</p>

<p align="center"><a href="index.htm">Home</a> | <a href="../aboutus.htm">About Us</a> | <a href="../offices.htm">Offices Locations</a> | <a href="http://managementhelp.org/businessfinance/#anchor1860217" target="_blank">Financial Management</a></p>

</body>
</html>

Save and close the outreach.htm file

Access the aboutus.htm file and change it as follows:

. . .

-------------------------------------------
R &amp; D		1.35M		7.33%
-------------------------------------------
<abbr title="Community Outreach">CO</abbr>		480<abbr title="K stands for kilos. It represents thousands">K</abbr>		2.53%
===========================================</pre>

<p align="center"><a href="index.htm">Home</a> | <a href="offices.htm">Offices Locations</a> | <a href="services/index.htm">Services</a> | <a href="#top">Top</a> | <a href="#mission">Mission Statement</a> | <a href="process.htm">Loan Process</a> | <a href="https://www.sba.gov/sites/default/files/files/FY%202013%20AFR%20from%20CV%20Dec%2016.pdf" target="_new">SBA - Accountability</a></p>

</body>
</html>

Save and close the file
Open the offices.htm file

Change it as follows:

<html>
<head>

<meta name="author" content="Catherine Watts">
<meta name="keywords" content="watts, personal, business, loan, office, location">
<meta name="description" content="This webpage presents the way to contact Watts A Loan.">

<title>Watts A Loan: Offices Locations</title>

<head>
<body>

<h1 align="center">Watts A Loan: Offices Locations</h1>

<p><b>Watts A Loan</b> has offices in Montgomery County, Prince Georges County, 
Baltimore, and Howard County.</p>

<h3><u>Montgomery Mall Office</u></h3>

<pre><b>Watts A Loan - Montgomery Mall</b>
822 Rocket Star Ave
Bethesda, MD 20817
Office #: 240-469-4804
Fax #:    240-469-4826</pre>

<u><h3>Upper Marlboro Financial District</h3></u>

<pre><b>Watts A Loan - Financial</b>
10715 Long Journey Rd
Upper Marlboro, MD 20772
Office #: 301-627-4702
Fax #:    301-627-6815</pre>

<h3><u>Baltimore Commercial Town</u></h3>

<pre><b>Watts A Loan - Commercial Town</b>
6915 Sonnett Blvd
Baltimore, MD 21217
Office #: 410-962-5005
Fax #:    410-962-5017</pre>

<u><h3>Columbia Town Center</h3></u>

<pre><b>Watts A Loan - Columbia Town Center</b>
6204 East Patuxent Rd
Columbia, MD 21042
Office #: 410-730-2748
Fax #:    410-730-2718</pre>

<p align="center"><a href="index.htm">Home</a> | <a href="aboutus.htm">About Us</a> | <a href="products.htm">Products</a> | <a href="process.htm">Loan Process</a> | <a href="https://www.sba.gov/" target="_top">Small Business Administration</a></p>

</body>
</html>

Save and close the file.
If you had set up a website and if you are working from your computer, upload the files now
Preview the index.htm file from your website or from your computer, and click the links