1

Ethics of Computing MONT 113G, Spring 2012

Session 10HTML Tables

Graphics on the Web

2

A Simple Table<TABLE>

<TR><TD> Holy Cross </TD><TD> Boston College</TD><TD> WPI </TD>

</TR><TR>

<TD> 75% </TD><TD> 07%</TD><TD> 17% </TD>

</TR></TABLE>

Holy Cross Boston College WPI75% 07% 17%

3

Adding a BorderChanging Cell Size

<TABLE BORDER = 2><TR>

<TD> Holy Cross </TD><TD> Boston College</TD><TD> WPI </TD>

</TR><TR>

<TD WIDTH = 120 HEIGHT = 100> 75% </TD><TD> 07%</TD><TD> 17% </TD>

</TR></TABLE>

Holy Cross Boston College WPI

75% 07% 17%

4

Changing AlignmentColoring a Cell

Changing Horizontal Alignment:<TD ALIGN = LEFT><TD ALIGN = CENTER><TD ALIGN = RIGHT>

Changing Vertical Alignment:<TD VALIGN = TOP><TD VALIGN = MIDDLE><TD VALIGN = BOTTOM>

Coloring a cell:<TD BGCOLOR = BLUE>

5

Inserting Links and Graphics

Inserting a link:<TD><A HREF = "http://www.holycross.edu">

Holy Cross</A></TD>

Adding an image:<TD><IMG SRC = "gdome.gif"></TD>

6

Nested Tables

<TABLE BORDER = 2><TR>

<TD>First Cell</TD><TD><TABLE>

<TR><TD>5</TD><TD>10</TD>

</TR><TR>

<TD>15</TD><TD>20</TD>

</TR></TABLE>

</TD></TR>. . .

5 10

15 20

7

Spanning Columns and RowsUse COLSPAN to span multiple columns:<TR>

<TD COLSPAN = 3>Favorite Colleges</TD></TR>

Favorite Colleges

Similarly, use ROWSPAN to span multiple rows.

8

Adjusting Table Size

Adjusting table width to some number of pixels:

<TABLE WIDTH = 500>

The table will have a width of 500 pixels.

Adjusting table width to a percentage of the browser window width:

<TABLE WIDTH = 80%>

The table will have a width that is 80% of the browser window width.

9

What is a Graphics file?

moon.gif

GIF89a¶ˇÃˇˇôˇˇfˇˇ3ˇˇÊøß5뢑Zµ´T¨Yß6;≥ YØh7^„ŸMöù;r-€êπÑ+˜`À≥t€Ω´w!PÅ|≈Bå[8∞cƒw€ée‹±/‚ƒç?Ã6≥C ߬=<∞f™ú¡z.kyÊ^“°O”uJÿÙ^≥d%äîÕr‰êäC~Àÿvo¥©U

moon.gif ?

10

Storage of Graphic Images

• Graphics are stored as 1's and 0's on the disk.

• The numbers form a code that the browser interprets to display the graphic on the monitor.

• Computer displays are composed of many dots, known as picture elements (pixels).

• The numeric code in an image file specifies the color of each pixel in the image.

11

Resolution

•The number of pixels on the screen determines the resolution of the image.

•More pixels per inch implies better resolution and better image quality.

•Older PC's had resolutions of 800 pixels x 600 pixels. Older Macs had resolutions of 640 pixels x 480 pixels.

•Newer PC's and Macs have much higher resolutions (e.g. 1152 x 768).

12

Resolution affects Image Size•The more pixels there are per inch (ppi) the smaller each pixel is.

•Image sizes are specified in terms of pixels. So the same image will appear smaller on a monitor with a higher resolution.

Increasing resolution decreases the image size.

13

Bit Depth

•The number of colors each pixel can assume contributes to image quality.

•The bit depth of an image is the number of bits used to specify color for that image. The bit depth determines how many colors can be shown.

•Black and white monitors have 2 colors. Only one bit is needed to specify color (bit depth = 1).

•A bit depth of n allows representation of 2n colors.

14

Changing Bit Depth

Some images don't need a large bit depth:

Bit depth 8

Bit depth 4 Bit depth 1

Smaller bit depths help to keep the file size (in kb or mb) small.This makes it faster to download the image file.

15

Bit Depth and Image Quality

For more complex images, higher bit depth leads to better resolution:

Bit depth = 32 (16.7 million colors)

16

Indexed ColorWith indexed color, the computer stores a table of colors (256colors for bit depth of 8). Each pixel is given a value between 0 and 255, which corresponds to one of the colors in the table.

17

RGB (Red, Green, Blue) Color

In the RGB color system, each pixel is given a specified amount of red, green and blue (between 0 and 255).

The color value is written in Hexadecimal, using 2 digits for each color:

#FF0000 Red#00FF00 Green#0000FF Blue#FFFFFF ?#000000 ?

#880066 Purple

18

Image File Compression

Images on the web are stored as separate files that must be downloaded from the server to the client to be viewed.

If the image file size is large, it will take a long time to download. Therefore, it is important to try to keep the file size as small as possible without losing much image quality.

Ways to reduce file size:1. Reduce the size of the image (in pixels)2. Reduce the resolution of the image.3. Reduce the bit depth of the image4. Use image file compression (GIF or JPEG)

19

GIF files

•The Graphics Interchange Format (GIF) is excellent for compressing images with large areas of uniform color.

•It is "lossless", meaning that the original image can be regenerated with no loss of information.

•GIF supports transparency in images.

•GIF supports animations (animated GIF's)

•This format is limited to 256 colors.

20

JPEG compression

•The JPEG (Joint Photographic Experts Group) compression method works well for complex images, such as photographs.

•JPEG supports millions of colors (up to a bit depth of 24).

•JPEG is "lossy", meaning that the original image cannot be regenerated exactly from the original. Some information is lost in the conversion to JPEG.