Transcript Unit-Gx

Unit G - Images
The great questions of life?
How does an airplane stay up?
Where does the tooth fairy get her money?
Why is the sky blue?
How does Santa deliver all those toys in one
night?
And the really big one…
If web pages are only text files, then
how can a web page show pictures?
img tag
Images can be added to a Web page by linking to a separate
file using the img element
• One-sided element
• Must include two attributes:
• src: path and filename to the image file
• alt: text to display if image is unavailable
• Inline element by default
• Can be wrapped in block element for alignment purposes
• Within text, aligned to text baseline
<h2>Dog Information</h2>
<p>At T.A.S.K. we care about all the pets that we provide a
comfortable kennel experience and take care of through our
medical and obedience classes. </p>
<img src="CuteDogs.jpg" height="131" width="175" alt="Two
dogs face to face touching noses - very cute">
Height and width are in
pixels and are optional.
Why have quotes around alt text?
If you had alt=Two dogs face to face - very cute>
The result would be: Two
Quotes are needed because when the browser parses the
code it interprets the first space it encounters as the end of
the alt text.
So lets talk about images (aka graphics, pictures)
Let’s talk about resolution
Resolution
How close together the dots (pixels – picture
elements) should be in the output.
Measured in dots per inch (dpi).
High resolution = more detail, large
file size.
The world of images is divided
into two parts
Image file types
Bitmap image
Represented as grid of dots
of specified colors
e.g., JPG, GIF, and PNG
Vector graphic
Encoded as geometric shapes
e.g., SVG
What image file formats should be used
with web pages?
 JPG
 GIF
 PNG
 SVG
What about good old BMP – Bitmap?
Very large files
Do not scale well
BMP files should NOT be used for web pages!!
Browsers will not display BMP files.
JPG – Joint Picture Expert Group
• Optimized for many colors - at least 24 bits of memory to each
pixel 16.8 million colors
• Good for photographs
• Lossy - they retain all color information, but compress file size by
selectively discarding data—and that compression can result in a
loss of quality. If you choose the maximum quality option, your
image will most likely be indistinguishable from your original
photograph, but will have a larger file size
JPEGs
PROS
CONS
• 24-bit color w/ up to 16M colors
• Great for photographs
• Great for images w/ more than
256 colors
• Great for making smaller file
sizes (usually)
• Discard a lot of data - “Lossy”
• Cannot be animated
• Doesn’t support transparency
• Not good for text images
• Not good for images with sharp
edges
GIF – Graphic Interface Format
• Displays indexed-color graphics
• Will only display a maximum of 256 colors
• Not usually used as a format for digital photography. Digital
photographers use image file formats capable of reproducing a
greater range of colors, such as TIFF, RAW or JPEG
• Can be animated
GIFs
PROS
CONS
• Supports transparency
• Can be animated
• Great for images with limited
colors
• Great for line drawings & clip art
• Great for text images
• “Lossless”
• Only supports 256 colors
• File sizes can be quite large
• Not good for photographs
• Not good for images w/ more
than 256 colors
PNG – Portable Network Graphics
• Full range of color depths
• Support for sophisticated image transparency
• Better interlacing, and automatic corrections for display monitor
• PNG images can also hold a short text description of the image’s
content, which allows Internet search engines to search for images
based on these embedded text descriptions.
PNGs
PROS
CONS
• “Lossless”
• Smaller file sizes
• Great transparency support
• Capable of producing
background images without
jagged edges
• Great for text images
• Great for logos
• Not great for large images (large
file sizes compared to JPEG)
• Cannot be animated
• Not supported by all web
browsers
• Typically have larger file sizes
than JPEGs since they use
lossless compression
SVG – Scalable Vector Graphics
 Store two-dimensional graphics. The SVG file format is based on the
XML markup language. This means that even though the file contains an
image, the file itself is actually stored in a text-based file format.
 The SVG file format was created by the World Wide Web Consortium as
a standard way to display vector graphics on the Internet.
 Files with the .svg extension are often created in Adobe Creative Suite
applications, but are not solely reserved for the Adobe programs.
 SVG files can be compressed, but once compressed the files will contain
the .svgz extension.
 We will not be using svg files in this course or on web pages at present.
 For more information:
http://www.w3schools.com/HTML/html5_svg.asp
So what do you really need to
know about graphic files when it
comes to writing web pages?
 The file formats you should use are jpg, gif and png
 If your graphics have a lot of colors (such as a photo), choose JPG
 If your graphics have few colors, choose GIF
 Pay attention to the file type dog.jpg
