HTML Beginner's Guide (8)

Beginner

An image embedded in a row Most Web browsers can display an X-bitmap (XBM), GIF, or JPEG image (that is, an image that is adjacent to the text) embedded in a row. Images from other formats are being merged into a Web browser [for example, Portable Network Graphic (PNG) format]. Each image spends processing time and reduces the speed at which the document is displayed. Carefully select the number of images and images in your document. Contains an image in an embedded line, enter: alt= "FORWARD" height=32 width=32> Where the image name is the URL of an image file. The grammatical format of the URLs is the same as the format used by the anchor chain href. If the image file is a GIF file, the filename portion of the image name must end with. gif. Files in the X bitmap format must end with. XBM; JPEG image files must end with. jpg or. jpeg; Portable Network Graphic file must end with. png. Image Size Properties In the tag you should include two other properties that inform the browser of the size of the image being downloaded with the text. The HEIGHT and WIDTH properties allow the browser to leave the appropriate space (pixel) for the image when downloading other parts of the file. (pixel size can be obtained from your image processing software such as Adobe Photoshop.) For example, to include a portrait of yourself in a file, enter: alt= "FORWARD" height=32 width=32> Note: Some browsers use the HEIGHT and Width properties to enlarge or shrink an image to fit the allocated space when the image size is inconsistent with the attribute description size. Not all browser developers agree to enlarge/shrink images. Therefore, do not assume that your readers can use this feature when arranging. It's best to look at the image size and use the correct size. Image positioning You have a certain amount of flexibility for the display of the image. You can separate the image from the text and put the image on the left, right, or middle. Or you can make the image and text on the same line. You can try a variety of forms to see which of the best Make the image and text on the same line By default, the bottom and subsequent text of the image is displayed on the same line, as it is now. You can also place the image at the top or center of a section by setting the value of the Align= property to either the top-level or the middle. This text is on the same line as the top of the image (). Note that only one line of text is so, and other lines jump to the bottom of the image to display. This line of text is displayed in the middle of the image (). Again, only one row is shown in the middle, and the other lines are below the image. Images with no text If you want to display an image with no text (for example, your organization's logo), just take it as a separate paragraph. Use the Align= property of the paragraph mark to adjust the image to the middle or right of the window, as follows: <p align=center> </p> The results are: The image is shown in the middle; This paragraph starts on the left below it. Alternate text for images Some world Wide Web browsers-mostly those that run on VT100 terminals-cannot display images. Some users will turn off image downloads even if their software can display images (especially if they are users of modem or low-speed circuits). HTML provides a mechanism for readers to know what is missing on the page they are seeing. The ALT attribute allows you to specify a section of text that can be displayed in place of an image. For example: alt= "" Height=48 width=50> Where Http://www.webjx.com/htmldata/2005-02-21/UpArrow.gif is an up arrow. In a browser with image display and image download open, you can see a graph of up arrow. In the VT100 browser or when the image download is off, your window will display the word up. You should use a replacement text for every image that appears in your document, which is a courtesy to the reader. Background image A new version of the Web browser can download an image to be used when displaying a home page background. Some people like to use the background, some people do not like. In general, if you want to include a background, make sure that your text is still legible on the background. A background image can be an organization of an object (such as a linen paper) or an image (possibly a logo). You can generate a background image just like any other image. But you just have to make a very small image. The browser uses a feature called "tiling" to repeat the image, filling the entire browser window. Simply put, you just generate an image, and the browser repeats itself more than once until it fills your window. This action is performed automatically when you use the tag described below. A tag containing a background image is included as an attribute in the <BODY> tag description: <body background= "Filename.gif" > Background color By default, browsers display text with a gray-bottom black word. But, you can change them. Some HTML authors select a background color, with corresponding changes to the text color. This change must be looked at in advance, whether it is also easy to read. (for example, many people use the black background red word, very difficult to read!) Using <BODY> tags for a variety of properties, you can change the text, links, and read links to the colors of the active link. For example, enter: <body bgcolor= "#000000" text= "#FFFFFF" link= "#9690CC" > A window will be created with a black background (bgcolor), a white text, and a silver hyperlink (link). The combination of six digits and letters represents the color, which gives the value of the RGB (Red Red, green, blue) of some color. This six-digit number is actually a three-order two-digit number representing the hexadecimal value of the red, green, and blue weights from 00 to ff. For example, 000000 means black (no color), FF0000 is bright red, FFFFFF is white (all three colors are all saturated). The combination of these numbers and letters is ambiguous. Fortunately, there is an online resource to help you understand the various combinations and colors that correspond to each other: ColorPro Web Server External images, sounds, and animations You may want to open a picture as a separate document when the user activates a link to a word or small image in your document. This is called an external image and is useful when you do not want to reduce the download speed of the main document because of the large image. To include a link to an external image, enter: <a href= "Http://www.webjx.com/htmldata/2005-02-21/MyImage.gif" >link anchor</a> You can also use a small image as a link to a large image. Input: <a href= "http://www.webjx.com/htmldata/2005-02-21/LargerImage.gif" ></A> alt= "" Height=48 width=50> The reader sees the image http://www.webjx.com/htmldata/2005-02-21/SmallImage.gif and clicks on it to open the file http://www.webjx.com/htmldata/ 2005-02-21/largerimage.gif. Use the same syntax to link external animations and sounds. The only difference is the extension of the linked file. For example <a href= "Adamsrib.mov" >link anchor</a>