BIS 4226 HTML (Part 2) Joseph Lee

BIS 4226 HTML (Part 2) Joseph Lee
Copyright 2001 by Joseph Lee

Copyright © 2001 by Joseph Lee
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

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

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

JPEG supported by the majority of browsers 24bit 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

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

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

Adding graphics to web pages
the <IMG> tag inserts a graphic image does not create any paragraph break in its simplest form: <IMG SRC=“url of graphic”> Copyright © 2001 by Joseph Lee

<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="prin1.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="prin2.gif"> Copyright © 2001 by Joseph Lee

<IMG>: Specifying size
width and height attributes indicate the dimension of the graphic in pixels, e.g., <IMG SRC=“prin1.gif” WIDTH=100 HEIGHT=70 > Copyright © 2001 by Joseph Lee

<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="prin1.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="prin2.gif"> Copyright © 2001 by Joseph Lee

<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=“prin1.gif” ALT=“A Drawing” > Copyright © 2001 by Joseph Lee

<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="prin11.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="prin2.gif"> Copyright © 2001 by Joseph Lee

<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="prin11.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="prin2.gif"> Copyright © 2001 by Joseph Lee

<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="prin11.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="prin2.gif"> Copyright © 2001 by Joseph Lee

<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="prin11.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="prin2.gif" border=10> Copyright © 2001 by Joseph Lee

<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="prin11.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="prin2.gif" border=10> Copyright © 2001 by Joseph Lee

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

Exercise 1: Online Resources
MediaBuilder: Animation Factory The Clipart Connection Clip Art Library Copyright © 2001 by Joseph Lee

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

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

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

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

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

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 default = 1 Example: <TABLE CELLSPACING=10 CELLPADDING=5> Copyright © 2001 by Joseph Lee

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

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

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

BIS 4226 HTML (Part 2) Joseph Lee

Similar presentations

Presentation on theme: "BIS 4226 HTML (Part 2) Joseph Lee"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

BIS 4226 HTML (Part 2) Joseph Lee

Similar presentations

Presentation on theme: "BIS 4226 HTML (Part 2) Joseph Lee"— Presentation transcript:

Similar presentations

About project

Feedback