Creating Cool Web Sites with HTML, XHTML and CSS (2010)- P4

Tham khảo tài liệu creating cool web sites with html, xhtml and css (2010)- p4, công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
Creating Cool Web Sites with HTML, XHTML and CSS (2010)- P4 124 Creating Cool Web Sites with HTML, XHTML, and CSS When you have a graphics file, the tag is used to place that file in the text. Suppose that I have a file called black-box.gif that I want to use as the opening graphic in my Web page. The following example shows how this file might appear in an HTML document: The Black Box Welcome to the Black Box People are always trying to figure out how things work. From “How Things Work” to “Why Things Work”, it’s an obsession. But why? Why not just think of everything in life as a simple Black Box?. Ready to change your perspective? yes The formatting tag has quite a variety of attributes, as this chapter illustrates. The two attributes that must appear in the tag are a specification of the image source file itself, in the format src=”filename”, and a tag indicating the alternative text to display if the image cannot be loaded, the alt=”text” tag. Figure 7-1 shows how the preceding HTML appears when viewed in a browser. Figure 7-1: The Black Box page with graphics specified, but not loaded.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 7: From Dull to Cool by Adding Graphics 125 The small box at the top of Figure 7-1 with a small x inside is not the graphic I wanted to include; rather, it’s an indication from Internet Explorer that an inline graphic was specified with the tag, but not loaded. In this case, the graphic was not loaded because I mistyped the name of the graphics file, specifying black-box.gff rather than black-box.gif. (Did you notice?) Instead, the text of the alt attribute is shown, but it’s definitely not what I want! To correct the problem, simply fix the spelling. Figure 7-2 shows what the resulting Web page looks like with all the information properly loaded (more attractive than with the unloaded graphic, eh?). Figure 7-2: The Black Box Web page with the fully loaded graphic. You may have a fast Internet connection, but remember that many people are trapped with slow dial-up connections at 28,800 baud or—horrors!—slower. Earthlink, America Online, and MSN users can access Web pages, but performance can be quite slow. Bigger graphics have more data to transfer to the user and, therefore, take longer to receive. Also keep in mind that, to speed up access, many users simply modify their Web browser preferences to skip loading the graphics unless they’re required to understand a page. A general guideline in gauging how long a graphic takes to download is to figure that each 1K of graphics size translates to one second of download time for dial-up users. So, when you create graphics, it’s a good idea to look at the file sizes and ask yourself whether the specific graphic is worth the wait. Sometimes it is, but often it isn’t and just creates a frustrat ing situation for the user. A popular use of graphics is a button that you can create by wrapping the tag with an anchor. If I have two button graphics—yes.jpg and no.jpg—here’s how I can spiff up the Black Box page:Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 126 Creating Cool Web Sites with HTML, XHTML, and CSS The Black Box, Take III Welcome to the Black Box People are always trying to figure out how things work. From “How Things Work” to “Why Things Work”, it’s an obsession. But why? Why not just think of everything in life as a simple Black Box?. Ready to change your perspective? The graphics included in this page (yes.jpg and no.jpg) are separate files in the same directory as the Web page. Figure 7-3 shows the new Web page with all graphics included. Figure 7-3: The improved Black Box page displays the added graphics. A critical question you might ask is the following: Whe ...