1 / 37

Images & Tables

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.

efraing
Download Presentation

Images & Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Images & Tables

  2. 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

  3. 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

  4. GIF

  5. GIF • Problem?

  6. JPEG • Solution

  7. 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).

  8. 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

  9. 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.

  10. 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.

  11. 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.

  12. 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>

  13. 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

  14. Linking from an Image • Place the <img> tag inside the anchor tag. <img src=“whatever.jpg"> <a href=“http://www.somewhere.com"> </a>

  15. 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

  16. 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.

  17. 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.

  18. 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}

  19. 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).

  20. 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?

  21. Tables

  22. 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.

  23. 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>

  24. TheHTML for the basic table structure

  25. <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

  26. More <table> Attributes • bordercolor="color">changes the color of the border. • bordercolordark="color">bordercolorlight="color">creates a 3D effect for the border.

  27. More <table> attributes • frame="box|above|below|void" …>controls which side of the table has borders

  28. More <table> attributes • rules="all|rows|cols|none">controls around which cell the border is drawn.

  29. <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.

  30. 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?

  31. "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=

  32. 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>

  33. Summary - Row Level Attributes • <tr • align="left", "center", "right“ • valign="top", "bottom", "middle" • bgcolor="hex value” > • </tr>

  34. 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>

  35. Question Here is a table: What additional coding will make it look like this?

  36. 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.

  37. Example: A progression toward the desired design • One Table • Adding an Image • Nesting Tables

More Related