Presentation is loading. Please wait.

Presentation is loading. Please wait.

COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I, 2012 © Webster University Vienna Week 2 – Class 2

Similar presentations

Presentation on theme: "COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I, 2012 © Webster University Vienna Week 2 – Class 2"— Presentation transcript:

1 COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I, 2012 © Webster University Vienna Week 2 – Class 2

2 Essential and required reading for you are pages 81 through 86. At the beginning only 8-bit graphics cards were common Web-safe or browser-safe colours total 216 colours Now 24-bit and 32-bit graphics cards are the norm (24 bit=16,777,216 colours) Images usually kept at a maximum of 600 pixels wide to accommodate lower resolution monitors Common for monitors to offer a resolution of 1024x768 Image dimensions can be determined via your browser by right-clicking on an image in a web page and selecting Properties You are usually interested in image dimensions rather than resolution because on screen more pixels means big physical size on your web pages! ©Webster University Vienna Austria Chapter 5 – Images

3 ©Webster University Vienna Austria Image Info in the Browser

4 Images in a Web page can be included in two ways HTML – using the img element CSS – using the background-image property HTML images should be included when the image is part of the content on the page Example: A web page for a certain product, and this page contains images of the product CSS images are used when we want to add some decoration (styling) to the page ©Webster University Vienna Austria Images in Web Pages

5 HTML vs CSS Images HTML ImageCSS Image ©Webster University Vienna Austria

6 Specify width criteria Most images copyright protected. Use for non commercial projects generally OK ©Webster University Vienna Austria Where to find images

7 Free Stock Photography Sites (require registration) These web sites usually have only small resolution images for free, but thats sufficient for a website The advantage is that they have categorized images, so you can browse the categories and get inspiration ©Webster University Vienna Austria Where to find images

8 Larger images means slower download speeds Some files like gif, jpeg and png have built in compression that reduces file size to make downloading more efficient. BMP images do not have compression and should not be used in Web Design (bigger sizes, plus not all browsers support them) Most imagery on the internet is readily available and downloadable at any time! Simply right-click on the image and then select Save Picture As … from the pop-up menu (note: this does not apply to CSS background images) Most images are copyrighted so be careful in your choice! Gif images can be animated and are inserted in your web page like normal images using the tag The alt attribute is required for all XHTML tags! The alt attribute shown as a tool tip in browsers ©Webster University Vienna Austria Chapter 5 – Images

9 Saving Images from the browser ©Webster University Vienna Austria

10 Images appear in the logical position you place them in when you create your XHTML code Images are not stored directly in your web pages, but are simply referenced from them Referenced using the tag If your image is not in the same folder as your web page, you must include the folder name as well as the file name Images can be hyperlinks, if wrapped within tags ©Webster University Vienna Austria Chapter 5 – Images

11 Imagemaps A single image can provide multiple hyperlinks – imagemaps Imagemaps divide an image up into areas or select parts of an image that are then used as hyperlinks Although they might seem useful, web designers usually avoid using them as there are other techniques to achieve the same functionality The reason that they are not so popular is because it is tedious to keep the ImageMaps up to date if we make changes to the base image ©Webster University Vienna Austria

12 Get the images from the course website, and extract them into your week 2 folder Open your template.html file in Notepad and then immediately save it as pp90_94.html create a level 1 header at the top of the page as shown in Figure 5.7 Insert the cursor after your header and type the code shown in blue in Figure 5.7 Dont forget the space and slash at the end of the img tag! Add the text and formatting shown in the rest of Figure 5.7 Dont forget, ALL your XHTML code is inserted between the body tags! Re-save your file as pp90_94.html and then view it in your browser Read ALL Tips but dont advance to other chapters ©Webster University Vienna Austria Inserting images on a page (pg.90)

13 Insert the alt attribute as shown in Figure 5.9 and create an error in the image file name to test the alt attribute and value Save your file as pp90_94.html and then view it in your browser Do you see the alt text? Fix pp90_94.html so that the image is visible again ©Webster University Vienna Austria Offering alternate text (pg.91)

14 Check the dimensions of your image in pp90_94.html Add the width and height attributes to your img tag Re-save your web page and load it in your browser. Note that this image isnt very big so you may not perceive a difference in text loading speed when all of the files are on your local computer. Load the html files with images that you create this week in your public DropBox folder, and try to see if you can notice a difference. ©Webster University Vienna Austria Specifying size for speedier viewing (pp.92-93)

15 Follow the instructions for scaling an image not the ones on page 94, so ignore steps 1, 2 and 3 and continue as below: Open your pp90_94.html file in Notepad if you closed it Add a second complete image tag after the first by simply copying your tag (including alt, width and height attributes and values) and pasting it beneath the original so that you now have two identical copies of this piece of code in your XHTML code In the second, newly copied code, change the width and height values so that they are half that of the original dimensions. Re-save your web page and load it in your browser. Look at properties of both the larger size image and its smaller/resized version. Are the file sizes different? Why? Look at Tip 2 for the answer! ©Webster University Vienna Austria Scaling an image (pg.94)

