0
NHS Designs
Web Design
the History of the Internet

Review for Test #3

Main Concepts from HTML 15 - HTML 19

  • Use the <img> element to place images in your Web page.
  • Browsers treat <img> elements a little differently than other HTML elements; after reading the HTML page, the browser retrieves each image from the Web server and displays it.
  • If you have more than a couple of large images on a Web page, you can make your Web page more usable and faster to download by creating thumbnails - small images that the user can click on to see the large version of the image.
  • The <img> element is an inline element, which means that the browser doesn't put a linebreak before and after the image.
  • The src attribute is how you specify the location of the image file. You can include images from your own site using a relative path in the src attribute, or images from other sites using a URL.
  • The alt attribute of an <img> element is a meaningful description of the image. It is displayed in some browsers if the image can't be located, and is used by screen readers to describe the image for the visually impaired.
  • A width of less than 800 pixels is a good rule of thumb for the size of photo images in a Web page. Most photo images that are created by digital cameras are too large for Web pages, so you'll need to resize them.
  • Photoshop is one of the many photo editing applications you can use to resize your images.
  • Images that are too large for the browser make Web pages difficult to use and slow to download and display.
  • A pixel is the smallest dot that can be represented on the screen. Each image is composed of thousands of pixels. Depending on your monitor, there can be anywhere from 72 pixels in an inch to 120 pixels in an inch.
  • JPEG and GIF are the two formats for images that are widely supported by Web browsers.
  • The JPEG format is best for photographs and other complex images.
  • The GIF format is best for logos and other simple graphics with solid colors, lines, or text.
  • JPEG images can be compressed at a variety of different qualities, so you can choose the best balance of quality and file size for your needs.
  • The GIF image format allows you to make an image with a transparent background. If you put an image with a transparent background in a Web page, what's behind the image, such as the background color of the page, will show through the transparent parts of the image.
  • In Photoshop, use the Matte color menu in the "Save for Web & Devices" dialog to choose the right color for softening the edges of your transparent GIF image.
  • Images can be used as links to other Web page. to create a link, use the <img> element as the content of an <a> element, and put the link in the href attribute of the <a> element.

 

Main Concepts from HTML 20

  • HTML 4.01 is the HTML standard that is most widely supported by browsers.
  • The World Wide Web Consortium (W3C) is the standards organization that defines what "standard HTML" is.
  • Many browsers have two modes for displaying HTML: "quirks" mode for old HTML and standards mode for HTML 4.01.
  • If you don't tell the browser which version of HTML you are using, many browsers will use quirks mode, which may cause inconsistent page display in various browsers.
  • The document type definition (DOCTYPE) is used to tell the browser which version of HTML your Web page is written in.
  • The strict DOCTYPE is used if you are writing fully compliant HTML 4.01.
  • Use the transitional DOCTYPE if you are transitioning HTML that still includes display-oriented elements and attributes.
  • The <meta> tag in the <head> element tells the browser additional information about a Web page, such as the content type and character encoding.
  • Most Western-European languages used on computers today (including English) can be represented with the ISO-8859-1 character encoding.
  • The W3C validator is a free online service that checks pages for compliance with standards.
  • Use the validator to ensure that your HTML is well formed and that your elements and attributes meet the standards.
  • By adhering to Web standards, your pages will display more quickly and with fewer display differences between browsers.

 

REVIEW FOR TEST 3

Topics:

  1. Images
    1. Resizing Images in Photoshop
    2. Resizing Images in HTML
    3. Pixels
  2. Adding Links to Images
    1. The Purpose of Thumbnail Images
    2. <img> Is Inline
    3. Nesting <img> Inside <a>
  3. Saving Images for the Web
    1. Transparency in Photoshop
    2. GIF or JPG?
    3. The Matte Option in Photoshop
  4. Web Standards
    1. The History of HTML
    2. The Purpose of Web Standards
    3. World Wide Web Consortium (W3C)
    4. The W3C Validator
    5. The Purpose of the DOCTYPE
    6. The Purpose of <meta> Tags
    7. Transitional vs. Strict
    8. Rules for HTML 4.01 Strict

 

You Should Be Able To:

  1. Explain whether a designer should resize an image using HTML, and why or why not.
  2. Define what pixels are, how many are typically in an inch, and the maximum wide of a Web image.
  3. Determine when a Web page should use thumbnail images rather than full-sized images.
  4. Identify whether <img> is an inline or block element.
  5. Write the correct HTML for turning an image into a hyperlink.
  6. Decide whether a given image should be saved for the Web as GIF or JPG.
  7. Complete the following tasks in the "Save for Web and Devices" dialog box in Photoshop:
    1. Choose a file format and quality
    2. Change the image size
    3. Turn transparency off for GIFs
    4. Change the matte color for transparent GIFs
    5. See what the final file size will be before you click OK
  8. Explain briefly why web standards were developed.
  9. Use the W3C validator to check your HTML coding.
  10. Identify what the DOCTYPE definition and <meta> tag do.
  11. List several rules for complying with HTML 4.01 strict.

 

Source: "Head First HTML: with CSS & XHTML" by Elisabeth Freeman and Eric Freeman

Page 1 | 2


ABOUT MRS. PEDERSEN · EMAIL MRS. PEDERSEN
resources · copyright information · Website designed by
Order a Custom, Watercolor Pet Portrait at PetsByDawn.com
>