| How to Submit Solutions for this Homework/Computer Lab | |
|---|---|
| Due Date: | Friday 10-27-06 |
| E-mail To: |  |
| Subject Line: | HWCL 07 |
| 1'st Line: | Your name and student number |
This computer lab is written for Windows 9x/2000/NT/XT based PCs, with a Mozilla/Firefox Browser or an Internet Explorer. Those portions of the lab that are not platform-specific can also be run on a Mac.
The goals of this computer lab are:
7-Zip is a file archiver with high compression ratio. It supports
the 7z, ZIP, GZIP, BZIP2 and TAR formats for both packing and unpacking.
Unpacking only is supported for the RAR, CAB, ISO, ARJ, LZH, CHM, Z,
CPIO, RPM, DEB, and NSIS formats. The home page of 7-Zip is at
http://www.7-zip.org.
Image Analyzer 1.26 is an image editing, enhancement and analysis
program. It can read/write and convert between BMP, ICO, CUR, WMF, EMF,
JPEG, PNG, PCX, JPEG2000, GIF, and TIF image formats. The home page of
Image Analyzer is at
http://meesoft.logicnet.dk.
LViewPro 1.D/32 is a very compact image viewer, editor, and file format
converter. The home page of LViewPro is at
http://www.lview.com.
images2.7z contains a set of 4 selected images in uncompressed
TIFF (Tagged Image File Format) format with 24 bits per pixel.
Images that you want to use in your HTML documents may come from various sources such as a (digital) camera, a scanner, an e-mail attachment, etc. For our purposes, the most common method will probably be to locate images on the WWW (e.g., by using one of the search engines we studied earlier). When you find a suitable image, you just simply right-click on it and then select "Save Image as ..." (Firefox) or "Save Picture as ..." (Internet Explorer) to save it as a file on the computer on which you are currently working. To incorporate the image in an HTML document of your own, you use an <img> tag. Both the HTML file and the image file then need to be uploaded to your WebFiles account on a WWW server. Often you will not want an image in exactly the same form as you obtained it. You may want to change the size of the image, or only use a portion of it. Sometimes you also need to change the format in which the image is stored. And last but not least, how you place images within your HTML document can have a great impact on the perception of the images by a viewer. This computer lab is designed to give you an idea of what's possible and to introduce some useful tools that will help you implementing your own designs.
Note: Some of the img tag attributes shown in this section have been declared deprecated in HTML 4.01. Wherever possible, HTML should only be used to specify the structure of a document and its visual presentation should be controlled by CSS (cascading style sheets). CSS1 replacements for the deprecated HTML attributes are given below
An image can be inserted (almost) anywhere in an HTML document using an <img> tag, e.g., as shown in the following table.
| HTML Element(s) | Resulting Display |
|---|---|
|
<img
src="designs.png" alt="A Small Design"> |
|
|
<p
align="center"> <img src="designs.png" alt="A Small Design"> </p> |
|
|
<p
align="right"> <img src="designs.png" alt="A Small Design"> </p> |
|
|
<center> <img src="designs.png" alt="A Small Design"> </center> |
|
The first row shows the basic tag that can be included
anywhere in a text, e.g., ,
as if it were another character. Note the alt
attribute that is used to give an alternate description for browsers which
do not or cannot display images. You can also make an image
clickable, e.g., , by including it inside an anchor.
The HTML code for this example is
<a
href="designs.png"><img
src="designs.png"
alt="A Small Design"></a>.
The other three examples in the above table show how to position
an image by itself in a paragraph that is either left- or
right-aligned, or centered.
You can also wrap text around images by using the align="left" or the align="right" attribute specifications in the <img> tag as shown in the following table (note that align="center" does not exist).
| HTML Element(s) | Resulting Display |
|---|---|
|
<img
src="fairy.png"
alt="Fairy" align="left" hspace="10" /> <p>The inscription read: Here lies the Lovely Fairy with Azure Hair who died of grief when abandoned by her little brother Pinocchio. </p> |
The inscription read: Here lies the Lovely Fairy with Azure Hair who died of grief when abandoned by her little brother Pinocchio. |
|
<img
src="fairy.png"
alt="Fairy" align="right" hspace="10" /> <p>The inscription read: Here lies the Lovely Fairy with Azure Hair who died of grief when abandoned by her little brother Pinocchio. </p> |
The inscription read: Here lies the Lovely Fairy with Azure Hair who died of grief when abandoned by her little brother Pinocchio. |
To stop text from flowing around a left-aligned image use the <br clear="left"> tag. Similary, <br clear="right"> stops text from flowing around a right-aligned image. You can also use <br clear="all"> to stop text flowing around both left- and right-aligned images.
The next table shows some of the attributes that can be used in the <img> tag.
| Attribute | Attribute Values | Purpose |
|---|---|---|
| align | left, right | Aligns image with respect to the surrounding text |
| alt | description | Describes the image during loading and for text-only browsers |
| border | 0,1,2,... | Makes border of specified width around image |
| height | 1,2,3,... | Specifies height (in pixels) of the window in which the image is placed |
| hspace | 0,1,2,... | Specifies space (in pixels) around image in horizontal direction |
| src | url | Specifies the URL of the image file |
| vspace | 0,1,2,... | Specifies space (in pixels) around image in vertical direction |
| width | 1,2,3,... | Specifies width (in pixels) of the window in which the image is placed |
An example of an HTML document that contains images and uses many of these tags is the Balloon Fiesta page.
Important: Note that the HTML document with the text and the image file are
two separate files.
To display the text and the image properly on the WWW, both files must be present in your public_html directory (or a subdirectory of it).
Definition: Deprecated. A deprecated HTML element or attribute is one that has been outdated by newer constructs. Browsers will generally still support deprecated HTML for backward compatibility, but new HTML documents should avoid the use of tags and/or attributes that have been marked as deprecated.
Deprecated img tag attributes for "stand-alone" image placement:
| Deprecated HTML Examples | |
|---|---|
| HTML Element(s) | Resulting Display |
|
<p
align="left"> <img src="designs.png" alt="A Small Design"> </p> |
|
|
<p
align="center"> <img src="designs.png" alt="A Small Design"> </p> |
|
|
<center> <img src="designs.png" alt="A Small Design"> </center> |
|
|
<p
align="right"> <img src="designs.png" alt="A Small Design"> </p> |
|
CSS1 img tag attribute replacements for "stand-alone" image placement:
| CSS1 Replacements for Deprecated HTML Examples | |
|---|---|
| HTML/CSS Element(s) | Resulting Display |
|
<div
style="text-align: left;"> <img src="designs.png" alt="A Small Design" /> </div> |
|
|
<div
style="text-align: center;"> <img src="designs.png" alt="A Small Design" /> </div> |
|
|
<div
style="text-align: right;"> <img src="designs.png" alt="A Small Design" /> </div> |
|
Deprecated img tag attributes for floating image placement:
| Deprecated HTML Examples | |
|---|---|
| HTML Element(s) | Resulting Display |
|
<img
src="fairy.png"
alt="Fairy" align="left" hspace="10" /> <p>The inscription read: Here lies the Lovely Fairy with Azure Hair who died of grief when abandoned by her little brother Pinocchio. </p> |
The inscription read: Here lies the Lovely Fairy with Azure Hair who died of grief when abandoned by her little brother Pinocchio. |
|
<img
src="fairy.png"
alt="Fairy" align="right" hspace="10" /> <p>The inscription read: Here lies the Lovely Fairy with Azure Hair who died of grief when abandoned by her little brother Pinocchio. </p> |
The inscription read: Here lies the Lovely Fairy with Azure Hair who died of grief when abandoned by her little brother Pinocchio. |
CSS1 img tag attribute replacements for floating image placement:
| CSS1 Replacements for Deprecated HTML Examples | |
|---|---|
| HTML/CSS Element(s) | Resulting Display |
|
<img
src="fairy.png"
alt="Fairy" style="float:left; margin:0 10px 2px 0;" /> <p>The inscription read: Here lies the Lovely Fairy with Azure Hair who died of grief when abandoned by her little brother Pinocchio. </p> |
The inscription read: Here lies the Lovely Fairy with Azure Hair who died of grief when abandoned by her little brother Pinocchio. |
|
<img
src="fairy.png"
alt="Fairy" style="float:right; margin:0 10px 2px 0;" /> <p>The inscription read: Here lies the Lovely Fairy with Azure Hair who died of grief when abandoned by her little brother Pinocchio. </p> |
The inscription read: Here lies the Lovely Fairy with Azure Hair who died of grief when abandoned by her little brother Pinocchio. |
An example of an HTML document that contains images and uses CSS for image placement is the Balloon Fiesta (using CSS) page.
Images are an important medium for communication and you are all familiar with the saying that "an image is worth a thousand words". When using electronic means of communication, the big question is: How are images represented electronically such that they can be distributed universally and economically? In practice there is no single universal format for images that satisfies all requirements for all images. Because different types of images have different properties and different applications have different requirements and, last but not least, politics are an important consideration for many companies, there exist quite a few different image file formats. Some of the most important ones are:
In this lab you will use the GIF, JPEG, PNG, and (uncompressed) TIFF formats. In the next section, you will use the Image Analyzer program to convert between these file formats and you will look at the compression ratios that can be achieved using the GIF, JPEG, and PNG file formats for different types of images.
If necessary, download and install the Image Analyzer program on your computer (use 7-Zip to unpack the archive). The first step for all operations is to open an image in Image Analyzer as shown in the following screen snapshot.
To open TIFF files in Image Analyzer, make sure you have the TIFFRead.dll plugin saved in the same (sub)directory as the Analyzer.exe file.
To crop an image, e.g., color.tif, use the "Rectangle Select Tool" to specify an area within the picture. The result is shown in the following figure.
Then select "Image" and "Crop" as shown next.
At this point the image is cropped, but not yet written to a file. If you don't like the outcome of the cropping, you can select "Edit" and then "Undo" to restore the original image. To save a cropped image under a new filename, choose "File" and then "Save As" as shown in the following screen snapshot.
Make sure you select the right image format (at the bottom of the window shown above) in which you want to save the edited image (e.g., JPEG, PNG, or GIF).
To resize an image, first load the image as shown earlier, and then select "Image;" and "Resize" as shown next.
You can either enter the new image dimensions in pixels, or select them in the form of a percentage of the current size. If the box labeled "Maintain aspect ratio" is checked, then the horizontal and vertical size changes are coupled so that the aspect ratio of the image does not change. If you unclick this box, you can change the horizontal and vertical sizes independently, e.g., to achieve effects like the following:
If you are satisfied with the result of your resizing operation, then save the resulting image as described above (make sure you select the desired output format). Otherwise choose "Edit" and then "Undo" to restore the original image.
To convert an image from one format to another, first load the image (make sure you select the desired input format), and then, without cropping or resizing or any other editing, select "File" and "Save As". Select the desired output format to which you want to convert at the bottom of the "Save As" window, and then click on "Save". Note: When you convert images to the GIF format, the image cannot have more than 256 colors (or 256 gray levels for black & white images). To reduce the number of colors go to "Image" and then select "Convert to 256 Colors" as shown below.
There are different methods that can be used to reduce the number of colors in an image. One method, called dithering, attempts to approximate the original color by using a pattern of pixels, selected from a set (or palette) of 256 colors. This is widely used in the printing industry. For Web pages on computer monitors, where the image resolution is much less than for printed media, it usually works better to use the "nearest color" method shown in the following screen snapshot.
The effect of the color reduction is shown in the next figure.
The file size of a bitmapped image grows very quickly as image size
and color resolution increase. The general formula is
total # bits = width x height x bits/pixel.
A one megapixel digital camera (with an image quality roughly
equivalent to a 3.75 x 5 inch print), for instance, produces images
that have 1280 x 960 = 1,228,800 pixels and 24 bits per
pixel (corresponding to 224 = 16,777,216 colors).
Thus
total # bits = 1280 x 960 x 24 = 29,491,200.
After dividing by 8, this yields an uncompressed file size of
approximately 3.7 MB (megabytes). Even under the best of circumstances,
this would take about 9 minutes to download over a telephone modem.
To keep the required storage space small and download times short, images are generally compressed, using either lossless compression (e.g., for GIF or PNG files) or lossy compression (e.g., for JPG or JPEG files). Lossless compression schemes are generally based on the idea of using short binary strings for representing features that occur frequently in an image and longer strings for features that occur more infrequently.
As an example, consider the "w.w.w" bitmapped image shown (enlarged) below.
The image is 32 pixels wide and 16 pixels high, resulting in a total of 512 pixels. There are 7 different colors, and thus the straightforward fixed length binary representation of each pixel requires 3 bits (23 = 8 > 7), e.g., using a code like the following:
color | binary code --------+------------ black | 000 magenta | 001 purple | 010 This uses a total of 512 x 3 = 1536 bits white | 011 or an average of 3 bits/pixel navy | 100 lime | 101 yellow | 110
Obviously, black occurs most frequently (256 pixels), followed by magenta (128 pixels). These two colors should therefore have shorter binary representations than, for instance, yellow which occurs much less frequently (16 pixels). But how many bits should be used in each case and how should the bit values be assigned so that the image can be restored again later without ambiguity? Fortunately, there is a fairly simple procedure, known as Huffman coding, that answers this question quite easily. It consists of generating a binary tree, starting from the leaves of the tree and systematically adding internal nodes until the root (usually drawn at the top) of the tree is reached.
The starting point to build a Huffman code is to list all items of interest in decreasing order of their probability of occurrence. For the "w.w.w" image the items of interest are the seven colors
black (256 pixels), magenta (128 pixels), purple (32 pixels), white (32 pixels), navy (32 pixels), lime (16 pixels), yellow (16 pixels).
To obtain the probability of occurrence, the number of pixels for each color is divided by the total number of pixels, e.g., 128/512 = 1/4, and thus the probability of a magenta pixel is 1/4. The next figure shows all colors in the "w.w.w" image together with their probabilities, ordered such that the lowest values are on the right.
To make a binary code, the next step is to interpret the two colors with smallest probabilities (pick any two if there are more than two with the same probability) as being descendants of the same parent node, as shown in the next figure.
The parent node is then labeled with the sum of the probabilities of its children. Now, the problem is reduced to finding a Huffman code for the new parent node and all other nodes that are not descendants of this new node. Among all these nodes pick again the two with the smallest probabilities (pick any two if there are more than two with the same probability), and interpret them as the children of a parent node, as shown below for the example considered here.
Note that since there were 4 nodes with probability 1/16 each to choose from, the above choice is not unique. Each of the other possible choices will lead to a different Huffman code, but all these codes will compress the data by the same amount. The following 4 pictures show the completion of the recursive procedure to build the Huffman code tree until the root (with a probability value of 1) is reached.
Once the location of the root is known, the code for each item (color in this example) can easily be read off from the labeling along the links between the nodes. The result for encoding the "w.w.w" image is:
color | binary code --------+------------ black | 0 magenta | 10 This uses a total of purple | 1100 256 x 1 + 128 x 2 + 3 x 32 x 4 + 2 x 16 x 5 = 1056 bits white | 1101 or an average of 2.0625 bits/pixel navy | 1110 ==> Compression ratio 1.45:1 lime | 11110 yellow | 11111
Obviously, the choice of labeling left branches in the tree with 0 and right branches with 1 is arbitrary and any other labeling (as long as it assigns different bit values for the descendants of the same parent) would have worked just as well. The Huffman coding scheme in this simple example achieved a reduction in the number of bits used for the image by about 1/3. Instead of a 9 minute download time this would correspond to a 6 minute download time. To achieve more compression, more complicated schemes are needed which not only take into account the probability with which each color occurs, but also the geometric arrangement of pixels and possibly also the physiology of the human vision system.
Images (and movie/sound files) take by far the longest to download when you access Web pages. The following table lists typical connection speeds for various Internet connections.
| Typical Transmission Speeds | ||
|---|---|---|
| Name | Speed | Description |
| V.34 | 28.8 kbit/sec | Full-duplex telephone modem |
| V.90 | 56 kbit/sec | Asymmetric telephone modem (56k download, 28.8k upload)) |
| Ethernet 10 | 10 Mbit/sec | 10 Mb Ethernet LAN (bandwidth shared with other users) |
| Ethernet 100 | 100 Mbit/sec | 100 Mb Ethernet LAN (bandwidth shared with other users) |
| T 1 | 1.544 Mbit/sec | High Speed WAN (Telephone Network) Access |
| OC-12 | 622.08 Mbit/sec | Internet Backbone, Optical Carrier |
Note that all speeds are given based on bits whereas file sizes are usually given based on bytes (1 byte equals 8 bits). Thus, a 3.7 MByte image has 29.6 Mbits and takes 29600/28.8=1028 sec to download on a V.34 modem. If you are the only one using a 100 Mbit/sec Ethernet, then the download time reduces to 29.6/100=0.3 sec. But if 20 users use the same Ethernet simultaneously (e.g., in the computer lab), then the download time increases to 6 sec. It turns out that the vast majority of Internet users are still connected using telephone modems, and if you want to achieve reasonable download times (e.g., less than a minute) for these users, you have to be very cautious to select images that are small enough in (compressed) file size.
The following screen snapshot shows an HTML page that contains image tags, just after it has been created (e.g., in Notepad) and saved on a local computer under the name lakeside.html.
The next figure shows the HTML file and the associated image files in Windows Explorer.
Altogether there are 4 files for this Web page and all of them need to be uploaded into the www directory on the WebFiles server. The following picture shows the preparation for uploading all 4 files.
After uploading the files you need to check the Share Permissions. When the files are uploaded for the first time, they are stored as Not Shared by default, as shown below.
To be accessible over the WWW, all files, HTML and image files, must have the Public Permission set as shown next for the image file lakeside_tower.jpg.
The next screen snapshot shows what happens if not all images have their permission set to public.
And here is the final result after all Share Permissions are set correctly.
To be sure that a Web page is accessible to the general public, use a different computer than the one from which you uploaded the files, and type in the URL of your Web page.
To obtain credit for this homework/computer lab you need to answer the
questions stated below. Send your solution to
.
Rules for the Submission of Homework/Computerlab Solutions
Format: E-mail your solution as a plain text (ASCII) file. Do not use word processor files like Microsoft Word or "rich-text" HTML files.
Corrections: If you need to make corrections after you submitted your solution, resubmit all your answers (not only the ones that changed) since only your last submission of each homework/computer lab will be graded.
Teamwork: Teamwork is fine for the homework/computer labs, but the solutions must be turned in individually. In particular, copy and paste of entire solutions from other students is not acceptable.
Questions:
©1996-2006, P. Mathys. Last revised: 10-13-06, PM.