Tuesday, 3 May 2016

Learn HTML EASY TO UNDERSTAND Chapter 3

Posted on 03:25 by Juju Komariah
Chapter 3: Headings, Paragraphs & Breaks
• List and describe the different Heading elements.
• Use Paragraphs to add text to a document.
• Insert breaks where necessary.
• Add a Horizontal Rule.

In this chapter you will add headings to your page, insert paragraphs, add some breaks, and add horizontal rules.
OBJECTIVESUpon completing this section, you should be able to
1. List and describe the different Heading elements.2. Use Paragraphs to add text to a document.3. Insert breaks where necessary.4. Add a Horizontal Rule.

Headings, Paragraphs, Breaks and Horizontal RulesHeadings, <Hx> </Hx>
Inside the BODY element, heading elements H1 through H6 are generally used for major divisions of the document. Headings are not mandatory. Headings are permitted to appear in any order, but you will obtain the best results when your documents are displayed in a browser if you follow these guidelines:

  • H1: should be used as the highest level of heading, H2 as the next highest, and so forth.
  • You should not skip heading levels: e.g., an H3 should not appear after an H1, unless there is an H2 between them.
The size of the text surrounded by a heading element varies from very large in an <H1> tag to very small in an <H6> tag.
EXAMPLE:
<HTML><HEAD><TITLE>Example Page</TITLE></HEAD><BODY>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</BODY></HTML>		As displayed by the browser.

Paragraph, <P> </P>
Paragraphs allow you to add text to a document in such a way that it will automatically adjust the end of line to suit the window size of the browser in which it is being displayed. Each line of text will stretch the entire length of the window.

EXAMPLE:


<HTML><HEAD><TITLE>Example Page</TITLE></HEAD><BODY>
<H1>Heading 1</H1>
<P>Paragraph 1, ... </P>
<H2>Heading 2</H2>
<P>Paragraph 2, ... </P>
<H3>Heading 3</H3>
<P>Paragraph 3, ... </P>
<H4>Heading 4</H4>
<P>Paragraph 4, ... </P>
<H5>Heading 5</H5>
<P>Paragraph 5, ... </P>
<H6>Heading 6</H6>
<P>Paragraph 6, ... </P></BODY></HTML>
As displayed by the browser.




HTML TipIf you insert multiple empty paragraphs in succession, you will notice the browsers display these with only one blank line between them.
If you try to type two words separated by five spaces, only one space will display in the browser
Browsers ignore multiple spaces between words, within paragraphs and within tables. If you have areas where you would like extra spaces or you want your empty paragraphs to give you extra line spacing, you will want to insert a NBSP (non-breaking space). A NBSP is an invisible character that takes up one space.
To insert a NBSP type &nbsp;


Break, <BR>
Line breaks allow you to decide where the text will break on a line or continue to the end of the window. There may be instances where you want the text to appear on the next line. Example: a return address - contained in one Paragraph but on multiple lines or text in a Header, such as a title for the document.
You can insert a Forced Line Break <BR>

A <BR> is an Empty Element, meaning that it may contain attributes but it does not contain content. The <BR> element does not have a closing tag. The closing tag, </BR>, is not required as this element marks a position and does not contain content.
The <BR> element uses one attribute – CLEAR which can have a value of LEFT, RIGHT or ALL. The CLEAR attribute forces a line down; if an image is located at the page’s left margin, the clear LEFT attribute will move the cursor down to the first line that is cleared at the left margin. The same applies with the option of the clear RIGHT attribute. If an image is at either the left or right margins, the clear ALL attribute will force a line break until both margins are cleared.
Horizontal Rule, <HR>
The <HR> element causes the browser to display a horizontal line (rule) in your document. This element does not use a closing tag, </HR>. Simply type <HR> to insert a horizontal line (rule) element into your document.
Key attributes for use with the <HR> element:

