Home

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

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

      Opening a File in Linux

      Click gedit
  2. In the empty document, type:
    <html></html>
  3. 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

      Introduction to Elements

      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

  1. Change the document as follows:
    <html>
    <body></body>
    </html>
  2. 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

  1. Change the index.htm document as follows:
    <html>
    <head></head>
    <body></body>
    </html>
  2. 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

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

  1. Change the content of the document as follows:
    <html>
    <head>
    <title>Watts A Loan<title>
    </head>
    <body>
    </body>
    </html>

    Introducing the Title of a Webpage

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

      Saving a File

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

      Previwing a Webfile

      Previewing a Webpage

    After viewing the result, return to your text editor
  4. 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
  5. 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>
  6. 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

      Creating a File

      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

  1. 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>
  2. Save the file and return to the browser
  3. In the address of the browser, replace index with aboutus

    Creating Paragraphs

    Creating Paragraphs

    Creating Paragraphs

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

  1. 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>
  2. Save the file and return to the browser
  3. 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

    Creating Headings

    Creating Headings

    After viewing the webpage, return to your text editor
  4. 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

      Creating a File

    • If you are working in Microsoft Windows, on the main menu of Notepad, click File -> New
  5. 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>
  6. 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
  7. Preview the process.htm file in your browser
   
   
 

Previous Copyright © 2015, FunctionX Next