Lesson 02: Fundamental HTML elements

	Introduction to HTML Elements

Fundamental Webpage Elements

The Root of a Webpage

An HTML document should contain an element referred to as the root. The name of that element is html (or HTML). Therefore the primary code of a web document is:

<html></html>

Practical Learning: Introducing the Root Element

Use the index.htm file:
- If you are working directly from the control panel of your website, click the root folder (probably public_html) to select it. Click the index.htm file and click Edit
- If you are using Microsoft Windows, start a text editor such as Notepad
- If you are using Linux, open the wattsaloan folder. Right-click the index.htm file, position the mouse on Open With
  
  Click gedit
In the empty document, type:
```
<html></html>
```
Save the file
- If you are using Microsoft Windows, on the main menu of Notepad, click File -> Save. Display the wattsaloan folder in the top combo box (you can click the arrow of the top combo box and select C:; from there, double-click wattsaloan). Set the Save As Type combo box to All Files. Set the File Name to index.htm
  
  Click Save
- If you are working directly from the file manager of your website, or if you are using Linux, click the Save button

The Body of a Webpage

The primary purpose of a webpage is to display something to a visitor, which is done on the visitor’s screen or monitor. Everything that displays on a browser must be delimited by an element named body. Because the result displayed to the visitor is part of the whole webpage, the body element must be nested in the html element.

In the body, you can put anything you want to display to the visitor.

<html></html>

Practical Learning: Introducing the Body of a Webpage

Change the document as follows:
```
<html>
<body></body>
</html>
```
Save the index.htm file

The Head of a Webpage

In some cases, the browser must do some processing, such as performing calculations, that the visitor doesn’t need to see or doesn’t care about. In fact, there are things only the browser needs to see or use internally. To include code that only assists the browser and external applications, create an element named head and include it above the body element.

Practical Learning: Introducing the Head of a Webpage

Change the index.htm document as follows:

<html>
<head></head>
<body></body>
</html>

Save the index.htm file

The Title of a Webpage

Like every document, a webpage should have a title. Unlike a formal title displayed in its document, a webpage uses a particular title that displays in the top part, such as the title bar or a tab of a browser. Such a title is created using an element named title and nested in the head element. The formula to create a webpage title is:

<html>
<head>
<title>Tax Preparation<title>
</head>
<body></body>
</html>

This would produce:

The Title of a Webpage

The basic code or structure for a webpage is:

<html>
<head>
<title><title>
</head>
<body>
</body>
</html>

Practical Learning: Introducing the Title of a Webpage

Change the content of the document as follows:

<html>
<head>
<title>Watts A Loan<title>
</head>
<body>
</body>
</html>

Save the document
- If you are working from the control panel of your site, click the Save button
- If you are using Notepad, press Ctrl + S
- If you are using gedit on Linux, click the Save button
Preview the result:
- If you are working directly in the file manager of your website, access the file from the browser by tying its address. For our example, it could be something like http://www.wattsaloan.com/index.htm)
- If you are working from Microsoft Windows, in the file utility, double-click the file. A browser should open and display the webpage
- If you are working from Linux, right-click the file and position the mouse on Open With
After viewing the result, return to your text editor
Start a new document:
- If you working directly in the file manager of your site, click the New File button. Set the file name to aboutus.htm and open it to edit it
- If you are using Notepad in Microsoft Windows, on the main menu, click File -> New
- If you are using Linux or Ubuntu, on the main menu of gedit, click File -> New

In the empty document, type the following:

<html>
<head>

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

<head>
<body>

About Us

Mission Statement

Our Mission

Our Strategy

Our Ambition

Watts A Loan Owner and CEO: Catherine Watts

Marketing Director and Business Strategist: Frank Heyman

Human Resource and Corporate Outreach Officer: Justine Bene

Finances and Revenues

</body>
</html>