AttributeDescriptionDefault Value
SIZEheight of the rule in pixels2 pixels
WIDTHwidth of the rule in pixels or percentage of screen width100%
NOSHADEdraw the rule with a flat look instead of a 3D looknot set
(3D look)
ALIGNaligns the line (Left, Center, Right)Center
COLORsets a color for the rule (IE 3.0 or later)not set

EXAMPLE:
<HTML>
<HEAD>
<TITLE>Example Page</TITLE>
</HEAD>
<BODY>
<H1>Heading 1</H1>
<P>Paragraph 1, <BR>
Line 2 <BR>
<HR>
Line 3 <BR>
... </P>
…
…
As displayed by the browser.

Chapter 3 – Exercise 1 - Headings
In this exercise you will add headings to your document.
Procedure
  1. Add an H1 to your page.
    Inside the tags key in {Your Company Name}.
  2. Add an H2 after the H1 on your page.
    Inside the tags key in {Your Division or Dept. Name.}
  3. Add an H3 after the H2 on your page.
    Inside the tags key in {A Project Name} e.g. Intranet Project.
  4. Add an H4 after the H3 on your page.
    Inside the tags key in {Project Name} Plan.
  5. Add an H3 after the H4 on your page.
    Inside the tags key in {A different Project Name} e.g. Internet Project.
  6. Add an H4 after the H3 on your page.
    Inside the tags key in {Project B Name} Plan.
  7. Your document should look something like on the next page.
SOLUTION: EXERCISE 1
<HTML><HEAD><TITLE>XYZ Corporation</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>XYZ Corporation</H1>
<H2>IS Department</H2>
<H3>Intranet Project</H3>
<H4>Intranet Project Plan</H4>
<H3>Internet Project<H3>
<H4>Internet Project Plan</H4>
</BODY></HTML>		As displayed by the browser.

Chapter 3 – Exercise 2 – Horizontal Rules
In this exercise you will add HR’s to your document.
Procedure
  1. Add a Horizontal Rule after the H1 and before the H2.
  2. Make the Horizontal Rule only 50% of the width of the screen. (Remember elements have attributes.)
  3. Add a Horizontal Rule after the last H4 on the page.
  4. Your document should look similar to the one on the next page

SOLUTION: EXERCISE 2
<HTML><HEAD><TITLE>XYZ Corporation</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>XYZ Corporation</H1>
<HR WIDTH="50%">
<H2>IS Department</H2>
<H3>Intranet Project</H3>
<H4>Intranet Project Plan</H4>
<H3>Internet Project<H3>
<H4>Internet Project Plan</H4>
<HR></BODY></HTML>
As displayed by the browser.

Chapter 3 – Exercise 3 – Paragraphs & Breaks
In this exercise you will add paragraphs and a break to your document.
Procedure
  1. Add a Paragraph between each one of the Headings. We will add content between the paragraph tags later.
  2. Add a BR in the first Paragraph so your fill looks similar to the one on the next page.

SOLUTION: EXERCISE 3
<HTML><HEAD><TITLE>XYZ Corporation</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>XYZ Corporation</H1>
<HR WIDTH="50%">
<H2>IS Department</H2>
<P><BR></P>
<H3>Intranet Project</H3>
<P></P>
<H4>Intranet Project Plan</H4>
<P></P>
<H3>Internet Project<H3>
<P></P>
<H4>Internet Project Plan</H4>
<P></P>
<HR>
</BODY>
</HTML>

As displayed by the browser.


Review Questions
    1. How do browsers handle multiple spaces?
    2. How do paragraphs format text?
    3. How many Headings are there?
    4. When would you use a Break?
    5. How would you insert a HR that is centered and half a page wide

      Summary
    As a result of this chapter, you should be able to 
    • List and describe the different Heading elements.
    • Use paragraphs to add text to a document.
    • Insert breaks were necessary.
    • Add a Horizontal Rule.
    Posted in | No comments

    0 comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)