ECEN 1200 - Telecommunications 1

Peter Mathys, Fall 2006, 11/10/06

Homework/Computer Lab 10: Tables for All Occasions and Design, Structure, and Refinement of Web Pages

How to Submit Solutions for this Homework/Computer Lab
Due Date:	Friday 11-17-06
E-mail To:
Subject Line:	HWCL 10
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.

Goals of this Lab

The goals of this computer lab are:

• Learn how tables can be used for different tasks.
• Make addition and multiplication tables for modulo m arithmetic
• Use tables to convert between binary, decimal, and hexadecimal number representations.
• Understand the description and use of colors and color codes in images and HTML.
• Use of tables for ASCII code and special characters in HTML.
• Page design and layout techniques using tables.
• Understand the structure of and relationships between files that make up an HTML story/report.
• Understand and implement links within and between documents, and between documents on different computers.
• Make a picture gallery with clickable images and links.

Programs to Download

You will need some or all of the following programs for this computer lab. Download them and, if necessary, unpack and install them on the computer that you use to run this lab.

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.

EditPlus V2.21 is an Internet-ready, 32-bit text editor for Windows. It offers many powerful features for Web page authors and programmers and has powerful syntax highlighting for HTML, JavaScript, Perl, Java, C/C++ and any other programming language, based on the default syntax files or user-defined syntax files, for both the screen display and the printing. A spell checker (US version) is also available. The home page for EditPlus is at http://www.editplus.com.
Note: If you cannot install EditPlus because you have no administrator privileges, then you should use the files in epp221run.7z after unpacking (with the 7-Zip program) to a directory of your choice.

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.

Introduction to Tables

Tables are used frequently to display and organize data and information. In connection with the Internet, electronic publishing, and telecommunications tables are used for:

• Math Tables. Conversion between binary, decimal, and hexadecimal number representations can often be accomplished using conversion tables. Error control coding and cryptography make extensive use of arithmetic modulo some integer m. Addition, subtraction, multiplication and division in such number systems can be visualized quite easily using modulo m addition and multiplication tables.
• Code Tables. Examples of codes that are used extensively in Web pages are color codes and codes for regular and special characters, e.g., as in Häagen Dazs^®.
• Design and Layout Tables. Another area where tables are extensively used on the Web and, more generally, in the publishing and printing industry, is for the graphical design and layout of flyers, documents, newspapers, posters, etc.

In general a m×n table is a rectangular structure with m rows and n columns, as shown below for m = 3 and n = 5.

Some cells in a table can be merged together to produce larger cells, e.g., as shown below:

This is one of the features that makes tables powerful tools for page layout control.

Tables can be nested, i.e., one or more tables can be inside another table. The example below shows a 3×5 table inside a 2×3 table.

Addition and Multiplication Tables

Example: Tables for addition and multiplication modulo m=5. Note that in this case m is a prime number.

Example: Tables for addition and multiplication modulo m=6. Note that in this case m is a composite number.

When m is a composite number, then the product of two nonzero numbers can become 0, e.g., 3×4=120 (mod 6). This cannot happen if m is a prime number.

Decimal, Binary, Hexadecimal Conversion Tables

Numbers appear in different forms and places on the WWW and in HTML documents. IP addresses are 32-bit numbers (under IP V4), that are usually represented in dotted decimal form, e.g., as in 128.138.189.30. Here each of the 4 decimal numbers is in the range 0...255 and represents 8 out of the 32 bits. ASCII encoded characters, numbers, etc., are also using either 7 or 8 bits and can therefore be treated as decimal numbers in the range 0...127 (original ASCII code) or 0...255 (original ASCII plus extended §þêçïå£ character sets). Finally, colors are usually specified as RGB (red, green, blue) 3-tuples, e.g., "#FF68B0" ("#FF68B0") for hotpink, where the first two digits specify the amount of red in hexadecimal (hex) format, the second two digits specify the amount of green in hex, and the last two digits specify the amount of blue, also in hex. In this case each two-digit hexadecimal number again stands for 8 bits and can take on values in the range 00...FF. Some image programs use decimal numbers in the range 0...255 instead of the hexadecimal numbers that need to be used in HTML tag attributes. Thus, there is a need to be able to convert between binary, decimal, and hexadecimal numbers.

A decimal number is a number that consists of the decimal digits 0,1,2,3,4,5,6,7,8,9. The interpretation of a number like 2537 is:

