1. Web Page Design XHTML Lesson 4

2. Adding Structure 4 A div tag –Used to divide up a web page and to add structural meaning to the page. –Will not change the look of the page. –A div tag is like a container, or parent tag.

3. Sample of a div tag 4 links 4 Div id names can not be shared. 4 Div tags can be nested. Just make sure they are all closed in the correct order.

4. Lists 4 Clearly organizes information.

5. Instead of… The first five Presidents of the United States, in order, were George Washington (1789- 1797), John Adams (1797-1801), Thomas Jefferson (1801-1809), James Madison (1809-1817), and James Monroe (1817- 1825)

6. In a List, it looks like…. The first five Presidents of the United States, in order, were George Washington (1789-1797) John Adams (1797-1801) Thomas Jefferson (1801-1809) James Madison (1809-1817) James Monroe (1817-1825)

7. 2 Main Types of Lists 4 Unordered Lists (bulleted lists) 4 Ordered Lists (numbered lists)

8. Unordered Lists Tells the web browser you are starting a list. tells the browser the list is done. Each item in your list

9. Example of Unordered List George Washington (1789-1797) John Adams (1797-1801) Thomas Jefferson (1801-1809) l George Washington (1789-1797) l John Adams (1797-1801) l Thomas Jefferson (1801-1809)

10. Ordered Specific order lists Each item in your lists

11. Example of Ordered List George Washington (1789-1797) John Adams (1797-1801) Thomas Jefferson (1801-1809) 1. George Washington (1789-1797) 2. John Adams (1797-1801) 3. Thomas Jefferson (1801-1809)

12. Go Try It! 4 Key in the following in Notepad: –Use appropriate HTML, Head, Title, and Body tags –Title “How to Make a Peanut Butter and Jelly Sandwich” –Heading 1 “Ingredients” List the ingredients in an unordered list 4 Save & View

13. Continued… 4 After the ingredients lists, key in the following: –Heading 1 “Preparation” List the preparations in an ordered list 4 Save again and view in Netscape

14. Adding Hyperlinks 4 Hyperlinks are what makes the web so popular. It allows a user to jump from page to page by the click of a mouse. To understand how hyperlinks work, you must first understand URLs (Uniform Resource Locators).

15. URLs 4 An address for every web site.

16. Linking to Other Web Sites 4 Anchor Tag –An Anchor Tag creates a link.

17. Anchor Tag your text 4 href stands for Hypertext Reference 4 The URL part is where you should put the full URL of the site you wish to link to. 4 The text part is where you put the text that you want to be highlighted as the clickable link.

18. Example: For more information, Visit Yahoo! For more information, visit Yahoo!

19. Types of Links  Local links  Links to other Web pages on your Web site linked pages must be in the same folder  External links  Links to other web sites must include entire url – “http://www.wsu.edu”  Email Link  Links to email address mailto: jswett@egreen.wednet.edujswett@egreen.wednet.edu  Jump (same page) links  Links to set anchors on your page

20. Example: The first five Presidents of the United States, on order, were George Washington (1789- 1797) John Adams (1797-1801) Thomas Jefferson (1801-1809) 1. George Washington (1789-1797) 2. John Adams (1797-1801) 3. Thomas Jefferson (1801-1809)

21. Try Links 4 Create small HTML files that just include the name of each ingredient with the correct tags. 4 Add local links on your peanut butter and jelly sandwich web page. 4 Add external links to your favorite peanut butter/jelly/bread sites. 4 Add an email link

22. Jump (same page) Links 4 A link to jump to a specified place in the web page. Set the anchor tag where you want your audience to jump to. 4 Create Anchor Tag – 4 Link to the anchor tag – 4 Add 5 links to your Andes Coffee Story