Imperial Valley College Faculty Websites

You are here:Instructors»Robert Gallegos»CIS 212»Chapter 5 and 6 Review
Tuesday, 20 September 2011 09:02

Chapter 5 and 6 Review

Written by Robert Gallegos
Rate this item
(0 votes)

CIS 212          Fall 2011         Lecture Review Week 5

Chapters:
5 Meeting the Media: Adding images to your pages
6 Serious HTML: Standards, compliance, and all that jazz

Textbook:       Head First HTML with  CSS & XHTML

Chapter 5 Review

Three most widely used image formats for web pages.

GIF

a. Used for images with solid colors, logos and geometric shapes.

b. Can represent images with up to 256 different colors.

c. Is a “loossless” format because it compresses the file to reduce file size, but does not throw any       

    information away.

d. Allows one background color to be set to transparent.

JPEG

a. Used for photos and complex graphics.

b. Can represent images with up to 16 million different colors.
            c. Is a “lossy” format because it throws away some information about an image.

d. DOES NOT SUPPORT TRANSPARENCY!     

PNG

a. Supports both JPEG and GIF styles of images.
            b. Has a more advanced transparency feature than GIF.

c. DOES NOT WORK ON EVERY BROWSER!

You can put relative paths and URLs into the “src” attribute.

The “alt” attribute for <img> element list a bit of information about the image if the image can not be displayed.

The width and height attribute should not be used to decrease or enlarge images beyond their original sizes!

a.       Enlarging images using width and height attributes beyond their original size will cause a process known as pixelation. This will result in a poorly displayed image.

b.      Decreasing images using the width and height attributes will cause the browser to download the image in its original format and slow down display time.

Always figure out the correct image size for your use and set the image resolution to 72 ppi (pixels per inch). This will help optimize your images and speed up web page loading time.

800 pixels is the typical width that most people set their browsers to. This is a good default number to set the width of your web page.

You never want to make someone visiting your web pages scroll horizontally, because it is aesthetically unpleasant.

To link an image, you put the <img> element inside an <a> element, like this:

<a href=“relative or URL address”><img src=“relative or URL address”></a>

Words that are anti-aliased on a computer screen are more readable and more pleasant to the reading eye.

The <img> element is an inline element which means that the browser does not put a linebreak before or after an image.

Chapter 6 Review

XHTML inherited traits from both HTML and XML.

Tell the browser up front what type of HTML or XHTML you are will be using with a document type definition.

In your document type definition you can type it all on one line, or you can hit return between the quoted parts .

As part of your code creation process, always validate your web pages before you go live with them.

Always check your web pages on different web browsers to check cross compatibility.

The character encoding tells the browser that kind of characters are being used in the page.

Add the <meta> element inside your head element to specify the content type.

Example:

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1”>

To move from transitional HTML 4.01 to strict, we change the DOCTYPE to the strict version.

Example:

            <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

In the current standard, inline elements belong inside block elements.

When coding your HTML/XHTML enter your elements in lowercase format.

The “alt” attribute is required on images for accessibility, so the visually impaired can know what the image is, even if they can’t see it. The other required attribute is the “src” attribute on an image telling the browser where the resource is located.

By adhering to standards, your pages will display more quickly and with fewer display differences between browsers.