Creating Websites home
Introduction to the Web
Marking up text
FTP and FileZilla
Links and anchors
Getting some style
Testing and debugging
Images and maps
Audio and video
The DOM and scripting
Logic and Arrays
Functions and document.write
Forms and INPUT
Scripting w/ tables
This first video describes HTML's support for images and client-side maps:
Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.
Lesson 11: Images and Client-side Maps
Hands on exercise
The exercise for this lesson is primarily concerned with displaying images and constructing client-side maps.
First, build a document called 'map_work.html':
begin by opening 'html_skel' in your text editor and saving it as 'map_work.html'.
Set the title to something like 'Images and Maps'.
Add a paragraph of text about the image 'bld.jpg' and then include the image 'bld.jpg'; view this page.
Experiment with various width and height attributes to see the effect.
Add a map to divide the bld.jpg image into four quadrants using rectangle shapes. The image is 327 x 215 pixels. We have provided some target pages for the links:
got2ul.html - for upper left corner
got2ur.html - for upper right corner
got2ll.html - for lower left corner
got2lr.html - for lower right corner
Test this map works as expected.
Next, modify 'map_work.html':
copy the paragraph and image of 'bld.jpg', but now create a new map
over the image, one that uses circle shapes. Define one circle in the
upper left section of the image and one in the lower right; they should not
overlap. We have some more target pages for you to use:
got2uc.html - for upper circle
got2lc.html - for lower circle
Test this map works.
Optional: There are some animated gif images to play with if you wish:
There are some map files and target pages you can experiment with if you like:
Some text that uses these maps and pages, based on the lecture, is found in workmaps.html. This is not a complete document but may be copied and pasted into your own 'map_work.html" to experiment with.
Note: all maps are from https://www.worldatlas.com/clipart.htm (and it takes some poking around to find some of them.)
The video below is an optional video.It explores an some of the
business models on the web, as well as raising concern about
following copyright laws. It also describes two application that I find useful:
"Pixabay" as a source for images and
"IrfanView" as a free application for working with images.
Bonus video: Tools and resources.
A cumulative summary of the contents of the course so far: Click here
Hands on exercise (Optional)
Take a look at pixabay (https://pixabay.com/) and get an idea of what's on their site.
Consider downloading and installing IrfanView (https://www.irfanview.com/).
back list forward