HTML in 10 Steps or Less- P14 potx

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 T

Trang 1

Creating Simple Pop-up Windows

Before 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 hrefattribute for the tag and set it equal to #:

3. Follow the attribute with an onClickevent handler, as shown here:

4. Set the event handler equal to window.open(), as shown here:

5. Inside the parentheses, enter the name of the document inside single quotes that you want displayed in the pop-up window For example:

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.

Trang 2

• 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:

• widthspecifies the width of the window in pixels

• heightspecifies the height of the window in pixels

• location=yesincludes the window’s address bar

• toolbar=yesincludes 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

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.

Trang 4

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

Trang 5

Adding a Free Google Search Bar

Google 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.

Trang 6

• 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

cross-reference

• You’ll notice that the source code Google gives you is

a small form Forms are covered in Part 7.

Trang 7

Adding a Free News Ticker

7am.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

Trang 8

• 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

cross-references

• To learn more about Java applets, see Task 38.

• To add a poll to your site, see Task 112.

Trang 9

Adding a Web Poll

Freepolls.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.

Trang 10

• 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

Trang 11

Becoming an Amazon.com Associate

To become an Amazon.com associate, place a properly configured link to Amazon.com on your Web site When your site’s visitors click through to Amazon.com from your site, you earn up to 15 percent in referral fees

1. Go to www.amazon.com and scroll all the way down to the text 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

2. Having read through the 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 docu-mentation, 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 fields displayed on the next page (see Figure 113-2), enter your e-mail address, check Create a New Password for Associates Central, enter and confirm your password, and then click Submit

4. On the following page, read the instructions thoroughly and com-plete 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 infor-mation The other options sends you gift certificates or checks

5. You’ll be shown your account summary Choose the Edit button if there are any errors, or Submit if the information is correct

notes

• The first page you see

pro-vides an overview of the

Associates program Read

it in detail to make sure

this is something you’re

interested in pursuing.

• The operating agreement

gives explicit details about

how the program works,

what type of content

options are available to

you, and their payment

details.

Trang 12

• If you ever bought some-thing at Amazon.com before, you already gave them your e-mail address and created a password You don’t have to create a separate Associates account.

• The easiest way to copy a graphic from a Web page

is to right-click (Windows)

or Command-click (Mac) and then choose Save Picture As (Internet Explorer) or Save Image

As (Netscape) from the context menu.

6. The next page provides you with instructions for putting the Amazon

com link and graphics in your page Click the Build-It button below the Amazon.com graphic of your choice You’ll be asked to log in to Associates Central, at which point you are presented with the neces-sary HTML code, already embedded with your Associates ID

7. On the next page (see Figure 113-3), copy the source code from the

top field in the document Copy the graphic to your computer for uploading to your Web site Depending on where you place the graphics within your site, you may need to edit the <img>tag code that Amazon.com supplies

cross-reference

• To learn about the <img>

tag, see Task 29.

Trang 13

Adding a Free Hit Counter

Free-Hit-Counters.com gives you a free hit counter, and they get an opportu-nity to advertise their product on your site Their hope is that you’ll drive traffic to their site and those folks (or you) will sign up for the upgrades, which does cost something

1. Go to www.free-hit-counters.com and click their Sign Up link In the first page (see Figure 114-1), enter your name, e-mail address, site URL, etc in the fields provided Click the Join button

Figure 114-1: The Free-Hit-Counters.com initial sign-up page

2. Select an image from the list of choices (see Figure 114-2) and click the Choose button

3. Select the code on the following page (see Figure 114-3) and copy and paste it into the body of your document where you want it to appear

caution

• The Free-Hit-Counters.com

code is written in JavaScript

and needs to be placed in

the body section of your

document.

Trang 14

• To learn more about simple JavaScript usage, see Part 8.

• Want to add weather infor-mation to your site? See Task 115.

Figure 114-2: Image options available for your counter

4. Click the Finish button

Figure 114-3: Copying the hit counter’s JavaScript code from the field provided

Trang 15

Adding Weather Data to Your Site

If you want to provide your site’s visitors with a local four-day forecast, or the ability to search for that information, TimeTemperature.com has the solution for you

1. Go to www.timetemperature.com and click the link at the top of the page that adds a free weather chart on your site The first page shows you the three options available to you: a free weather image, a free custom weather page, and a weather search box

2. To 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 site!”

4. The next page (see Figure 115-1) offers you the source code required

to place both images (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 be sent the

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