Course notes
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

HTML: Images and Tables

January 18th, 2011


Review:

Links, Image tags

Anchors:
Text anchors: <a href="http://www.bgsu.edu" target="_blank">Go to BGSU</a>

Go to BGSU

Image anchors: <a href="otherfiles/linkto.html"><img src="../images/caricature.jpg"></a>


Overview:

  1. Embedded CSS
  2. Image Types
  3. Tables

Embedded CSS

CSS can work throughout the page by placing CSS it in the HEAD of the file. This is called Embedded CSS.

a:link - a = selector, which happens to be the tag for links.

<HEAD>
<title> my webpage</title>
<style type="text/css">

<!-- linked text -->

a:link {

text-decoration: none;
color: #00FF99;

}

<!-- visited text -->

a:visited {

text-decoration: none;
color: #0033FF;

}

<!-- rollover text -->

a:hover {

text-decoration: none;
color: #CC0000;

}

<!-- active link -->

a:active {

text-decoration: none;
color: #990099;

}

</style>
</HEAD>

NOTE: Defining the various links in the HEAD, will automatically change any LINK within the document.

If you want two selectors, such as, hover and visited to be the same, use a comma to combine like items:

a:visited, a:hover {

text-decoration: none;
color: #0033FF;

}

You can also add to your STYLE tag to customize any of the tags we have seen so far, for example:

ul {

list-style-type: disc

}

-or- multiple UL designations:

ul.disc {

list-style-type: disc

}

ul.circle {

list-style-type: circle

}

ul.square {

list-style-type: square

}

ul.none{

list-style-type: none

}

NOTE: Unlike the LINKs above, if you define multiples for many tags, you need to specify which one you want to use. In this example of UL, if we don't specify which CLASS, then the default -- generic UL with the list-style-type = disc -- will be used.

If your document has multiple ULs and you want to use various looks, then you need to be more specific in the definition and the call.

Call:

<UL class = "circle">

<LI>first list item</LI>
<LI>second list item</LI>

</UL>

 

Define (in the HEAD) a consistent P look (P = paragraph tag - <p></p> - used for chunks of text):

--effects all P tags
--can add other attributes, ie., color

p {

font-family: courier;
font-size:16px;

}

--effects designated P tags

p.small {

font-family: sans-serif;
font-size:10px;

}

p.big {

font-family: Times;
font-size:30px;

}

Call (in the BODY):

<p>chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text</p>

<p class="small>chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text </p>

<p class="big>chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text</p>

 


Images in HTML Pages

Six factors to consider in Web Imagery:

1. Formats: GIF, JPEG, PNG (always 72 dpi).
2. Color: 8-bit monitor = 256 colors minus 40 system colors = 216 Browser-safe Web Palette.

• If image has too many colors for the monitor, the browser will dither images, which looks dotty.

3. Transparency: GIF / PNG support transparency; JPEG does not.

• Needed for non-rectangular images or images you want to see through parts of them.

4. Speed = Download time.

A) Use SMALL images -or-
B) Compress images:

• GIF - lossless - colors stored in a lookup table
(good with large areas of same color) - only 256 colors.
• JPEG - lossy, use for photographic, continuous tone

Lossy = A compression that reduces file size by actually removing data from the image.
Lossless = A compression method that retains all image detail.

• PNG - better compression than GIF, less lossy than JPEG.

GIF may be faster even if the file size is bigger because it does not have to be decompressed in the system.

C) Website images need to be optimized based on audience. Many users may be using monitor resolutions: 1024 x 768 and 800x600 with Modem connections.

5. Animation: Use GIF or SWF for animation.

6. Interlacing (Progressive): Use GIF or JPG for progressive refinement of image (no need to use on small images).

Some other issues:

Gradients in large areas - Can cause a slow loading site.

Bit depth for images then tells us how many colors are used in those images.

256=8bit or 28, 128=7bit or 27, 64=6bit or 26, 32=5bit or 25,
16=4bit or 24, 8=3bit or 23, 4=2bit or 22, 2=1bit or 21.

The following is a list of Bit Depth and their corresponding number of colors:

• 1 bit: 2 colors (black and white).
• 4 bit: 16 colors.
• 8 bit: 256 colors.
• 16 bits: 65,536 colors.
• 24 bits: 16 million colors. (3 color channels (R,G, & B) * 8 bit per channel)

Dithering is the intermixing of two colors to create the impression of a 3rd color.

Anti-aliasing blends the edges of an object with the background; (turning it off will give a jagged, sharp edge).


Tables in HTML

A table is a grid made up of ROWS and CELLS within each ROW (columns).

