Lesson 05: The HTML Sections of a Webpage

	The HTML Sections of a Webpage

Fundamentals of Sections

Introduction

You need to be precise and careful about positioning items such as text, paragraphs, pictures, etc, on your webpages. Bad positioning can make your webpage weird or unorganized. Fortunately, HTML (and especially CSS) provides many tools to assist you.

You can create one or more sections in your webpage so that you can treat each section independently and manage it individually. HTML provides different types of sections, each using its own tag. Most sections behave as containers. That is, a section can be used to contain text and other types of objects for which it acts as parent.

Horizontal Line

One way you can create a section on a webpage is to display a horizontal line. This is done by creating an element using the hr tag. Here are examples:

<h1>F#: Object-Oriented Programming</h1>
<p>Here are examples of creating records:</p>

<hr>

<pre>type Employee = {
    EmployeeNumber : string
    FirstName      : string
    LastName       : string
    HourlySalary   : float }<pre>

<hr>

<pre>type OccupancyStatus =
| Other       = 0
| Available   = 1
| Occupied    = 2
| NeedsRepair = 3

type Apartment = {
    UnitNumber      : string
    Bedrooms        : int
    Bathrooms       : float
    SecurityDeposit : int
    MonthlyRate     : int
    Status          : OccupancyStatus }</pre>

<hr>

<pre>type Employee = {
    EmployeeNumber : string
    FirstName      : string
    LastName       : string
    HourlySalary   : float }

and
    StoreItem = {
        ItemNumber  : int
        Category    : string
        SubCategory : string
        ItemName    : string
        ItemSize    : string
        UnitPrice   : float
        DaysInStore : int
        Status      : string }</pre>

An abbreviation

An abbreviation is a technique of using a few letters or a combination of letters and digits to represent a longer definition. To indicate that you want to show an abbreviation, create an element named abbr. Normally, creating an abbr element doesn't do anything. To indicate that a word represents an abbreviation, you should add a title attribute to it and give the complete definition as the value of that attribute.

Practical Learning: Definining an Abbreviation

Open the aboutus.htm file

Edit the aboutus.htm 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>

<h1 id="top">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 <abbr title="Non-Governmental Organization">NGO</abbr>).</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 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 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 <abbr title="Chief Executive Officer">CEO</abbr>: 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 id="finances">Finances/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 title="The administration includes employees payroll, community services, etc">Administration 3.5<abbr title="Millions">M</abbr></p>
<p title="This section includes the budget allocated to a department">Revenues</p>
<p title="This section shows the budget fraction available for each department of the company">Margin 23.33%</p>
<abbr title="Community Outreach">CO</abbr> 480<abbr title="K stands for kilos. It represents thousands">K</abbr>

</body>
</html>

Save the aboutus.htm file
Preview the file

Spanning a Section

HTML provides text-based elements that can be used in a paragraph element to simply change how a character, a word, or a section behaves. Examples of such elements are b, u, em, strong, etc. Sometimes you want to do something other than underlining or italicizing text. To assists you with this, HTML provides a tag named span. By itself, the span element does nothing. You will decide what to do with it. At the same time, span is used where you don't want to (or cannot) formally use an HTML tag. One of the roles and advantages of the span element is that it can be used just about anywhere, such as inside a paragraph.

Practical Learning: Spanng an Section

Edit the aboutus.htm file as follows:

. . .

Our financial statements include

<p><span title="The administration includes employees payroll, community services, etc">Administration</span> 3.5<abbr title="Millions">M</abbr></p>
<p><span title="This section includes the budget allocated to a department">Revenues</span></p>
<p><span title="This section shows the budget fraction available for each department of the company">Margin</span> 23.33%</p>
<abbr title="Community Outreach">CO</abbr> 480<abbr title="K stands for kilos. It represents thousands">K</abbr>

</body>
</html>

Save and close the aboutus.htm file

A Division

You may already know that the p element is used to create a group of objects, such as a group of characters to get a paragraph of text. Instead of designating the group as a paragraph, HTML provides an alternate element created with a tag named div. Like span, the div element doesn't do anything significant by itself. Unlike the span element that can be nested almost anywhere, the div element is used to create a section like a paragraph. This means that div creates a section that starts on its own line. Here are examples:

<html>
<head>

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

<head>
<body>

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

<div align="center">

<h2>Mission Statement</h2>

<h3 align="center">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>

</div>

<h2 align="left">Company Leadership</h2>

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

<div>

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

  <h3 align="center">Marketing Director: Frank Heyman</h3>

  <h3 align="right">Human Resources Officer: Justine Bene</h3>

</div>

<p align="center">Our financial statements include</p>

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

</body>
</html>

This would produce:

Creating a Division

A Blockquote

Published scholar papers usually contain citations to give credits to authors of formal and interesting quotes. Some of the quotes are created in indented paragraphs. To let you create such a paragraph, HTML provides a tag named blockquote. Normally, a block quote behaves like a section; that is, it serves as a contrainer. In its body, you can directly create text or nest other elements such as paragraphs, etc. Here is an example:

<html>
<head>

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

<head>
<body>

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

<div align="center">

<h2>Mission Statement</h2>

<h3 align="center">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>

</div>

<h2 align="left">Company Leadership</h2>

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

<div>

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

  <h3 align="center">Marketing Director: Frank Heyman</h3>

  <h3 align="right">Human Resources Officer: Justine Bene</h3>

</div>

<p align="center">Our financial statements include</p>

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

</body>
</html>

This would produce:

Creating a Bloquote

Other Means of Creating Sections

Introduction

A section is an area you want to delimit in a web page, for any reason. Usually, you create a section because you want to put some items in a group, such as things on the left side of the page, things on the right side of the page, things in the middle (or center part) of the page, etc.

A section is created using a tag named section. Simply creating a section tab only starts a new empty paragraph but it doesn't do anything significant. To make it useful, you must add "content" to it. The section can contain paragraphs of text, etc. Only you will decide why you need a section and what you want to do with it.

A header

A webpage that displays to a visitor may be made of different parts. The top section can be referred to as header. To create a section for such a part, create an element named header. Such a section is made to hold an introduction to the webpage.

A Section Aside

A technique to create a section is by using a tag named aside. A section created as this element is supposed to be related to the other contents of the same page.

A Footer

The bottom part of a webpage can be referred to as footer. To specify a section for such a part, create a section named footer. The section can be made to contain such items as a copyright notice or a navigational menu.

An Article

An HTML article is a section that can be accessed, used, and managed independently from the rest of a web page. Examples of articles are: responses to webpages at the ends of news articles, reactions posted in a forum, etc.

To create an HTML article, add a tag named article. When creating an article, it is suggested that its first child be a heading (h1 to h5) that identifies what the article is used for.

An Address Section

The address section is an area where you want to show the contact information. To create such a section, use a tag named address.

A Figure

A figure is a section you want to use in your webpage any way you see fit. To get such a section, create an element named figure. You can then put anything you want in that section.

It is recommanded that you usually add a caption to a figure section. To do this, add an element named figcaption and put any short sentence you want in it.