1. Dr. Chen, Management Information Systems - HTML 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. Dr. Chen, Management Information Systems - HTML 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-mail link and “Subject” option Use absolute and relative paths Use style classes to add an image with wrapped text Add an image link to a Web page in the same Web site

3. Dr. Chen, Management Information Systems - HTML H: [root directory] | public_html [web folder] index.html myself.pptx myresume.docx hw (new folder) images [folder] html03 [folder for HTML#3] For html03 car.jpg and other jpg files exercise (new folder) gettinggreener.html greenhome.html images [folder] largewaterfall.jpg smallwaterfall.jpg pond.jpg files beautifulyards.html images [images folder] book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.gif Relative Paths for html03 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? html02 [folder for HTML#2] images [images folder] fooddrivelogo. gif fooddrive.html

4. Dr. Chen, Management Information Systems - HTML 4 Type the following URLs http://barney.gonzaga.edu/~chenta/html03/exercise/green home.html http://barney.gonzaga.edu/~chenta/html03/exercise/green home.html http://barney.gonzaga.edu/~chenta/html03/exercise/gettin ggreener.html (the driver) http://barney.gonzaga.edu/~chenta/html03/exercise/gettin ggreener.htmlhttp://barney.gonzaga.edu/~chenta/html03/exercise/gettin ggreener.html

5. Dr. Chen, Management Information Systems - HTML 5 Two Extra URLs (with relative path) What is the difference between the three pages below: http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreene r.html (gettinggreener.html)http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreene r.html http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreene r_relative_path.html (gettinggreener_relative_path.html)http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreene r_relative_path.html and the next one: http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreene r_relative_path_wr.html (gettinggreener_relative_path_wr.html)http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreene r_relative_path_wr.html http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreene r_relative_path.html (a new driver) http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreene r_relative_path_wr.html (wrong relative path for mailbox)

6. Dr. Chen, Management Information Systems - HTML 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. html 03 hw (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’ organization for handling two tasks are different from previous chapters and will be used for the rest of chapters.

7. Dr. Chen, Management Information Systems - HTML img src="../../images/mailbox.gif“ "mailto:gettinggreener@isp.com?subject =green home" gettinggreener.htmlgettinggreener_relative_path.html

8. Dr. Chen, Management Information Systems - HTML 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. Dr. Chen, Management Information Systems - HTML 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 We will learn absolute and relative paths first.

10. Dr. Chen, Management Information Systems - HTML <!-- 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"> Getting Greener <!— body{font-family: Arial, Verdana, Garamond; font-size: 11pt} h1, h2{color: #00934a} a{color: black} a:hover{background: #00934a; color: white} --> We will study this part in the second part

11. Dr. Chen, Management Information Systems - HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Getting Greener <!— body{ … } h1, h2{ … } a{ … } a:hover{ … …} --> … We will study this part in the second part

12. Dr. Chen, Management Information Systems - HTML This is required for all HTML HW Company Information: Started by environmental engineer Dr. Dean A. McDevitt in 2000 Store locations all over the greater Seattle area, including branch offices in all public utility buildings Fifteen consultants with a variety of specialties; all fully trained, bonded, and insured … …. This document was last updated on: document.write(document.lastModified); open second web page

13. Dr. Chen, Management Information Systems - HTML

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

15. Dr. Chen, Management Information Systems - HTML 15 Adding an E-Mail Link Click immediately to the left of the g in the beginning of gettinggreener@isp.com on line 27. Type 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 to end the e-mail link

16. Dr. Chen, Management Information Systems - HTML 16 Adding an E-Mail Link

17. Dr. Chen, Management Information Systems - HTML 17 Adding a Subject to an E-Mail Link

18. Dr. Chen, Management Information Systems - HTML 18 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 absolute path specifies a file’s precise location within a computer’s entire folder structure

19. Dr. Chen, Management Information Systems - HTML 19 Adding a Subject to an E-Mail Link

20. Dr. Chen, Management Information Systems - HTML 20 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 absolute path specifies a file’s precise location within a computer’s entire folder structure

21. Dr. Chen, Management Information Systems - HTML 21 Relative Paths A relative path 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 sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder You should almost always use relative paths in your links a two double periods ( /../../ ) how to move “two” levels” up?

22. Dr. Chen, Management Information Systems - HTML H: [root directory] | public_html [web folder] index.html myself.pptx myresume.docx hw (new folder) images [folder] html03 [folder for HTML#3] For html03 car.jpg and other jpg files exercise (new folder) gettinggreener.html greenhome.html images [folder] largewaterfall.jpg smallwaterfall.jpg pond.jpg files beautifulyards.html images [images folder] book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.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? html02 [folder for HTML#2] images [images folder] fooddrivelogo. gif fooddrive.html

23. Dr. Chen, Management Information Systems - HTML 23 Adding a Subject to an E-Mail Link using “image” and “Relative Path” Type Please note that you need to figure out how to add “mailbox.gif” in this exercise with “relative path”. gettinggreener@isp.com as the tag

24. Dr. Chen, Management Information Systems - HTML H: [root directory] | public_html [web folder] index.html myself.pptx myresume.docx hw (new folder) images [folder] html03 [folder for HTML#3] For html03 car.jpg and other jpg files exercise (new folder) gettinggreener.html greenhome.html images [folder] largewaterfall.jpg smallwaterfall.jpg pond.jpg files beautifulyards.html images [images folder] book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.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?

25. Dr. Chen, Management Information Systems - HTML In gettinggreener_relative_path_wr (wrong version) <body background="images/wall.gif"> gettinggreener@isp.com. In gettinggreener_relative_path (correct version) <body background=“../../images/wall.gif"> "> gettinggreener@isp.com. Relative Path: Linking to Documents in Other Folders (cont.) What is the difference between these two versions?

26. Dr. Chen, Management Information Systems - HTML H: [root directory] | public_html [web folder] index.html myself.pptx myresume.docx hw (new folder) images [folder] html03 [folder for HTML#3] For html03 car.jpg and other jpg files exercise (new folder) gettinggreener.html greenhome.html images [folder] largewaterfall.jpg smallwaterfall.jpg pond.jpg files beautifulyards.html images [images folder] book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.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?

27. Dr. Chen, Management Information Systems - HTML H: [root directory] | public_html [web folder] index.html myself.pptx myresume.docx hw (new folder) images [folder] html03 [folder for HTML#3] For html03 car.jpg and other jpg files exercise (new folder) gettinggreener.html greenhome.html images [folder] largewaterfall.jpg smallwaterfall.jpg pond.jpg files beautifulyards.html images [images folder] book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.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? gettinggreener@isp.com.

28. Dr. Chen, Management Information Systems - HTML What are the ‘updates’ in the following two pages? Use of ‘relative path’

29. Dr. Chen, Management Information Systems - HTML Anything New? What else? Background image. a:link

30. Dr. Chen, Management Information Systems - HTML 30 Next … CSS We will study another important topic of CSS using “imbedded” style sheet

31. Dr. Chen, Management Information Systems - HTML 31 Using Style Sheets CSS supports three types of style sheets: –inline, (chapter 2) –embedded, (chapter 3) –an external (or linked) (chapter 4)

32. Dr. Chen, Management Information Systems - HTML 32 Adding Embedded Style Sheet Statements 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} hover: define the style of a link when the mouse pointer points to. Change link hover to green background and white text a:link a:visited a:active {color: green} change h1,h2 heading to green a:link {color: red} was included in..relative_path version selector (or anchor) { declaration } change all links to “black” in all states

33. Dr. Chen, Management Information Systems - HTML 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 tags (for defining ‘block-level’ structure or ‘logical’ division) from the tag, highlighting the image insertion.

34. Dr. Chen, Management Information Systems - HTML

35. 35 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 tags (for defining ‘block-level’ structure or ‘logical’ division) from the tag, highlighting the image insertion.

36. Dr. Chen, Management Information Systems - HTML Getting Greener is an environmental … that is safe, less costly, and green. Adding an Inline Style for Color 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 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> tags, which define block-level structure or division in the HTML document.

37. Dr. Chen, Management Information Systems - HTML 37 Adding an Inline Style for Color (Fig. 3-22)

38. Dr. Chen, Management Information Systems - HTML 38 Adding Interest and Focus with Styles and HTML Tags

39. Dr. Chen, Management Information Systems - HTML 39 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

40. Dr. Chen, Management Information Systems - HTML 40 Viewing a Web Page (Fig. 3-25)

41. Dr. Chen, Management Information Systems - HTML Revised Web Page Reuse mailbox.gif created in the previous Web assignment using “Relative Path”. HOW? You need to implement this feature.

42. Dr. Chen, Management Information Systems - HTML 42 Testing Links in a Web Page

43. Dr. Chen, Management Information Systems - HTML <!-- 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"> Getting Greener File name: gettinggreener.html (1 of 4) [see also p. 123]

44. Dr. Chen, Management Information Systems - HTML <!-- body{... ; font-size: 11pt} h1, h2{ … } a{color: black} a:hover{ …. } --> CSS in gettinggreener.html (2 of 4) tags create a container that defines block-level structure or ‘logical’ division in the HTML document try to change into the following: h1, h2 {color: blue} or h1 {color black} h2 {color: green} hover: define the style of a link when the mouse pointer points to. a:link a:visited a:active

45. Dr. Chen, Management Information Systems - HTML Getting Greener 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. Company information: Started by environmental engineer Dr. Dean A. McDevitt in 2000 Store locations all over the greater Seattle area, including branch offices in all public utility buildings Fifteen consultants with a variety of specialties; all fully trained, bonded, and insured File name: gettinggreener.html (3 of 4)

46. Dr. Chen, Management Information Systems - HTML < … …. This document was last updated on: document.write(document.lastModified); File name: gettinggreener.html (4 of 4) This is required for all HTML HW

47. Dr. Chen, Management Information Systems - HTML 47 Wrapping Text Around Images Using CSS Classes ( greenhome.html ) (Fig. 3-37)

48. Dr. Chen, Management Information Systems - HTML Solar Panels … CSS classes and wrap text around images Property Name DescriptionValues float With the value none, the element will be displayed where it appears in the text; with a value of left (right) and the text will wrap on the right (left)side of the element. left right none clear Specifies if an element allows floating element on its sides none left right both <!— … img.align-right {float: right; margin-left: 5px; margin-right: 5px} img.align-left {float: left; margin-left: 5px; margin-right: 5px} … -->

49. Dr. Chen, Management Information Systems - HTML 49 Clearing the Text Wrapping (Fig. 3-39)

50. Dr. Chen, Management Information Systems - HTML Solar Panels … CSS classes and wrap text around images Property Name DescriptionValues float With the value none, the element will be displayed where it appears in the text; with a value of left (right) and the text will wrap on the right (left)side of the element. left right none clear Specifies if an element allows floating element on its sides none left right both <!— … img.align-right {float: right; margin-left: 5px; margin-right: 5px} img.align-left {float: left; margin-left: 5px; margin-right: 5px} … -->

51. Dr. Chen, Management Information Systems - HTML 51 With and Without ‘clear’ (p. 138) with ‘clear’ without ‘clear’ Solar Panels …

52. Dr. Chen, Management Information Systems - HTML 52 Adding Links to Link Targets within a Web Page In Table 3–11, this HTML code inserts the bulleted list that provides links to the two targets (solar and car) inserted above. Notice that you use the same earthbullet.jpg image that you used on the home page as the bullet. This helps with consistency across the Web site

53. Dr. Chen, Management Information Systems - HTML 53 Adding Links to Link Targets within a Web Page

54. Dr. Chen, Management Information Systems - HTML 54 Adding Links to a Target at the Top of the Page Highlight the line on line 36 Type as the tag that will create a target at the top of the Web page named top Highlight the line on line 67 Type To top as the tag tags create a container into which a user can add an inline style. It provides a finer level of control for styles. Whereas, tags define block-level structure or division in the HTML document.

55. Dr. Chen, Management Information Systems - HTML 55 Adding Links to a Target at the Top of the Page

56. Dr. Chen, Management Information Systems - HTML <!-- File name: greenhome.html Author: Jason Chen Date: 5/25/2012 BMIS235-01, Row No.: 2 Text Page: 127 - 145 ---> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Green Home.(see the handout for the rest of codes) greenhome.html (1 of 9)

57. Dr. Chen, Management Information Systems - HTML 57 With and Without ‘clear’ (p. 138) with ‘clear’ without ‘clear’ Solar Panels …

58. Dr. Chen, Management Information Systems - HTML 58 Chapter Summary Describe linking terms and definitions Create a home page and enhance a Web page using images 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 an e-mail link You can reference files in different folders using relative and absolute paths. Use style classes to add an image with wrapped text Add links to targets within a Web page Add an image link to a Web page in the same Web site

59. Dr. Chen, Management Information Systems - HTML End of Chapter 3 Creating Web Pages with Links, Images, and Embedded Style Sheets

60. Dr. Chen, Management Information Systems - HTML 60 HW – Exercise for html03 (greenhome.html and gettinggreener.html) Read and complete the chapter exercise (pp.90- 145) Complete the Exercise (i.e., greenhome.html [the driver] and gettinggreener.html [the linked page]) – see the handout Then, revise both html files by adding “relative” paths with wall.gif (background) and mailbox.gif (an animation graph) that are reused from the first images folder (your personal web page)

61. Dr. Chen, Management Information Systems - HTML HW – Exercise for html03 (greenhome.html and gettinggreener.html) Part I. Chapter exercise (Complete this exercise first) Follow the instructions: 1. Read and complete the chapter exercise (pp.90-145) 2. Create the following two new folders: a. a folder of html03 under public_html directory b. a folder of images under html03 folder (i.e., under publich_html/html03/) your directory structure should be like those in Figure 1-a and the complete HTML HWs directory structure is shown in Figure 1-b. 3. a) Copy (download) the following five jpg files: car, earthbullet, earthlogo, earthsm and solar from the Blackboard (html03/exercise) and save them under appropriate folder (i.e., /html03/exercise/images/ folder) b) New Instruction for copying those multimedia file: On Windows Explorer, scroll down to the folder named My Network Places, click on the plus sign next to the folder to expand it (the same below), then the following folders Entire Network, Microsoft Windows Network, Gonzaga, Jepsonnt2, chen, bmis235, then public_html. Inside public_html folder, you will see several folders with names indicating the nature of files. Note that if you simply copy and past all files from this folder, you need to reorganize all datafiles (i.e., all *.html files saved under html03 and image files saved under the newly created images\ folder).

62. Dr. Chen, Management Information Systems - HTML 4. Create the greenhome.html as described in the text (pp.90-115) and save it under \html03\exercise\ folder (for your convenience a sample greenhome.html file is shown in Figure 4 at the end of the handout) 5. Test the greenhome web page by entering your URL (http://barney.gonzaga.edu/~your_userID/html03/exercise/greenhome.ht ml) on the Web Browser 6. Create a new driver gettinggreener.html (see pp.116-121) and save it under \html03\exercise\ folder (for your convenience a sample greenhome.html file is shown in Figure 5. Please note that you need to figure out how to add “mailbox.gif” in this exercise with “relative path”. 7. Test the Getting Greener project by entering your URL (http://barney.gonzaga.edu/~your_userID/html03/exercise/gettinggreener. html) on the Web Browser 8. Sample Web Pages can be found in the HTML text (Fig. 3-1; p.91) 9. It is required to “Validate” and “View” your HTML code and debug/correct the code before you submit the assignment (see HTML p.73- 77 for details)

63. Dr. Chen, Management Information Systems - HTML Revised Web Page Reuse mailbox.gif created in the previous Web assignment using “Relative Path”. HOW? You need to implement this feature.

64. Dr. Chen, Management Information Systems - HTML 64 Testing Links in a Web Page

65. Dr. Chen, Management Information Systems - HTML 65 End of Exercise

66. Dr. Chen, Management Information Systems - HTML 66 HW- HTML#3 HTML#3 assigned HW Follow the steps stated on HTML page 152-153 in the html text. Please note that you need to change the file name from lab3- 2solution.html to beautifulbackyards.html

67. Dr. Chen, Management Information Systems - HTML 67 HW- HTML#3 HTML#3 assigned HW http://barney.gonzaga.edu/~chenta/html03/hw/beautifulbac kyards.html http://barney.gonzaga.edu/~chenta/html03/hw/beautifulbac kyards.html

68. Dr. Chen, Management Information Systems - HTML Part II. HW: HMTL#3; Lab Problem 1 (Lab#2, pp.152-153) Do NOT work on the assignment until you complete html03 exercise (i.e., Part I) Changes should be made for HTML#3: Change lab3-2solution.html into beautifulbackyards.html Download three jpg files: largewaterfall, smallwaterfall and pond from the Blackboard (under the folder of html03/hw) or simply follow step 2 (b) stated above. 2. Follow the instructions listed on Lab Problem 1 (Lab#2, pp.152-153) 3. A sample web page is shown in Figure 3-53; p.152 and and Figure 3 on the handout. Please note that it is required to add “mailbox.gif” and “wall.gif” in this hw with “relative path” and it should be displayed at the end of the web page (see Fig. 2- a-ii and Fig.3). HW- HTML#3

69. Dr. Chen, Management Information Systems - HTML Part II. HW: HMTL#3 (cont.) 4. What/How you should turn in: email me with the following information (Fail to provide me with ALL information, you will lose major points) Submit the HTML#3 via Blackboard (not via email): Message : Dr. Chen, Here is my HTML#3 (chapter3) assignment. http://barney.gonzaga.edu/~your_userID//html03/exercise/gettinggreener.html http://barney.gonzaga.edu/~your_userID/html03/hw/beacutifulbackyards.html bmis235-03 (or bmis235-04 or bmis235-05) so that I can record/grade your homework directly on the Bb. HW- HTML#3 Make the URL linkable

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

71. Dr. Chen, Management Information Systems - HTML Reuse mailbox.gif created in the previous Web assignment using “Relative Path”. You need to implement this feature in this hw. HW: HMTL#3; Lab Problem 1 (Lab#2, pp.152- 153)

72. Dr. Chen, Management Information Systems - HTML <!-- Beautiful Backyards Web Page File name: beautifulbackyards.html Author: Jason Chen Date: 5/28/2012 HTML text page 152-153 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Beautiful Backyards … (see the handout for the rest of codes) beautifulbackyards.html (1 of 5)