Tài liệu Web Programming with HTML, XHTML, and CSS- P3 pptx

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề	Links and Navigation
Trường học	WroxPro
Chuyên ngành	Web Programming
Thể loại	sách hướng dẫn
Năm xuất bản	2008

Định dạng
Số trang	50
Dung lượng	1,11 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

The title Attribute As mentioned at the start of the chapter, a title attribute is vital for any links that are images, and can also help provide additional information to visitors in the form of a visual text tooltip in most browsers or an auditory clue in voice browsers for the visually impaired. Figure 2-2 near the beginning of this chapter showed you what the title attribute looks like in Firefox when a user hovers over the link. The type Attribute The type attribute specifies the MIME type of the link. Appendix H includes a list of MIME types. An HTML page would have the MIME type text/html, whereas a JPEG image would have the MIME type img/jpeg. The following is an example of the type attribute being used to indicate that the document the link points to is an HTML document: <a href=”index.html” type=”text/html”>Index</a> Theoretically, the browser could use the information in the type attribute to either display it differently or indicate to the user what the format of the destination is, although none do use it at present. Try It Out Creating Links Within Pages Now it’s your turn to try making a long page with links between different parts of the page. In this example, you are going to create a page that is a restaurant menu. So open your text editor or authoring tool and follow these steps: 1. Start with the XML declaration, DOCTYPE declaration, and the elements for the skeleton of the document: <html>, <head>, <title>, and <body>. Remember to give the document a title and add in the namespace identifier on the root <html> element: <?xml version=”1.0” ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”> <head> <title>A menu example</title> </head> <body> </body> </html> 2. Inside the <body> element, add the headings for the page. Each of these should have a destination anchor so that you can link directly to that part of the page. The main heading will be used for “Back to top” links, whereas each course of the menu will have an id attribute that describes its sections: <body> <h1><a id=”top”>Wrox Cafe Menu</a></h1> <h2><a id=”starters”>Starters</a></h2> <h2><a id=”mains”>Main Courses</a></h2> <h2><a id=”desserts”>Desserts</a></h2> </body> 71 Chapter 2: Links and Navigation 59313c02.qxd:WroxPro 3/24/08 11:31 PM Page 71 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 3. Between the title and the starters, not only will there be an introductory paragraph, but also a menu linking to each of the courses. In order to be Strict XHTML, the links at the top will go in a block-level <div> element: <h1><a id=”top”>Wrox Cafe Menu</a></h1> <div id=”nav”><a href=”#starters”>Starters</a> | <a href=”#mains”>Main Courses</a> | <a href=”#desserts”>Desserts</a></div> <p>Welcome to the Wrox Cafe, where we pride ourselves on good, honest home cooked food at good, honest prices.</p> <h2><a id=”starters”>Starters</a></h2> 4. At the bottom of the page, you will have a description of vegetarian dishes. Links next to vegetarian items will point to this description, so it needs to have a destination anchor. <p><a id=”vege”>Items marked with a (v) are suitable for vegetarians.</a></p> 5. Finally, you can just add in the items on the menu in a bulleted list. Note how the vegetarian items have a link down to the description of vegetarian dishes. Don’t forget to add the “Back to top” links. <h2><a id=”starters”>Starters</a></h2> <ul> <li>Chestnut and Mushroom Goujons (<a href=”#vege”>v</a>)</li> <li>Goat Cheese Salad (<a href=”#vege”>v</a>)</li> <li>Honey Soy Chicken Kebabs</li> <li>Seafood Salad</li> </ul> <p><small><a href=”#top”>Back to top</a></small></p> <h2><a id=”mains”>Main courses</a></h2> <ul> <li>Spinach and Ricotta Roulade (<a href=”#vege”>v</a>)</li> <li>Beef Tournados with Mustard and Dill Sauce</li> <li>Roast Chicken Salad</li> <li>Icelandic Cod with Parsley Sauce</li> <li>Mushroom Wellington (<a href=”#vege”>v</a>)</li> </ul> <p><small><a href=”#top”>Back to top</a></small></p> <h2><a id=”desserts”>Desserts</a></h2> <ul> <li>Lemon Sorbet (<a href=”#vege”>v</a>)</li> <li>Chocolate Mud Pie (<a href=”#vege”>v</a>)</li> <li>Pecan Pie (<a href=”#vege”>v</a>)</li> <li>Selection of Fine Cheeses from Around the World</li> </ul> <p><small><a href=”#top”>Back to top</a></small></p> 6. Save your example as menu.html and take a look at it in your browser. You should end up with something that looks like Figure 2-8. 72 Chapter 2: Links and Navigation 59313c02.qxd:WroxPro 3/24/08 11:31 PM Page 72 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 2-8 How It Works You have already seen the skeleton parts for the page (along with the declarations that come before it), so let’s focus on the links. There are three source anchors just under the first heading that form a simple navigation bar. When clicked, these will take users to the appropriate section of the page. These items are kept inside a <div> element because <a> elements should appear inside a block-level element in Strict XHTML 1.0 — although any earlier versions would allow you to leave this off. <div id=”nav”><a href=”#starters”>Starters</a> | <a href=”#mains”>Main courses </a> | <a href=”#esserts”>Desserts</a></div> The id attribute on the <div> element is there just to identify the purpose of this block-level grouping element. Because this element does not have a specific purpose like some of the other elements (such as <p> or <h2>), it helps to add this attribute as a reminder of what it is grouping. Three additional source anchors are underneath each section of the menu to take you back to the top of the page. <p><small><a href=”#top”>Back to top</a></small></p> Finally, source anchors with the text v indicate items are vegetarian, and to take you to a key at the bottom of the page that explains what the v stands for. <li>Mushroom wellington (<a href=”#vege”>v</a>)</li> 73 Chapter 2: Links and Navigation 59313c02.qxd:WroxPro 3/24/08 11:31 PM Page 73 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The destination anchors are using the id attribute to indicate the potential targets of links. Each of the headings contains a destination anchor. The main menu heading requires an anchor so that the “Back to top” links will take the user to the top of the page, while the subheadings have anchors so that the navigation menu at the top can take them to that part of the page. Remember that destination anchors must have some content — they cannot be empty or the browser might not recognize them, which is why they have been put inside the heading elements surrounding the actual heading name: <h1><a id=”top”>Wrox Cafe Menu</a></h1> <h2><a id=”starters”>Starters</a></h2> <h2><a id=”mains”>Main courses</a></h2> <h2><a id=”desserts”>Desserts</a></h2> Similarly, the paragraph at the bottom that indicates what the (v) sign means contains a destination anchor, just like the heading. <p><a id=”vege”>Items marked with a (v) are suitable for vegetarians.</a></p> Advanced E-mail Links As you saw at the beginning of the chapter, you can make a link open up the user’s default e-mail editor, and address an e-mail to you — or any other e-mail address you give — automatically. This is done like so: <a href=”mailto:info@example.org”>info@example.org</a> You can also specify some other parts of the message, too, such as the subject, body, and people that it should be cc’d or bcc’d to. To add a subject to an e-mail, you follow the e-mail address with a question mark to separate the extra values from the e-mail address. Then you use the name/value pairs to specify the additional properties of the mail you want to control. The name and the value are separated by an equal sign. For example, to set the subject to be Enquiry, you would add the subject property name and what you wanted to be the subject, like so: <a href=”mailto:info@example.org?subject=Enquiry”> You can specify more than one property by separating the name/value pairs with an ampersand. Here you can see that the subject and a cc address have been added in: <a href=”mailto:info@example.org?subject=XHTML&cc=sales@example.org”></a> The table that follows includes a full list of properties you can add. 74 Chapter 2: Links and Navigation 59313c02.qxd:WroxPro 3/24/08 11:31 PM Page 74 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. If you want to add a space between any of the words in the subject line, you should add %20 between the words instead of the space. If you want to take the body part of the message onto a new line you should add %0D%0A (where 0 is a zero, not a capital O). It is common practice to add only the e-mail address in e-mail links. If you want to add subject lines or message bodies you are better off creating an e-mail form, like the one you will see in Chapter 5. Summary In this chapter you learned about links — the part of XHTML that puts the “hyper” in hypertext. Links enable visitors to your site to jump between pages and even between parts of pages (so that they don’t have to scroll to find the place they need). You have seen that you can use the <a> element to create source anchors, which are what most people think of when you mention links on the Web. The content of the source anchor is what users can click — and this should usually be an informative, concise description of what the target is (rather than text such as “click here”), or it can be an image (as you will see in Chapter 3). You can also use the <a> element to create destination anchors. Destination anchors are a little like index points or special markers because they allow you to create links that take you directly to that part of the page. Destination anchors should always have some content, and the old name attribute that HTML introduced for destination anchors has been replaced in Strict XHTML by the id attribute (although this works only in version 3+ browsers). Along the way, you learned more about URLs, in particular the difference between an absolute URL, like those that appear in the address bar of your browser, and relative URLs, which describe where a resource is in rela- tion to the document containing it. Learning the different ways in which relative URLs can be used will also be helpful as you head to the next chapter and learn about adding images and other objects into your documents. Property Purpose subject Adds a subject line to the e-mail; you can add this to encourage the user to use a subject line that makes it easier to recognize where the mail has come from. body Adds a message into the body of the e-mail, although you should be aware that users would be able to alter this message. cc Sends a carbon copy of the mail to the cc‘d address; the value must be a valid e-mail address. If you want to provide multiple addresses you simply repeat the property, separating it from the previous one with an ampersand. bcc Secretly sends a carbon copy of the mail to the bcc‘d address without any recipient seeing any other recipients; the value must be a valid e-mail address. If you want to provide multiple addresses, you simply repeat the property, separating it from the previous one with an ampersand. 75 Chapter 2: Links and Navigation 59313c02.qxd:WroxPro 3/24/08 11:31 PM Page 75 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Exercises You can find the answers to all of the exercises in Appendix A. 1. Look back at the Try It Out example where you created a menu, and create a new page that has links, like those at the top of the menu page, to each of the courses in the menu example. Then add a link to the main Wrox Press web site ( www.wrox.com). The page should look something like Figure 2-9. Figure 2-9 2. Take the following sentence and place <a> elements around the parts that should have the link. <p>To find out why advertising on our site works, visit the testimonials page.</p> 3. What is wrong with the positioning of the <a> element here? <p>You can read the full article <a>here</a>.</p> 76 Chapter 2: Links and Navigation 59313c02.qxd:WroxPro 3/24/08 11:31 PM Page 76 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 3 Images and Objects In this chapter, you begin learning some aspects of web design that will really breathe life into your web pages. You start by learning how to add images into your documents using the <img> element. You will see the difference between some of the main formats used for images on the Web and learn how to prepare your images for use on the Web. You will also learn how to make an image a link, and even how to divide an image up into sections so that different parts of the image link to different pages — this is known as an image map. Then you will go on to meet the <object> element that you can use to insert all manner of objects into pages, from MP3s and Flash movies to Active X controls and even images. Adding Images to Your Site Images and graphics can really bring your site to life. In this section you will not only learn how to insert images and graphics into your pages, but also the different image formats you can use on the Web (such as GIFs, JPEGs, and PNGs). You will also learn when you should choose which format. You will see how careful you have to be when using images on the Web because if you don’t prepare images correctly, they can really slow down the speed it takes for a page to load — and slow sites frustrate users. Furthermore, because you will probably be writing your first sites on your desktop/ laptop computer, you might not realize how long a page will take to load until it is actually on the Web. So choosing the right format for your images and saving them correctly will help make your site faster and result in happier visitors. For practice purposes, you can download images from other sites by right-clicking the image (or Ctrl-clicking) and selecting either the download image to disk or save image as options. Remember, however, that images are subject to copyright, and you could land yourself in legal trouble if you use other people’s images on your site. Once you’ve learned how to insert the right kind of images into your pages, you will then see how to turn them into links and even how to write code that divides them up, so that when users click different parts of the image they get taken to different web pages. 59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 77 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Types of Image Formats To start off, it would help to look at how computers store and render pictures. Graphics are created for computers in two main ways: ❑ Bitmapped graphics divide a picture into a grid of pixels and specify the color of each pixel, much as a computer tells a screen the color of each pixel. Broadly speaking, bitmaps are ideal for photographs and complicated gradations of shade and color. There are several different Bitmap formats; common ones include JPEG, GIF, TIFF, PNG, and the rather confusingly named bitmap or BMP. You will be learning more about JPEGs, GIFs, and PNGs later in the chapter. ❑ Vector graphics break the image into lines and shapes (like a wireframe drawing), and store the lines as coordinates. They then fill the spaces between the lines with color. Vector graphics are commonly used for line art, illustration, and animation. They often feature large areas of flat color (as opposed to textures, shades of colors, and photographic styles). In the early days, bitmaps were the main image format for the Web, although more recently some formats such as Flash and SVG are making use of vector graphics. Bitmap Images Most static images on the Web are bitmapped images. As mentioned, the image is divided into a grid of pixels. If you look very closely at your computer screen you may be able to make out the pixels that make up the screen. If you look at Figure 3-1, you can see an example of a bitmap image with one section that has been modified so that you can see how pixels make up the image. Figure 3-1 78 Chapter 3: Images and Objects 59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 78 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The number of pixels in every square inch of the screen is known as the resolution of the image. Images on the Web can show a maximum of 72 pixels per inch; images used in print are usually higher resolution and are often supplied to printers at 300 dots per inch (note how onscreen we refer to pixels per inch, while in print we call them dots per inch). The more pixels or dots per inch an image contains, the larger the size of the file will be. As a result, any images that you use on the Web, you save at a resolution of 72 dots per inch. If you saved it any larger, this would create unnecessarily large files that would take longer to download. Note that while you can easily save an image that is 300 dots per inch at 72 pixels per inch for the Web, you cannot simply increase an image from 72 pixels per inch to 300 dots per inch because you do not know what color the 228 pixels that are missing from every square inch should be. If you just try to increase the resolution of the image, it will often look grainy. Therefore, if you have a high-resolution 300-dots-per-inch picture, it is often helpful to keep a copy of it at that size just in case you ever wish to show it larger or at a higher resolution. Browsers tend to support three common bitmap graphics formats, and most graphics programs will save images in these formats: ❑ GIF: Graphics Interchange Format (pronounced either “gif” or “jif”) ❑ JPEG: Joint Photographic Experts Group Format (pronounced “jay peg”) ❑ PNG: Portable Network Graphics (pronounced “ping” or “pee en gee”) Let’s take a quick look at each of these because understanding how the format works helps you choose how to save an image. GIF Images In the early days of the Web, the GIF (or Graphics Interchange Format) was the standard for all web graphics. GIF images are created using a palette of up to 256 colors and each pixel of the image is one of these 256 colors. Every different GIF image can have a different palette of 256 colors selected from a range of over 16 million colors. The program that saves the image also selects the palette that will best represent the images. The GIF file stores the palette of colors in what is called a lookup table, and each pixel references the color information in the lookup table rather than each pixel having to specify its own color information. So, if many pixels use the same colors, the image does not have to repeat the same color information and the result is a smaller file size. This way of storing images is known as is an indexed color format. Figure 3-2 shows a GIF file being created in Adobe Photoshop. You can see the color palette that is being used for this image represented in the set of squares halfway down the image on the right. Because of the way GIF images save color information in a lookup table, they are particularly suited to images where there are large flat areas of color. A flat area of color is a section that is just one shade; for example, a rectangle that uses just one green is a flat color, whereas a picture of grass contains lots of different greens. The fewer colors the image uses, the smaller the GIF file is. If a GIF contains less than 16 colors (in which case it can be referred to as a 4-bit GIF), the image will be less than half the file size of a GIF using 256 colors (known as an 8-bit GIF). Therefore, if you are creating an image that uses less than 16 colors, it is worth checking whether your program automatically saves your image as a 4-bit GIF because this will result in a smaller file that’s quicker to download than an 8-bit GIF. 79 Chapter 3: Images and Objects 59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 79 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 3-2 If your text or lines are two colors (say black and white) and you have used anti-aliased edges to make them look smoother, your image will contain more than two colors because the edges use a variety of other colors to make them look smooth. If the GIF needs to use more than 256 colors, then most graphics programs, when saving GIFs, will use a technique called dithering to better represent the extra colors. Therefore, they use two or more colors in adjacent pixels to create an effect of a third color. Dithering has the following two drawbacks: ❑ It can result in some banding in colors. This usually occurs when patches of the image look flat to the eye in the original, but are actually very slightly different shades. For example, when there is a smooth transition between one color and another color (referred to as a gradient), dithering uses a lot of different colors to create the smooth effect. In this case, the changes between colors can become more visible. ❑ If you place a flat color next to a dithered color you will be able to see where the change occurs (because the dithered color is really made up of more than one color). Figure 3-3 illustrates how even a simple gradient, when saved as a GIF, can result in banding because the image contains more than 256 colors — if you look closely you can see that the gradient had vertical lines rather than a smooth transition from black to white. Because GIFs support only 256 colors and have to use dithering to achieve any further colors, they are not really suitable for detailed photographs, which tend to contain more than 256 colors. If you have a photo- graph, gradient, or any image with similar shades of the same color next to each other, you are often better off using a JPEG, which can support unlimited colors, or sometimes a PNG — both of which you will learn about shortly. 80 Chapter 3: Images and Objects 59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 80 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... JPEG for the Web On the left, you have the original image, and on the right is the version that it is saving for use on the Web 82 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 83 Chapter 3: Images and Objects Figure 3-5 Because the JPEG format was designed to work with photo-realistic images, they do not work so well with images... use on the web site If you reduce the size of the image using the height and width attributes, the user will still have to download the full-sized image, which takes longer than a special small version and uses up more bandwidth Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 89 59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 90 Chapter 3: Images and Objects The hspace and vspace... 3/22/08 4:21 PM Page 92 Chapter 3: Images and Objects Try It Out Adding Images to a Document In this example, you’re going to add some images to a document; they will be some brightly colored images of food accompanied by a description of each So, open up your text editor or web page authoring tool and follow these steps: 1 Start with the XML and DOCTYPE declarations and add the skeleton of the XHTML document,... the most common way of embedding moving graphics and video into web pages, without asking the user first, is by using Flash (Flash was being used to serve most of the video and audio files on sites such as YouTube and MySpace) However, while Flash is often quoted as being installed on over 95 percent of computers worldwide, support for playing audio and video was only included in later versions of... URL for that file For example, here is a URL to an MP3: data=”http://www.example.com/mp3s/newsong.mp3” The value can be a relative URL, which would be relative to the value provided in the codebase attribute if specified; otherwise it would be relative to the page itself The height and width Attributes The height and width attributes specify the height and width of an object The values should be in pixels... absmiddle, and baseline values, but these are nonstandard extensions that can produce inconsistent results Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 87 59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 88 Chapter 3: Images and Objects Value Purpose top The top of the image is aligned with top of the current line of text middle The middle of the image is aligned with the current... developed software for creating and viewing GIFs a license fee to use the technology While web designers and web surfers are not affected by this charge, the companies that make the software they use are The PNG format was designed for the same uses as GIF images, but while it was being created the designers decided to solve what they thought were some of the disadvantages with the GIF format The result... The hspace and vspace attributes can be used to control the amount of whitespace around an image hspace=”10” vspace=”14” The value is the amount in pixels of whitespace that should be left around the image, and is similar to a white border Before CSS, the hspace and vspace attributes were particularly helpful because text can flow around an image and, unless there is a gap between the text and the image,... between the text and the image, the text becomes hard to read and doesn’t look as professional Figure 3-9 illustrates this idea (ch03_eg03.html) Figure 3-9 These attributes have been deprecated, and you can achieve the same result by using the border or margin properties in CSS The ismap and usemap Attributes The ismap and usemap attributes are used with image maps Image maps are covered in the “Image Maps”... of the images when the pages first load and then add a link to the larger version These smaller images are often referred to as thumbnails, and you will usually see them in image galleries or on pages that contain summaries of information (such as the home pages of news sites and pages that list several products, from which you link to a page with more detail and larger images) When creating the smaller . used for images on the Web and learn how to prepare your images for use on the Web. You will also learn how to make an image a link, and even how to divide. of objects into pages, from MP3s and Flash movies to Active X controls and even images. Adding Images to Your Site Images and graphics can really bring

Ngày đăng: 21/01/2014, 16:20

Xem thêm