Draw a SKETCH and plan BEFORE beginning your table.

<table> </table>
<tr> </tr> --ROW
<td> </td> --CELL

1 2 3
4   6

Code:

<table width="100" border=2>

<tr>                            <!--row 1-->

<td>1</td>               <!--cell 1-->
<td>2</td>               <!--cell 2-->
<td>3</td>               <!--cell 3 -->

</tr>
<tr>                            <!--row 2-->

<td>4</td>               <!--cell 4 -->
<td>&nbsp;</td>     <!--cell 5 -->
<td>6</td>               <!--cell 6 -->

</tr>

</table>

&nbsp; is for adding a space (non-breaking space)



1 2 3
4   6

<td style="background-color:#CC0000;">1</td>
<td style="background-color:#999900;">6</td>


BORDER=n --n=number of pixels.

1 2 3
4 5 6

<table width="100" border="10">


1 2 3
4 5 6

<table border="0"> - use this for images with NO BORDER!


WIDTH=n --n=number of pixels
Overall Table Width = (w of columns) + (w of borders) + (w of cellspacing) + (w of cellpadding)

Use WIDTH attribute in <table width="600"> OR <td width="100">
Generally you use WIDTH only with the FIRST cell in each column, but if it spans more than one column, you may need to add WIDTH to each cell.

ALIGN="direction" --justification on page: CENTER, RIGHT or LEFT.


1 2 3
4 5 6
<table width="100" border=2 align="center">

CELLSPACING=n --n=pixels; Adds space BETWEEN individual cells; Default=2.

CELLPADDING=n --n=pixels; Adds space AROUND the contents of a cell (between the contents and its border); Default=1;

1 2 3
4   6

<table width="100" border=2 cellspacing="10">

1 2 3
4   6

<table width="100" border=2 cellpadding="10">


Attributes for the <TR> row tag

HEIGHT=n --n=number of pixels
Generally you use HEIGHT with row tag and it will effect height of cells within it.


Attributes for the <TD> cell tag

ALIGN="direction" --(left, right, center) ALIGN CONTENTS of a CELL HORIZONTALLY (text, images, etc.)

VALIGN="direction" --(top, middle, bottom) ALIGN CONTENTS of a CELL VERTICALLY within the cell


You can also use these in the TR tag to apply that to all the cells in that ROW!!

COLSPAN=n, --n = number of COLUMNS to span (horizontal) (to span across more than one column (width))

ROWSPAN=n, --n = number of ROWS to span (vertically) (to span across more than one row (height))

You can also add color to the rows or columns:

Here are examples:

Scores
Red 01
Green 02
Blue 03
Results
Winner Red
Loser Blue
Middle Man Green

<table border=2 cellpadding=4>
<tr>
<th colspan=2>Scores</th>
</tr>
<tr>
<td>
Red</td>
<td>
01</td>
</tr>
<tr>
<td>
Green</td>
<td>
02</td>
</tr>
<tr>
<td>
Blue</td>
<td>
03</td>
</tr>
<tr>
<th colspan=2>
Results</th>
</tr>
<tr>
<td>
Winner</TD>
<td>
Red</TD>
</tr>
<tr>
<td>
Loser</td>
<td>
Blue</td>
</tr>
<tr>
<td>
Middle Man</td>
<td>
Green</td>
</tr>
</table>


Information
Artists Davinci 1452
Dali 1904
Warhol 1928
Musicians Bach 1685
Cage 1912
Lennon 1940

Put this at the top in the HEAD tab:

<style type="text/css">
<!--
th.red {
            background-color: #FF0000; color: black;
}
th.blue {
            background-color: #AAAAFF; color: black;
}
-->
</style>

Put this in the BODY:

<table border=2 cellpadding=4>
<tr>
<th colspan=3 class="red">
Information</th>
</tr>
<tr>
<th rowspan=3 class="blue">
Artists</th>
<td>
Davinci</td>
<td>
1452</td>
</tr>
<tr>
<td>
Dali</td>
<td>
1904</td>
</tr>
<tr>
<td>
Warhol</td>
<td>
1928</td>
</tr>
<tr>
<th rowspan=3 class="blue">
Musicians</th>
<td>
Bach</td>
<td>
1685</td>
</tr>
<tr>
<td>
Cage</td>
<td>
1912</td>
</tr>
<tr>
<td>
Lennon</td>
<td>
1940</td>
</tr>
</table>

 


Exercise 2:

Create a Mondrian image using TABLES and CSS

HOMEWORK DUE


HOMEWORK DUE: Project 1 Part 1

Description: Story, Design and Hierarchy Chart
DUE: TODAY