Save the file:
- If you working directly on your website, click Save
- If you are using Notepad in Microsoft Windows, on the main menu, click File -> Save. Make sure the wattsaloan folder is selected in the top combo box. Set the file name to aboutus.htm. Change the Save As Type to All Files. Click Save or press Enter
- If you are using gedit in Linux, click the Save button. Set the file name to aboutus.htm
  Click Save

Fundamentals of Text on a WebPage

A Paragraph

A paragraph is text that is physically separate from other text, such as another paragraph. A paragraph is created with an element named p. Because a paragraph is displayed to a visitor, it must be created by the body element. Here is an example:

<html>
<head>
<title>Anything Here</title>
</head>
<body>
<p>Now it is time to do some things.</p>
</body>
</html>

In the same way, you can create as many paragraphs in your document. The p element is the most common element of a webpage. It can serve many goals such as nesting other elements or creating empty lines in a webpage. An empty line simply uses the element with no text. It would be created as follows:

<p></p>

Practical Learning: Creating Paragraphs

Change the content of the document as follows:

<html>
<head>

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

<head>
<body>

About Us

<p>Watts A Loan is a financial management business founded in 2002 by 
Catherine Watts upon the death of her father. The company makes up loans and 
lends money to people as well as businesses. Watts A Loan combines innovation 
in financial services, expertise in loan management, and specialization in 
particular needs. The company customers include regular people (personal loans, 
vehicle and boat financing, etc), small businesses (business startup), and 
organizations (commercial or NGO).</p>

<p>The business started with one agency. Now, it It has expanded and is 
represented in many communities in the area. Watts A Loan has offices at 
Wheaton Plaza (mall), at Montgomery Circle, and in Columbia. The company plans 
to open new agencies in other cities while it is growing.</p>

<p>Besides regular business dealings, Watts A Loan invests in financial 
responsibility (risk management), research/development, and community outreach. 
The goals are to be financially accountable and community oriented towards its 
customers and other stakeholders.</p>

Mission Statement

Our Mission

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

Our Strategy

<p>To be the most recommendable financial lending institution in the areas 
where our office is located.</p>

Our Ambition

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

Company Leadership

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

Watts A Loan Owner and CEO: Catherine Watts

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

<p>Catherine holds a Bachelor degree in business management and a Master 
degree in banking processes.</p>

Marketing Director and Business Strategist: Frank Heyman

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

<p>Frank holds a Bachelor degree in financial accounting and a Master degree in 
banking strategies. Frank is in charge of the Watts A Loan business orientation 
and financial goals.</p>

Human Resource and Corporate Outreach Officer: Justine Bene

<p>Justine Bene manages human resources as well as community outreach. She is 
in charge of all hiring steps and other personel issues. On the outreach side, 
When it comes to community outreach, Justine makes sure that the company is 
accountable to both its physical environment and its business and the 
community.</p>

<p>Justine has a Bachelor degree in human resources and holds many professional 
certifications.</p>

Finances and Revenues

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

Our financial statements include

<p>Administration 3.5M</p>
<p>Revenues</p>
<p>Margin 23.33%</p>
CO 480K

</body>
</html>

Save the file and return to the browser
In the address of the browser, replace index with aboutus

Breaking a Paragraph

Breaking a paragraph consists of suspending its line and continuing on the next line. This is done using the br element. This is one of the elements that is not closed. That is, the br element uses only the start element and no end element. Here is an example:

<p>What have you <br>done today?</p>

The Heading of a Section or Paragraph

HTML provides special types of short paragraphs named headings. In reality, they are used to create head sections or titles for paragraphs or sections of the webpage.

