Home

Introduction to HTML Text Elements

   

Introduction to Text Formatting

 

Preformatted Text

Text in any document, including a webpage, uses font, which is an artistic design of letters and symbols. Based on the design of a particular font, some letters are wider or narrower than others. If you want the browser to apply a fixed width to each letter or symbol, you must indicate that the browser must use a pre-formatted technique.

To display text in a pre-formatted way, apply an element named pre.

Practical Learning: Adding Preformatted Text

  1. Open the aboutus.htm file in your text editor
  2. Change the content of 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>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 <abbr title="Non-Governmental Organization">NGO</abbr>).</p>
    
    <p>The business started with one agency. Now, 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 individuals (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, 
    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>
    
    <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 and 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>
    
    </body>
    </html>
  3. Save the file and return to the browser
  4. Refresh the webpage

    Preformatted Text

    After viewing the webpage, return to your text editor

Coding Text

Another technique to display text in a pre-formatted way is by using an element named code. Here is an example:

<html>
<head>
<title>C# Programming</title>
</head>
<body>
<p>Here is an example of a class in C#:</p>

<code>class Employee
{
    string EmployeeNumber;
    string FirstName;
    string LastName;
    double HourlySalary;
}</code>

<p>Now you can create objects from that class.</p>
</body>
</html>

This would produce:

Coding Text

There are differences between the pre and the code elements:

  • A code element can be nested in a paragrph but a pre element should never be nested in a paragrph
  • Line breaks are built in the pre element. This means that the pre element is equipped to display text as it is created. Line breaks are not built in the code element. If you want to have line breaks, you can add br elements. Here are examples:
    <html>
    <head>
    <title>C# Programming</title>
    </head>
    <body>
    <p>Here is an example of a class in C#:</p>
    
    <code>class Employee<br>
    {<br>
        string EmployeeNumber;<br>
        string FirstName;<br>
        string LastName;<br>
        double HourlySalary;<br>
    }</code>
    
    <p>Now you can create objects from that class.</p>
    </body>
    </html>
    This would produce:

    Coding Text

A Smaller Text

The browser uses some default ways to display things on the monitor. For example, if you donít specify how text should be dealt with, there is a default size that the browser will apply to text. If you want text to appear smaller than that default, apply an element named small. Here is an example:

<p>Data mining is a technique used in data analysis to identify 
patterns, <small>repeating occurrences</small>, in a series of records</p>

This would produce:

Small Text

A Bold Text

To create bold text, use either the b or the strong tag.

Practical Learning: Creating Bold Text

  1. Change the content of the document 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><b>Watts A Loan</b>: About Us</title>
    
    <head>
    <body>
    
    <h1>Watts A Loan: About Us</h1>
    
    <p><b>Watts A Loan</b> 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. <b>Watts A Loan</b> 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 has expanded and is 
    represented in many communities in the area. <b>Watts A Loan</b> 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, <b>Watts A Loan</b> 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><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 lives and challenge other financial 
    institutions. Although primarily aiming to cater to individuals (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><strong>Frank Heyman</strong> 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 <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. On the outreach side, 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><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 and 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>
    
    </body>
    </html>
  2. Save the file and return to the browser
  3. Refresh the webpage:

    A Bold Text

    A Bold Text

    After viewing the webpage, return to your text editor

Italicized Text

To italicize text, apply either the i or the em element.

Practical Learning: Italicizing Text

  1. Change the content of the document 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 <b>Watts A Loan</b>.">
    
    <title><b>Watts A Loan</b>: About Us</title>
    
    <head>
    <body>
    
    <h1><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 upon the death of her father. The company makes up 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 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 has expanded and is 
    represented in many communities in the area. <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 agencies in other cities while it is growing.</p>
    
    <p>Besides regular business dealings, <b>Watts A Loan</b> invests in financial 
    responsibility (<em>risk management</em>), 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><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 lives and challenge other financial 
    institutions. Although primarily aiming to cater to individuals (<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 degree in business management and a Master 
    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 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 <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. On the outreach side, 
    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><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 and 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>
    
    </body>
    </html>
  2. Save the file and return to the browser
  3. Refresh the webpage:

    Italicized Text

    After viewing the webpage, return to your text editor

Underlined Text

To underline text, apply the u element. Here is an example:

<h3><u>Car Purchase Project</u></h3>

<p>The following study was made to compare three cars: the <u>Honda CR-V</u>, 
the <u>Chevrolet Equinox</u>, and the <u>Volkswagen Tiguan</u>, all 2013 made.</p>

This would produce:

Underlining Text

You can nest an underlined element in a heading or nest a heading in an underline element. Make sure you appropriately close the element that is nested.

Practical Learning: Underlining Text

  1. Create a new file named offices.htm
    • If you working directly in the Control Panel of your website, in the left frame, click your home directory (probably html_public). Click the New File button. Name the new file as offices.htm and click Create New File
    • If you are working from Microsoft Windows, start Notepad
    • If you are working from Linux and you are using Ubuntu, display a file explorer, click wattsaloan in the left frame. Right-click the right frame and click New File. Set the file name as offices.htm and press Enter twice
  2. In empty document, type:
    <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>
    
    <img src="images/banner1.png">
    
    <h1>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>Home | About Us | Products | Small Business Administration</p>
    
    </body>
    </html>
  3. Save and close the file
    • If you working directly in the Control Panel of your website, in the left frame, click the Save button
    • If you are working from Microsoft Windows, on the main menu of Notepad, click File -> Exit. When asked whether you want to save the file, click Save. Make sure the wattsaloan folder displays in the top combo box. Set the file name to offices.htm. Set the Save As Type combo box to All Files. Click Save
    • If you are working from Linux and you are using Ubuntu, close the file. When asked whether you want to save, click Yes
  4. Preview the file

    Underlining Text

  5. Close the browser
 
 
 

Striking Through Text

To strike through text, apply the s or the strike element. Here are examples:

<h3><u>Vehicle Purchase</u></h3>

<p>The following study was made to compare three <s>cars</s> vehicles: 
the <u>Honda CR-V</u>, the <u>Chevrolet Equinox</u>, and the <u>Volkswagen 
Tiguan</u>, all <strike>2013</strike> 2015 made.</p>

This would produce:

Striking Through Text

Elevating Text

To display text higher on a line than the other characters of the same line, apply the sup element. Here is an example:

<p>In geometry, if two sides of a right triangle are known, the other side can 
be evaluated using the following Pythagorean equation:</p>
<pre>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></pre>

Sub-Fixing Text

To display text lower on a line compared to the alignment of the other characters on the same line, apply the sub element. Here is an example:

<p>Nitrogen dioxide can be produced as follows:</p>
<pre>2NO<sub>2</sub> + H<sub>2</sub>O<sub>2</sub> -> 2HNO<sub>3</sub></pre>

Special Characters

 

Introduction

a special character is one for which the browser needs a particular instruction to rightly display. Some of those characters may conflict with HTML code. For example, if you include the & character in your text, the browser would first think that the character is part of code. In some other cases, a character you want to use is not part of the English language, so it may not display appropriately.

HTML support a huge set of special characters managed by W3. To insert a special character in your page, if you already know its code, just type it. Otherwise, get the HTML code of that character and type it where desired.

The code of a special character starts wit &. Some symbols are represented with a number, some symbols are represented with letters, and some symbols are represented by either numbers or letters. The code of an HTML symbol ends with a semicolon.

HTML Symbols

At this time, you might have realized that HTML uses a few symbols to delimit its tags. These include <, &, /, or >, etc. Some of those characters must be displayed in webpages when drealing with their topics. For example, the < and the > symbols are used in science (such as mathematics) and computer programming to perform comparisons. In the same way, the & symbol is used by many programming languages. To display symbols used in HTML, you should provide special code to the browser. The most common symbols are:

HTML Symbol Name Code
< Less Than &lt;
> Greater Than &gt;
& Ampersand &amp;

Classic Special Characters

Probably when you hear about special characters in a webpage, some symbols automatically come to your mnd. They are:

HTML Symbol Name Code
' Single-Quote &#39;
" Double-Quote &quot;
© Copyright &copy;
  Non-Breaking Space &nbsp;
® Registered &reg;
° Degree &deg;
± Plus or Minus &plusmn;
¥ Japanese Currency &yen;
Euro Currency &euro;

Just to name a few.

Non-English Characters

HTML also supports characters from various languages, both latin-based and non-latin based.

Practical Learning: Using Special Characters

  1. Change the document 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 <b>Watts A Loan</b>.">
    
    <title><b>Watts A Loan</b>: About Us</title>
    
    <head>
    <body>
    
    <h1><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 upon the death of her father. The company makes up 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>The business started with one agency. Now, it has expanded and is 
    represented in many communities in the area. <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 agencies in other cities while it is growing.</p>
    
    <p>Besides regular business dealings, <b>Watts A Loan</b> invests in 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 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><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 individuals (<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. On the outreach side, 
    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&#039;s degree in human resources and holds many professional 
    certifications.</p>
    
    <h2 id="finances">Finances & 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 & 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>
    
    </body>
    </html>
  2. Save the file and return to the browser
  3. Refresh the webpage:

    Special Characters

    After viewing the webpage, return to your text editor

Other Techniques of Formatting Text

 

Citing Text

Citing consists of giving credit to the author of a piece of work. To assist you with this, HTML provides an element named cite. You can create it inside a paragraph or any section. Here are example:

<html>
<head>
<title>Database Management: Security</title>
</head>
<body>

<h4>Database Management: Security</h4>

<p>One of the techniques to secure a database <cite>object</cite> is through 
a trigger, which is an action performed when an event occurs on a database 
or on a table (or view).</p>

</body>
</html>

This would produce:

Citing Text

Another technique to quote someone's work is with the q element.

Quoting Text

Quoting text is a technique to indicate someone else's words. To create such as a quote, nest an element named samp in a paragraph. Here is an example:

<html>
<head>
<title>Database Management: Security</title>
</head>
<body>

<h4>Database Management: Security</h4>

<p>One of the techniques to secure a database <cite>object</cite> is through 
a <samp>trigger</samp>, which is an action performed when an event occurs on a 
database or on a table (or view).</p>

</body>
</html>

This would produce:

Quoting Text

A Keyboard Quote

In your HTML code, you may want to indicate that a certain character, a word, or a section needs the assistance of the visitor's keyboard. To provide this information, create an element named kbd. Here is an example:

<html>
<head>
<title>Database Management: Security</title>
</head>
<body>

<h4>Database Management: Security</h4>

<p>One of the techniques to secure a database <cite>object</cite> is through 
a <samp>trigger</samp>, which is an <kbd>action</kbd> performed when an event 
occurs on a database or on a table (or view).</p>

</body>
</html>

Simply creating this element doesn't mean that your webpage will behave in any significant way. It will only display display the character, word, or section is a way different from the other characters of the same parent element.

This would produce:

A Keyboard Quote

Defining a Term

A term definition is text that is attached to a paragraph. That term is typically created in the paragraph element. To get a term definition, nest an element named dfn to a paragraph. Here is an example:

<html>
<head>
<title>Database Management: Security</title>
</head>
<body>

<h4>Database Management: Security</h4>

<p>One of the techniques to secure a database <cite>object</cite> is through 
a <samp>trigger</samp>, which is an <kbd>action</kbd> performed when an event 
occurs on a database or on a table (or <dfn>view</dfn>).</p>

</body>
</html>

This would produce:

Defining a Term

Indicating Inserted Text

When different people work on the same document, they may want to indicate when there is new addition to a document. To indicate that new text has been added, you can include it in an element named ins.

If the inserted text is long, such as many lines or a whole paragraph, you can nest a section or a p element in an ins element.

To indicate text that has been deleted, create it in an element named del

Practical Learning: Indicating Intention to Insert Text

  1. Change the document 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 <b>Watts A Loan</b>.">
    
    <title><b>Watts A Loan</b>: About Us</title>
    
    <head>
    <body>
    
    <h1><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 upon the death of her father. The company <ins>creates</ins>makes up 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><ins><b>Watts A Loan</b></ins>The business started with one 
    <ins>office</ins>agency. Now, <ins>I</ins>it has <ins>lately </ins>expanded and is 
    <ins>now</ins> represented in many communities in the area. <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 <ins>office</ins>agencies 
    in other cities while it is growing.</p>
    
    <p>Besides regular business <ins>activities</ins>dealings, <b>Watts A Loan</b> 
    <ins>is committed to</ins>invests in 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 <ins>its</ins>our office is <ins>are </ins>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 individuals (<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. On the 
    outreach side, <ins>When it comes to community outreach</ins>, Justine makes 
    <ins>en</ins>sure<ins>s</ins> that the company is accountable to both its 
    physical environment and its business and the community.</p>
    
    <p>Justine has a Bachelor&#039;s degree in human resources and holds many professional 
    certifications.</p>
    
    <h2 id="finances">Finances & 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>
    
    </body>
    </html>
  2. Save the file and return to the browser
  3. Refresh the webpage:

    Indicating Intention to Insert Text

    After viewing the webpage, return to your text editor

Indicating Deleted Text

To indicate text that has been deleted, create it in an element named del

Practical Learning: Indicating Intention to Delete Text

  1. Change the document 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 <b>Watts A Loan</b>.">
    
    <title><b>Watts A Loan</b>: About Us</title>
    
    <head>
    <body>
    
    <h1><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 <del>upon the death of her father</del>. The company <ins>creates</ins><del>makes up</del> 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><ins><b>Watts A Loan</b></ins><del>The business</del> started with one 
    <ins>office</ins><del>agency</del>. <del>Now, i</del><ins>I</ins>t has <ins>lately </ins>expanded and is 
    <ins>now</ins> represented in many communities<del> in the area</del>. <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 <ins>office</ins><del>agencies</del> 
    in other cities while it is growing.</p>
    
    <p>Besides regular business <ins>activities</ins><del>dealings</del>, <b>Watts A Loan</b> 
    <ins>is committed to</ins><del>invests in</del> 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 <ins>its</ins><del>our</del> office<del> i</del>s <ins>are </ins>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 individuals (<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. <del>On the 
    outreach side, </del><ins>When it comes to community outreach</ins>, Justine <del>makes</del> 
    <ins>en</ins>sure<ins>s</ins> that the company is accountable to <del>both its 
    physical environment and its business and</del> the community.</p>
    
    <p>Justine has a Bachelor&#039;s degree in human resources and holds many professional 
    certifications.</p>
    
    <h2 id="finances">Finances & 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>
    
    </body>
    </html>
  2. Save and close the aboutus.htm file
  3. Refresh the webpage

    Indicating Deleted Text

   
   
 

Previous Copyright © 2015, FunctionX Next