1 / 72

Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets. Jason C. H. Chen, Ph.D. Professor of MIS School of Business Administration Gonzaga University Spokane, WA 99258 chen@jepson.gonzaga.edu. Chapter Objectives.

ozzie
Download Presentation

Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

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. Chapter 3:Creating Web Pages with Links, Images, and Embedded Style Sheets Jason C. H. Chen, Ph.D. Professor of MIS School of Business Administration Gonzaga University Spokane, WA 99258 chen@jepson.gonzaga.edu

  2. Chapter Objectives • Change body and heading format using embedded style sheets • Align and add color to text using embedded and inline styles • Use an inline style to insert an image for bullets in an unordered list • Add a text link to a Web page in the same Web site • Add an e-maillink and “Subject” option • Useabsolute and relative paths • Use style classes to add an image with wrapped text • Add animagelink to a Web page in the same Web site

  3. images [images folder] html03 [folder for HTML#3] images[images folder] images [folder] For html03 fooddrive.html fooddrivelogo.gif Relative Paths for html03How can gettinggreener.html access mailbox.gif and wall.gif image files from the “images” folder under public_html (which is your personal web page? book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.gif H: [root directory] | public_html [web folder] hw (new folder) html02 [folder for HTML#2] exercise (new folder) index.html myself.pptx myresume.docx images [folder] gettinggreener.html greenhome.html beautifulyards.html car.jpg and other jpg files largewaterfall.jpg smallwaterfall.jpg pond.jpg files

  4. Type the following URLs • http://barney.gonzaga.edu/~chenta/html03/exercise/greenhome.html • http://barney.gonzaga.edu/~chenta/html03/exercise/greenhome.html • http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreener.html (the driver) • http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreener.html

  5. Two Extra URLs (with relative path) • What is the difference between the three pages below: • http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreener.html(gettinggreener.html) • http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreener_relative_path.html (gettinggreener_relative_path.html) • and the next one: • http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreener_relative_path_wr.html (gettinggreener_relative_path_wr.html) • http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreener_relative_path.html (a newdriver) • http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreener_relative_path_wr.html (wrong relative path for mailbox)

  6. Two Tasks You Need to Complete • There are two major tasks (html projects) you need to complete in this chapter: • 1. Chapter exercise: Green Home project • Two html files should be created (details see text and assignment) • a.) driver: gettinggreen.html • b.) linked page: greenhome.htm. • 2. html03hw (create from the scratch) • beautifulbackyards.html We will study how to do the chapter exercise first. You then employ all the skills in the exercise to do the html hw. The files’ organizationfor handling two tasks are different from previous chapters and will be used for the rest of chapters.

  7. gettinggreener.html gettinggreener_relative_path.html imgsrc="../../images/mailbox.gif“ "mailto:gettinggreener@isp.com?subject=green home"

  8. greenhome project (exercise) • Two new topics are introduced in this chapter (and you need complete the exercise of greenhome project before working the html03 assignment) • 1) links with absolute and relative paths • All what you learned/implemented is “absolute” path • 2) CSS style sheets • “embedded” style sheet

  9. Using Style Sheets • CSS supports three types of style sheets: • inline, (chapter 2) • embedded, (chapter 3) • an external (or linked) (chapter 4) Inline Styles <div style="text-align: center"> <imgsrc="images/earthlogo.jpg" width="735" height="190" alt="Green logo" /> </div> • We will learn absolute and relativepaths first.

  10. <!-- File name: gettinggreener.html Author: Your_Name_here Date: 5/25/2012 BMIS235-01, Row No.: 2 Text page 123 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Getting Greener</title> <style type="text/css"> <!— body {font-family: Arial, Verdana, Garamond; font-size: 11pt} h1, h2 {color: #00934a} a {color: black} a:hover {background: #00934a; color: white} --> </style> </head> <body> <div style="text-align: center"> <imgsrc="images/earthlogo.jpg" width="735" height="190" alt="Green logo" /> </div> We will study this part in the second part

  11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Getting Greener</title> <style type="text/css"> <!— body { … } h1, h2 { … } a { … } a:hover { … …} --> </style> </head> <body> <div style="text-align: center"> <imgsrc="images/earthlogo.jpg" width="735" height="190" alt="Green logo" /> </div> <p > … … … </p> We will study this part in the second part

  12. This is required for all HTML HW • <h2>Company Information:</h2> • <ul style="list-style-image: )"> • <li>Started by environmental engineer Dr. Dean A. McDevitt in 2000</li> • <li>Store locations all over the greater Seattle area, including branch offices in all public utility buildings</li> • <li>Fifteen consultants with a variety of specialties; all fully trained, bonded, and insured</li> • </ul> • <p> … • … • … • … </a>.</p> • <br/> <i>This document was last updated on: • <script type="text/javascript"> document.write(document.lastModified); • </script> </i> • </body> • </html> open second web page

  13. Adding a Text Link to Another Web Page within the Same Web Site

  14. Adding an E-Mail Link • Click immediately to the left of the g in the beginning of gettinggreener@isp.com on line 27. Type <ahref=”mailto:gettinggreener@isp.com”> as the start of the e-mail link. This will link to the e-mail address gettinggreener@isp.com when the link is clicked • Type </a> to end the e-mail link

  15. Adding an E-Mail Link

  16. Adding a Subject to an E-Mail Link

  17. Linking to Documents in Other Folders: Absolute and Relative Paths • To create a link to a file located in a different folder than the current document, you must specify the file’s location, or path, so that browsers can find it • HTML supports two kinds of paths: relative and absolute • An absolutepath specifies a file’s precise location within a computer’s entire folder structure

  18. Adding a Subject to an E-Mail Link

  19. Linking to Documents in Other Folders: Absolute and Relative Paths • To create a link to a file located in a different folder than the current document, you must specify the file’s location, or path, so that browsers can find it • HTML supports two kinds of paths: relative and absolute • An absolutepath specifies a file’s precise location within a computer’s entire folder structure

  20. Relative Paths • A relativepath specifies a file’s location in relation to the location of the current document • If you want to go one level up the folder tree, you start the relative path with a double period (/../) then provide the name of the file. • Q: • A: • To specify a different folder on the same level, known as a siblingfolder, you move up the folder tree using the double period (..) and then down the tree using the name of the siblingfolder • You should almost always use relative paths in your links how to move “two” levels” up? a two double periods ( /../../ )

  21. images [images folder] html03 [folder for HTML#3] images[images folder] images [folder] For html03 fooddrive.html fooddrivelogo.gif Relative Paths (cont.)How can gettinggreener.html access mailbox.gif and wall.gif image files from the “images” folder under public_html (which is your personal web page? book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.gif H: [root directory] | public_html [web folder] hw (new folder) html02 [folder for HTML#2] exercise (new folder) index.html myself.pptx myresume.docx images [folder] gettinggreener.html greenhome.html beautifulyards.html car.jpg and other jpg files largewaterfall.jpg smallwaterfall.jpg pond.jpg files <body background="../../images/wall.gif">

  22. Adding a Subject to an E-Mail Link using “image” and “Relative Path” • Type <a href= "mailto:gettinggreener@isp.com?subject=green home&body=How can I get a green audit?"> <imgsrc="../../images/mailbox.gif“height="36" width="36" alt="Mailbox logo"/> gettinggreener@isp.com </a> as the tag Please note that you need to figure out how to add “mailbox.gif” in this exercise with “relative path”.

  23. images [images folder] html03 [folder for HTML#3] images [folder] For html03 Relative Paths (cont.)How can gettinggreener.html access mailbox.gif and wall.gif image files from the “images” folder under public_html (which is your personal web page? book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.gif H: [root directory] | public_html [web folder] hw (new folder) exercise (new folder) index.html myself.pptx myresume.docx gettinggreener.html greenhome.html images [folder] beautifulyards.html car.jpg and other jpg files largewaterfall.jpg smallwaterfall.jpg pond.jpg files

  24. Relative Path: Linking to Documents in Other Folders (cont.) In gettinggreener_relative_path_wr (wrong version) <body background="images/wall.gif"> <a href=" mailto:gettinggreener@isp.com?subject=green home&body=How can I get a green audit?"> <img src=“images/mailbox.gif" height="36" width="36" alt="Mailbox logo "/>gettinggreener@isp.com </a>.</p> In gettinggreener_relative_path(correct version) <body background=“../../images/wall.gif"> <a href="mailto:gettinggreener@isp.com?subject=green home&body=How can I get a green audit?"> "><img src=“../../images/mailbox.gif" height="36" width="36" alt="Mailbox logo "/>gettinggreener@isp.com </a>.</p> What is the difference between these two versions?

  25. images [images folder] html03 [folder for HTML#3] images [folder] For html03 Relative Paths (cont.)How can gettinggreener.html access mailbox.gif and wall.gif image files from the “images” folder under public_html (which is your personal web page? book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.gif H: [root directory] | public_html [web folder] hw (new folder) exercise (new folder) index.html myself.pptx myresume.docx gettinggreener.html greenhome.html images [folder] beautifulyards.html car.jpg and other jpg files largewaterfall.jpg smallwaterfall.jpg pond.jpg files <body background="../../images/wall.gif">

  26. images [images folder] html03 [folder for HTML#3] images [folder] For html03 Relative Paths (cont.)How can gettinggreener.html access mailbox.gif and wall.gif image files from the “images” folder under public_html (which is your personal web page? book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.gif H: [root directory] | public_html [web folder] hw (new folder) exercise (new folder) index.html myself.pptx myresume.docx gettinggreener.html greenhome.html images [folder] beautifulyards.html car.jpg and other jpg files largewaterfall.jpg smallwaterfall.jpg pond.jpg files <a href="mailto:gettinggreener@isp.com"><img src="../../images/mailbox.gif" height="36" width="36" alt="Mailbox logo"/>gettinggreener@isp.com </a>.</p>

  27. What are the ‘updates’ in the following two pages? Use of ‘relative path’

  28. Anything New? a:link Background image. What else?

  29. Next … CSS • We will study another important topic of CSS using “imbedded” style sheet

  30. Using Style Sheets • CSS supports three types of style sheets: • inline, (chapter 2) • embedded, (chapter 3) • an external (or linked) (chapter 4)

  31. Adding Embedded Style Sheet Statements <style type="text/css"> body {font-family: Arial, Verdana, Garamond; font-size: 11pt} h1, h2 {color: #00934a} a {color: black} a:link {color: red} a:hover {background: #00934a; color: white} </style> {color: green} change h1,h2 heading to green { declaration } selector (or anchor) change all links to “black” in all states a:link a:visited a:active hover: define the style of a link when the mouse pointer points to. Change link hover to green background and white text a:link {color: red} was included in ..relative_pathversion

  32. Adding a Center-Aligned Banner Image Using an Inline Style • Make sure to indent the second line of code by using the TAB key. This separates the start and end <div> tags (for defining ‘block-level’ structure or ‘logical’ division) from the <img> tag, highlighting the image insertion.

  33. Adding a Center-Aligned Banner Image Using an Inline Style • Make sure to indent the second line of code by using the TAB key. This separates the start and end <div> tags (for defining ‘block-level’ structure or ‘logical’ division) from the <img> tag, highlighting the image insertion.

  34. Adding an Inline Style for Color <p> <span style="color: #00934a; font-weight: bold">Getting Greener</span> is an environmental … that is safe, less costly, and green.</p> An inline style to add a green color (#00934a) in a bold font-weight to provide visual impact and call attention to the company name, Getting Greener. The <span> </span> tags create a container into which a user can add an inline style. It provides a finer level of control for styles, as opposed to the ,div> </div> tags, which define block-level structure or division in the HTML document.

  35. Adding an Inline Style for Color (Fig. 3-22)

  36. Adding Interest and Focus with Styles and HTML Tags

  37. The 16 Basic Color Names The 16 basic color names that are recognized by all versions of HTML and XHTML. (Appendix B; APP12) Click here for Color link <body style="background-color:#90EE90"> • <body style="background-color:lightgreen" text="black" link="red" vlink="blue" alink="aqua" background="images/wall.gif">

  38. Viewing a Web Page (Fig. 3-25)

  39. Revised Web Page Reuse mailbox.gif created in the previous Web assignment using “Relative Path”. HOW? You need to implement this feature.

  40. Testing Links in a Web Page

  41. File name: gettinggreener.html (1 of 4) [see also p. 123] <!-- File name: gettinggreener.html Author: Jason chen Date: 5/25/2012 BMIS235-01, Row No.: 2 Text page 123 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Getting Greener</title>

  42. CSS in gettinggreener.html (2 of 4) try to change into the following: h1, h2 {color: blue} or h1 {color black} h2 {color: green} <styletype="text/css"> <!-- body { ... ; font-size: 11pt} h1, h2 { … } a {color: black} a:hover { …. } --> </style> </head> <body> <div style="text-align: center"> <imgsrc="images/earthlogo.jpg" width="735" height="190" alt="Green logo" /> </div> a:link a:visited a:active hover: define the style of a link when the mouse pointer points to. <div> </div> tags create a container that defines block-level structure or ‘logical’ division in the HTML document

  43. File name: gettinggreener.html (3 of 4) <p><span style="color: #00934a; font-weight: bold">Getting Greener</span> is an environmental consulting company that specializes in helping to make your home and life greener. We have trained consultants who can give your home a green audit. We will make suggestions for ways that you can lessen your footprint on the earth. Help your family act in an environmentally responsible way by creating a home environment that is safe, less costly, and green.</p> <h2>Company information:</h2> <ul style="list-style-image: url(images/earthbullet.jpg)"> <li>Started by environmental engineer Dr. Dean A. McDevitt in 2000</li> <li>Store locations all over the greater Seattle area, including branch offices in all public utility buildings</li> <li>Fifteen consultants with a variety of specialties; all fully trained, bonded, and insured</li> </ul>

  44. This is required for all HTML HW File name: gettinggreener.html (4 of 4) < … … … </a>.</p> <br/> <i> This document was last updated on: <script type="text/javascript"> document.write(document.lastModified); </script> </i> </body> </html>

  45. Wrapping Text Around Images Using CSS Classes (greenhome.html) (Fig. 3-37)

  46. CSS classes and wrap text around images <style type="text/css"> <!— … img.align-right {float: right; margin-left: 5px; margin-right: 5px} img.align-left {float: left; margin-left: 5px; margin-right: 5px} … --> </style> <a name="solar"></a> <h3>Solar Panels</h3> <p><img class="align-left" src="images/solar.jpg" width="348" height="261" alt="Solar panels" /></p> … … <br style="clear: left" />

  47. Clearing the Text Wrapping (Fig. 3-39)

  48. CSS classes and wrap text around images <style type="text/css"> <!— … img.align-right {float: right; margin-left: 5px; margin-right: 5px} img.align-left {float: left; margin-left: 5px; margin-right: 5px} … --> </style> <a name="solar"></a> <h3>Solar Panels</h3> <p><img class="align-left" src="images/solar.jpg" width="348" height="261" alt="Solar panels" /></p> … … <br style="clear: left" />

More Related