Lesson 10: Pictures and Webpages

	Pictures and Webpages

Introduction to Graphics Files

Overview

Graphic files are those that display graphics or pictures. You will need the right tool(s) to create them. In Microsoft Windows and Apple, one of the most popular applications to create or manipulate pictures is Adobe Photoshop. There are other applications such as Corel PaintShop Pro, etc.

Corel PaintShop Pro is cheaper than Adobe Photoshop and we can do anything that is necessary for webpage/graphics design. The cheapest solution in Microsoft Windows is Windows Paint or simply Paint. It is installed along with the operating system. Windows Paint is very limited and should serve only as a temporary solution.

Different applications are typically used in web design because it is not unusual that a certain feature is missing in one application that happens to have other good features missing from other applications. For example, because we don't know what applications you have, in this lesson, we are going to use Microsoft Office to partially work with graphics, transferred them to Windows Paint and PaintShop Pro to get the results we want.

Practical Learning: Creating a Graphics File

Instructions for Microsoft Windows and Microsoft Office

If you are working from Microsoft Windows and if you have Microsoft Office, start Microsoft PowerPoint
To create a blank slide, in the Home tab of the Ribbon, in the Slides section, click the arrow of the New Slide button and click Blank
On the Ribbon, click Insert
To start a rounded rectangle, in the Illustrations section, click Shapes and click Rounded Rectangle.
Click inside the blank slide
While the shape is still selected on the slide, on the Ribbon, click Format
Click Shape Outline -> Weight -> 1/4 pt
In the same Format tab of the Ribbon, click Shape Outline and click the Black button
Enlarge the shape to cover almost the whole width of the slide and approximately 3/4 of the height of the slide
With the shape still selected, use the small yellow shape on its top-left corner to make the corner as small as possible without eliminating them completely
With the shape still selected, press Ctrl + C (or copy the shape)
Press Ctrl + V to paste
Click the first shape (it should be positioned behind the new one)
With the first shape selected, on the Ribbon, click Format
Click Shape Effects -> Shaddow and click the second option: Offset Diagonal Bottom Right
With the first shape still selected, in the Format section of the Ribbon, click Shape Effects -> Shaddow -¨> Shadow Options
With the Shadow option selected, set the Blur to 6 pt and make sure the Distance is 3 pt
Click Close
Click the other/second shape, the one in the front, to select it
With the front shape selected, in the same Format tab, click Shape Fill and click More Fill Colors...
In the Custom property page, set the values of the color as Red = 237, Green = 242, and Blue = 249
Click OK
With the front shape still selected, on the Ribbon, click Format. Click Shape Effects -> Shaddow
In the Inner section, click the middle option: Inside Center
With the second shape still selected, in the Format section of the Ribbon, click Shape Effects -> Shaddow -> Shadow Options...
Set the Blur value to 4 pt
Click Color and click More Colors...
Click Custom and set the color to Red = 85, Green = 142, and Blue = 213
Click OK
Click Close
Click the shape behind to select it, copy (Ctrl + C)
Paste it (Ctrl + V)
Change its size to cover the top section of the slide and approximately one tenth of the height
Click the top shape to select it
Copy it (Ctrl + C)
Paste it (Ctrl + V)
With the top front shape selected, in the same Format tab, click Shape Fill and click More Fill Colors...
In the Custom property page, set the values of the color as Red = 237, Green = 242, and Blue = 249
Click OK
With the top front shape selected, on the Ribbon, click Format. Click Shape Effects -> Shaddow
In the Inner section, click the middle option: Inside Center
With the top front shape still selected, in the Format section of the Ribbon, click Shape Effects -> Shaddow -> Shadow Options...
Set the Blur value to 4 pt
Click Color and click More Colors...
Click Custom and set the color to Red = 85, Green = 142, and Blue = 213
Click OK
Click Close
Position the shapes so that the light blue one is on top of the blue one in each section
Move the shapes slightly to the left of the slide
On the Ribbon, click Insert
To draw a circle, in the Illustrations section, click Shapes and click Oval
Click inside the slide
While the circle is still selected on the slide, on the Ribbon, click Format. Click Shape Outline -> Weight -> 1/4 pt
Still in the Format section of the Ribbon, click Shape Fill and click the white color
With the circle shape still selected, on the Ribbon, click Format
Click Shape Effects -> Shaddow
In the Outer section, click the middle option: Offset Center
Move the circle to the middle-left section of the top shapes
On the Ribbon, click Insert
In the Illustrations section, click Shapes and click Text Box
Click an empty area on the slide
Type W
Select the W you just typed
Change its font to Copperplate Gothic Bold and its size to 36
With the letter still selected, on the Ribbon, click Format
Click the arrow of the WordArt styles and select the middle bottom option
Click the corner of the shape that contains the letter to select it
Press Ctrl + C to copy
Press Ctrl + V to pase
Select the new W and type L to replace it
Select both shapes and move them to the circle
On the Ribbon, click Insert
In the Illustrations section, click Shapes and click Text Box
Click an empty area on the slide
Type Watts A Loan
Select the text you just typed
Change its font to Bodoni MT Black and its size to 32
With the text still selected, on the Ribbon, click Format
Click the arrow of the WordArt styles and select the Gradient Fill - Blue, Accent 1
Still in the Format section of the Ribbon, click Shape Effects -> Shadow and, in the Outer section, click the first option
Move the text box to the center of the top rectangles
Click a white area on the slide to make sure nothing is selected
On your keyboard, press Print Screen
Start a graphics application and if necessary, create a new document
Paste the contents of the clipboard (in PaintShop Pro, on the main menu, click Edit -> Paste As New Image; in Windows Paint, press Ctrl + V)
Click the Selection tool
Make a selection from the top-left corner of the top shapes to the bottom-right side of the slide
Copy the selection (you can press Ctrl + C)
Start a new file and paste the selection (in PaintShop Pro, on the main menu, click Edit -> Paste As New Image; in Windows Paint, click File -> New, when asked whether you want to save, click No, then press Ctrl + V)
Make a new selection from the top-left corner to the bottom-right corner of the top shapes just to make sure you don't touch the big shapes
Copy the selection
Start a new file and paste the selection
Save the file as bg1 and make it a GIF file. Save it in the images sub-folder of the wattsaloan folder
Make a selection that contains only the top side of the two large shapes shapes
Copy the selection
Start a new file and paste the selection
Paste in a new document (in PaintShop Pro, on the main menu, click Edit -> Paste As New Image; in Windows Paint, click File -> New, if asked whether you want to save, click No, then press Ctrl + V)
Save the file as bg2a and make it a GIF file. Save it in the images sub-folder of the wattsaloan folder
Make a new selection from the left side to the right side of the big shape without touching their top or bottom sides
Copy the selection and paste it in a new file as bg2b and make it a GIF file. Save it in the images sub-folder of the wattsaloan folder
Make a new selection from the left side, just above the rounding half circle to the bottom-right side of the big shape without touching their top or bottom sides
Copy the selection and paste it in a new file
Save the file as bg2c and make it a GIF file. Save it in the images sub-folder of the wattsaloan folder Open the index.htm file in your text editor

