HTML 4_01 Weekend Crash Course - G. Perry
.pdf
82 |
Saturday Morning |
Ordered lists
The <ol> tag begins an ordered list on your Web page. Within the list, you need to precede each item with the <li> tag (no end </li> tag exists) so the browser knows where each item in the list begins. At the end of the list, the </ol> tag ends the ordered list.
The following code describes how to start a car:
<ol>
<li>Put the key in the ignition. <li>Turn the key.
<li>When the engine turns over, release the key. </ol>
When your Web page contains this code, the browser automatically numbers the list, beginning with 1. The nice thing about the browser’s automatic numbering, as opposed to you numbering the list yourself, is that you can add items, remove items, and rearrange items in the list without having to renumber the list yourself. The browser will always renumber the list before each display. Figure 6-5 shows how the list appears in the browser window.
Figure 6-5
The browser automatically numbers ordered lists.
Unordered lists
Unordered lists are easier to create than ordered lists because no starting value exists. By default, the browser displays a bullet, a shaded circle, at the beginning of each item in the list.
The following code creates an unordered list:
<ul>
<li>CPU
Session 6—Improving the Look of Your Web Page’s Text |
83 |
<li>Hard disk <li>CD-ROM </ul>
Figure 6-6 shows how the list appears in the browser window.
Figure 6-6
Each item in an unordered list begins with a bullet.
You can override the bullet style with the type attribute. The type attribute must appear inside quotation marks and can be one of the values from Table 6-2.
Table 6-2
Unordered Type Attributes
Type name |
Bullet’s appearance |
circle |
Circle with clear center |
|
|
disc |
Circle with filled, dark center |
|
|
square |
Square with filled, dark center |
|
|
Definition lists
Use the <dl> tag to begin a definition list. Each term in the definition list must begin with the <dt> tag, and each detailed line of the definition list must begin with the <dd> tag.
Although definition lists may sound more complicated than the previous list styles, definition lists are easy to understand once you see one produced. The following code produces a definition list that might appear as part of a self-defense site:
<dl>
<dt>caliber
Morning Saturday—II Part
6 Session
84 |
Saturday Morning |
<dd>The internal diameter of the barrel of a gun or of a bullet casing.
<dt>centerfire
<dd>A gun that fires ammo by striking the center pin in the cartridge.
<dt>recoil
<dd>The kick that you experience when a firearm presses back against you during firing.
</dl>
Figure 6-7 shows how the definition list appears in the browser window.
Figure 6-7
The definition is indented from the term in a definition list.
Note
Definition lists aren’t just for definitions. You can use definition lists to describe other Web site links, using the Web site name or URL as the term and formatting the site’s description as the definition. Name and address lists also work well in definition list format.
REVIEW
Be careful when using <p> because of the inconsistency that some browsers provide with handling spaces between paragraphs.
By aligning your text with the left edge of the browser window, the center of the window, or the right edge of the window, you create a better page layout for your text.
Session 6—Improving the Look of Your Web Page’s Text |
85 |
Keep your text from wrapping when the user resizes the browser window.
The <blockquote> tag sets off long passages of text, such as a quotation.
You’ll see the <big> and <small> tags still in use, but a move is under way to stop using them because of the increased usage of style sheets.
HTML makes adding lists to your Web sites easy with the <ol>, <ul>, and
<dl> tags.
QUIZ YOURSELF
1.What can you use as a substitute for the <p> tag to ensure that your paragraphs break with a single blank line between them? (See “Better Paragraph Spacing.”)
2.Which tag substitutes for <p align=center> and enables you to center graphic images as well as paragraphs? (See “Paragraph Alignment.”)
3.What is the primary reason why browsers do not automatically add line breaks when your HTML code includes text returns on multiple lines? (See “Line Breaks and Spacing.”)
4.What are the tags still in use that make text larger or smaller than the base size? (See “Bigger and Smaller Font Sizes.”)
5.What is the difference between the three list styles? (See “Putting Lists in Your Text.”)
Morning Saturday—II Part
6 Session
S E S S I O N
7 
HTML Graphics
Session Checklist
Add graphics to your Web page and master the two primary graphic file types
Use the <img> tag to work with images on your Web pages
Specify the width and height of your images
Deal with users who turn off their image display
Distinguish between interlaced and noninterlaced images
Adjust your images’ gamma value
In this session, you’ll learn the mechanics of placing graphic images on your Web pages. You’ll also learn what attributes to use to speed up the loading of graphics and to get around users who turn off their image display. Much
of what you learn this weekend about Web page graphics centers not only on the actual HTML tags needed to display the images, but also on the graphic theory required to use graphics effectively.
88 |
Saturday Morning |
Kinds of Graphics and File Types
The term picture actually doesn’t describe all the kinds of images a Web page can display. Your Web page can display pictures, line drawings, computer-generated artwork, scanned images, images brought into the machine from an electronic drawing tablet, images for free and for sale on the Internet, clip art that comes with drawing programs, and even mouse-drawn images created in paint programs. If your computer can create or load it, a Web page can display it.
The more graphics-intensive your site is, the more visually appealing that it may be. However, it is less likely that users will wait on the site to load before giving up and going elsewhere. Obviously, if your site is a graphics-oriented site, as would be the case for an art gallery’s preview site, users know what to expect and are willing to wait longer than a potential customer who simply wants to know what time your customer service personnel begin working. And, as you already know from Friday evening’s sessions, you should keep your home page free of intensive graphics no matter what service your site provides and bury the intensive graphics deeper in the site where your users will stick with you more.
Many different graphic images exist. You can locate graphic files stored with many filename extensions, but you should use only two image types when placing images on your Web page, and they are as follows:
GIF (pronounced “jiff”) files, also known as graphic interchange format files, were originally developed for the CompuServe online service. GIF files can display up to 256 colors and work well for images with pure colors such as logos and paint-produced programs.
JPEG or JPG or JPE (pronounced “j-peg”) files, created for the Joint Photographic Experts Group, can display millions of colors and are great for high-resolution images such as photos.
|
Never embed an image with another file extension on your site, |
|
because a browser does not support other graphics file formats. |
Never |
Most graphics programs will convert your image to GIF or JPG for- |
mat with the File Save As command. |
Generally, you’ll use the JPEG format for photographic images and GIF for all other kinds of graphics you place on your Web pages. JPEG’s high availability of colors makes JPEG a good standard for photos. Small text on top of a JPEG image does not always display well because the edges can look rough and grainy. That’s why GIF works well for logos and other images that typically include text as well as a graphic.
Session 7—HTML Graphics |
89 |
GIF images also provide exceptional support for a concept called transparency. You can specify a color on a GIF image that will be transparent to its background.
Session 15 describes more about creating and placing transparent images on your pages.
Cross-Ref
When preparing your images, remember that most computer monitors have 72 pixels per inch (usually referred to as dpi or dots per inch) resolution. If you offer images with a high resolution, you are wasting page-loading time. The one exception is when your users want to print your site’s images. Printer resolutions are higher than monitor resolutions, with some reaching 1200 dpi. Instead of providing these kinds of graphics on your primary Web pages, however, you may want to offer a Web page with special printer versions of images that your users may need to print.
Working with Graphics
Working with images on your Web page takes little effort. The <img> (for image) tag does all the work for you. The <img> tag supports several attributes, but the src= (for source) attribute is the one that specifies the name and location of the image.
Placing an image
Here is the format of the <img> tag that collects the graphic image and displays the image on the Web page:
<img src=”location of image”>
No end tag is necessary. The location of image generally is the images folder you’ve stored in the same location as your site’s HTML files. You also can add a link to an image located on another Web site. If you first copy that image to your own site’s images folder and refer to that copy, assuming you have permission to copy and use the image, your Web site link will remain good even if the other site changes.
The following tag tells the browser to locate and display the image named ourhouse.gif:
<img src=”images/ourhouse.gif”>
Morning Saturday—II Part
7 Session
90 |
Saturday Morning |
If you combine this tag with other tags, the image appears inline with surrounding text. In such a case, the text and the image take different places on the screen. The following code produces the image shown on the browser screen in Figure 7-1.
<h1><font face=Arial>Welcome to our new home</font></h1>
<font size=4 face=Arial size=4>Although we are snowed in, we love it here in the country.</font>
<p><img src=”/images/ourhouse.gif”></p>
<p><font size=4 face=Arial>(At least the gravel road doesn’t stir up much dust in the winter!)</p>
Figure 7-1
The <img src> tag lets you display images on your page.
Session 7—HTML Graphics |
91 |
Framing an image
You can add a border around your images by using the border= (for border) attribute inside the <img> tag. If you specify a border value higher than 0, the browser will place a border around the image. The following command tag draws a border ten pixels wide around the image:
<img src=”/images/ourhouse.gif” border=10>
|
Keep in mind that many formatting command tags, including |
|
these graphic tags, are also supported by CSS, the cascading style |
Note |
sheets that you’ll learn about in Session 20. In addition, you can |
learn CSS rapidly after you’ve seen how the individual tags work |
|
|
to format pages. |
Aligning an image
As with paragraphs, you can align graphic images to the left edge, center, or right edge of the browser window. The align=left (for align left) and align=right (for align right) <img> attributes handle the left and right alignment. Insert either align=left or align=right in the <img> tag when you want to align the image against the window edge. The following tag places the image against the window’s right edge and adds a 10-pixel border, as shown in Figure 7-2:
<img src=”/images/ourhouse.gif” align=right border=10>
To center an image, enclose the image between the <center> and </center> tags like this:
<center>
<img src=”/images/ourhouse.gif”> </center>
|
The align attribute overrides a <center> tag that may still be in |
|
effect. In other words, if an image appears inside a <center> |
Note |
and </center> pair of tags, and that image contains an |
align=right attribute, the image will be right-aligned and |
|
|
not centered in the browser’s window. |
Morning Saturday—II Part
7 Session