Download Day #7, Part 2: Images

Day #7, Part 2: Images
Create a new HTML file called Day0702Images.htm.
There are 3 types of images you can use for a web page:



JPEG
GIF
PNG
HTML <img> Tag
Use the <img> tag to display images on a web page.
Attributes:
 src
 alt
 height
 width
Relative or absolute URL of the image
Alternate text. Include for readers.
Height in pixels
Width in pixels
Example
Add the following to the top of your HTML page. The first <img> element displays the
picture at its actual dimensions. The second <img> element displays the picture at 800x600
pixels.
<img src="http://www.w3schools.com/images/pulpit.jpg" alt="Mountain">
<img src="http://www.w3schools.com/images/pulpit.jpg" alt="Mountain"
height="450" width="600">
CSS properties
The CSS properties for an image are:
 height
 width
Document1
1
7/29/2017
Example
Comment out the above two HTML images (<!-- and --> are the comment delimiters). Add
the following to your HTML file.
<img class="thumbnail"
src="http://www.tomkleen.com/CSCI425/Images/ie.jpg" alt="Internet Explorer">
<img class="thumbnail"
src="http://www.tomkleen.com/CSCI425/Images/chrome.jpg" alt="Chrome">
<img class="thumbnail"
src="http://www.tomkleen.com/CSCI425/Images/firefox.jpg" alt="Firefox">
<img class="thumbnail"
src="http://www.tomkleen.com/CSCI425/Images/safari.jpg" alt="Safari">
<img class="thumbnail"
src="http://www.tomkleen.com/CSCI425/Images/opera.jpg" alt="Opera">
CreateAdd the following to your CSS rules.
.thumbnail { height:50px; width:50px;}
CSS Vertical Alignment
Use CSS to align images with their surrounding text. Property:

vertical-align
a relative value, absolute value, or keyword that determines
the vertical alignment of an image. If you use absolute values, positive
values will raise the image, and negative values will lower the image.
Common keyword values for vertical-align:





bottom
bottom of the box that contains the adjacent element
middle
middle of the box that contains the adjacent element
top
top of the box that contains the adjacent element
text-bottom bottom of the text
text-top
top of the text
Document1
2
7/29/2017
Example
Add the following to the bottom of your HTML file.
<h2>Contact Information</h2>
<p><img class="icon"
src="http://www.tomkleen.com/CSCI425/Images/phone.png" alt="Phone"> Phone:
712-279-5411</p>
<p><img class="icon"
src="http://www.tomkleen.com/CSCI425/Images/email.png" alt="Email"> Email:
[email protected]</p>
<p><img class="icon"
src="http://www.tomkleen.com/CSCI425/Images/web.png" alt="Web"> Web:
www.briarcliff.edu </p>
Then add the following to your CSS styles and preview your file in the browser.
.icon {height:20px; width:20px;
vertical-align:top;}
CSS: Floating an image
Properties for floating an image:


float
clear
Values are left, right, none.
Values are left, right, both, none.
The float property determines whether the image should be floated left or right. It is floated
in relation to the text that immediately follows the image.
The clear property determines if an element that follows a floated element will float into the
space left by the floated element.
Example
Copy the following paragraph and add three copies of it to the bottom of your HTML file.
<p>Four score and seven years ago. Four score and seven years ago. Four score
and seven years ago. Four score and seven years ago. Four score and seven
years ago. Four score and seven years ago. Four score and seven years ago.
Four score and seven years ago. Four score and seven years ago. Four score
and seven years ago. Four score and seven years ago. Four score and seven
years ago. Four score and seven years ago. Four score and seven years ago.
</p>
Document1
3
7/29/2017
Then copy this between the first and second paragraphs that you just pasted.
<img id="google" src="https://www.google.com/images/srpr/logo3w.png"
alt="Google">
Preview your file in the browser. The image element occupies all of the vertical space
between the two paragraphs.
Now add the following to your CSS styles.
#google { float: left; margin-top: 15px; margin-bottom: 15px;}
Preview your file in the browser. The image will float left and the following text will move up
and occupy the space to the right of the image.
Now add the following to the opening <p> tag of the second paragraph.
<p class="last">
Then add the following to your CSS.
.last {clear: left;}
Preview your file in the browser. The paragraph will move back below the image and to the
left.
The <figure> and <figcaption> tags
The figure element represents a unit of content, optionally with a caption, that is selfcontained, that is typically referenced as a single unit from the main flow of the document,
and that can be moved away from the main flow of the document without affecting the
document’s meaning. --w3.org
A figure can be an image, but it can also be a table, code text, or possibly another element.
The figcaption element is nested within the figure element and is used to add a caption to
the figure.
Example
Copy the following to the bottom of your HTML file.
<figure>
<img src="
http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Michelangelo%2
7s_Pieta_5450_cropncleaned_edit.jpg/220pxMichelangelo%27s_Pieta_5450_cropncleaned_edit.jpg" alt="Pieta">
<figcaption>Michaelangelo's Pieta</figcaption>
</figure>
Document1
4
7/29/2017
Add the following to your CSS styles.
figcaption {font-family:"Comic Sans MS", sans-serif;}
NOTE: In IE, this does NOT work! But it works in Chrome.
Thumbnails
A thumbnail is a small picture that is a hyperlink to a bigger picture (on a separate page).
The bigger picture can be displayed on the same page by using JavaScript (later in the
term).
Example
Create an Images folder below your public_html folder. Copy the following files into your
Images folder.






