Answers to Web Slice Tutorial Exercises

Answers to Web Slice Tutorial Exercises New for Internet Explorer 8

This page contains suggested answers to exercise questions. As you complete the Web Slices Tutorials, check your work against the HTML and XML source code listings on this page.

Source Listing #1

Answer to LESSON 1: Adding Web Slices to a Web page.

To create Web Slices for the weather and auction elements, add the hslice class to the container element, and add containers of class entry-title around each part of the title text. For example, the weather slice uses three entry-title elements to combine "Las Vegas" and "70° F" and "Sunny" into one string.

<!-- Add Web Slice here... -->
<div id="weather" class="hslice">
    <h3><span class="entry-title">Las Vegas</span>, NV (89044) Weather</h3>
    <img src="images/sunny.png" id="image" alt="Sunny" height="128" width="128" />
    <div class="entry-title" style="font-size:2.5em;margin-top:24px;font-weight:bold;">70&deg; F</div>
    <p class="entry-title" style="font-weight:bold;font-size:1.5em">Sunny</p>
    <p><i>All fictional, of course!</i></p>
    <p>Current conditions as of 4:56 PM</p>
</div>

<!-- ...and here -->
<div id="auction" class="hslice">
    <h3>Ticket Auction</h3>
    <p class="title"><span class="entry-title">Developers, Developers, Developers</span>: The Musical</p>
    <img src="images/Theatre.jpg" alt="Theatre" id="theatre" height="130" width="130" />
    <p>Current Bid: <span style="font-size:26px;line-height:32px;font-weight:bold;">$60</span></p>
    <p>A Musical on a pre-Broadway release tour. Featuring the 
    up and coming actor/singer Foo Barret as the venerable Steve Ballmer. 
    Come catch the excitement!</p>
</div>

Source Listing #2

Answer to LESSON 2: Adding visible content to your Web Slice.

No Web Slice is really complete without an entry-content property. You can add this class to any existing container, or combine it with any other Web Slice property, such as hslice. Note how the schedule slice exports the table element for the Web Slice preview.

<div id="schedule" class="hslice">
    <h2 class="entry-title">My Conference Agenda</h2>
    <table class="entry-content" border="1" cellspacing="1" cellpadding="2">
        <!-- Table contents ... -->
    </table>

</div><!-- hslice -->

<!-- Add Web Slice here... -->
<div id="weather" class="hslice entry-content">
    <!-- Weather slice content ... -->
</div>

<!-- ...and here -->
<div id="auction" class="hslice entry-content">
    <!-- Auction slice content ... -->
</div>

Source Listing #3

Answer to LESSON 3: Setting an expiration time.

The auction slice can specify an expiration date and time by defining an endtime property anywhere within the hslice element. The endtime value is specified in the title attribute of an abbr element, leaving the possibility for text inside the element to offer a human-readable time representation.

<div id="auction" class="hslice entry-content">
    <!-- Auction slice content ... -->
    <abbr class="endtime" title="2008-04-29T17:50:00-08:00"></abbr>
</div>

Source Listing #4

Answer to LESSON 4: Setting a time-to-live (TTL) value.

To update the weather slice hourly, specify a time to live (TTL) value within a ttl property, using a span or the "abbr-design-pattern" seen above in Source Listing #3. In this example, the ttl property wraps text that is visible to the user.

<div id="weather" class="hslice">
    <div class="entry-content">
    <!-- Weather slice content ... -->
    <p style="font-size:xx-small">Updated every <span class="ttl">60</span> minutes.</p>
    </div>
</div>

Source Listing #5

Answer to LESSON 5: Getting Web Slice content from an RSS feed source.

An alternative update source can be specified anywhere within the hslice element. In this example, we choose to place it outside the entry-content. For the best user experience, we recommend hiding the anchor with display:none. See Subscribing to Content with Web Slices for more information about alternative update sources.

<div id="weather" class="hslice">
    <div class="entry-content">
    <!-- Weather slice content ... -->
    </div>
    <a rel="feedurl" href="https://localhost/webslice/weather.xml" style="display:none;"></a>
</div>

Source Listing #6

Answer to LESSON 6: Using a custom button to install a Web Slice.

A button that subscribes to a Web Slice can appear anywhere on the page. In this example, we put it inside the right-hand column of the Web page. For more information on this feature, see AddToFavoritesBar.

