Web Design (8) Images (2)

My Holiday Photos An exercise in adding and linking images. Create a new website folder calling it ‘My Holiday Photos’. In it place an index.html file and an image folder. Within the image folder, create 2 folders called ‘thumbnails’ and ‘photos’ Place copies of 3 of your holiday photos (different destinations) in both folders (i.e. the same 3 in both!) Now add 3 more html files to your website folder, naming each with a holiday destination.

Resizing your photos Resize the 3 photos in the ‘thumbnails folder’ as: width 100 pixels, and height 75 pixels. Resize the 3 photos in the ‘photos folder’ as: width 500 pixels, and height 375 pixels.

Home Page / thumbnails On the home page, for each of the 3 thumbnails, write appropriate code, using this format: <img src=“images/thumbnails/.jpg” alt=“ ” width=“100” height=”75”> Add appropriate text to each Try in browser. Check Validation.

Destination Files / photos In each of the 3 destination html documents, write appropriate code for the relevant photo, using this format: <img src=“images/photos/.jpg” alt=“ ” width=“500” height=”375”> Add appropriate text to each one. Try in browser. Check Validation.

Adding anchors Back to the Home Page and add anchors to link the thumbnails to their respective files: <img src=“images/thumbnails/.jpg” alt=“ ” width=“100” height=”75”> Now see if the links are working!

Return links Finally create links from each of the 3 destination pages back to the home page. Try in the browser and check validation.

Inline Frames (1) Frame – ‘a window in a window’ Frames can be used to display web pages that are normally too large to fit on a screen, by adding to the page its own set of scroll bars.

Inline Frames (2) You place the inline frame on a web page in a similar way to an image; specifying the source (src) of its content as well as its width and height.

Inline Frames (3) I Frames are used less today; however they are now sometimes used to quarantine interactive adverts so that they don’t interfere with the rest of the page. I Frames can also be used to display ‘You Tube’ and ‘Sound Cloud’ pages.

Inline Frames (Exercise) In the Dickens web site folder create and add a page called ‘frame.html’ In the body of ‘frame.html’ enter the following code: Tale of Two Cities In the browser see ‘the window within a window’!