How to Embed the Weather Forecast in Your Website

By David Karlins and Doug Sahlin from Building Websites All-in-One For Dummies, 3rd Edition

The Weather Underground site provides an embeddable weather forecast sticker (a small box that displays the weather for a selected area) you can embed in your page. The technology is super-simple. You get the HTML code to embed an image that Weather Underground updates periodically with your ZIP code’s weather forecast.

This example is almost too simple, but it’s very useful and provides a good experience with the most basic form of embedded live content — an embedded image that someone else updates.

Here’s how you place that sticker on your site:

Go to the Weather Underground site.

Enter your ZIP code in the search box.

Enlarge

Click the Get Free Weather Stickers link.

Choose one of the three versions of the sticker.

Copy the generated HTML and paste it into your web page.

There are three versions of the weather sticker, the only difference being the design.

Enlarge

Add, edit, and fine-tune your own HTML and CSS so that the weather sticker “fits in” to your page seamlessly.

The weather sticker is embedded in a page with associated content. And, of course, the weather info itself will be updated by the folks at Weather Underground.