http://www.tomkleen.com/CSCI425/Images/phone.png
http://www.tomkleen.com/CSCI425/Images/email.png
http://www.tomkleen.com/CSCI425/Images/web.png
http://www.tomkleen.com/CSCI425/Images/bigphone.png
http://www.tomkleen.com/CSCI425/Images/bigemail.png
http://www.tomkleen.com/CSCI425/Images/bigweb.png
HTML:
<p>Click on a picture</p>
<p>
<a href="images/BigPhone.png"><img src="images/phone.png" height="30"
width="30" alt="Phone"></a>
<a href="images/BigEmail.png"><img src="images/email.png" height="30"
width="30" alt="Email"></a>
<a href="images/BigWeb.png"><img src="images/web.png" height="30"
width="30" alt="Web"></a>
</p>
NOTE: The above code depends on creating big versions of the small images (which I did in
Paint.Net). It also demonstrates how you can link to an image rather than a web page. Note
that no CSS is required.
Document1
5
7/29/2017
Image Maps
An image map has "hot spots" that will link to another web page. You need:
 An <img> with the usemap attribute
 A <map> element
 Within the <map> element, an <area> element for each hot spot area on your map.
<map>
The <map> element only requires one attribute:

name identifies the map (just like the id attribute does for other tags)
<area>
The <area> element requires the following attributes:




href
alt
shape
coords
the location to jump to when clicked
alternate text
identifies the type of shape: rect, circle, poly
gives the coordinates
Rectangle coordinates: x1, y1, x2, y2, where x1 and y1 are the top left coordinates and x2
and y2 are the bottom right coordinates. Note that you do not give the width and height of
the rectangle; you give the coordinates of the lower-right corner.
Circle coordinates: x, y, radius
Poly coordinates: any number of x-y pairs
Example
Download the following file: Iowa map. Load the file into Paint.NET.
Use the rectangle selection tool to create a rectangle around both Sioux City and the text
identifying Sioux City. Determine the coordinates of the top-left and bottom-right corners.
Then use the following HTML:
<img src="images/iowa.gif" alt="Map of Iowa" usemap="#iowa">
<map name="iowa">
<area href="https://www.sioux-city.org/" alt="Sioux City"
shape="rect" coords="85,81,148,102">
<area href="http://www.omaha.com" alt="Omaha"
shape="circle" coords="135,172,22">
<area href="http://www.dmgov.org" alt="Des Moines"
shape="poly" coords="207,145,207,175,282,175,282,145">
</map>
NOTE: spaces are NOT allowed between the numbers in the coords attribute.
Document1
6
7/29/2017
Image editors
Two good free image editors are GIMP and Paint.NET.
Low-cost commercial image editor: Photoshop Elements.
Very expensive commercial image editor: Photoshop.
Image sources
Some sources of free images:




www.sxc.hu
www.freefoto.com
www.openphoto.net
www.google.com/imghp
Document1
7
7/29/2017