Download
1 / 37
370 likes | 378 Views
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.
E N D
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 • 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
GIF • Problem?
JPEG • Solution
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).
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
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.
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 bottomwrt the image.
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.
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>
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
Linking from an Image • Place the <img> tag inside the anchor tag. <img src=“whatever.jpg"> <a href=“http://www.somewhere.com"> </a>
Example <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> Caption for an image Affect image size Add border
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.
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= FF0000 digit1 digit2digit3 digit4digit5 digit6 redgreenblue • There are many online charts and references for color. Or just click on Color Chart from our Important Documents page.
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}
Hyperlink colors: • 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).
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 selector http://www.imagitek.com/bcs.html?
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.
First row First Column 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>
<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
More <table> Attributes • bordercolor="color">changes the color of the border. • bordercolordark="color">bordercolorlight="color">creates a 3D effect for the border.
More <table> attributes • frame="box|above|below|void" …>controls which side of the table has borders
More <table> attributes • rules="all|rows|cols|none">controls around which cell the border is drawn.
<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.
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%"> <th width="20%">9 A.M.<th width="10%">12 P.M. What is the width of the last column in the above table?
"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. Cell attributes (<td>,<th>) • colspan="#"this cell spans across # columns. • rowspan="#" this cell spans over # rows. • align= • valign=
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>
Summary - Row Level Attributes • <tr • align="left", "center", "right“ • valign="top", "bottom", "middle" • bgcolor="hex value” > • </tr>
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>
Question Here is a table: What additional coding will make it look like this?
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.
Example: A progression toward the desired design • One Table • Adding an Image • Nesting Tables
