advertisement
Warning: You are viewing this page with an unsupported Web browser. This Web site works best with Microsoft Internet Explorer 6.0 or later, Firefox 1.5, or Netscape Navigator 8.0 or later. Learn more about supported browsers.
Email this linkEmail this link Printer-Friendly VersionPrinter-Friendly Version

Inserting HTML code into your Web site

Flex your creative muscles by adding HTML code to your Web pages with the HTML module. Given the ability to insert HTML code in your pages, you can inform, entertain, and get your visitors' attention in an engaging way. For example, you can insert the code to add a video, a scrolling marquee, or a stock ticker to your page. Inserting HTML code into your Web page can be as simple as copy and paste.

A word about your HTML code

If you change or customize the HTML code on your Web site, Microsoft Office Live does not check the code for you.

 Important   If the HTML code is no longer correct, it may break the page, and you may experience problems such as the page not loading completely.

To ensure that the HTML code renders correctly, you should access your Web site from the Internet and check that everything appears as expected. Also, do not use a third-party Web editing tool, such as Microsoft FrontPage, because pages created by these tools cannot be uploaded to Microsoft Office Live.

Respect copyright

Please respect the rights of artists and creators. Content such as music, photos, and video may be protected by copyright, and people appearing in content may have a right to control the use of their image. You may not share other people’s content unless you own the rights or have permission from the owner.

In this article:

Add HTML code to your Web page

This section explains how you can access the HTML module and provides sample HTML code snippets that you can copy, and then customize to meet your own particular needs.

ShowTo open the HTML module

  1. On the left navigation bar on your Microsoft Office Live Home page, click WebSite. The Page Manager page appears.
  2. In the list of Web pages, click Edit next to the page that you want to insert the HTML code in. The page opens in edit mode.
  3. Place the cursor in the zone where you want to insert the HTML code.
  4. On the taskbar, click Module, and then click HTML. The HTML module appears.
  5. Copy and paste the HTML code that you want into the text box.
  6. Customize the code to meet your particular needs. For example, if you are adding a video player, be sure to point the player to the URL where your video is hosted. Click OK when you are finished.

  Notes  

  • You can edit the HTML code at any time by right-clicking the module on the page and then clicking Properties.
  • You can add as many HTML modules to your site as you want to.
  • Certain items, such as background audio files that play when a visitor opens your Web page, are not currently available, because they are normally inserted into the header of a Web page, and the HTML module only edits the body of a Web page.

If you need room to add text that describes what your site visitor will see, such as "Tour our new offices" above a video that you made showing your office and employees, you can add space above and below the HTML code you are adding by pressing the SPACEBAR.

Add an embedded video player to your site

You can embed one of several different video players in your Web page. The following examples provide directions and HTML code to embed a Mydeo, YouTube, or Google video.

ShowTo embed a Mydeo video using Windows Media Player

If you have a Mydeo account, follow these instructions to embed the video on a Web page using Windows Media Player.

 Important   Be sure to read and follow the Mydeo terms of use.

  1. Log in to your Mydeo account, and then browse to the video that you want to embed.
  2. Next to the video, click the HTML icon, and then copy the code that appears in the first box in the Option 1- Embed the player section.
  3. In Microsoft Office Live, open the HTML module in the location on your Web site where you want the video to appear.
  4. Paste the code into the HTML module text box, and then click OK.

ShowTo embed a YouTube video player

If you have a YouTube account, follow these instructions to add a YouTube video player to your Web site.

 Important   Be sure to read and follow the YouTube terms of use.

  1. Write down the YouTube video ID number that you want to embed. For example, if you want to link to your video at http://www.youtube.com/?v=ABc12DEfGHi , the video ID number is "ABc12DEfGHi". If you do not know the video ID number, go to your YouTube account, browse to find your video, and then copy the number.
  2. In Microsoft Office Live, open the HTML module in the location on your Web site where you want it to appear.
  3. Copy the following HTML code, paste it into the HTML module text box, and then replace both instances of "ABc12DEfGHi" in the code with your video ID number.

    4. <object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/ABc12DEfGHi"></param> <embed src="http://www.youtube.com/v/ABc12DEfGHi" type="application/x-shockwave-flash" width="425" height="350"></embed> </object>

ShowTo embed a Google video player

If you have uploaded a video to Google Video, follow these instructions to add the Google video player to your Web site.

 Important   Be sure to read and follow the Google terms of service.

  1. Write down the Google Video ID number that you want to embed. For example, if you want to link to your video at http://video.google.com/videoplay?docid=1234567890123456789 , your video ID number is "1234567890123456789". If you do not know your video ID number, go to Google Video, browse to find your video, and then copy the number.
  2. In Microsoft Office Live, open the HTML module in the location on your Web site where you want it to appear.
  3. Copy the following HTML code, paste it into the HTML module text box, and then replace both instances of "1234567890123456789" in the code with your video ID number.

    4. <object type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?1234567890123456789" width="400" height="326" id="VideoPlayback"> <param name="movie" value="http://video.google.com/googleplayer.swf?docId=1234567890123456789" /> <param name="allowScriptAcess" value="sameDomain" /> <param name="quality" value="best" /> <param name="bgcolor" value="#FFFFFF" /> <param name="scale" value="noScale" /> <param name="salign" value="TL" /> <param name="FlashVars" value="playerMode=embedded" /> </object>

