BIS 4226 HTML Part 2 Joseph Lee Email

Preformatted Text • displays preformatted text in a fixed-width font • displays all white space and line breaks exactly as they appear inside the <PRE> and </PRE> tags • frequently used to show code listings, tabulated information, and blocks of text that were created for some text-only form, such as electronic mail messages and news postings • Example: <PRE>Extra Space</PRE> Copyright © 2001 by Joseph Lee 2

Images • • Get people’s attention Illustration of concepts Take longer to download Not

Uses of Graphics • • Graphical decoration Link Imagemap Spacing devices Copyright © 2001

Graphics Formats • GIF – Graphic Interchange Format –. gif • JPEG – Joint

GIF • • • the most popular format on WWW developed by Compu. Serve

GIF: indexed color (1) Copyright © 2001 by Joseph Lee 7

GIF: indexed color (2) • 256 colors • set of colors (palette) is stored

GIF: Compression • LZW compression which takes advantage of repetition in data streams •

GIF: Interlacing • on a slow Internet connection, displaying a GIF may take long time • an interlaced GIF is displayed in a series of 4 passes: 12. 5%, 25%, 50%, 100% • present a user with some idea of the image quickly Copyright © 2001 by Joseph Lee 10

GIF: Transparency • in GIF 89 a, one position in the color table can

GIF: Animation • work like traditional cell animation • consists of a number of images and a set of instructions that specify the length of delay between frames • supported by the majority of browsers • don’t need to wait for the entire file to download • contains no sound and interactivity Copyright © 2001 by Joseph Lee 12

Animated GIF Copyright © 2001 by Joseph Lee 13

JPEG • • • supported by the majority of browsers 24 bit RGB color lossy compression: can achieve 10: 1 to 20: 1 data compression rate without visible loss of quality • the degree to which the image is compressed can be controlled • require more processing power to display Copyright © 2001 by Joseph Lee 14

Progressive JPEGs • JPEGs need to be decompressed before they can be displayed • progressive JPEGs display a series of passes, each pass containing more detailed information until the whole image is rendered clearly • increased file size • not supported by old browsers Copyright © 2001 by Joseph Lee 15

A sample JPEG Copyright © 2001 by Joseph Lee 16

GIF vs. JPEG GIF JPEG 256 colors 16 million colors lossless compression interlace option

PNG • developed in 1995 as an effort to find a nonproprietary alternative to GIF • supports 8 -bit indexed color, 16 -bit grayscale, 24 or 48 bit grayscale • alpha channel support variable transparency levels • lossless compression • 2 d interlacing • lack of browser support Copyright © 2001 by Joseph Lee 18

PNG: On-line resource • For a gentle introduction to PNG, visit: http: //www. libpng. org/pub/pngintro. html • To test whether your browser supports PNG, try: http: //www. w 3 c. org/Graphics/PNG/Inline-img. html Copyright © 2001 by Joseph Lee 19

Adding graphics to web pages • the <IMG> tag inserts a graphic image •

<IMG>: Example 1 Once when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. It was a picture of a boa constrictor in the act of swallowing an animal. Here is a copy of the drawing. <img src="prin 1. gif"> In the book it said: "Boa constrictors swallow their prey whole, without chewing it. After that they are not able to move, and they sleep through the six months that they need for digestion. " I pondered deeply, then, over the adventures of the jungle. And after some work with a colored pencil I succeeded in making my first drawing. My Drawing Number One. It looked like this: <img src="prin 2. gif"> Copyright © 2001 by Joseph Lee 21

<IMG>: Specifying size • width and height attributes indicate the dimension of the graphic

<IMG>: Example 2 Once when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. It was a picture of a boa constrictor in the act of swallowing an animal. Here is a copy of the drawing. <img src="prin 1. gif“ width=100 height=70> In the book it said: "Boa constrictors swallow their prey whole, without chewing it. After that they are not able to move, and they sleep through the six months that they need for digestion. " I pondered deeply, then, over the adventures of the jungle. And after some work with a colored pencil I succeeded in making my first drawing. My Drawing Number One. It looked like this: <img src="prin 2. gif"> Copyright © 2001 by Joseph Lee 23

<IMG>: Alternative Text • a graphic cannot be displayed due to: – lack of browser support – file is corrupted – cannot be found • the ALT attribute specifies a string of alternative text to be displayed: <IMG SRC=“prin 1. gif” ALT=“A Drawing” > Copyright © 2001 by Joseph Lee 24

<IMG>: Example 3 Once when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. It was a picture of a boa constrictor in the act of swallowing an animal. Here is a copy of the drawing. <img src="prin 11. gif“ alt=“A Drawing”> In the book it said: "Boa constrictors swallow their prey whole, without chewing it. After that they are not able to move, and they sleep through the six months that they need for digestion. " I pondered deeply, then, over the adventures of the jungle. And after some work with a colored pencil I succeeded in making my first drawing. My Drawing Number One. It looked like this: <img src="prin 2. gif"> Copyright © 2001 by Joseph Lee 25

Image Alignment • the ALIGN attribute aligns a graphic horizontally on a page, e.

<IMG>: Example 4 Once when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. It was a picture of a boa constrictor in the act of swallowing an animal. Here is a copy of the drawing. <img src="prin 11. gif“ align=left> In the book it said: "Boa constrictors swallow their prey whole, without chewing it. After that they are not able to move, and they sleep through the six months that they need for digestion. " I pondered deeply, then, over the adventures of the jungle. And after some work with a colored pencil I succeeded in making my first drawing. My Drawing Number One. It looked like this: <img src="prin 2. gif"> Copyright © 2001 by Joseph Lee 27

