Download presentation
Presentation is loading. Please wait.
Published byKarin Hunt Modified over 8 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.