A binary number consists of a string of bits and the interpretation of a number like 10010101 is done exactly in the same way as for decimal numbers, except that the basis is now taken to be 2 rather than 10:

To simplify the conversion from 8-bit binary numbers to decimal numbers and vice versa, you can use the following two tables. The binary number for a given decimal entry, e.g., 103, is found by concatenating the binary number above (0110..) with the binary number to the left (..0111) to form 01100111.

Hexadecimal (or simply hex) numbers are made up from the digits 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F and they use the number 16 as basis. The digits A,B,C,D,E,F represent the numbers 10,11,12,13,14,15, respectively. The interpretation of a number like A9FD is:

Because 2⁴ = 16, conversion between binary and hexadecimal numbers is very easy. In fact, the main use of the hexadecimal number system is to be able to write binary numbers in a more compact form. Any combination of 4 bits can be expressed by a single hexadecimal digit as shown in the following table:

Example: To convert the decimal number 155 to hexadecimal, we can use the decimal to binary conversion tables above to find that 155 is 10011011 in binary. The first 4 bits then convert to 9 and the second 4 bits convert to B. Thus, decimal 155 converts to hexadecimal 9B.

Colors in Images and in HTML

TVs and computer screens use the so called additive color system. Three primary colors, red (R), green (G), and blue (B) are used in varying proportions to generate (almost all) visible colors. This is shown graphically in the following picture.

In HTML colors can be specified by strings of the form "#RRGGBB", where RR, GG, BB are hexadecimal numbers in the range 00..FF which specify the amount of red, green, and blue contained in a particular color. The value 00 means that this color is not present and the value FF (equal to 255 in decimal) is the maximum intensity for each color. Black is "#000000" (or 0,0,0 in decimal) and white is "#FFFFFF" (or 255,255,255 in decimal). Other colors are shown in the table below.

If you have a decimal color specification of the form (R,G,B), where R, G, and B can each take on values in the range 0..255, then you can use LViewPro as follows to display the corresponding color. First load any JPEG image, e.g., hsv2.jpg into LViewPro. Then click on "Retouch" and select "Background color". Use the sliders in the window that pops up to generate the color with the given values for R, G, and B. The example below shows this for (R,G,B)=(255,128,128).

Suppose a color is represented in decimal in the form of a 3-tuple (R,G,B), where R, G, and B can each take on values in the range 0..255 (00..FF in hexadecimal). Then one can also define a second related color by (255-R,255-G,255-B). This color is called the complementary color of the one represented by (R,G,B). The following table shows some elementary pairs of colors and their complements. Others can easily be found by using the technique for displaying specified colors in LViewPro as outlined above. For a more extensive list of HTML colors and names see colors.html.

ASCII Code and Special Characters in HTML

Text, like anything else, needs to be stored and transmitted in binary form for computers. There are 26 lower case and 26 upper case letters in the alphabet. Add to this the 10 digits for numbers and (at least) 10 punctuation marks (e.g., , . ! ? : ; ( ) - /). This adds up to (at least) 72 distinct characters that need to be uniquely encoded in binary. Since log(72)/log(2) = 6.1699, we need (at least) b=7 bits to encode each character. The most widely used code for the English alphabet is the ASCII (American Standard Code for Information Interchange) code which was developed in 1962. This code is shown in the following table.

To find the binary code of a character, say C, you locate the desired character in the table and then you concatenate the binary string directly above (100.. for C) with the binary string to the left (..0011 for C). For C the resulting binary code is thus 1000011.

The ASCII code can be extended by adding an 8-th bit (to make each code a byte). The original ASCII characters are prefixed by 0 (thus C in the above example becomes 01000011). Special characters (which are an extension of the original ASCII code) are prefixed by 1 (e.g., 10100011 is the British pound sign £). Most of the special characters have no corresponding key on regular keyboards. To enter them in a HTML document, the special combination &#xx; is used where xx is a decimal number in the range 0..255. Examples are shown in the following table.

Some special characters, such as the copyright symbol ©, also have special names in HTML by which they can be inserted into a document, e.g., © for ©, where the "escape" character & itself is entered as &. The following table shows some more examples.

The table below shows all extended ASCII characters, i.e., all characters whose 8-th bit is set to 1 (decimal code in range 128..255). When using these characters, be aware of the fact that different browsers and/or different operating systems may interpret the codes differently.

Page Design with Tables in HTML

