HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.
13
HTML Overview Part 2 – Paragraphs, Headings, and Lines 1
-
Upload
grant-hopkins -
Category
Documents
-
view
227 -
download
0
Transcript of HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.
HTML OverviewPart 2 – Paragraphs, Headings, and Lines
1
Creating Paragraph Breaks (p 47)
The body of an HTML document includes the content and the tags that format that content.
Paragraphs Text enclosed by <p> and </p> is a
paragraph. Paragraph tags are paired. The paragraph tags add a blank line after
the paragraph.
2
HTML Paragraph Example
<p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p>
Creating Line Breaks (p 47)
Line Breaks You can add a new line anywhere in your
content using the <br /> tag. It does not have to be paired.
The <br /> element is an empty HTML element. It has no end tag.
When you add a line break, extra space is NOT added to the document.
When you add a line break, you are working within the same paragraph formatting.
4
HTML Line Break Example
<p>This is<br />a para<br />graph with line breaks</p>
Headings (p 47)
Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the document structure.
Headings are defined with the <h1> </h1> to <h6> </h6> tags.
Heading tags are paired.
6
Headings (p 47)
There are six levels of headings, numbered 1 (largest) to 6 (smallest).
<h1> defines the most important heading. <h6> defines the least important heading.
Heading tags are:<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
7
Headings Example
<html><body>
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>
</body></html>
Adding Horizontal Rules (p 48)
The <hr /> tag places a horizontal rule (line) across the width of the browser window.
The tag does not have to be paired.
Horizontal rules can be used to separate text or sections of your page.
9
Horizontal Rule Example
<p>The hr tag defines a horizontal rule:</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p>
Formatting Horizontal Rules (p 48)
Tags may also contain attributes in the start tag.
An attribute is added to the start tag and changes the element’s appearance.
Adding the width=“50%” attribute to the <hr /> tag creates a horizontal rule that is 50% as wide as the browser window:
<hr width=“50%”> Other attributes of the <hr /> tag are:
<hr size=“value”> - specifies thickness of the rule in pixels
<hr align=“value”> - specifies alignment of the rule (left, center, right). Default is centered.
11
HTML Tags
Tag Description
<p> </p> Defines a paragraph within the body of the document. Starting a new paragraph places a blank space between paragraphs.
<br /> Creates a line break in the HTML document.
<h1> </h1> Formats the text between the tags as the largest heading style.
<h2> </h2> Formats the text between the tags as the smallest heading style
<hr /> Places a horizontal rule across the page.
width=“value” Width Attribute – specifies the width of the rule as a percentage of the page width
size=“value” Size Attribute – specifies the height of the rule in pixels
align=“value” Alignment Attribute – specifies the alignment of the rule as left, right, or center
Assignment
13
Work through the W3Schools tutorials about paragraphs: http://www.w3schools.com/html/html_paragraphs.aspand headings: http://www.w3schools.com/html/html_headings.asp
Complete Practice: Computer Viruses – part 1 of 5 on page 48-49 of the binder. Save it as lastname_computer_viruses.html