- If you are working from Microsoft Windows and if you have Microsoft Office, start Microsoft PowerPoint. To create a blank slide, in the Home tab of the Ribbon, in the Slides section, click the arrow of the New Slide button and click Blank
- If you are on Linux, start LibreOffice Draw
Created a rounded rectangle:
- Microsoft PowerPoint: On the Ribbon, click Insert.
  To start a rounded rectangle, in the Illustrations section, click Shapes and click Rounded Rectangle.
  Click inside the blank slide
  While the shape is still selected on the slide, on the Ribbon, click Format. Click Shape Outline -> Weight -> 1/4 pt
- LibreOffice Draw: Click the arrow of the Basic Shapes button and click Rectangle, Rounded
  
  Draw a rounded rectangle

Introduction to HTML and Graphics Files

Overview

Graphic files are used to embellish a webpage. Some HTML elements directly support pictures. In reality, you can use graphics anywhere on a webpage. You just need to be creative (CSS has better support for graphics and pictures; in fact, it is recommended that you use CSS most of the time). Two of the HTML elements that support graphics are the body and the table (and its child elements).

Most of the HTML elements that support pictures have an attribute named background. The value of this attribute is the path to a picture, including its extension.

Practical Learning: Introducing Graphics in a Webpage

Here are the pictures we will useé If you want to use them, right-click each and follow the options on the screen to save them. Save the pictures in the images folder of your website:

Background