Each cell in a table can contain either a single item, such as text or an image, or a whole document with several paragraphs of text, images, sounds, etc. Web page designers quickly realized the potential of tables as design elements for the visual appearance of HTML documents. A very simple example is a two-column text format as shown in Origins of Interesting Companies, similar to newspapers or articles in magazines. It was mentioned earlier that HTML was originally intended to be a logical document description language, which leaves all aspects of how a document is rendered to the browser that a user employs for viewing documents. It is therefore not surprising that the use of tables as visual design aids is somewhat controversial and not encouraged by the World-Wide Web Consortium, which prepares and issues recommendations for the standardization of HTML. There is a newer mechanism, called cascading style sheets (CSS) (similar to the use of templates in a word processor) that can be used in HTML 4, but because of added complexity and compatibility issues with older browsers, many Web sites do not (yet) use this mechanism for page layout.

If you want your HTML documents to be viewable by as large an audience as possible (working on different platforms and often not with the newest version of a particular browser), then you have to be careful in using only a "safe" subset of all possible table-related tags. It is one of Microsoft's favorite strategies to invent new and/or slightly different tags which only their browser understands, and then to sell a page design program like Frontpage, that uses those tags wherever possible, so that other competing browsers cannot display a document properly. The hope is then that the users will switch to Internet Explorer, and all competitors are wiped out. The following table, called tabletest1.html, should display properly in both Netscape and Internet Explorer, and it gives you a first idea of the design options that you have when using tables.

To start (and end) a table, you need a table container, inside which you can then define rows and columns, or even other tables. The most important rules for the <table> tag are shown in the following table.

Tables are organized by rows using the tags <tr> and </tr>. Each entry within a row can either be a header entry marked by <th> and </th> tags, or a data entry marked by <td> and </td> tags. A table caption can be included as well. Here's an example of a simple table with a border:

The background color of a table (or a single data or header entry) can be selected with the attribute bgcolor="color" where color is one of the colors from the HTML Color Table (not all browsers will necessarily understand all of these colors, but as explained above, it is also possible to specify colors directly in terms of numerical values for red, green and blue components). Here's an example of a table that uses a white background and no border:

The following screen shot of tabletest2.html shows the relationship between the cellspacing and cellpadding attributes in the <table> tag.

Here are some more tags and attributes that are useful to control various aspects of tables:

Note in particular the rowspan and the colspan attributes that allow you to make cells that span more than one row and/or columns. Look at the source code of tabletest1.html and tabletest2.html to see examples of how to use these tags.

A Picture Gallery in HTML

One of your tasks in this computer lab is to find images, crop and/or rearrange them, upload them to the www directory of your WebFiles account, and incorporate them in an HTML document inside a table using the <img>, <table>, and related tags. You have to create a Picture Gallery similar to (but possibly less extensive than) the following example in My Picture Gallery.

The Structure and Design of a Document, Links and Anchors

When you put together a report or a story that is larger than what comfortably fits on a "page" (like a "home page"), then you need to come up with a design and a structure that will make the document easy to access, navigate, read, and maintain. Design elements are the colors that you use for text, background, and images, font face and size, heading styles, etc. Structural elements are the files and (sub)directories from which your document is made up, and the links between them.

A good document structure to start from is to have a main page, e.g., with an overview, from which you can branch out into more detailed subtopics, each on a separate page. As shown in the following figure, the files of a story could reside in their own subdirectory, with hypertext links (shown in blue) between the pages of the story, to the home page index.html in the parent directory, and more links to other sites on the WWW. A technique that is often used is to store images (especially those shared by many documents) in a common subdirectory. In the figure below this subdirectory is called images. The red lines show the references (in the form of <img src=...> tags) from the HTML pages to the images in the image folder.

Hypertext links (or anchors), shown in blue in the above figure, to any other electronic documents that are accessible through the Internet can be inserted (almost) anywhere in an HTML document. The general form of a hypertext link element is (a stands for "anchor"):

where address specifies the location of the linked document and linktext is the text that serves as the hypertext anchor ("clickable text", usually blue and underlined) for the linked document. The address can take on several different forms:

1. It can be a fully qualified URL (see HWCL 01), such as
   • http://www.yahoo.com (referring to the default Web page of Yahoo) or,
   • ftp://ftp.sunet.se (referring to the FTP root directory of the sunet server) or,
   • http://www.aimnet.com/~jnavas/modem/faq.html (referring to user account jnavas and the specific file faq.html in the subdirectory modem.
   
   
