Slide 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

Slide 2

Dr. Chen, Management Information Systems - HTML 2 Chapter Objectives 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 a text link to a Web page in the same Web site Add an e-mail link and Subject option

Slide 3

Dr. Chen, Management Information Systems - HTML 3 Chapter Objectives Add a text link to a Web page on another Web site Use absolute and relative paths Save, validate, and view an HTML file and test the links Use style classes to add an image with wrapped text Add links to targets within a Web page Copy and paste HTML code Add an image link to a Web page in the same Web site

Slide 4

Dr. Chen, Management Information Systems - HTML 4 Plan Ahead Plan the Web site Analyze the need Design the Web site Choose the content for the Web pages Determine the types of Cascading Style Sheets (CSS) that you will use Determine how the pages will link to one another Establish what other links are necessary Develop the Web page(s) and insert all links Test all Web pages within the Web site

Slide 5

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

Slide 6

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

Slide 7

Dr. Chen, Management Information Systems - HTML 7 Two Extra URLs (with relative path) What is the difference between the three pages below: http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreene r.htmlhttp://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreene r.html http://barney.gonzaga.edu/~chenta/html03/exercise/gettinggreene r_relative_path.htmlhttp://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.htmlhttp://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)

Slide 8

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

Slide 9

Dr. Chen, Management Information Systems - HTML gettinggreener.html gettinggreener_relative_path.html

Slide 10

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

Slide 11