Tự học HTML và CSS trong 1 giờ - part 52 pdf

ptg Quiz 1. What’s the basic function of a web server? 2. How can you obtain an Internet connection? 3. What are default index files, and what’s the advantage of using them in all directories? 4. What are some things that you should check immediately after you upload your web pages? 5. Name some of the ways that you can promote your website. 6. What’s a hit? 7. What are the advantages of using an all-in-one submission page to promote your site? Quiz Answers 1. A web server is a program that sits on a machine on the Internet (or an intranet). It determines where to find files on a website and keeps track of where those files are going. 2. You can obtain an Internet connection through school, work, or commercial Internet or web services, or you can set up your own web server. 3. The default index file is loaded when a URL ends with a directory name rather than a filename. Typical examples of default index files are index.html, index.htm, and default.htm. If you use default filenames, you can use a URL such as http://www.mysite.com/ rather than http://www.mysite.com/index.html to get to the home page in the directory. 4. Make sure that your browser can reach your web pages on the server, that you can access the files on your website, and that your links and images work as expected. After you’ve determined that everything appears the way you think it should, have your friends and family test your pages in other browsers. 5. Some ways you can promote your site include major web directories and search engines, listings on business cards and other promotional materials, and web rings. 6. A hit is a request for any file from your website. 7. An all-in-one submission page enables you to submit your URL to several different site promotion areas and web robots simultaneously. Some provide a small number of submissions for free and a larger number of submissions for an additional fee. 486 LESSON 16:Using JavaScript Libraries Download from www.wowebook.com ptg Exercises 1. Download jQuery and use the <script> tag to load it in a web page. 2. Use jQuery to disable all the links on a web page. 3. Use jQuery to cause a border to appear around all the links on a web page when the user mouses over them. Make sure to remove the borders when the user moves the pointer away from the link. 4. Try to add a link to a web page that uses AJAX to retrieve the local temperature from a weather site for your city. You’ll need to find the URL for a page with your city’s weather on it, and then create the correct selector to extract only the informa- tion you want from that page. After you find the weather page, view the source on it to figure out how to extract the information using a jQuery selector. Workshop 487 16 Download from www.wowebook.com ptg This page intentionally left blank Download from www.wowebook.com ptg LESSON 17 Working with Frames and Linked Windows In the early days of the Web, two significant limitations of web browsers were that they could only display one document in a browser window at a time and that sites couldn’t open more browser windows if needed. Frames enable you to divide the browser window into sections, each con- taining a different document, and linked windows enable you to create links that open pages in new browser windows. Used properly, these two techniques can make your website easier to navigate. Unfortunately, they can also be misused to make your site confusing, difficult to use, and annoying to your users. In this lesson, you’ll learn how to apply these techniques to make your site more usable. You’ll learn all about the following topics: n What frames are, how they can affect your layout, and who sup- ports them n How to work with linked windows n How to work with frames n How to create complex framesets n Inline frames Download from www.wowebook.com ptg What Are Frames? In this lesson, you’ll learn about the tags that you can use to create frames. There are two ways to use frames. The first is to divide the page into sections using a frameset and then to load documents into each of the frames, and the second is to embed a second docu- ment into an existing page using an inline frame. Inline frames are like images or Flash movies, they can be included anywhere within a page. Over time, inline frames have become more commonly used, and frames created using framesets have become less commonly used. HTML5 does not include support for frames created using framesets, leaving only inline frames. Browser support for framesets is still all but universal, but for new projects, you should probably avoid using framesets whenever possible. Frames give you an entirely different level of layout control than you’ve had so far in this book. For example, take a look at the example in Figure 17.1. 490 LESSON 17: Working with Frames and Linked Windows FIGURE 17.1 A sample web page with frames. On this screen, you see four frames displayed within one browser window. The left frame contains graphical navigation elements, the lower-right frame contains text naviga- tional links, the upper-right frame contains the page header, and the middle-right frame contains the main content of the site. This screenshot also illustrates one of the disadvan- tages of using frames. The frame that contains the actual page content actually uses a fairly small section of the browser window; the rest of the window is consumed by the other frames. When you separate your layout using frames, you can detract from the important content on your site. Download from www.wowebook.com ptg ▼ Because the information displayed on the page is separated into individual frames, the contents of a single frame can be updated without affecting the contents of any other frame. If you click one of the linked images in the left frame, for example, the contents of the large frame on the right are automatically updated to display the details about the subject you’ve selected. When this update occurs, the contents of the left frame and the bottom frame aren’t affected. Working with Linked Windows Before you learn how to use frames, you need to learn about the target attribute of the <a> tag. It enables you to direct a link to open a page in a different frame or window, and learning how to use it is necessary to build sites with frames that work. This attribute takes the following form: target=“window_name” Usually, when you click a hyperlink, the page to which you’re linking replaces the cur- rent page in the browser window. When you use the target attribute, you can open links in new windows, or in existing windows other than the one that the link is in. With frames, you can use the target attribute to display the linked page in a different frame. The target attribute tells the web browser to display the information pointed to by a hyperlink in a window called window_name. Basically, you can call the new window anything you want, except that you can’t use names that start with an underscore (_). These names are reserved for a set of special target values that you’ll learn about later in the “Magic target Names” section. When you use the target attribute inside an <a> tag, the browser first checks whether a window with the name window_name exists. If it does, the document pointed to by the hyperlink replaces the current contents of window_name. On the other hand, if no win- dow called window_name currently exists, a new browser window opens with that name assigned to it. Then the document pointed to by the hyperlink is loaded into the newly created window. Task: Exercise 17.1: Working with Windows Framesets rely on the target attribute to load pages into specific frames in a frameset. Each of the hyperlinks in the following exercise uses the target attribute to open a web page in a different browser window. The concepts you’ll learn here will help you under- stand later how targeted hyperlinks work in a frameset. Working with Linked Windows 491 17 , Download from www.wowebook.com ptg In this exercise, you create four separate HTML documents that use hyperlinks, includ- ing the target attribute. You use these hyperlinks to open two new windows called yellow_page and blue_page, as shown in Figure 17.2. The top window is the original web browser window (the red page), yellow_page is at the bottom left, and blue_page is at the bottom right. 492 LESSON 17: Working with Frames and Linked Windows , FIGURE 17.2 Using the target attribute indicates that links should open new windows. First, create the document to be displayed by the main web browser window, shown in Figure 17.3, by opening your text editor of choice and entering the following lines of code: Input ▼ <!DOCTYPE html> <html> <head> <title>Parent Window - Red</title> <style type=”text/css” media=”screen”> body { background-color: #ff9999; } </style> </head> <body> <h1>Parent Window - Red</h1> <p><a href=”yellow.html” target=”yellow_page”>Open</a> the Yellow Page in a new window.</p> , Download from www.wowebook.com ptg <p><a href=”blue.html” target=”blue_page”>Open</a> the Blue Page in a new window.</p> <p><a href=”green.html” target=”yellow_page”>Replace</a> the yellow page with the Green Page.</p> </body> </html> Working with Linked Windows 493 17 , Output . FIGURE 17.3 The parent window (the red page). This creates a light-red page that links to the other three pages. Save this HTML source as parent.html. Next, create a document called yellow.html (see Figure 17.4) by entering the following code: Input ▼ <!DOCTYPE html> <html> <head> <title>Yellow Page</title> <style type=”text/css” media=”screen”> body { background-color: #FFFF33; } </style> </head> <body> <h1>Yellow Page</h1> <p>This is the first target page. Its target is <b>yellow_page</b>.</p> </body> </html> , Download from www.wowebook.com ptg Output . FIGURE 17.4 yellow.html web browser window named yellow_page. 494 LESSON 17: Working with Frames and Linked Windows , After saving yellow.html, create another document called blue.html (see Figure 17.5) by entering the following code: Input ▼ <!DOCTYPE html> <html> <head> <title>Blue Page</title> <style type=”text/css” media=”screen”> body { background-color: #99ccff; } </style> </head> <body> <h1>Blue Page</h1> <p>This is the second target page. Its target is <b>blue_page</b>.</p> </body> </html> , Download from www.wowebook.com ptg Next, create a fourth document called green.html, which looks like the following: <!DOCTYPE html> <html> <head> <title>Green Page</title> <style type=”text/css” media=”screen”> body { background-color: #ccffcc; } </style> </head> <body> <h1>Green Page</h1> <p>This is the third target page. Its target is <b>yellow_page</b>. It should replace the yellow page in the browser.</p> </body> </html> To complete the exercise, load parent.html (the red page) into your web browser. Click the first hyperlink to open the yellow page in a second browser window. This happens because the first hyperlink contains the attribute target=“yellow_page”, as the follow- ing code from parent.html demonstrates: <p><a href=“yellow.html” target=“yellow_page”>Open</a> the Yellow Page in a new window.<br /> Working with Linked Windows 495 17 Output . FIGURE 17.5 blue.html displayed in the web browser window named blue_window. , , Download from www.wowebook.com . type=”text /css media=”screen”> body { background-color: #ff9999; } </style> </head> <body> <h1>Parent Window - Red</h1> <p><a href=”yellow .html target=”yellow_page”>Open</a>. this book. For example, take a look at the example in Figure 17 .1. 490 LESSON 17 : Working with Frames and Linked Windows FIGURE 17 .1 A sample web page with frames. On this screen, you see four. Page.</p> </body> < /html& gt; Working with Linked Windows 493 17 , Output . FIGURE 17 .3 The parent window (the red page). This creates a light-red page that links to the other three pages. Save this HTML source as