2. It can be an address relative to the current document, such as
   • page002.html (the file page002.html in the same directory or folder as the current html file) or,
   • samples/sample2.html (the file sample2.html in the subdirectory or subfolder samples relative to the current directory) or,
   • ../hwcl05/index.html (the file index.html, going first one level up from the current directory and then one level down into the subdirectory hwcl05).
   
   
3. It can be a specific location (or anchor) in a document, such as
   • #loc_name as shown in this example
     
     

     HTML Element	Resulting Display
     Go to <a href="#loc_name">ref_item</a>	Go to ref_item

     (referring to the anchor or location name loc_name in the current document) or,
   • part2.html#download (referring to the anchor or location name download in the file part2.html in the same directory as the current document) or,
   • http://ece.colorado.edu/~mathys/ecen1200/hwcl08/index.html#editplus (referring to the anchor or location name editplus in the file hwcl08/index.html at URL http://ece.colorado.edu/~mathys/ecen1200).
   The anchor must have been previously specified at the desired location in the target document by a tag of the form
   
   

   HTML Element	Resulting Display
   <a name="loc_name">ref_item</a>	ref_item

   where ref_item is the item (text, image, etc.) that you wish to refer (and jump) to.

Questions you Have to Answer

To obtain credit for this homework/computer lab you need to answer the questions stated below. Send your solution to .

Questions:

1. Make an addition and a multiplication table for arithmetic modulo m = 7. Use the multiplication table to determine the value of 3^-1 modulo 7 and 5^-1 modulo 7. Do both values exist?
2. Make an addition and a multiplication table for arithmetic modulo m = 10. Use the multiplication table to determine the values of 3^-1 modulo 10 and 5^-1 modulo 10. Do both values exist?
3. Consider the three colors defined by the decimal (R,G,B) 3-tuples
   1. (255,170,0)
   2. (153,51,204)
   3. (102,255,204)
   For each determine the (approximate) name of the color, its complementary color in the form of a decimal 3-tuple, and the (approximate) name of this complementary color. Use colors.html for a list of HTML color names.
4. Convert the binary string

      101x011,x101011,110xx01,1101001,1101x10,1100111

   into ASCII text using the above ASCII table. To make things a little more interesting, "erasures", marked with x have been introduced. An erasure is a mild form of a transmission error and each x in the binary string above could be either a 0 or a 1. Hint: When you choose the correct binary values for the x's (using trial and error), the string decodes into an English word.
5. The following two lines need to be included in a Web page:
   
   Using tags of the form &#xx;, where xx is a decimal number in the range 0...255, show how you would include the two lines in an HTML document. Use the Extended ASCII character table above.
6. Look at the source of the tabletest1.html file. List all table-related tags and all attributes that you can find. Make sure you understand what each of them means.
7. The document matisse.html was written using a table. How many rows and how many columns does this table have? Hint: Download the HTML file, load it into EditPlus, set border="1" in the table tag, and display the result in a browser.
8. The document Origins of Interesting Companies was designed and formatted using tables, background colors, and background images. How many tables were used? What are the values (in RGB hexadecimal notation) of the background colors used? How many background images were used? List the (raw) sizes of the backgound image(s).
9. Make a "picture gallery" of your own, in a style similar to My Picture Gallery. You can either add it to your existing home page, or make a new page. You must satisfy the following requirements.
   1. Your picture gallery must have at least two larger images and two small images (thumbnails) that were obtained from the larger ones by either cropping or resizing (if you need a refresher on this topic, go to Cropping and Resizing Images in HWCL07). Clicking on the small images should result in displaying the larger images. Choose any images that you like.
   2. The smaller images must be arranged in a table with at least 6 cells. At least one of the cells must contain a different background color from the rest. Use colors.html to find suitable color names.
   3. Your table must also contain at least two links, one to a separate HTML file on your Web account, containing at least one paragraph of text (and images if you like) and a link to return to the gallery page. The second link in your table must be a link to an external site on the WWW (to a different server than the one on which your Web page resides).
   An example which satisfies these requirements is My Picture Gallery. Use the HTML Validator (and if necessary the CSS Validator) to check your HTML pages and make sure you send in the URL of where your picture gallery can be found.

©1996-2006, P. Mathys. Last revised: 11-09-06, PM.