From the root directory (the public_html directory or the wattsaloan folder), open the index.htm file

Change the file 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>

<div align="center">

  <table width="960" height="110" background="images/bg1.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="30">&nbsp;</td>
    </tr>
    <tr>
      <td width="10">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" background="images/bg2a.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>

        <br>

        <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>

      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" background="images/bg2b.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>

    <p>Our customers include:</p>

    <ul>
      <li>Individuals:
        <ul>
          <li>Personal loans</li>
          <li>Boat purchase</li>
          <li>Vehicle financing</li>
          <li>Musical instruments purchase</li>
        </ul>
      </li>
      <li>Businesses:
        <ul>
          <li>Business startup
          <li>Business improvement
          <li>Late payroll
          <li>etc
        </ul>
      </li>

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

    <p><b>Watts A Loan</b> is involved in community outreach activities, such as</p>

    <ul type="square">
      <li>Road clean-up</li>
      <li>Events sponsoring
        <ul>
          <li>Marathons</li>
          <li>Little league baseball</li>
          <li>Community farmers</li>
        </ul>
      </li>
      <li>School supplies purchase</li>
    </ul>

    <p>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>

    <hr>
      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" height="50" background="images/bg2c.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>

        <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>

      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>
</div>

</body>
</html>

Save and close the file
Open the aboutus.htm file

Change the file 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>Watts A Loan: About Us</title>

</head>
<body>

<div align="center">

  <table width="960" height="110" background="images/bg1.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" background="images/bg2a.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="30">&nbsp;</td>
    </tr>
    <tr>
      <td width="10">&nbsp;</td>
      <td>

        <h1 id="top" align="center">About Us</h1>

      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" background="images/bg2b.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>

        <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>

        <hr>

        <h2>Company Leadership</h2>

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

        <table>
          <tr>
            <td colspan="2"><h3 align="center"><h3><b>Watts A Loan</b> Owner and <abbr title="Chief Executive Officer">CEO</abbr>: Catherine Watts</h3></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><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></td>
          </tr>
        </table>

        <hr>

        <table>
          <tr>
            <td colspan="2"><h3 align="right">Marketing Director and Business Strategist: Frank Heyman</h3></td>
          </tr>
          <tr>
            <td><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></td>
            <td>&nbsp;</td>
          </tr>
        </table>

        <hr>

        <table>
          <tr>
            <td colspan="2"><h3>Human Resource and Corporate Outreach Officer: Justine Bene</h3></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
<td><p><b>Justine Bene</b> 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></td>
          </tr>
        </table>

        <hr>
   
        <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>

      <table width="350" border="8" align="center">
        <tr>
    	  <td align="center"><b>Department</b></td>
  	  <td align="center"><b title="This section includes the budget allocated to each department">Revenues</b></td>
          <td align="center"><b title="This section shows the budget fraction available for each department of the company">Margin</b></td>
        </tr>
        <tr>
          <td title="The administration includes employees payroll, community services, etc">Administration</td>
          <td align="right">3,500,000</td>
          <td align="center">23.33%</td>
        </tr>
        <tr>
          <td>Loans/Services</td>
          <td align="right">9,000,000</td>
          <td align="center">60.00%</td>
        </tr>
        <tr>
          <td>Marketing</td>
          <td align="right">1,120,000</td>
    	  <td align="center">6.80%</td>
        </tr>
        <tr>
          <td>R &amp; D</td>
	  <td align="right">1,350,000</td>
	  <td align="center">7.33%</td>
        </tr>
        <tr>
	  <td>Community Outreach</td>
	  <td align="right">480,000</td>
          <td align="center">2.53%</td>
        </tr>
      </table>

      <hr>
      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" height="50" background="images/bg2c.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>

        <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="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>

      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>
</div>

</body>
</html>

Save and close the file
Open the offices.htm file

Change the file 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>

<div align="center">

  <table width="960" height="110" background="images/bg1.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" background="images/bg2a.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="30">&nbsp;</td>
    </tr>
    <tr>
      <td width="10">&nbsp;</td>
      <td>

        <h1 align="center">Offices Locations</h1>

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

      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" background="images/bg2b.gif">
    <tr>
      <td width="320">&nbsp;</td>
      <td>

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

