HTML Beginner's Guide (8)

Images embedded in rows
Most web browsers can display X-bitmap (XBM), GIF, or JPEG format images (i.e., images adjacent to text) embedded in rows. Images in other formats are being processed Incorporate into a web browser [e.g., Portable Network Graphic (PNG) format]. Each image takes processing time and slows down document display. Choose images and the number of images in your document carefully.

Contains an image embedded in a row, enter:


ALT="FORWARD" HEIGHT=32 WIDTH=32>

where the image name is The URL of the image file.

The syntax format of URLs is the same as the format used by the anchor chain HREF. If the image file is a GIF file, the file name part of the image name must end with .gif. X Bitmap format files must end with .xbm; JPEG image files must end with .jpg or .jpeg; Portable Network Graphic files must end with .png.

Image size attribute
In the tag you should Contains two other attributes that inform the browser of the size of the image that is being downloaded along with the text. The HEIGHT and WIDTH attributes allow the browser to allow appropriate space (pixels) for the image while it downloads the rest of the file. ( You can get the pixel size from your image processing software such as Adobe Photoshop.)

For example, to include a portrait of yourself in the file, enter:


ALT="FORWARD" HEIGHT=32 WIDTH=32>

Note: When the image size is inconsistent with the attribute description size, some browsers use the HEIGHT and WIDTH attributes to expand or shrink an image Image so that it fits in the allocated space. Not all browser developers agree with enlarging/reducing images. Therefore, do not assume when arranging that your readers will have access to this feature. It is best to check the image size , use the correct size.

Image Positioning
You have some flexibility with how images are displayed. You can keep images separate from text, place images on the left, right, or in the middle. Or you can have images The icon and text are on the same line. You can try various forms to see which one works best

Keep the image and text on the same line
By default the bottom of the image and the following text are displayed on the same line, like this paragraph now. You You can also place the image at the top or middle of a paragraph by setting the value of the ALIGN= attribute to TOP or CENTER.

This text is on the same line as the top of the image (). Note that only one line of text is like this, the other lines jump to the bottom of the image.

This line The text is displayed in the center of the image (). Again, only one line is displayed in the center and the other lines are below the image.

Image without text
If you want To display an image without text (for example, your organization's logo), simply display it as a separate paragraph. Use the paragraph tag's ALIGN= attribute to resize the image to the center or right of the window, as shown below :

The result is:

The image is displayed in the middle; this paragraph starts from below it to the left .

Replacement text for images
Some World Wide Web browsers - primarily those running on VT100 terminals - cannot display images. Some users turn off image downloading even though their software can Display images (especially if they are modem or low-speed line users). HTML provides a mechanism for readers to know what is missing from the page they are looking at. The

ALT attribute allows you to specify a paragraph that can be displayed in place of an image Text. For example:


ALT="" HEIGHT=48 WIDTH=50>

where UpArrow.gif is a Upward arrow. In browsers with image display capabilities and image downloading enabled, you will see an upward arrow graphic. In the VT100 browser or when image downloading is turned off, the word Up will appear in your window.

You should use a replacement text for every image that appears in your document. This is a Courtesy to readers.

Background Image
Newer versions of web browsers can download an image to use as a background when displaying a home page. Some people like to use backgrounds, some don't. Generally, if you want to include a Background, you want to make sure that your text can still be read clearly against the background.

The background image can be a tissue of an object (such as linen paper) or an image (perhaps a logo). You can generate it like Create a background image just like any other image.

But you only need to make a very small image. The browser will use a feature called tiling to display the image repeatedly, filling the entire browser window. Simply put, you just generate an image and the browser will automatically do it multiple times until it fills your window. This action is performed automatically when you use the tag described below.

The tag containing the background image is included as an attribute in the tag description:



Background Color
By default browsers display text using black text on a gray background. However, you can change them. Some HTML authors choose a background color with a corresponding change in text color.

Be sure to do this with this change Take a look in advance to see if it is still easy to read. (For example, many people use red text on a black background, which is very difficult to read!)

Using the multiple attributes of the tag, you can change the text, links, and viewed links and the color of the active link. For example, entering:



will create a window with a black background (BGCOLOR) and text is white (TEXT), and the hyperlink is silver (LINK).

The six-digit combination of numbers and letters represents the color, which gives the RGB (red, green, blue) value of a certain color. This six-digit The digits are actually three sequential two-digit numbers, representing the hexadecimal values ​​of red, green, and blue proportions from 00 to FF. For example, 000000 means black (no color whatsoever), FF0000 is bright red, and FFFFFF is white (all three colors are saturated). The meaning of these combinations of numbers and letters is ambiguous. Fortunately there is an online resource that can help you Understand the correspondence between various combinations and colors:

ColorPro Web server
External images, sounds, and animations
You may want to display a picture when a user activates a link made from a word or small image in your document The image is opened as a separate document. This is called an external image and is useful when you don't want to slow down the download of the main document due to a large image.

Include an external image Link, enter:

link anchor

You can also use a small image as a link to a larger image. Enter:


ALT="" HEIGHT=48 WIDTH=50>

Readers see the image SmallImage.gif and click It will open the file LargerImage.gif.

Uses the same syntax for linking external animations and sounds. The only difference is the extension of the linked file. For example,

link anchor< /A>

The above is the content of HTML Beginner’s Guide (8). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!