Images & Tables

37
Images & Tables

description

Images & Tables. Image file formats. Three graphic file types are supported by today's browsers: GIF - Graphic Interchange Format JPEG - Joint Photographic Experts Group PNG - Portable Network Graphics. GIF. - PowerPoint PPT Presentation

Transcript of Images & Tables

Page 1: Images & Tables

Images & Tables

Page 2: Images & Tables

Three graphic file types are supported by today's browsers:

GIF - Graphic Interchange Format JPEG - Joint Photographic Experts

Group PNG - Portable Network Graphics

Image file formats

Page 3: Images & Tables

GIF

GIF files are best used for images that have broad areas of flat color and are highly defined.

Supports transparency and animation Supports a maximum of 256 colors. Guidelines to keep GIF files small:

• Reduce the number of colors

• Crop out extra space if possible

Page 4: Images & Tables

GIF

Page 5: Images & Tables

GIF

Problem?

Page 6: Images & Tables

JPEG

Solution

Page 7: Images & Tables

JPG

JPEG files are best used for images that require many colors such as photographs.

JPEG has a higher compression ratio but it is a "lossy" compression (compression sacrifices some image data in reducing file size).

Page 8: Images & Tables

PNG PNG was developed as an alternative to GIF Does not yet have broad-based browser or

image editor support. Has a lot of the same features as GIF PNG also automatically adjusts graphics for

gamma correction to compensate for cross-platform differences in brightness and contrast.

Does not support animation

Page 9: Images & Tables

Inserting images on your pages: Image tag

<img src= “name and location of image file”> We usually put images in a separate folder on

the web server. The image file has a 644 permission

Example: <img src= “Images/photo.jpg”> The source attribute (src) refers to the name and

location of the image file relatively to the HTML file itself.

Page 10: Images & Tables

Image tag attributes

height: specifies the height of the image. width: specifies the width of the image. border: determines the size of the border. alt: specifies the text displayed on-screen when the

cursor is rolled over the image. Always use this! align: puts the image to the right or left of the screen. valign: align text associated with the image at the top,

middle, or bottom wrt the image.

Page 11: Images & Tables

Aligning Images

To align an image left:

<img align=“left” src=“images/myImage.gif"> Using CSS (the <style> tag):

img {float: left} Both of these will cause text to appear to the right of

the image and wrap around it.

Page 12: Images & Tables

Aligning Images

NOTE: Most browsers do not support <img align=“center”>

To align an image center: <img src=“images/whatever.gif"><p align=“center”> </p>

Page 13: Images & Tables

Image Borders

Line that appears around a picture (like a frame).

Will appear automatically when you use an image as a link.

<img border=“#”>Where # is between 0 and 99

Page 14: Images & Tables

Linking from an Image

Place the <img> tag inside the anchor tag.

<img src=“whatever.jpg"> <a href=“http://www.somewhere.com"> </a>

Page 15: Images & Tables

<html><head>

<title>Some images </title></head><body>

<img src = “Images/key.jpg"> This pic caption shows up at the bottom<br>

<img src = “Images/flowers.jpg " width=“100” height=“50”alt=“Flowers” align=“right” border=“3”>

<br>Hyperlinked picture: <a href="http://www.pixar.com/"><img src=“Images/carsPixar.jpg">

</a>

</body></html>

Example

Caption for an image

Affect image size

Add border

Page 16: Images & Tables

Image as page background

<body background = “../jpg/bgd/stucco1.jpg”> sets the background image.

Using the new standard (within <style> tag):body {background-image: url(../jpg/bgd/stucco1.jpg)}

Image Size:• A large image may only appear once (depending on

the size of the browser window)

• Smaller images will be tiled as many times as necessary to fill a page.

Page 17: Images & Tables

HTML and Colors

Colors in HTML documents are represented by a triplet of numbers, called an RGB triplet, based on their Red, Green, and Blue component. Ex: RED = (255,0,0)

HTML requires that the color values be entered as 3 two-digits hexadecimal numbers. Ex: RED = FF0000digit1 digit2 digit3 digit4 digit5 digit6

red green blue There are many online charts and references for color. Or

just click on Color Chart from our Important Documents page.

Page 18: Images & Tables

Color as attribute of Body Tag

Text color• <body text=“#000080”>

