Formatting Pages with HTML

1. Formatting Pages with HTML Lesson 2

2. Lesson Topics • Using Titles • Adding and Formatting Text • Working with Preformatted Text • Using Paragraphs and Line Breaks • Creating Lists • Adding and Formatting Tables • Understanding Anchors • Creating Hyperlinks • Adding Colors to a Web Page

3. Using Titles • Every HTML page should have a title • Appears in the browser's Title bar • Other uses of titles • Search engines • Bookmarks • Favorites lists • The title should provide an accurate page description • Possibly a keyword • Title tags are placed inside Head tags

4. Using Titles • To add a title to a page • Open the document in Notepad • Place insertion point to right of opening Head tag – press Enter key – • Enter opening Tag, title, closing tag

5. Using Titles • Save the HTML file, load into browser • Note title displayed in Title bar

6. Adding and Formatting Text • Text is usually the single most important element of a Web page • Used for … • Communicating information • Emphasizing ideas • Captions for graphics • Alternative link objects • Text can be customized to complement the style of a Web site

7. Headings Body Formatting tags which italicize the text Adding and Formatting Text To add text to a page • Place insertion point after closing Title tag. • Type tags and text as shown

8. Adding and Formatting Text Home page as displayed in a browser Formatted as a Header1 Formatted, italicized body text

9. Working with Preformatted Text • Different browsers display Web page elements differently • Preformatted text enables viewing of source text and browser display to be the same • Web page retains spacing and line brakes from text in the HTML document • Tags used are <PRE> and </PRE> • Formatted text enclosed in these tags will enable browsers to read and display text as intended

10. Preformatted text opening and closing tags Note spacing Underline tags Working with Preformatted Text Preformatted text in HTML document

11. Working with Preformatted Text Preformatted text in a browser Preformatted text appears exactly as it did in the HTML source document

12. Using Paragraphs and Line Breaks • Paragraphs are created with the <P> tags • They break the text and insert a blank line • Same thing can be done with line breaks • <BR> tags force a ling break without inserting a blank line • Useful for quotes or poems where extra vertical space is unwanted • Both tags start text following the break on left side of the page

13. Using Paragraphs and Line Breaks Note the paragraph and Line Break tags

14. Spacing after paragraphs greater than spacing between line breaks Note result of line breaks displayed Using Paragraphs and Line Breaks Paragraphs and line breaks displayed in browser

15. Using Paragraphs and Line Breaks Note spacing without the paragraph and line break tags.

16. Creating Lists • Lists are effective ways to organize information on a Web page • HTML instructions include tags for a variety of types of lists • Preformatted text will show as a list • However, list commands provide more control over appearance • Types of lists • Ordered - for outlines • Unordered - bulleted lists, the most common • Definition - for glossaries, where a word is paired with a definition

17. Specify the type of list List items Creating Lists Commands and text for an unordered list.

18. Bullet marks each list item Creating Lists Unordered list as displayed in a browser

19. Adding and Formatting Tables • Tables often used to organize information • Structured • Attractive • Made up of cells formed by intersection of columns and rows • HTML document requires careful thought and planning to divide the information into columns and rows • Tables more easily created with preformatted text … but … • Cannot add captions, borders, cell spacing • Cannot do row or column formatting

20. Table tag Number of <TR> tags specifies the number of rows in the table Table header tags Adding and Formatting Tables Table created in an HTML document

21. Adding and Formatting Tables Attribute added to the Table tag

22. Five columns as specified Two rows as specified Border appears with value specified in the Table attribute Adding and Formatting Tables Table displayed in a browser

23. Understanding Anchors • Anchors are used to create links to specific sections of a Web page • Link from top to bottom or vise-versa • Anchor is first created • This is what is referenced when link is constructed • Marks the destination location to which the browser navigates • Create anchor with <A Name = …> tag and attribute • Value for the Name attribute is the name of the anchor

24. Name of the anchor Makes the entire paragraph the anchor Understanding Anchors Place the anchor in the list item at the end of the page.

25. Links to the anchor with the name specified HREF means Hypertext REFerence Understanding Anchors Create the link to the anchor at the top of the page

26. Link text Understanding Anchors Link to an anchor in a browser Anchor text

27. Creating Hyperlinks • Hyperlinks are the essence of the World Wide Web. • Pieces of text or images • Enable you to jump to other pages on your site or any other site • Enable many other tasks (download files, send e-mail, play audio, play video, etc.) • An anchor "bookmarks" a location on the same page • A Hyperlink is what links to that location

28. Creating Hyperlinks • The Anchor tag with the HREF = attribute is used • The value of the attribute is the file name which is the target of the link • The text within the anchor is the link within the current page

29. Creating Hyperlinks Hyperlink as it appears in the browser

30. Adding Colors to a Web Page • HTML commands can specify color for • Background • Text • Hyperlinks • Tables • Borders • Default colors for an entire page may be set • Colors may be specified to individual objects or text

31. Attributes for setting default colors Values specify the exact colors Adding Colors to a Web Page Colors are specified as attributes

32. Adding Colors to a Web Page Resulting color changes viewed in the browser