Transcript Lecture 4_ppt

Introduction to Programming
the WWW I
CMSC 10100-1
Winter 2003
Lecture 4
Topics for the Day
• Links
• More about images
 different file types
 making thumbnails
 bandwidth issues
• Introduction to image maps
Different Types of Hyperlinks
• Absolute URLs point to Web pages on
other Web servers
• Relative URLs point to Web pages on
the same Web server
• Named Anchors point to a different
location on the current Web page
All Hyperlinks Have Two Parts
• The Link Label is the visible element that the
user points to and clicks (link labels can be
text segments or images)
• The Link Destination is the location that the
link takes you to when you click on the link
• Only the link destinations are handled
differently for absolute URLs, relative URLs,
and named anchors
Anchor Tags
• All hyperlinks are created with the
anchor tag:
<a>this is a link label</a>
• The href attribute is used to specify
the link destination:
<a href=“destination.html”>
Absolute URLs
• All absolute URLs use complete URL
addresses for their link destinations:
<a href=“http://www.uchicago.edu/”>UChicago</a>
• Any Web page can be referenced by an
absolute URL as long as you have its correct
address
Relative URLs
• A relative URL need only specify a file name for its link
destination:
<a href=“treehouse.html”>tree houses</a>
• This assumes the destination file is in the same
directory as the HTML file containing the link
• If the file is in a different directory, pathing information
must be added to the href value
Named Anchors
• A named link destination specifies a location that has
been marked by an anchor tag with a name attribute
<a href=“#lumber”>Some Good Lumber</a>
<a name=“lumber”>some good lumber</a>
• The href value is prefaced with the # character but
the name value is not
Named Anchors
Combined with Other Links
• A named anchor can be added to an absolute
or relative link as long as the destination being
referenced contains that named anchor
<a href=“treehouse.html#lumber”>Some
Good Lumber</a>
• Just add a # followed by the anchor’s name to
the end of the file name in the href value
Making anything a link
• You can enclose all sorts of elements
inside <a></a>
 headings
 text
 pictures
• Making a picture a link:
<a href=“foo.html”><img
src=“foo.jpg”></a>
Link Maintenance
• An absolute link that works today may not work
tomorrow
• Dead links frustrate visitors and detract from your Web
pages
• To keep all of your links operational, you have to test
them periodically and update any that have died
Automated Link Checkers
• If you have a large number of links, you
•
•
•
should automate the process of link testing
You can subscribe to a Web-based service for
link testing and weekly or monthly link reports
You can obtain your own link testing software
and run it yourself
You could also write a Perl script…
Inline Images
• The src attribute inside the img tag is used to
add an image to a Web page:
<img src=“donut.gif”>
• GIF and JPG are the most commonly used file
formats for inline images – browsers only
recognize GIF, JPG, and PNG image formats
Paths
• The src attribute for an image file retrieves
•
•
images from the same directory as the HTML
file containing the img tag:
<img src=“donut.gif”>
If you want to retrieve an image from a different
directory, you can add path information to the
file name:
<img src=“pix/donut.gif”>
You can also specify a URL to link an image
from outside
Image Attributes
• The align attribute positions the image and
enables text to flow around an image
• The height and width attributes scale the
image to any size you like
• The alt attribute allows you to describe the
image in text for browsers that can’t display the
image. Also helpful to text->voice conversion
Flowing Text
• Use the align attribute to make text flow
alongside an image:
<img src=“donut.gif”
align=“left”>
positions the image on the left side of the
page and allows text to run down its right
side
GIF
(Graphics Interchange Format)
• Uses an adaptive 8-bit color palette (256
colors)
• Especially suitable for line art and
cartoons
• Can work well for some photographs
• Patent issues
JPEG
(Joint Photographic Experts Group)
• Uses a fixed 24-bit color palette (millions
of colors)
• Especially suitable for high-resolution
photographs
• Uses lossy file compression
PNG
(Portable Network Graphics)
•
•
•
•
W3C free stand-in format for GIF
Often smaller than GIF
lossless (like GIF)
Does not support animation
Lossy Image Compression
• Trades image quality for memory savings
• Very good for minimizing bandwidth
• You control the trade-off when you save
the image
• Supported by JPG, not by GIF or PNG
Interlaced GIFs
• Displays images incrementally in four passes
• Gives users something to look at while the
image is still downloading
• Any GIF image can be converted to an
interlaced GIF
Transparent GIFs
• Transparent regions in an image allow the background color or
pattern of a Web page to show through
• Any GIF image can be made transparent by specifying one color in
the image that defines its transparent regions
• The background of a photograph can be made transparent after
some graphics editing
Animated GIFs
• The GIF file format supports cartoon animations
• An animated GIF is stored in a single GIF file
• To display an animated GIF, just specify the GIF
file in the SRC attribute of an IMG tag
Image Maps
• Navigational menus and navigation bars have clickable regions
that take the user to different locations
• HTML’s map element makes it possible to specify different clickable
regions within a single image
• Image maps can be created manually with the “ISMAP trick” or
with the help of an image mapper
• Best created with software
Thumbnail Previews
• Let your visitors decide if they want to download a large
(bandwidth intensive) image
• Use lossy file compression to create a small (light
bandwidth) thumbnail version of the original image
• Make the thumbnail sketch a link label so users can
click through to the original image if they want it
Making thumbnails
• Load image in a program (e.g. Photoshop)
• Reduce the image quality under the save
options
• Set a small height and width in the page
File conversion for “hackers”
• Use the command “convert”





Part of Image Magic
installed in our department Linux system
Can get (via fink) version for Mac OSX
can reduce image quality, do interlacing
convert -quality 10 foo.jpg foo.tn.jpg
Bandwidth Limitations
• Image files consume more bandwidth
than text files
• Users who access the Internet via
telephone lines will have to wait for image
files that are 100KB or larger
• Whenever possible, use image files no
larger than 30-40KB
Battling Bandwidth Limitations
• Always specify height and width attributes
for all your images so the browser can “work
around” each image while it is downloading
• Don’t put any large images at the top of a Web
•
•
page
Use interlaced GIFs and progressive JPGs
Use the 1x1 image trick (with caution)