A heading is created using an element made of the letter h (or H of course) followed by a number as 1, 2, 3, 4, 5, or 6. As you may imagine, h stands for heading and the digit is an incremental size of the text (that digit doesn't represent the size of text; it simply sets one heading size apart from another). The digits represent an incremental rank. This means that, by default, characters created with h2 are bigger than those created with h4. Here are examples:

<h1>Tax Preparation</h1>

<p>This application is used to evaluate tax.</p>

<h2>Federal Income Tax</h2>

<p>This section is for taxes paid or owed to the federal government. The Internal 
Revenue Service (or IRS) collects such taxes.</p>

<h3>Social Security/Medicare</h3>

<p>Social security is money set aside for retirement days.</p>

<h4>State Tax</h4>

<p>Many states collect taxes for local expenses.</p>

<h5>Other Collections</h5>

<p>There are many amounts of money collected from a paycheck for different 
reasons. Examples are 401(k), health insurance, life insurance, etc.</p>

This would produce:

The Headings of a Webpage

The default behaviors of the headings can be changed in CSS. In this case, characters created using h5 could be made bigger than those created using h3.

Practical Learning: Creating Headings

Change the content of the document as follows:

<html>
<head>

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

<head>
<body>

<h1>Watts A Loan: About Us</h1>

<p>Watts A Loan is a financial management business founded in 2002 by 
Catherine Watts upon the death of her father. The company makes up loans and 
lends money to people as well as businesses. Watts A Loan combines innovation 
in financial services, expertise in loan management, and specialization in 
particular needs. The company customers include regular people (personal loans, 
vehicle and boat financing, etc), small businesses (business startup), and 
organizations (commercial or NGO).</p>

<p>The business started with one agency. Now, it It has expanded and is 
represented in many communities in the area. Watts A Loan has offices at 
Wheaton Plaza (mall), at Montgomery Circle, and in Columbia. The company plans 
to open new agencies in other cities while it is growing.</p>

<p>Besides regular business dealings, Watts A Loan invests in financial 
responsibility (risk management), research/development, and community outreach. 
The goals are to be financially accountable and community oriented towards its 
customers and other stakeholders.</p>

<h2>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 our office is located.</p>

<h3>Our Ambition</h3>

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

<h2>Company Leadership</h2>

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

<h3>Watts A Loan Owner and CEO: Catherine Watts</h3>

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

<p>Catherine holds a Bachelor degree in business management and a Master 
degree in banking processes.</p>

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

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

<p>Frank holds a Bachelor degree in financial accounting and a Master degree in 
banking strategies. Frank is in charge of the Watts A Loan business orientation 
and financial goals.</p>

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

<p>Justine Bene manages human resources as well as community outreach. She is 
in charge of all hiring steps and other personel issues. On the outreach side, 
When it comes to community outreach, Justine makes sure that the company is 
accountable to both its physical environment and its business and the 
community.</p>

<p>Justine has a Bachelor degree in human resources and holds many professional 
certifications.</p>

<h2>Finances and Revenues</h2>

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

Our financial statements include

<p>Administration 3.5M</p>
<p>Revenues</p>
<p>Margin 23.33%</p>
CO 480K

</body>
</html>

Save the file and return to the browser
Refresh the webpage (right-click the middle of the page in the browser and click an option such as Refresh or Reload) After viewing the webpage, return to your text editor

After viewing the webpage, return to your text editor
Create a file on the root directory (wattsaloan or public_html):
- If you are working directly in your website or you are using Linux, name the file as process.htm
- If you are working in Microsoft Windows, on the main menu of Notepad, click File -> New

Set the content of the document as follows:

<html>
<head>

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

<head>
<body>

<h1>Watts A Loan: 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>

<h3>Personal Loans</h3>

<p>Our core business is based on personal loans.</p>

<h3>Purchase</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.</p>

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

</body>
</html>

Save and close the process.htm file:
- If you are working directly in your website or you are using Linux, simply click the Save button
- If you are working in Notepad in Microsoft Windows, on the main menu of Notpad, click File -> Exit. When asked whether you want to save, click Save. Set the file name to process.htm. Set the Save As Type combo box to All Files. Make sure the wattsaloan folder is selected in the top combo box. Cliick Save
Preview the process.htm file in your browser