16 Open your template.html file in Notepad and immediately save it as pg96.html Add the code and text from Figures 5.22 to your file (note the author has cut out [snip] the full text for this web page) so you need good eyes to read it and copy it from Figure 5.23 Re-save your web page and preview it in your browser. The layout should look similar to that in Figure 5.23 Try aligning the image to the left side of your web page. 1 st Tip: Yes, you must remember this as its looks like a good exam question. ©Webster University Vienna Austria Making images float (pg.96)

17 Open pg96.html in Notepad and immediately save it as pg97.html Add the new img tag and attributes above Pioneer Valley: Northampton as shown in Figure 5.26 Add the code and text This building…. that is started in Figure 5.26 below the Pioneer Valley: Northampton and then shown as the complete text in Figure 5.27. It is a lot of text to type, so instead go to and copy/paste some of the text there. Now re- save your web page and view it in your browser. If it doesnt look quite the same as Figure 5.27 simply add more text to the first paragraph block by copying and pasting the same text into your document as many times as it takes. Read the Tips ©Webster University Vienna Austria Float images on both sides (pg.97)

18 Open pg96.html in Notepad and immediately save it as pg98.html Change the text and code so that it looks like Figure 5.28 Add the img tag for flower.gif Add the tag as shown and try out each of the clear attributes (left, right, both) to see their effect, but at the end save your file with the attribute Read the Tips and note that although clear is deprecated, the lack of support for the CSS properties for creating this affect means that you may have to use it. ©Webster University Vienna Austria Stopping elements from wrapping (pg.97)

19 If you closed pg98.html reopen it in Notepad and save it as pg99.html Change the image code so that it looks like Figure 5.32 Add the vspace and hspace attribute and value of 10 to the house.jpg image. Re-save your file and view it in your browser. It should look similar in layout to Figure 5.33. ©Webster University Vienna Austria Adding space around an image (pg.99)

20 Open pg99.html in Notepad Add the tag and its attributes as shown in Figure 5.38 to the bottom of the XHTML code (but above the end body tag!) Save your web page and preview it in your browser. Experiment with the different attributes available Your horizontal rule will always start on a new line ©Webster University Vienna Austria Adding horizontal rules (pg.101)

21 A hypertext link has three parts: destination, label and target The destination is also essentially three parts 1. First part of the declaration is the hyperlink / anchor tag <a 2. The hyperlink tag uses the href attribute to tell the browser what follows is a hypertext reference 3. Finally comes the URL of the link, e.g., which may include the scheme (http/s) if not a local web page The label is the text enclosed by the hyperlink tags The target is an attribute of the hyperlink that permits the web page designer to decide where the page linked to will open. That is, you can set a targets attribute value to new (target=new) and it will open the linked web page in a new browser window The closing tag after the label finishes the hyperlink Hyperlinks can be applied to images as well as text ©Webster University Vienna Austria Chapter 6 – Links

22 Websters Homepage Opening anchor or link tag. href means the following address is a hypertext reference. Label can be any text you wish but if its not meaningful no one will click on it! The URL or destination address. It could be many things but most common is a website or web page or specific place in a web page. The http (HyperText Transfer Protocol) scheme tells the browser what type of communication rules it must use to find and open the destination site and web content. This is where you want the page to open. It is an optional attribute, but in this case it opens a new browser window. Target names are case sensitive Closing anchor or link tag. ©Webster University Vienna Austria Anatomy of a link

23 Uniform (Universal) Resource Locator: An URL is a fancy name for internet address Contains information about where a file is and what the browser should do with it Scheme: First part of the URL is the scheme, which for this course will always be the HyperText Transfer Protocol (HTTP) HTTP protocol simply defines a standardized method of communication between servers and clients Server name/address: This is the second part of the URL and defines the name and location of the server that stores the web page Path: This is the folder/directory name(s) on the server that leads to the web page ©Webster University Vienna Austria Recap: Chapter 1 – URLs (p.33)

24 Absolute URLs Absolute URLs must be given if the web page or other content your hyperlink references is on a different server than your own It must include the http:// scheme information so that the browser knows how to communicate with the remote site You can use absolute URLs for files on your own server too, but this may become cumbersome and error prone You can create deep links that take the user to a specific web page or place on a web page within the website and therefore bypassing the home page Deep links are a bone of contention as it may take users past relevant info on the home page or even sponsorship links that the website relies on for funds! ©Webster University Vienna Austria Absolute and Relative URLs (pp.36-37)

25 Relative URLs Can be used when the web page or other content your hyperlink references resides on your server Cannot be used to reference content on remote sites To reference a file in your current folder, just use the file name To reference a file in a sub-folder of your current folder simply type the folder name followed by a forward slash and file name To reference a file in a folder in a higher-level folder, use two dots and a forward slash followed by folder/file name ©Webster University Vienna Austria Absolute and Relative URLs (pp.36-37)

