Your SlideShare is downloading. ×
0
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Html text formatting
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html text formatting

1,120

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,120
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. HTML TEXT FORMATTING
  2. AGENDA <ul><li>The following topics will be used in the body of your document: </li></ul><ul><li>Headers </li></ul><ul><li>Paragraph tags </li></ul><ul><li>Line Break tag </li></ul><ul><li>Text formatting </li></ul>
  3. HEADERS <ul><li>Headings or Headers are used to set apart the words of a title in a larger font size than the rest of the text </li></ul><ul><li>The syntax is <hn>…..</hn> where n is the value from 1 to 6 </li></ul><ul><li>There are 6 heading tags starting with <h1> as the largest through <h6> as the smallest. </li></ul>
  4. Header Example <ul><li><h1>This is the title</h1><h3>This is a subtitle</h3>This is plain text. </li></ul><ul><li>This will render as follows: </li></ul><ul><li>This is the title </li></ul><ul><li>This is a subtitle </li></ul><ul><li>This is plain text </li></ul>
  5. Headings <ul><li>Headings are block elements. Each heading will automatically appear by itself on a line, followed by a blank line. You don’t need a line break. </li></ul><ul><li>Headings have pre-set font sizes </li></ul><ul><li>Headings inherit the font colour set with the text attribute of the body tag. </li></ul><ul><li>Do not use headings to format regular text. </li></ul>
  6. Header Attributes <ul><li>It is very common for headers (titles) to be centered on a page. You use the align=center for this. You can also use align=right if you want the header or title to be right aligned </li></ul><ul><li>The syntax is: </li></ul><ul><li><h1 align=center>Georgian Bay Boats and Cottages</h1> </li></ul>
  7. THE PARAGRAPH <ul><li>Paragraphs are used to group concepts and make it easier for people to read. </li></ul><ul><li>Paragraphs are divided from each other by a single line. </li></ul><ul><li>The paragraph element was developed to accommodate this </li></ul><ul><li>Syntax for a paragraph is <p>……</p> </li></ul>
  8. Using Paragraph Tags <ul><li><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec facilisis euismod purus. Etiam euismod. Ut rutrum malesuada sapien. Fusce auctor. Fusce ac wisi et orci luctus tincidunt. Sed wisi. Sed nec dolor. Suspendisse vehicula urna in urna. Nam at nisl .</p> </li></ul><ul><li><p> </li></ul><ul><li>Phasellus sem. Morbi augue orci, molestie non, placerat ut, adipiscing id, erat. Phasellus tempor accumsan dolor. Pellentesque porttitor, nibh quis ullamcorper ullamcorper, quam quam sagittis neque, sed viverra mauris massa sit amet odio. </li></ul><ul><li></p> </li></ul>
  9. Aligning Paragraphs <ul><li>By default, most page elements are aligned to the left margin of the screen. </li></ul><ul><li>By using the align attribute in the paragraph tag we can change the alignment of each paragraph to either the center or to the right. </li></ul><ul><li>Syntax is <p align=center>……….</p> </li></ul><ul><li>Syntax is <p align=right>…………</p> </li></ul>
  10. LINE BREAKS <ul><li>Browsers read your code exactly as you write it and ignore all but one blank space as well as the carriage return (enter key) </li></ul><ul><li>Therefore, you must instruct the browser where it is to break the text and wrap it into a new line. </li></ul><ul><li>To do this we use the <br /> tag </li></ul><ul><li>Note the space between the br and the / </li></ul>
  11. Line Breaks <ul><li><p> </li></ul><ul><li>Osprey Fishing Tours<br /> </li></ul><ul><li>Box 123<br /> </li></ul><ul><li>Parry Sound<br /> </li></ul><ul><li>Call 1-705-555-1234 for information </li></ul><ul><li></p> </li></ul><ul><li>Because of the </p> tag we don’t need a <br /> at the end of the last line. Remember <p> automatically inserts a space. </li></ul>
  12. OTHER TEXT FORMATTING ELEMENTS <ul><li>Bold <b> element </li></ul><ul><ul><li>Syntax is <b>……</b> </li></ul></ul><ul><ul><li>Sometimes written as <strong>…..</strong> </li></ul></ul><ul><ul><li><p> </li></ul></ul><ul><ul><li>The rain in <b> Spain </b><br /> </li></ul></ul><ul><ul><li>Falls mainly<br /> </li></ul></ul><ul><ul><li>On the <b> plain </b>. </li></ul></ul><ul><ul><li></p> </li></ul></ul>
  13. OTHER TEXT FORMATTING ELEMENTS <ul><li>Italic <i> element </li></ul><ul><ul><li>Syntax is <i>……</i> </li></ul></ul><ul><ul><li><p> </li></ul></ul><ul><ul><li>The rain in <i> Spain </i><br /> </li></ul></ul><ul><ul><li>Falls mainly<br /> </li></ul></ul><ul><ul><li>On the <i> plain </i>. </li></ul></ul><ul><ul><li></p> </li></ul></ul>
  14. OTHER TEXT FORMATTING ELEMENTS <ul><li>Underline <u> element </li></ul><ul><li>The syntax is <u>……</u> </li></ul><ul><li>The is <u>underlined</u> </li></ul><ul><li>This is underlined </li></ul>
  15. NESTING TEXT FORMATTING ELEMENTS <ul><li>Nesting </li></ul><ul><li>Correct: <i><b> plain </b></i> </li></ul><ul><li>Incorrect: <i><b>plain</i></b> </li></ul><ul><li>Correct: <p>The rain in <b> Spain </b></p> </li></ul><ul><li>Incorrect <p>The rain in <b>Spain</p></b> </li></ul><ul><li><p> </li></ul><ul><li>The rain in <i><b> Spain </b><i><br /> </li></ul><ul><li>Falls mainly <br /> </li></ul><ul><li>On the <b><i> plain </i></b> </li></ul><ul><li></p> </li></ul>
  16. OTHER TEXT FORMATTING ELEMENTS <ul><li>Font <font> element </li></ul><ul><li>The syntax is<font attribute=value attribute=value>…..</font> </li></ul><ul><li>FONT ATTRIBUTES </li></ul><ul><ul><li>Face </li></ul></ul><ul><li> indicates the typeface </li></ul><ul><li>syntax is <font face=n> where n is the font name </li></ul>
  17. OTHER TEXT FORMATTING ELEMENTS <ul><ul><li>Size </li></ul></ul><ul><ul><li>sets the size of the text enclosed in the font tags </li></ul></ul><ul><ul><li>Syntax is <font size=n>…..</font> where n is the size 1 through 7 </li></ul></ul><ul><ul><li>Color </li></ul></ul><ul><ul><li>sets the color of the text enclosed in the font tags </li></ul></ul><ul><ul><li>Syntax is <font color=n…..</font> where n is the Hex code or a color name. </li></ul></ul>
  18. The Nested Font Tag <ul><li><font face=Arial color=green>My text</font> </li></ul><ul><li>Will render as: </li></ul><ul><li>My text </li></ul>

×