<table width="300">
  <tr>
    <td colspan="2"><b>Watts A Loan - Montgomery Mall</b></td>
  </tr>
  <tr>
    <td colspan="2">822 Rocket Star Ave<br>
                  Bethesda, MD 20817</td>
  </tr>
  <tr>
    <td width="50%">Office #</td>
    <td>240-469-4804</td>
  </tr>
  <tr>
    <td>Fax #</td>
    <td>240-469-4826</td>
  </tr>
</table>

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

<table width="300">
  <tr>
    <td colspan="2"><b><b>Watts A Loan - Financial</b></td>
  </tr>
  <tr>
    <td colspan="2">10715 Long Journey Rd<br>
                  Upper Marlboro, MD 20772</td>
  </tr>
  <tr>
    <td width="50%">Office #</td>
    <td>301-627-4702</td>
  </tr>
  <tr>
    <td>Fax #</td>
    <td>301-627-6815</td>
  </tr>
</table>

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

<table width="300">
  <tr>
    <td colspan="2"><b>Watts A Loan - Commercial Town</b></td>
  </tr>
  <tr>
    <td colspan="2">6915 Sonnett Blvd<br>
                  Baltimore, MD 21217</td>
  </tr>
  <tr>
    <td width="50%">Office #</td>
    <td>410-962-5005</td>
  </tr>
  <tr>
    <td>Fax #</td>
    <td>410-962-5017</td>
  </tr>
</table>

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

<table width="300">
  <tr>
    <td colspan="2"><b>Watts A Loan - Columbia Town Center</b></td>
  </tr>
  <tr>
    <td colspan="2">6204 East Patuxent Rd<br>
                  Columbia, MD 21042</td>
  </tr>
  <tr>
    <td width="50%">Office #</td>
    <td>410-730-2748</td>
  </tr>
  <tr>
    <td>Fax #</td>
    <td>410-730-2718</td>
  </tr>
</table>

      </td>
    </tr>
  </table>

  <table width="960" height="10" background="images/bg2b.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td><hr></td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

<table width="960" height="50" background="images/bg2c.gif">
  <tr>
    <td width="10">&nbsp;</td>
    <td>

<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>

    </td>
    <td width="30">&nbsp;</td>
  </tr>
</table>
</div>

</body>
</html>

Save and close the file
Open the process.htm file

Change the file as follows:

<html>
<head>

<meta name="author" content="Catherine Watts">
<meta name="keywords" content="watts, personal, business, loan, process, step">
<meta name="description" content="This webpage describes the process of applying or getting a loan from Watts A Loan.">

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

<head>
<body>

<div align="center">

  <table width="960" height="110" border="0" background="images/bg1.gif">
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>

  <table width="960" border="0" background="images/bg2a.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="30">&nbsp;</td>
    </tr>
    <tr>
      <td width="10">&nbsp;</td>
      <td>

  <h1 align="center">Loan Process</h1>

<p><b>Watts A Loan</b> makes it very easy and fast to apply for a loan, get approved, 
and receive your money.</p>
      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" border="0" background="images/bg2b.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>

<h3>Personal Loans</h3>

<p>Our core business is based on personal loans. The simple steps to apply for a loan are:</p>

<ol>
  <li>Contact us by calling our number or coming to one of our offices. We are 
conveniently located near you</li>
  <li>Fill out a short and easy-to-follow application. Of course, our employees are 
at your service to assist you</li>
  <li>Wait for one of our loan officers to contact you. Most applications are 
processed the same day and the decision is time because we are very sensitive with 
urgent situations</li>
  <li>Once a decision is made, if the loan is approved, you will sign a few documents 
for the loan payment and then you will receive a check either in the exact amount 
you requested or the amount we thought is more suitable</li>
</ol>

<h3>Purchases</h3>

<p>As opposed to applying for a loan directly through us, you may want to 
purchase an item (such as a musial instrument, a boat, a car, a motorcycle, a 
lawnmower, anything). 
<b>Watts A Loan</b> has a partnership with many local and domestic companies that sell 
cars or various types of machines and all types of devices. The steps to apply for a 
purchase are:</p>

<ol>
  <li>Contact the seller or just go to their company</li>
  <li>Select the desired item to choose and get the price</li>
  <li>Fill out the application. All those companies have their appropriate loan/purchase 
application</li>
  <li>Wait for an answer. Most applications are processed in a matter of minutes and a 