26 Open your template.html file in Notepad and immediately save it as pp104_105.html type out ALL the text and XHTML tags as shown in Figure 6.2, but use pg99.html instead of pioneerval.html as the web page to open in your browser – you copied the images already! You do not specify a target in this exercise therefore pg99.html will open in the same browser window. Re-save the file as pp104_105.html and view it in your browser. Now you will create another link in your pp104_105.html web page, but this time it will be a link to an external website on the internet. Open pp104_105.html in Notepad and add the text and XHTML code that appears in Figure 6.5 (not the body tags though!). You should add it after the closing paragraph tag in pp104_105.html Re-save your web page and open it in your browser to try the links. Q: Which of the links you created was an absolute URL and which one was a relative URL? Explain… ©Webster University Vienna Austria Creating a link to another web page (pp.104- 105)

27 Open your template.html file in Notepad and immediately save it as pp106_107.html Ive created the text that is shown in Figure 6.8 (fig6_8.txt) for you to save time, simply copy and paste it into your web page then add the named anchors that are shown in blue Resave the file as pp106_107.html and view it in your browser You should notice that the named anchors arent underlined even though you enclose the text in hyperlink tags You can add the anchor tags without a label and it still works Look at the first tip on page 107. What you should do now is create a hyperlink from one the documents you created previously to the intro named anchor in pp106_107.html and test your link Resave your web page You will have noticed that if there isnt much text after your last anchor, the web page doesnt quite jump directly to the anchor. Ive fixed this by adding tags to create some vertical space so delete the comment tags from the bottom of the text I provided. Alternatively resize your browser window so that it is much smaller and will then jump to the relevant anchor. ©Webster University Vienna Austria Creating anchors and linking to them (pp.106- 107)

28 Open your template.html file in Notepad and immediately save it as pp108_111.html Add some text of your choice with a hyperlink to a site of your choice The book says target=_blank opens a new window, well so does target=betty Simply read and understand how base target works on page 109, but dont do the exercise unless you really want to In the hyperlink specify a target and assign it a value Resave your file and test it in your browser Following the example in the 4 th paragraph of Figure 6.15 on page 110 add your name to the bottom of the web page and use an mailto: email link so that a user can click on your name to send you an email Resave the file again and test it in your browser ©Webster University Vienna Austria Targeting links and other kinds of links (pp.108- 111)

29 Read pages 112-113 so that you are aware of these options, but dont do the exercises unless you really want to Note that depending on which browser your users have they will experience this functionality differently! (Read all tips) ©Webster University Vienna Austria Shortcuts and tab order for links (pp.112-113)

30 Following the examples in Figure 6.22 add two hyperlinks to two images at the bottom of your pp104_105.html file just before the closing body tag Use the pointleft.gif and pointright.gif image files youve been provided with instead of the file names the author uses Where the author has used prevpage.html and nextpage.html you should replace these names with the names of web pages you have created in previous exercises Resave your file and test your image links in your browser ©Webster University Vienna Austria Using images to label links (p.114)

31 Open your template.html file in Notepad and immediately save it as pg115.html Just using the jpg file as your link is really cool as you dont have to create a whole XHMTL page just to display the photograph Add the code and text in Figure 6.24 from the first tag to the end of the second image hyperlink, i.e., the fruitstand hyperlink You already have the images copied so re-save and test your web page to test the thumbnail hyperlinks The first tip is important to understand! ©Webster University Vienna Austria Linking thumbnails to images (pg.115)

32 Creating a client side image map (pp.116-118) Image maps work by defining an area of an image that is to be used as a hyperlink The areas used as hyperlinks are defined by coordinate values that are pixel location values based on an x,y axis Coordinate values start at x=0 and y=0 in any images top left hand corner Implementing an image map is done in two parts 1. Define the areas of the image and their respective hyperlinks between tag pairs and give your map a unique name 2. Create your img tag and declare it as an image map by using the usemap attribute You can use target in your hyperlinks if you wish You can create circular and polygon hyperlink areas ©Webster University Vienna Austria Optional

33 Creating a client side image map (pp.116-118) Open your template.html file and immediately save it as pp116_118.html Add ALL the text and code shown in Figure 6.29 Again use websites or files you have created in this class for your hyperlinked web pages Resave and test your web page in your browser Add another area of your image as a hyperlink, but this time the area is circular. The values you should use are: x=44, y=50 and r=32 The circular area you create should be right over the circular logo on the left side of the image. Add a hyperlink of your choice to this and then resave and test ©Webster University Vienna Austria Optional

34 I would like that you finish all the exercises that are discussed in the book (except those marked as optional) You should have the following files after completing this weeks work: If you have problems with some of them, please ask for help during the next lecture pp70_71.html pg72.html pg73.html pg74.html pp76_78.html pp90_94.html pg96.html pg97.html pg98.html pg99.html pp104_105.html pp106_107.html pp108_111.html pg115.html pp116_118.html ©Webster University Vienna Austria HOMEWORK (optional)

35 Download the Homework2 zip file from the course web site In the zip archive you have a Word document with instructions, plus Ive prepared the setup for your files Follow the instructions from the Word file, and when you finish, upload the Homework folder into your DropBox account Prepare for next weeks class by reading Chapter 7! ©Webster University Vienna Austria HOMEWORK

Download ppt "COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I, 2012 © Webster University Vienna Week 2 – Class 2"

Similar presentations

Ads by Google