1 2/22/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Images and placing pages on the server

2 2/22/05CS120 The Information Era Review  Let’s finish working on the list of bookmarks  Create a page that contains a list of your favourite websites (your bookmarks)  You should include o A heading (My Bookmarks) o A smaller heading (Your name) on a separate line o A list of your bookmarks. These should be links to the websites, and should be divided up into categories using nested lists

3 2/22/05CS120 The Information Era Web Page Images  A picture is worth a thousand words!  Most web browsers can display online images  Browsers support the following image formats o X Bitmap (XBM) o GIF: Graphics Interchange Format o JPEG: Joint Photographic Expert Group o PNG: Portable Network Graphic

4 2/22/05CS120 The Information Era A Note on Copyright  If the image does not belong to you, you have no right to post it on the web  Free clipart libraries are an exception

5 2/22/05CS120 The Information Era Adding Images to Web Pages  Images are not directly added to web pages  Instead, the image files are placed onto the web server, and links to the images are placed in the web page

6 2/22/05CS120 The Information Era Image Tag  To link to an image from a web page, you need o HTML tag o The attribute src=image_file  Where image_file is the URL of the image  Example: o  The tag has no ending or closing tag!

7 2/22/05CS120 The Information Era Attributes of Tag  height & width o Used to specify the height and the width of the image in pixels  alt o The alternate text displayed when the user has images turned off

8 2/22/05CS120 The Information Era Getting Images off the Web  Click on image, hold mouse button down  Choose “save image as” from menu  Choose the location you want to save the image (desktop or server)

9 2/22/05CS120 The Information Era Exercise  Let’s try adding images to a page  Download image to local disk o  Create an web page and add a link to the image o Try adding the image in the middle of text o Change the size of the image

10 2/22/05CS120 The Information Era Aligning Images  Adding the image as we did in the previous example treats the image as an individual character  Does not look good!  Better to align the image with the text o Image on the left, text on the right o Image on the right, text on the left

11 2/22/05CS120 The Information Era Align Attribute  This attribute will align the image to the right or right  Example: o  Try using this attribute on the web page you created  What difference does it make?

12 2/22/05CS120 The Information Era Location of Images  So far, all the images that we have linked to have been in the same directory (folder) as the webpage  It is usually a better idea to place all images in a separate directory  In the previous example, if the image was placed in a directory (images) the html would be o

13 2/22/05CS120 The Information Era Placing Web Pages on Euler  All the pages we have created up to now have been placed on the local machine (desktop)  These are not considered online as they are not accessible to other people on the Internet  We will be placing web pages online by placing them in the sites folder in our directories on Euler

14 2/22/05CS120 The Information Era Placing Web Pages on Euler  So we don’t mix different web pages up, it is a good idea to create folders for the different exercises or assignments  Example: o Create a directory called “week4” in your sites folder on Euler o Place your web page in that folder o Create an images folder in the “week4” folder o Place all your images into that folder

15 2/22/05CS120 The Information Era Viewing Your Web Pages  You can view the pages on Euler by opening a browser and typing in the following URL o me me o Where username is your username  i.e. mine would be khoj0332 o The filename is the name of the webpage you created.  This should have the extension.html

16 2/22/05CS120 The Information Era Problem  Let’s design a new page for the natural science division  This page must o Display the Pacific University Logo o Use a colored background o Contain a heading “Natural Science Division o Use a list format linking to: Biology, Chemistry, Computer Science, Exercise Science, Environmental Studies, Mathematics, Physics

17 2/22/05CS120 The Information Era Creating More Than One Page  So far, we have created only one page for each problem or exercise  We have only linked to web sites  How would we create web pages that link to each other?

18 2/22/05CS120 The Information Era Problem  Create a page with at least two riddles on it (questions only)  Create another page with a list of answers  Link the two pages together: o On the first page, add a link to the answers o On the second page, add a link back to the first page