decision is made right away
    <ul>
      <li>If the loan is approved, you will sign a document for the loan payment and you 
will receive the machine or object you applied for</li>
      <li>If something did not work as expected, you will receive a response and possibly 
an explanation</li>
    </ul>
  </li>
</ol>

<h3>Business Loans</h3>

<p>We make it convenient to apply for the right loan that will help your business meet 
a timely requirement or purchase that valuable machine. We have various types of 
packages or we can customize one for your particular needs. We support:</p>

<dl>
  <dt>Budget Constraint Needs: We can help you to fill that sudden gap in your budget. We meet issues related to:</dt>
    <dd>Cash Flow: A whole in your cashier box is not a negative sign for us and we 
will deal with it</dd>
    <dd>Deficit: Whether caused by slowness based on seasonal work or a decrease in your 
sales, a deficit should not slow you down. We will make the necessary payments</dd>
    <dd>Unaccountable Business Partners: Business partners may let you down. We won't</dd>
  <dt>Payroll: We have the right amount to achieve your payroll at the last minute. We 
are quiet familiar with:</dt>
    <dd>Employees Concerns</dd>
    <dd>IRS Deadlines</dd>
</dl>

<p>We will analyze your situation and come up with the right package for you. Just contact 
us today. We can even come to your office or to meet with you anywhere.</p>

<p>Good luck and count on <b>Watts A Loan</b> to meet your financial needs</p>

<hr>
      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" height="50" border="0" background="images/bg2c.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>
<p align="center"><a href="index.htm">Home</a> | <a href="aboutus.htm">About Us</a> | <a href="products.htm">Products</a> | <a href="offices.htm">Offices Locations</a> | <a href="services/index.htm">Services</a></p>
      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

</div>

</body>
</html>

Save and close the process.htm file
Open the products.htm file

Change the file as follows:

<html>
<head>

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

<head>
<body>

<div align="center">

  <table width="960" height="110" border="0" background="images/bg1.gif">
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>

  <table width="960" border="0" background="images/bg2a.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="30">&nbsp;</td>
    </tr>
    <tr>
      <td width="10">&nbsp;</td>
      <td>

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

      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" border="0" background="images/bg2b.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>

<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>

<hr>
      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" height="50" border="0" background="images/bg2c.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>

        <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>

      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

</div>

</body>
</html>

Save and close the products.htm file
From the services folder, open the index.htm file

Change the file as follows:

<html>
<head>

<meta name="author" content="Catherine Watts">
<meta name="keywords" content="watts, personal, business, loan, service">
<meta name="description" content="This webpage describes Watts A Loan services and other corporate activities.">

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

<div align="center">

  <table width="960" height="110" background="../images/bg1.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="30">&nbsp;</td>
    </tr>
    <tr>
      <td width="10">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" background="../images/bg2a.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>

        <br>

        <h1 align="center">Services</h1>

      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" background="../images/bg2b.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>

        <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>

        <hr>
      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" height="50" background="../images/bg2c.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>

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

      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>
</div>

</body>
</html>

Save and close the services/index.htm file
From the services folder, open the outreach.htm file

Edit 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>

<div align="center">

  <table width="960" height="110" background="../images/bg1.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="30">&nbsp;</td>
    </tr>
    <tr>
      <td width="10">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" background="../images/bg2a.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>

        <br>

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

      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

  <table width="960" background="../images/bg2b.gif">
    <tr>
      <td width="10">&nbsp;</td>
      <td>

<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>

    <hr>
      </td>
      <td width="30">&nbsp;</td>
    </tr>
  </table>

<table width="960" height="50" background="../images/bg2c.gif">
  <tr>
    <td width="10">&nbsp;</td>
    <td>

      <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>

    </td>
    <td width="30">&nbsp;</td>
  </tr>
</table>
</div>

</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

The Icon in the Address Bar

If you want the browser to show an icon in the address bar when your website is accessed, create an icon graphics file:

The file must be a graphic of type icon
It must be named favicon
It must have the .ico extension
It must have a size of 16x16
The file must be installed at the root (public_html or wattsaloan) of your website

The probably question is, what application do you use to create the icon? I don't know. I personnally use Microsoft Visual Studio where I start by creating an MFC application. I cannot encourage you to install the whole Microsoft Visual Studio (it is freely available from the Microsoft website) just to design a simple icon (it is not realistic to me).