dog.gif
Do NOT use bmp, tiff or psd
The draft dilemma
Bill
Bob
Height: 5’ 7”
Excellent on defense
Outstanding shooter
Great play maker
Bob
Bill
Height: 7’ 1”
Good on defense
Outstanding shot
blocker
Below average free
throw shooter.
You can’t make a short person taller, but you can teach
a tall person
to be better
at shooting
Who should
your
draft – free
Bobthrows.
or Bill?
Don’t make an image that is small in dimensions larger.
Figure Element
Used to mark images that add information to a Web page semantic element.
The <figure> tag provides a container for content that is
equivalent to a figure or diagram in a book.
It can be used to group a caption with one or more images,
a block of code or other content.
CSS float attribute enables Web page elements to flow
around figure.
<p><figure><img src="CuteDogs.jpg" height="131" width="175"
alt="Two dogs - very cute"></figure>
<p>At T.A.S.K. we care about all the pets that we provide a
comfortable kennel experience and take care of through our
medical and obedience classes.</p>
<p>We hope that you will consider us when looking for any of
these services. Our office are located in many convenient
locations throughout the Phoenix valley.</p>
Since image is listed
first, it is displayed
before the paragraphs.
The float property enables Web
page elements to flow around figure.
Left and right values align figure.
figure {
display: block;
float: right;
margin: 0;
padding: 0;
}
Controlling Page Flow
CSS float property not always sufficient for desired
page layout.
CSS clear property: prevents floated elements from
being displayed to the side of another element.
Allows more precise control of Web page flow.
Clear property causes footer
element to be displayed without
floating elements to its right.
footer {
display: block;
background: #B8944D;
padding: 0.25em;
margin: 0;
clear: right;
}
Also, notice the footer
structure element.
Adding a Caption
figcaption
• Marks text as a caption for associated image
• Nested within figure element for the image
• Provide context, explanation or credit
<figure>
<img src="sunset.jpg" alt="Beautiful sunset">
<figcaption>An Arizona sunset</figcaption>
</figure>
If before img tag then caption above image.
If below img tag then caption below image.
<figure>
<figcaption>"Two very cute
dogs"</figcaption>
<img src="CuteDogs-1.jpg"
alt="Two dogs face to face
touching noses">
</figure>
<figure>
<img src="kittens-1.jpg"
alt="Two kittens">
<figcaption>"Two very cute
kittens"</figcaption>
</figure>
Caption with multiple images
<figure>
<img src="bird1.jpg" alt="Parakeet">
<img src="bird2.jpg" alt="Parrot">
<figcaption>"Two of the most common pet birds - they also need
vet care."</figcaption>
</figure>
Associating Images with Related Text
title attribute
• Used to specify additional image information
• Browsers display as floating text during mouse-over
• When not specified, some browsers display alt text
<img src="phone-99.jpg" alt="Newest phone model 99"
title="The model 99 phone has special security features">
<img src="CuteDogs.jpg" height="131" width="175"
alt="Two dogs - very cute" title="Very cute dogs face to face touching noses">
The title information displays when
mouse goes over the image.
Using Images as Links
<a href="gcc.html" ><img src="glendale.jpg"></a>
<a href="http://www2.gccaz.edu" /><img src="gaucho.jpg"></a>
• Images can be used as links - the img element is the clickable item
• Browsers typically add border around linked image to display link state
• Use pseudo-classes to modify link state colors
• Use CSS border property to remove the border
Inserting a Background Image
• Image can be background of Web page or element
• Specify path and filename as value for background property
• Important to maintain contrast between background and text
• Specify background color in case image not available
• Tiling - displaying images repeatedly
• Used by browser to fill screen space
Inserting a Background Image and Color
• Syntax of background property:
• background: url("url goes here")
• Background: color_indicator
• When property-value pairs conflict the one that
occurs later in the rule takes precedence.
body {
padding: 0; margin: 0;
font-family: tahoma, arial, helvetica, sans-serif;
background: white;
background: url("images/brick.jpg"); }
Create an Image Map
• An image map is HTML code associated with an image
that specifies one or more shapes using sets of
coordinates and provides a link target for each shape
• Each linked shape is known as a hotspot
• Shape values can be rect, poly, or circle
• rect coordinates based on top-left corner and bottom-right
corner of shape
• poly coordinates based on each vertices in the shape
• circle coordinates based on center point and radius of the
circle
• Coordinates are measured from the top-left corner
• Use third-party software to generate the coordinates
• Code for rect shape in an image map
Favicon
Small image (icon) that is associated with Web page in the address bar
and on bookmarks
• 16 x 16 pixels
• .ico format
<head>
:
<link rel="shortcut icon" href=“sp-wren.ico">
:
</head>
Why does my Favicon not work?
 It must be an ico format and in the correct location.
 The favicon may not show when you test this feature with your page
on the local storage.
 Most browsers do not show the favicon unless the page is
published and you access it with a web address that starts with
http://. (Most versions of Firefox will show the favicon off your local
storage.)
Now I can make a web
page showing pictures
of my puppies doing
cute things.
I wonder if I can
include a picture of
Lassie on my web
page?