Chapter 2

1. Chapter 2 Adding and Formatting Text

2. Agenda • Creating a Paragraph • Adding a Line Break • Inserting a Blank Space • Inserting Preformatted Text • Inserting Headings • Adding Block Quotes • Inserting a Comment • Creating Lists (Numbered, Bulleted and Nested) • Creating a Definition List • Inserting Special Characters • Font Styles (Bold, Italic, Underline) • Formatting Fonts (Name, Size, Color) • Adjusting Margins • Setting a Background Page Color • Adding a Horizontal Line

3. Creating a Paragraph • The <p> tag defines a paragraph. • Browsers automatically add some space (margin) before and after each <p> element. Example <p align=“right” >This is some text in a paragraph.</p>

4. Adding a Line Break • The <br> tag inserts a single line break. • The <br> tag is an empty tag which means that it has no end tag. • The <br> tag is useful for writing addresses or poems. • Use the <br> tag to enter line breaks, not to separate paragraphs. Example: This text contains <br> a line break.

5. Inserting a Blank Space • Insert the HTML entity &nbsp; where ever you would like to add a single space ("nbsp" stands for non breaking space). • Using &nbsp; is helpful in situations where you just need one or two spaces in between characters or words. Example: Hello. &nbsp;How are you

6. Inserting Preformatted Text • The <pre> tag defines preformatted text. • Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. Tip: Use the <pre> element when displaying text with unusual formatting, or some sort of computer code. Example: <pre>Text in a pre elementis displayed in a fixed-widthfont, and it preservesboth spaces andline breaks</pre>

7. Inserting Headings • The <h1> to <h6> tags are used to define HTML headings. • <h1> defines the most important heading. <h6> defines the least important heading. Example: <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>

8. Adding Block Quotes • The <blockquote> tag specifies a section that is quoted from another source. Example: <blockquote cite="http://www.worldwildlife.org/who/index.html">For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</blockquote>

9. Inserting a Comment • The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. • You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code. Example: <!--This is a comment. Comments are not displayed in the browser-->

10. Creating Numbered Lists • The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. • Use the <li> tag to define list items.

11. Example of Ordered List <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol><ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

12. Creating Bulleted Lists • The <ul> tag defines an unordered (bulleted) list. • Use the <ul> tag together with the <li> tag to create unordered lists.

13. Example of Bulleted List <ul Type="Disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul> <ul Type="Square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

14. Creating a Definition List • The <dl> tag defines a description list. • The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name). Example: <dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>

15. Inserting Special Characters

16. Font Styles (Bold, Italic, Underline) The <b> tag specifies bold text. The <i> tag specifies italic text. The <u> tag specifies underlined text. Example: This is normal text - <b>and this is bold text</b> This is normal text - <i>and this is bold text</i> This is normal text - <u>and this is bold text</u>

17. Formatting Fonts The <font> tag specifies the font face, font size, and font color of text. Example: <font size="3" color="red">This is some text!</font><font size="2" color="blue">This is some text!</font><font face="verdana" color="green">This is some text!</font>

18. Adjusting Margins • LEFTMARGIN - Sets a left hand margin for your body element. • TOPMARGIN - Sets a margin along the top of your body element. • RIGHTMARGIN, BOTTOMMARGIN, or • MARGINWIDTH, MARGINHEIGHT. • A unique set of margin attributes are available to the body tag. These attributes work much like those of a word processing program, allowing you set pixel value margins for the left, right, top, or bottom of your website. Setting these attributes means that all the content you place within your body tags will honor the preset margin. Example: <body topmargin="50"> <body leftmargin="50">

19. The <body> tag The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

20. Adding a Horizontal Line • The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). • The <hr> element is used to separate content (or define a change) in an HTML page. Example: <h1>HTML</h1><p>HTML is a language for describing web pages.....</p><hr><h1>CSS</h1><p>CSS defines how to display HTML elements.....</p>

21. Lab 2 Write an HTML code that contains the following: • Paragraphs with different alignments • Line Breaks • Blank Spaces • Headings (h1, h2, h3, h4, h5, h6) • Comments • Lists (Numbered, Bulleted) • Font Styles (Bold, Italic, Underline) • Fonts (Name, Size, Color) • Margins • Background Page Color • Horizontal Line