1 / 26

Creating Web Pages with Links, Images, and Formatted Text

Learn how to create a homepage and enhance web pages with images, links, and formatting techniques. Use absolute and relative paths, align text, change bullet types, and add background images.

johncovington
Télécharger la présentation

Creating Web Pages with Links, Images, and Formatted Text

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Project 3 Creating Web Pages with Links, Images, and Formatted Text

  2. Project Objectives • Create a home page and enhance a Web page using images • Use absolute and relative paths • Align and add bold, italics, and color to text • Change the bullet type used in an unordered list • Add a background image • Add a text link to a Web page in the same Web site • Add an e-mail link • Add an image with wrapped text • Add links to targets within a Web page Project 3: Creating Web Pages with Links, Images, and Formatted Text

  3. Entering HTML Tags to Define the Web Page Structure <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Plant World Homepage</title> </head> <body> </body> </html> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  4. Adding an Image <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Plant World Homepage</title> </head> <body> <img src="plantworldlg.jpg“ width="720“ height="84“ alt="Plant World logo" /> </body> </html> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  5. Adding a Left-Aligned Heading with a Font Color <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Plant World Homepage</title> </head> <body> <img src="plantworldlg.jpg“ width="720“ height="84“ alt="Plant World logo" /> <h1><font color="#000066">Welcome to Plant World!</font></h1> </body> </html> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  6. Entering a Paragraph of Text <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Plant World Homepage</title> </head> <body> <img src="plantworldlg.jpg“ width="720“ height="84“ alt="Plant World logo" /> <h1><font color="#000066">Welcome to Plant World!</font></h1> <p>For the finest in indoor and outdoor plants,…</p> </body> </html> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  7. Creating Unordered (Bulleted) Lists ….. <p>For the finest in indoor and outdoor plants,…</p> <h2> Our company</h2> <ul type = "square"> <li>Founded in 1989 by Margaret Anne Coles</li> <li>Headquartered in Surprise, Arizona</li> <li>25 store locations throughout the Southwest</li> </ul> <h2> Our Services</h2> <ul type = "square"> <li>Residential and commercial landscaping</li> <li>Plant and lawn maintenance</li> <li>online information for all varieties of plants</li> </ul> </body> </html> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  8. Adding a Background Image <html> <head> <title>Plant World Homepage</title> </head> <body > <img src="plantworldlg.jpg“ width="720“ height="84“ alt="Plant World logo" /> <h1><font color="#000066">Welcome to Plant World!</font></h1> <p>For the finest in indoor and outdoor plants,…</p> <h2> Our company</h2> <ul type = "square"> … </ul> </body> </html> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  9. Adding a Background Image <html> <head> <title>Plant World Homepage</title> </head> <body background=“greyback.jpg” > <img src="plantworldlg.jpg“ width="720“ height="84“ alt="Plant World logo" /> <h1><font color="#000066">Welcome to Plant World!</font></h1> <p>For the finest in indoor and outdoor plants,…</p> <h2> Our company</h2> <ul type = "square"> … </ul> </body> </html> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  10. Adding a Text Link to Another Web Page within the Same Web Site <html> <head> <title>Plant World Homepage</title> </head> <body background=“greyback.jpg” > <img src="plantworldlg.jpg“ width="720“ height="84“ alt="Plant World logo" /> <h1><font color="#000066">Welcome to Plant World!</font></h1> <p>For the finest in indoor and outdoor plants,…</p> <h2> Our company</h2> <ul type = "square"> … </ul> <p>To learn more about the Plant World products and services.. this month's featured desert plants, …</p> </body> </html> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  11. Adding a Text Link to Another Web Page within the Same Web Site <html> <head> <title>Plant World Homepage</title> </head> <body background=“greyback.jpg” > <img src="plantworldlg.jpg“ width="720“ height="84“ alt="Plant World logo" /> <h1><font color="#000066">Welcome to Plant World!</font></h1> <p>For the finest in indoor and outdoor plants,…</p> <h2> Our company</h2> <ul type = "square"> … </ul> <p>To learn more about the Plant World products and services.. this month's featured <a href="desertplants.htm"> desert plants</a>, …</p> </body> </html> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  12. Adding an E-Mail Link <html> <head> <title>Plant World Homepage</title> </head> <body background=“greyback.jpg” > <img src="plantworldlg.jpg“ width="720“ height="84“ alt="Plant World logo" /> <h1><font color="#000066">Welcome to Plant World!</font></h1> <p>For the finest in indoor and outdoor plants,…</p> <h2> Our company</h2> <ul type = "square"> … </ul> <p>To learn more about the Plant World products and services.. this month's featured <a href="desertplants.htm"> desert plants</a>, …</p> <p>Have a question or comment? Call us at (206) 555-PLANT or e-mail us at plantworld@isp.com. </p> </body> </html> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  13. Adding an E-Mail Link <html> <head> <title>Plant World Homepage</title> </head> <body background=“greyback.jpg” > <img src="plantworldlg.jpg“ width="720“ height="84“ alt="Plant World logo" /> <h1><font color="#000066">Welcome to Plant World!</font></h1> <p>For the finest in indoor and outdoor plants,…</p> <h2> Our company</h2> <ul type = "square"> … </ul> <p>To learn more about the Plant World products and services.. this month's featured <a href="desertplants.htm"> desert plants</a>, …</p> <p>Have a question or comment? Call us at (206) 555-PLANT or e-mail us at <a href="mailto:plantworld@isp.com">plantworld@isp.com</a>. </p> </body> </html> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  14. Formatting Text in Bold <p>For the finest in indoor and outdoor plants,…</p> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  15. Formatting Text in Bold <p>For the finest in <b>indoor and outdoor</b> plants,…</p> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  16. Formatting Text in Italics <p>For the finest in <b>indoor and outdoor</b> plants,…</p> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  17. Formatting Text in Italics <p>For the finest in <b><em>indoor</em> and outdoor</b> plants,…</p> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  18. Formatting Text with a Font Color <li>Founded in 1989 by Margaret Anne Coles</li> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  19. Formatting Text with a Font Color <li> <font color="#000099"> Founded in 1989 by Margaret Anne Coles</ font ></li> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  20. Adding an Image with Wrapped Text <a name="agaveamericana"></a><font size="+1">Agave Americana</font> <img src="agave.jpg" align=“left" alt= "Agave" width="212" height="203" /> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  21. Clearing the Text Wrapping <a name="agaveamericana"></a><font size="+1">Agave Americana</font> <img src="agave.jpg" align="left" alt= "Agave" width="212" height="203" /> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  22. Clearing the Text Wrapping <a name="agaveamericana"></a><font size="+1">Agave Americana</font> <img src="agave.jpg" align="left" alt= "Agave" width="212" height="203" /> <br clear="left" /> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  23. Adding a Text Link to a Web Page in Another Web Site <p>To find out more information about desert plants, visit the <a href="http://www.desertmuseum.org">Arizona-Sonora Desert Museum</a>.</p> </body> Project 3: Creating Web Pages with Links, Images, and Formatted Text

  24. Setting Link Targets <a name="agaveamericana"></a><font size="+1">Agave Americana</font> (already created) Project 3: Creating Web Pages with Links, Images, and Formatted Text

  25. Adding Links to Link Targets within a Web Page • Go to top (or anyplace which is far from the target) and type <a href="#agaveamericana"> Agave Americana </a> and then press the ENTER key Project 3: Creating Web Pages with Links, Images, and Formatted Text

  26. Project 3 Complete Creating Web Pages with Links, Images, and Formatted Text

More Related