Background color• <body bgcolor=“#FFFFF0”>

New standard (within <style> tag):body {background-color: Ivory; color: Navy}

Page 19: Images & Tables

Hyperlink has 4 states:• link: unvisited links

• vlink: visited links

• hover: mouse hover over link

• alink: a hyperlink that the user is thinking of visiting (the user has moused over and depressed the mouse button on).

Hyperlink colors:

Page 20: Images & Tables

More links about Color:

HTML Colors:http://www.w3schools.com/html/html_colors.asp

HEX <-> RGB color code converter:http://www.yvg.com/twrs/RGBConverter.html

Background/Text color selectorhttp://www.imagitek.com/bcs.html?

Page 21: Images & Tables

Tables

Page 22: Images & Tables

Basic HTML Tables A table organizes data in rows and columns <table> … </table> Enclose the table structure <tr> … </tr> Table row <td> … </td> Each data cell within a row. The

smallest area of a table that can be formated.This controls the number of columns in the table.

Page 23: Images & Tables

Basic table structure<table>

<tr><td>A1</td><td>A2</td><td>A3</td>

</tr><tr>

<td>B1</td><td>B2</td><td>B3</td>

</tr></table>

A1 A2 A3

B1 B2 B3

First row

First Column

Page 24: Images & Tables

The HTML for the basic table structure

Page 25: Images & Tables

<table> attributes

border="# pixels"> Size of the border around the table

cellspacing ="# pixels"> space inserted between cells

cellpadding ="# pixels"> size of the gap between the cell text and the cell border

align ="left/right"> table is placed on the left/right and text is wrapped around the table"center"> table is placed in the center of the page. Text is not wrapped around the table

Page 26: Images & Tables

More <table> Attributes

bordercolor="color"> changes the color of the border.

bordercolordark="color">bordercolorlight="color"> creates a 3D effect for the border.

Page 27: Images & Tables

More <table> attributes

frame="box|above|below|void" …> controls which side of the table has borders

Page 28: Images & Tables

More <table> attributes

rules="all|rows|cols|none"> controls around which cell the border is drawn.

Page 29: Images & Tables

<table>,<td>,<th> attributes

width="pixels" or "%"> table/cell width in pixels or as % of the page/table.

height="pixels" or "%"> Same as above. bgcolor="color"> Change the table/cell

background color. background=“pic.jpg”> Tiles a picture as

a background.

Page 30: Images & Tables

Question

Given a table specified with:<table border="3" cellspacing="0" cellpadding="3" width="100%"> with the first three cells in the first row coded as:<td width="40%">&nbsp;

<th width="20%">9 A.M.<th width="10%">12 P.M.

What is the width of the last column in the above table?

Page 31: Images & Tables

Cell attributes (<td>,<th>)

colspan="#" this cell spans across # columns.

rowspan="#" this cell spans over # rows.

align=

valign=

"left/right"> text in the cell is aligned left/right.

"center"> text in the cell is centered."top/bottom"> text in the cell is aligned top/bottom.

"middle"> text in the cell is aligned with the middle of the cell.

Page 32: Images & Tables

Summary - Table Level Attributes

<table

width="n" pixels or "n%" percentage

align="left", "center", "right“

bgcolor="hex value“

border="pixels“

bordercolor="hex value“

cellspacing="pixels“

cellpadding="pixels" >

</table>

Page 33: Images & Tables

Summary - Row Level Attributes

<tr align="left", "center", "right“ valign="top", "bottom", "middle"

bgcolor="hex value” ></tr>

Page 34: Images & Tables

Summary - Cell Level Attributes

<td align="left", "center", "right“ valign="top", "bottom", "middle“ bgcolor="hex value“ height="n" pixels or "n%" percentage width="n" pixels or "n%" percentage rowspan="n" rows to span colspan="n" columns to span ></td>

Page 35: Images & Tables

Question

Here is a table:

What additional coding will make it look like this?

Page 36: Images & Tables

Tables are very commonly used for webpage design layout

To display content in newspaper-like columns or separates the page in different topical areas.

Start with the outer table and work your way in using nested tables.

Add background color to visually separate column.

Add cell padding to avoid crowding. Use row spanning to vary the starting point of

articles.

Page 37: Images & Tables

Example: A progression toward the desired design

One Table Adding an Image Nesting Tables