meets Tuesday and Thursday from 0800-0915
office hours in Manning 112
Class Schedule
10 Jan | intro
15 Jan | clients
17 Jan | servers
22 Jan | networks
24 Jan | basics lab
29 Jan | structural layer
31 Jan | presentational layer
05 Feb | working with layers
07 Feb | behavior layer |
12 Feb |
images & design |
design thoughts |
accessible design |
next session
14 Feb | website lab
19 Feb | document markup
21 Feb | tools that read markup
26 Feb | document markup lab
28 Feb | spreadsheets
05 Mar | formulas & functions
07 Mar | data display
19 Mar | database tools
21 Mar | spreadsheets lab
26 Mar | relational databases
28 Mar | tables
02 Apr | relationships
04 Apr | input & output
09 Apr | SQL
11 Apr | complex queries
16 Apr | databases lab
18 Apr | presentation design
23 Apr | presentation delivery
25 Apr | presentation lab
30 Apr | 0800-1100 | final in class presentation
This work
is licensed under a
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
home & schedule | class blog | syllabus | contact | grades
Images can add a lot to your web pages. Consider using individual images as hyperlinks.
Consider the utility of multiple hyperlinks on an images map as a navigational tool.
tag attribute value
You put images in a web page using the img element. For example, if you include this image tag in your page
< img src="images/GEB.png" />
then the image displayed on this page will be displayed on your page when you load the page. (But only if you have the image stored at the same relative file location from the file location where this particular web page is stored - in a directory named "images" that is three levels away in the file hierarchy from this page)
In the general case, the img element can have a number of attributes though the above example only has a single one, src. In this case, the src attribute is required -- it doesn't make sense to have an img tag without specifying which image.
The img tag can take any or all of the following as attributes:
<img
alt="[Goedel Escher Bach]"
width="301"
height="349"
src="http://ils.unc.edu/courses/2018_spring/inls161_002/images/GEB.png" />
Display the specified image
use [Goedel Escher Bach] as the alternate text if the image is not or cannot be displayed.
display it with a width of 301 pixels
display it with a height of 349 pixels
Find the source of the image at the location specified after the = sign and self-close the tag
It does so because the HTML tags that encompass it refer back to a CSS element that tells the IMAGE object how to display. In particular the encompassing HTML element is a special kind of span. Note how, on line 229 in the code for this page, one sees the tag
class="center"
which refers to the instructions on line 61 on the stylesheet where the special image class named "center" is defined
.center { display: block; text-align: center; margin: 20px auto; }
So an image tag which includes the class attribute named the value "center" will then display in the center of the space.
To make an image into a hyperlink, embed the img tag inside the hypertext anchor
<a href="http://www.unc.edu/">
<img
alt="[Goedel Escher Bach] "
src="http://ils.unc.edu/courses/2018_spring/inls161_002/images/GEB.png" />
</a>
Now when you click on the image it will take you to the UNC homepage.
Image maps are "clickable images". They allow you to specify which URL should be accessed when a user clicks on a part of an image. For example, if you have a state map and want to bring up information about selected counties when a user clicks on the shape of the county, then you can do so by defining a geometric shape around a county and associating the coordinates of that shape with a URL of your choosing - in this case, a county information page. This is a very powerful tool and gives you a lot of flexibility in how you design your pages. It's a step towards dynamic-content as well.
Here is a simple example of the HTML code for a client-side image map. Looking at the code, we see the instructions shown below on this page.
<h2>North Carolina
<map name=" FPMap0">
<area
href="counties/Brunswick.htm" shape="circle" coords="375, 189, 18">
<area
href="counties/Columbus.htm" shape="circle" coords="348, 175, 18">
< area
href="counties/NewHanover.htm" shape="circle" coords="399, 177, 15">
[we skipped many lines of code here]
< area
href="counties/Jones.htm" shape="polygon" coords="408, 123, 417, 104, 440, 112, 440, 137, 412, 121">
</map>
<img
src="../images/NorthCarolina/NCcounties.gif"
width="537"
height="218"
usemap="#FPMap0"
alt="map of North Carolina's 100 counties" />
</h2>
You can use some editors to create image maps or online tools such as image-maps.com.