Web Programming with HTML, XHTML, and CSS Second Edition- P3

Web Programming with HTML, XHTML, and CSS Second Edition- P3: Điều này bắt đầu hướng dẫn nhận xét HTML và cũng giới thiệu đến bạn bằng cách sử dụng XHTML cho cấu trúc của một trang web và cascading style sheets (CSS) để kiểm soát như thế nào một tài liệu sẽ xuất hiện trên một trang web. Bạn se tìm hiểu làm thế nào để tận dụng lợi thế của các tính năng mới của các trình duyệt trong khi đảm bảo rằng các trang của bạn vẫn làm việc ở cũ, nhưng phổ biến, các trình duyệt. Bằng...
Nội dung trích xuất từ tài liệu:
Web Programming with HTML, XHTML, and CSS Second Edition- P3 Chapter 2: Links and NavigationThe 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: Index 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: , , , and . Remember to give the document a title and add in the namespace identifier on the root element: A menu example 2. Inside the element, add the headings for the page. Each of these should have a destina- tion 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: Wrox Cafe Menu Starters Main Courses Desserts 71Chapter 2: Links and Navigation 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 element: Wrox Cafe Menu Starters | Main Courses | Desserts Welcome to the Wrox Cafe, where we pride ourselves on good, honest home cooked food at good, honest prices. Starters 4. At the bottom of the page, you will have a description of vegetarian dishes. Links next to vege- tarian items will point to this description, so it needs to have a destination anchor. Items marked with a (v) are suitable for vegetarians. 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. Starters Chestnut and Mushroom Goujons (v) Goat Cheese Salad (v) Honey Soy Chicken Kebabs Seafood Salad Back to top Main courses Spinach and Ricotta Roulade (v) Beef Tournados with Mustard and Dill Sauce Roast Chicken Salad Icelandic Cod with Parsley Sauce Mushroom Wellington (v) Back to top Desserts Lemon Sorbet (v) Chocolate Mud Pie (v) Pecan Pie (v) Selection of Fine Cheeses from Around the World Back to top 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 Figure 2-8How 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 a ...