Home

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

  1. Open the aboutus.htm file
  2. 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>
  3. 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

  1. 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>
  2. Save the file
  3. Open the file in a browser

    Creating Local Links

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

  1. Open the offices.htm file
  2. 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>
  3. 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

  1. Open the index.htm file
  2. 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>
  3. 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

  1. 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>
  2. 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

  1. In the root directory (html_public or wattsaloan), cerate a new file named products.htm
  2. 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>
  3. Save and close the file
  4. In the services folder, create a new file named index.htm and open it
  5. 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>
  6. Save and close the file
  7. Create a new file in the services folder and name it outreach.htm and open it
  8. 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>
  9. Save the file
  10. From the root directory (html_public or wattsaloan), open the index.htm file
  11. 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>
  12. 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

  1. 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>
  2. 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

  1. 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>
  2. Save and close the outreach.htm file
  3. 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>
  4. Save and close the file
  5. Open the offices.htm file
  6. 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>
  7. Save and close the file.
    If you had set up a website and if you are working from your computer, upload the files now
  8. Preview the index.htm file from your website or from your computer, and click the links

    Targeting a Link

   
   
 

Previous Copyright © 2015, FunctionX Next