Creating Simple Pop-up Windows B efore you read onward, you should understand why pop-up blocking soft- ware is so popular. When used intrusively, pop-up windows aggravate your visitors’ experience of your Web site. Use them, if at all, to enhance the viewing experience, not to pummel viewers into submission. In this task you learn how to open a small window with a mouse click. 1. Within the body of your document, insert an anchor tag: <a> 2. Define an href attribute for the tag and set it equal to #: <a href=”#”> 3. Follow the attribute with an onClick event handler, as shown here: <a href=”#” onClick> 4. Set the event handler equal to window.open(), as shown here: <a href=”#” onClick=”window.open()”> 5. Inside the parentheses, enter the name of the document inside single quotes that you want displayed in the pop-up window. For example: <a href=”#” onClick=”window.open(‘dingo.html’)”> 6. Enter a comma and follow the name of the document with the name you want to assign the window object. For example: <a href=”#” onClick=”window.open(‘dingo.html’, ‘myWindow’)”> 7. Enter a comma and define the window properties you want to include within single quotes, separated by commas. For example: <a href=”#” onClick=”window.open(‘dingo.html’, ‘myWindow’, ‘width=300, height=200’)”> note • You need the hyperlink to create an element that the mouse interacts with. Instead of opening a docu- ment, you can enter a little JavaScript that creates a new window object. 236 Part 10 Task 109 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • If you don’t want to define one or more of these prop- erties, simply don’t include them in your code. Your choices are as follows: • width specifies the width of the window in pixels • height specifies the height of the window in pixels • location=yes includes the window’s address bar • toolbar=yes includes the window’s standard toolbar buttons • scrollbars=yes includes the window’s scrollbars 8. Follow the opening anchor tag with the image or text you want affected and complete the link with a closing anchor tag. Listing 109-1 shows such a link in a document. Figure 109-1 shows the results in a browser. <html> <head> <title>Pop-up Windows</title> </head> <body> <a href=”#” onClick=”window.open(‘dingo.html’, ‘myWindow’, ‘width=300, height=200’)”>Dingo? What Dingo?</a> </body> </html> Listing 109-1: Link code that opens a 300 × 200 window Figure 109-1: The pop-up window that appears after clicking on the link Simple JavaScript 237 Task 109 cross-reference • If you want your code editor to write JavaScript for you, see Task 215, which describes how to create a pop-up window in Macromedia Dreamweaver. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part 11: Adding Third-Party Elements Task 110: Adding a Free Google Search Bar Task 111: Adding a Free News Ticker Task 112: Adding a Web Poll Task 113: Becoming an Amazon.com Associate Task 114: Adding a Free Hit Counter Task 115: Adding Weather Data to Your Site Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Adding a Free Google Search Bar G oogle is the most widely used search engine on the Web. With just a little bit of code pasted into your site’s documents, you can add a Google search bar to your site free of charge. 1. Go to www.google.com. Beneath the main Google search field, click the Business Solutions link. 2. On the following page, scroll to the bottom and locate the Free Solutions category. Click the Free Search link. 3. At the “Google’s Free Web WebSearch and SiteSearch” heading, click the Sign Me Up for Free Search link directly beneath the heading. The next page to appear begins, “Step 1 of 4: Select a Search Option.” 4. On the Step 1 of 4 page, check the Free WebSearch radio button and then click the Continue button at the bottom of the page. 5. On the Step 2 of 4 page (see Figure 110-1), use the form to customize how the results page will appear. Enter color options, supply Google with the URL of your site’s logo, and preview the results. When you’re satisfied with your modification, or choose to leave the default settings as they are, click the Continue button to proceed. Figure 110-1: The form fields that customize how your Google search results page will appear note • Google’s SiteSearch option allows visitors to search your Web site specifically. To activate this functional- ity, your site must first be registered with Google. To add your URL to Google’s database, go to www .google.com/addurl.html. 240 Part 11 Task 110 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • Be careful about the color schemes you choose. You want your results page to be easily read by your site’s visitors. 6. On the Site 3 of 4 page, enter your first and last name, your e-mail address, a chosen password, a company name if you have one, and the URL of your Web site. Click the Continue button to move ahead. 7. The Step 4 of 4 page (see Figure 110-2) displays the source code required to place a Google Search bar onto your site. Select the code with your cursor and copy and paste it into your chosen HTML document. Figure 110-2: The source code Google provides for you to copy and paste into a document on your Web site Adding Third-Party Elements 241 Task 110 cross-reference • You’ll notice that the source code Google gives you is a small form. Forms are covered in Part 7. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Adding a Free News Ticker 7 am.com offers a free news ticker you can easily place on your Web pages. The ticker is a small Java applet that you add to pages by copying and pasting a few lines of code. 1. Go to www.7am.com/ticker/ to read about the features of the 7 a.m. ticker, shown in Figure 111-1. Figure 111-1: The 7 a.m. ticker information page 2. When you’re ready to add the free ticker to your page, click the Add the Free Ticker link (sixth link down the bulleted list when we wrote this book) to take you to the installation instructions. 3. Read the instructions thoroughly. Copy and paste the applet code from the first field into your Web page’s source code, shown in Figure 111-2. 4. Add any of the available parameters you want to include, as described in the All Users section. 5. Follow the instructions to add your own headlines and corresponding URLs to the ticker. 242 Part 11 Task 111 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • To copy, select the code and press Ctrl+C (Windows) or Command+C (Mac). To paste, click in your docu- ment and press Ctrl+V (Windows) or Command+V (Mac). Figure 111-2: Getting the code for the 7 a.m. news ticker: the first field contains the applet code; the rest of the page describes the available parameters for the applet 6. Test your document in a browser and make any modifications to the width and height attributes of the applet tag you see fit. Figure 111-3 shows the applet at work. Figure 111-3: The 7 a.m. news ticker in action Adding Third-Party Elements 243 Task 111 cross-references • To learn more about Java applets, see Task 38. • To add a poll to your site, see Task 112. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Adding a Web Poll F reepolls.com provides free, customizable, form-based polling for your site. With an account you set up on the Freepolls.com Web site, you can adminis- ter your poll from their site — changing poll questions and layout — and see your changes executed on your site. 1. Go to www.freepolls.com and click the Sign Up button to start the registration process. On the Step 1 page, choose a username and enter it into the field provided. Click the Next button to advance and choose your account type. 2. When your username is accepted, the next page displays all the dif- ferent account types that Freepolls offers. Choose the 100% Free account option at the bottom of the page by clicking its Sign Up button. Doing so takes you to the Account Info page. 3. In the fields provided on the Account Info page (see Figure 112-1), enter your vital statistics (name, e-mail address, preferred password, etc.). Choose any Special Deal information you want to receive, complete the Terms of Service section, and click Next. Figure 112-1: The Freepolls.com New Member Signup page 4. The next page of the Poll Wizard is another Deals page, which has one option prechecked. If you don’t want this stuff, deselect it and click Next to proceed. 5. Go to the middle of the next page where it says Create a New Poll and click the Create New Poll button. 6. On this page (see Figure 112-2), enter your poll question and possi- ble answers into the fields provided. Once you’re finished, click Next. cautions • If your username is already taken, try again. Click the Back button on the right side of the screen and enter a new username. • Make sure your chosen password is six or more characters long. 244 Part 11 Task 112 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. cross-reference • Want to become an Amazon.com Associate? See Task 113. Figure 112-2: Poll Wizard page where you formulate your poll question and answers 7. On the following page, enter your poll title, the URL of your page where the poll will appear, and the name of your site. Select the cate- gory that best fits your site. Click Next to proceed. 8. In the next two pages, choose a color scheme and then a layout. Click the Get HTML button to move to the last page in the Poll Wizard. 9. The last page provides different options for displaying your poll (see Figure 112-3). Choose the option that best suits your needs and then copy and paste the source code from the provided field into your document. Figure 112-3: The JavaScript option shown first seems to be the most eye-catching; it also has the most upfront advertising 10. Test your document in a browser. Adding Third-Party Elements 245 Task 112 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Downloading and Installing TextPad Task 117: Creating and Opening Files Task 118: Moving Around in Text Task 119: Selecting Code Task 120: Using the Clipboard Task 121: Managing Files Task 122: Using the Find and Replace Tools Task 123: Searching for Strings in Multiple Files Task 124: Finding Matching Brackets Task 125: Using the Spelling Checker Task 126: Working with the Document Selector Task 127:... the Document Selector Task 127: Creating Workspaces Task 128: Working with the Clip Library Task 129: Editing Clip Libraries Task 130: Downloading Clip Libraries Task 131: Configuring TextPad with Web Browsers Task 132: Configuring an HTML Validator Task 133: Creating Keystroke Macros Task 134: Creating a Tag-Wrapping Macro Task 135: Working with Color Syntax Checking Please purchase PDF Split-Merge... are any errors, or Submit if the information is correct Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Adding Third-Party Elements 247 Task 113 tips • • Figure 113-2: Entering your e-mail address and creating a password (Image © 2002 Amazon.com, Inc All Rights Reserved.) 6 The next page provides you with instructions for putting the Amazon com link and graphics in your page... overview information, click the Read Our Operating Agreement link at the bottom of the page and read that information as well Once you’ve read through the pertinent documentation, scroll to the top of the page and click the Join Now link A dialog box appears, informing you that you’re about to access a secure server Click Yes to continue and advance to the first part of the registration process 3 In the... insert an image containing a four-day forecast for your location, enter your City, State, or ZIP code in the fields provided at the bottom of Method 1 Click the Go button 3 On the following page, you see the current weather and four-day forecast for that locale To add this information to your Web page, click the link in the middle of the page that reads, “Click here to add this forecast to your web... purchase and register the program Part 12 Downloading and Installing TextPad T extPad from Helios Software Solutions is, in our opinion, the best Windowsbased text editor on the market It functions seamlessly in any modern Windows OS (95, 98, ME, NT, 2000, and XP), it loads quickly, and it’s designed in accordance with the Microsoft Windows Guidelines for Accessible Software Design What that means is... 255 Task 116 tip • As a coding tool, TextPad provides plenty of useful ways to work in HTML and other programming languages, including syntax checking and coloring, as well as clip libraries that store reusable pieces of code to save on typing Figure 116-2: The table of download options 5 A dialog box will ask you if you want to save the file or open it Choose Save to begin the download and specify... links that begin with Directory of All Stores, shown in Figure 113-1 Here you see the Join Associates link Click this one to begin The operating agreement gives explicit details about how the program works, what type of content options are available to you, and their payment details Figure 113-1: The Amazon.com Join Associates link (Image © 2002 Amazon.com, Inc All Rights Reserved.) 2 Having read through... Password for Associates Central, enter and confirm your password, and then click Submit 4 On the following page, read the instructions thoroughly and complete the form Click the Submit button at the bottom of the page when you’re done Depending on the payment option you chose on the previous page, the next page you see may request banking information The other options sends you gift certificates or checks... (current weather and four-day forecast) in your Web site Simply copy the HTML to your page where you want the images to appear Figure 115-1: The Method 1 source code page for adding weather information to your Web site 5 To order a free custom weather page, click the order link beside the sample under Method 2 Enter your e-mail address, Web site URL, city and state, and your name in the fields provided You’ll . the Find and Replace Tools Task 123: Searching for Strings in Multiple Files Task 124: Finding Matching Brackets Task 125: Using the Spelling Checker Task 126: Working with the Document Selector Task. onClick=”window.open(‘dingo .html , ‘myWindow’, ‘width=300, height=200’)”>Dingo? What Dingo?</a> </body> < /html& gt; Listing 109 -1: Link code that opens a 300 × 200 window Figure 109 -1:. Downloading and Installing TextPad Task 117: Creating and Opening Files Task 118: Moving Around in Text Task 119: Selecting Code Task 120: Using the Clipboard Task 121: Managing Files Task 122: Using