Add a slide show to your site

A slide show can be an effective way of bringing products to the attention of your customers. Use a slide show to emphasize new products, to highlight products on sale, or even to display products that your customers might not usually find. For information about using the Slide Show module in Microsoft Office Live to add a slide show to your Web site, see Increase visual interest with a slide show. Or, the following example provides HTML code to add a slide show using using Flickr.

ShowTo add a Flickr slide show

Do you already have a Flickr slide show? Great! If you know your user ID, you can add your Flickr slide show to your Microsoft Office Live Web site to personalize it even more. First, you need to create a Flickr Flash badge (do not use the HTML Flickr badge tool). From the Flickr Web site, copy the HTML code that is created for the badge and paste it into your Web site using the Microsoft Office Live HTML module.

 Important   Be sure to follow the Yahoo Terms of Service before you embed the Flickr Flash badge.

  1. Go to the Flickr badge Web site, log in, and follow the Flash instructions.
  2. In Microsoft Office Live, open the HTML module in the location on your Web site where you want it to appear.
  3. Paste the HTML code that you copied from the Flickr badge page into the HTML module text box, and then click OK.

The following is an example of what the Flickr Flash badge might look like.

Let site visitors open a new browser window from a link

By adding a link on your Web site that opens another browser window, you can point your site visitors to other Web content without having them leave your Web site.

ShowTo create a link that opens a new browser window

  1. In Microsoft Office Live, open the HTML module in the location on your Web site where you want it to appear.
  2. Copy and paste the following code into the HTML module text box:

    <A HREF="http://office.microsoft.com/en-us/default.aspx" target="_blank">Open a new browser window to Microsoft Office Live</a>

  3. Replace "http://office.microsoft.com/en-us/default.aspx" with the URL that you want the new browser window to open.
  4. Replace the "Open a new browser window to Microsoft Office Live" text with text that describes what will happen when your visitors click the link.
  5. Click OK.

Add maps and directions to your site

Want to make it easy for customers to find your business? Add a map or driving directions to your business or other location on your Web site using the Map & Directions module.

ShowTo add maps and directions

  1. On the left navigation bar on your Microsoft Office Live Home page, click WebSite. The Page Manager page appears.
  2. In the list of Web pages, click Edit next to the page where you want to add the map or driving directions. The page opens in edit mode.
  3. Place the cursor in the zone where you want to add the map or driving directions.
  4. On the taskbar, click Module, and then click Map & directions. The Map & Directions module appears.
  5. On the Location tab, enter your location information.
  6. On the Display Options tab, specify whether you want to display a map, give driving directions, or show an address on your Web site, and then click OK.

The following is an example of what a Map & Directions module might look like.

Sample Microsoft Office Live Map and Directions module

Add a hit counter to your Web page

Hit counters keep a running total of the number of times that your page is viewed. They don't distinguish between the number of times that you look at your page and when a customer looks at your page. However, they do give a visual clue about which pages are most used on your Web site.

ShowTo add a hit counter

  1. In Microsoft Office Live, open the HTML module in the location on your Web site where you want it to appear.
  2. Copy and paste the following HTML code into the HTML module text box, and then click OK.

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" type="application/x-shockwave-flash" width="130px" height="58px" id="InsertWidget_1ed9bc0b-8672-4af3-82ea-c74d7ff9afed" align="middle"> <param name="movie" value="http://widgetserver.com/syndication/flash/wrapper/InsertWidget24.swf?appId=1ed9bc0b-8672-4af3-82ea-c74d7ff9afed"/> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="menu" value="false" /> <param name="allowScriptAccess" value="sameDomain" /> <embed src="http://widgetserver.com/syndication/flash/wrapper/InsertWidget24.swf?appId=1ed9bc0b-8672-4af3-82ea-c74d7ff9afed" name="InsertWidget_1ed9bc0b-8672-4af3-82ea-c74d7ff9afed" width="130px" height="58px" quality="high" menu="false" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" align="middle" allowScriptAccess="sameDomain" /> </object> <img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://runtime.widgetbox.com/syndication/track/1ed9bc0b-8672-4af3-82ea-c74d7ff9afed.gif" />

The following is an example of what a counter might look like.

Sample hit counter

Add a scrolling marquee to your Web page

Use scrolling marquees to highlight new products, post breaking news about an award that your company received, or let customers know that a special offer is about to end. But keep your text short and succinct, and make it scroll slowly enough so that customers can read it. You can change the controls for your marquee, such as how quickly the text scrolls, to suit your customers' needs.

ShowTo add a scrolling marquee

  1. In Microsoft Office Live, open the HTML module in the location on your Web site where you want it to appear.
  2. Copy and paste the following HTML code into the HTML module text box, and then click OK.

    <marquee height=50 width="30%" scrollamount=3 scrolldelay=1 direction=right >testing 1 2 3 testing</marquee>

  3. Replace “testing 1 2 3” with the text that you want to display in the marquee, and then click OK.

The following is an example of what a scrolling marquee might look like.

Sample scrolliing marquee
Printer-Friendly VersionPrinter-Friendly Version
 
Accessibility | Partners | Contact Us | Office Live Worldwide | Help
© 2009 Microsoft Corporation. All rights reserved. Legal | Trademarks | Privacy		Microsoft