<IMG>: Example 5 Once when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. It was a picture of a boa constrictor in the act of swallowing an animal. Here is a copy of the drawing. <img src="prin 11. gif“ align=right> In the book it said: "Boa constrictors swallow their prey whole, without chewing it. After that they are not able to move, and they sleep through the six months that they need for digestion. " I pondered deeply, then, over the adventures of the jungle. And after some work with a colored pencil I succeeded in making my first drawing. My Drawing Number One. It looked like this: <img src="prin 2. gif"> Copyright © 2001 by Joseph Lee 28

Image Border • the BORDER attribute specifies the width of a bounding box around

<IMG>: Example 6 Once when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. It was a picture of a boa constrictor in the act of swallowing an animal. Here is a copy of the drawing. <img src="prin 11. gif“ border=1> In the book it said: "Boa constrictors swallow their prey whole, without chewing it. After that they are not able to move, and they sleep through the six months that they need for digestion. " I pondered deeply, then, over the adventures of the jungle. And after some work with a colored pencil I succeeded in making my first drawing. My Drawing Number One. It looked like this: <img src="prin 2. gif" border=10> Copyright © 2001 by Joseph Lee 30

Images as links • Example: <A HREF="target. html"><IMG SRC="prin 1. gif"></A> • How to

Background Image • the BACKGROUND attribute of <BODY> tag provides the URL to a

<BODY>: Example <body background="bkgrnd. gif"> Once when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. It was a picture of a boa constrictor in the act of swallowing an animal. Here is a copy of the drawing. <img src="prin 11. gif“ border=1> In the book it said: "Boa constrictors swallow their prey whole, without chewing it. After that they are not able to move, and they sleep through the six months that they need for digestion. " I pondered deeply, then, over the adventures of the jungle. And after some work with a colored pencil I succeeded in making my first drawing. My Drawing Number One. It looked like this: <img src="prin 2. gif" border=10> Copyright © 2001 by Joseph Lee 33

Exercise 1 • Create a HTML page that contains any text. Use the <IMG> tag to add one or more graphics to the page, try: – different alignments – different dimensions – width of border – turn it into a link Copyright © 2001 by Joseph Lee 34

Exercise 1: Online Resources • Media. Builder: Animation Factory http: //www. animfactory. com/ • The Clipart Connection http: //www. clipartconnection. com/ • Clip Art Library http: //onlineinstitute. com/clip-art/ Copyright © 2001 by Joseph Lee 35

Tables • a powerful formatting tool • represent data in a 2 -dimensional grid much like a spreadsheet • more precise page layout – text alignment – page template – multipart image container Copyright © 2001 by Joseph Lee 36

Basic Tags for tables Tags Description <TABLE>…</TABLE> The containers for the rest of the data <TR>…</TR> containers for a row in the table <TD>…</TD> containers for table data <TH>…</TH> containers for table headers Copyright © 2001 by Joseph Lee 37

Table borders • the BORDER attribute of the <TABLE> tag specifies the borders that

Table: Example 1 <table border=1> <tr> <td>Cell 1</td> </tr> <td>Cell 2</td> </tr> </table> Copyright

Table: Example 2 <table border=1> <tr> <td>Cell 1</td> <td>Cell 3</td> </tr> <td>Cell 2</td> <td>Cell

Table level controls • with attributes within the <TABLE> tag, you can control: – width of the table (WIDTH) – object alignment (ALIGN, VALIGN) – color of all its cells (BACKGROUND, BGCOLOR) – thickness of the border (BORDER) – spacing within (CELLPADDING) and between (CELLSPACING) cells Copyright © 2001 by Joseph Lee 41

Row level controls • with attributes within the <TR> tag, you can control: – vertical and horizontal alignment of the cells’ contents – background for all the cells contained in that row • row settings override table-level settings Copyright © 2001 by Joseph Lee 42

Cell level controls • with attributes within the <TD> and <TH> tags, you can control: – – vertical and horizontal alignment of the cells’ contents background for all the cells contained in that row the height and width of the cell column or row spanning • row settings override table-level settings Copyright © 2001 by Joseph Lee 43

Table Width • the WIDTH attribute specifies the width of the table • absolute

Cell Spacing / Padding • CELLSPACING: – – – the space between adjacent cells values specified in number of pixels default = 2 • CELLPADDING: – – – space between the cell’s border and its contents values specified in number of pixels default = 1 • Example: <TABLE CELLSPACING=10 CELLPADDING=5> Copyright © 2001 by Joseph Lee 46

Background color • background color can be specified at: – table level <TABLE BGCOLOR=yellow>

Collapsing Cells in Netscape • Netscape will collapse empty cells and will not render a background color in a collapsed cell • all cells need to contain something, e. g. , <BR>, &nbsp, <SPACER> • <SPACER> is specific to Netscape Copyright © 2001 by Joseph Lee 48

Column Spanning • cells in a table can occupy the same horizontal space as multiple cells, e. g, : <TD COLSPAN=4>Four </TD> tells the browser to make the above cell occupy the same horizontal space as four cells Copyright © 2001 by Joseph Lee 49

Table: Example 3 <table border> <tr > <td>Cell 1</td> <td>Cell 3</td> </tr> <tr >

Row Spanning • cells in a table can occupy the same vertical space as multiple cells, e. g, : <TD ROWSPAN=3>Three </TD> tells the browser to make the above cell occupy the same vertical space as three cells Copyright © 2001 by Joseph Lee 51