Here is the final state of the source code after completing all the exercises:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="Demo site for Internet Explorer 8" />
<title>My Fictitious Schedule - Web Slices HOL</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body class="main">

<div id="main">
    <div id="top"><!-- rounded corners --></div>
    <div id="mainContent">
        <div id="leftCol">
    
            <!-- Web Slice: Note class=hslice and class=entry-title -->
            <div id="schedule" class="hslice">
                <h2 class="entry-title">My Conference Agenda</h2>
                <table class="entry-content" border="1" cellspacing="1" cellpadding="2">
                    <tr>
                        <th>Date/Time</th>
                        <th>Location</th>
                        <th>Session</th>
                    </tr>
                    <tr class="odd">
                        <td>Today, 10 AM</td>
                        <td>Room 101</td>
                        <td>Dean's Keynote</td>
                    </tr>
                    <tr class="even">
                        <td>Today, 12 pm</td>
                        <td>Cafeteria</td>
                        <td>Lunch with Mary</td>
                    </tr>
                    <tr class="odd">
                        <td>Today, 2 PM</td>
                        <td>Room 303</td>
                        <td>Jane's talk on Activities and Web Slices</td>
                    </tr>
                    <tr class="even">
                        <td>Today, 6 PM</td>
                        <td>TBD</td>
                        <td>Dinner</td>
                    </tr>
                    <tr class="odd">
                        <td>Today, 10 PM</td>
                        <td>The Venetian</td>
                        <td>Microsoft Party</td>
                    </tr>
                    <tr class="even">
                        <td>Tomorrow, 8 AM</td>
                        <td>TBD</td>
                        <td>Breakfast</td>
                    </tr>
                    <tr class="odd">
                        <td>Tomorrow, 12 PM </td>
                        <td>Room 202</td>
                        <td>Marc's Talk on Developer Tools</td>
                    </tr>
                    <tr class="even">
                        <td>Tomorrow, 3 PM</td>
                        <td>Microsoft booth</td>
                        <td>Meeting with Billg</td>
                    </tr>
                </table>

            </div><!-- hslice -->
        </div><!-- leftCol -->

        <div id="rightCol">

            <h2>Las Vegas Happenings</h2>
            
            <!-- Add Web Slice here... -->
            <div id="weather" class="hslice">
                <div class="entry-content">
                <h3><span class="entry-title">Las Vegas</span>, NV (89044) Weather</h3>
                <img src="images/sunny.png" id="image" style="padding:5px;float:left;" alt="Sunny" height="128" width="128" />
                <div class="entry-title" style="font-size:2.5em;margin-top:24px;font-weight:bold;">70&deg; F</div>
                <p class="entry-title" style="font-weight:bold;font-size:1.5em">Sunny</p>
                <p><i>All fictional, of course!</i></p>
                <p>Current conditions as of 4:56 PM</p>
                <p style="font-size:xx-small">Updated every <span class="ttl">60</span> minutes.</p>
                </div>
                <a rel="feedurl" href="https://localhost/webslice/weather.xml"></a>
            </div>

            <!-- ...and here -->
            <div id="auction" class="hslice entry-content">
                <h3>Ticket Auction</h3>
                <p class="title"><span class="entry-title">Developers, Developers, Developers</span>: The Musical</p>
                <img src="images/Theatre.jpg" alt="Theatre" id="theatre" height="130" width="130" />
                <p>Current Bid: <span style="font-size:26px;line-height:32px;font-weight:bold;">$60</span></p>
                <p>A Musical on a pre-Broadway release tour. Featuring the 
                up and coming actor/singer Foo Barret as the venerable Steve Ballmer. 
                Come catch the excitement!</p>
                <abbr class="endtime" title="2008-04-29T17:50:00-08:00"></abbr>
            </div>
            
            <!-- Add button anywhere inside the right column container -->
            <input type="button" value="Add Ticket Auction Web Slice" class="addButton"
                    onclick='window.external.AddToFavoritesBar(
                            "https://localhost/webslice/webslice.html#auction",
                            "Developers, Developers, Developers", "slice");' />
        </div><!-- rightCol -->

    </div><!-- mainContent -->
    <div id="footer"><!-- rounded corners, clear floats --></div>
</div><!-- main -->

</body>
</html>