Html text formatting


Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html text formatting

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