Microsoft Office Live
Back   Forward   Home   Print 
Microsoft Office Live Home > Web Site > Personalizing Web pages
Add HTML to your Web pages

Using the Web design tools in Microsoft Office Live Small Business, you can add Hypertext Markup Language (HTML) code to your Web pages. With the HTML module, you can customize your Web site by adding special effects, cascading style sheets (CSS), JavaScript, and links to affiliate or associate sites (those sites that your site links to) using their images, videos, and more. Code fragments are available on the Web from various sources, but you should be aware of the security risks involved in using code that is not from a trusted source.

This Help topic describes how to add HTML to a Web page that was designed using the Web design tools in Office Live Small Business. To create a Web page using only HTML, you must first activate, and then use, your own third-party design software. For more information, see Use your own design software to create your Web site. For helpful tips about how best to use HTML, see Best practices for using HTML in your Web site, later in this topic.

  Notes  

What do you want to do?

Add HTML to a Web page

To add content from an affiliate site, you must first obtain the HTML code from that Web site. To add HTML to your Web site:

  1. On the Office Live Small Business Home page, at the top, click Web Site. Page Manager appears.
  2. In Page Manager, next to the page to which you want to add the HTML code, click Edit.
  3. In Page Editor, place the pointer in the location on the page where you want to add the HTML code, click Module, and then click HTML.
  4. In the Add and edit HTML text box, type or paste your HTML code.
  5. Click OK to save your changes.

Top of Page Top of Page

Set the size of the HTML module

You can change the size of the HTML module to fit your content. The module does not resize proportionately.

  1. On the Office Live Small Business Home page, at the top, click Web Site. Page Manager appears.
  2. In Page Manager, next to the page on which the module appears, click Edit.
  3. In Page Editor, click inside the HTML module area. The resize controls appear as a small square at each corner and at the center of each side of the module.
  4. Position your pointer over a square until it becomes a two-headed arrow, and then drag the arrow until the size is what you want. Drag the corner boxes to resize two sides at once.

Top of Page Top of Page

Insert a link using the HTML module

You can set up a line of text or a picture to act as a link. For information about setting up a picture as a link, see the section Insert a picture using the HTML module, later in this topic.

  Notes  

  1. On the Office Live Small Business Home page, at the top, click Web Site. Page Manager appears.
  2. In Page Manager, next to the page in which you want to add the HTML code, click Edit.
  3. In Page Editor, place your pointer in the location on the page where you want to add the HTML code, click Module, and then click HTML.
  4. In the Add and edit HTML dialog box, click Hyperlink. In the Insert a link dialog box, select the type of link that you want to insert:
    • Web site   Link to any public Web site other than your own. "http://" is automatically added before the Web site address.
    • Page on my site   Link to any page on your Web site.
    • My documents   Link to any file that has been uploaded to your Document Gallery.
    • E-mail address   Link to an e-mail address. In the HTML coding, "Mailto:" is automatically added before the e-mail address.
  5. In the URL box, type the link address, following the format of the example below the text field.
  6. To open the page in a new window, select the Open link in a new window check box.
  7. Click Insert, and then click OK.

    8. For a link to another page on your Web site, your code should look similar to the following: 

    <a href="/portfolio.aspx">/portfolio.aspx</a>

    The link text is automatically added at the end of the HTML code as a second link reference.

  8. If you want to use different text, in the Add and edit HTML dialog box, replace the existing text. In the following example, "View my portfolio" appears as the link text on the Web page: 
    <a href="/portfolio.aspx">View my portfolio</a>
  9. Click OK.

Top of Page Top of Page

Insert a picture using the HTML module

If you want to adjust the size of a picture on your Web page, or have a picture act as a link to another Web page or Web site, you can insert the picture using the HTML module. For more information about using pictures on your Web site, see Add or remove an image,

  1. On the Office Live Small Business Home page, at the top, click Web Site. Page Manager appears.
  2. In Page Manager, next to the page in which you want to add the HTML code, click Edit.
  3. In Page Editor, place the pointer in the location on the page where you want to add the HTML code, click Module, and then click HTML.

    4. ShowTo insert an image

    1. In the Add and edit HTML dialog box, click Images, click an image to select it, and then click OK. The HTML module appears, with the image identified in HTML code.
    2. To specify the image size, type 
      width=x height=y
      before the 
      />
      where x and y are the size in pixels. If you change one setting, you must change the other proportionately; otherwise, the image will be distorted. The final code should look similar to the following: 

      <img src="/images/YourPicture.jpg" width=40 height=30/>

    3. Click OK.

    ShowTo insert an image link

    1. In the Add and edit HTML dialog box, click Images.
    2. In the Select an image dialog box, select the image that you want to use as your link, and then click OK.
    3. In the Add and edit HTML dialog box, select the image code, and then click Hyperlink.
    4. In the Insert a link dialog box, select the type of link that you want to insert, and then type the link address, using the format in the example below the text box.
    5. To open the page in a new window, select the Open link in a new window check box, and then click Insert.

      6. Your code will look similar to the following: 

      <a href="http://www.ExampleWebsite.com" target="_blank><img src="/Images/Image1.JPG" /></a>

    6. Click OK to save your changes.

Top of Page Top of Page

Insert a video using the HTML module

You can add a video to your Web site using the Video module. For more information, seeadd or remove a video. Alternately, you can use the HTML module to add videos.

ShowLink to a video from MSN Video

  1. On the MSN Video Web site, select the video that you want to add to your Web site.
  2. Below the video player, click video link, and then select and copy the link with image code.
  3. On the Office Live Small Business Home page, at the top, click Web Site. Page Manager appears.
  4. In Page Manager, next to the page to which you want to add the video, click Edit.
  5. In Page Editor, place the pointer in the location on the page where you want to add the video, click Module, and then click HTML.
  6. In the Add and edit HTML text box, paste the HTML code for the video link.
  7. Click OK to save your changes.

ShowInsert a YouTube video

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

  1. On the YouTube Web site, select the video that you want to add to your Web site.
  2. To the right of the video player, select and copy the embed code.
  3. On the Office Live Small Business Home page, at the top, click Web Site. Page Manager appears.
  4. In Page Manager, next to the page to which you want to add the video, click Edit.
  5. In Page Editor, place the pointer in the location on the page where you want to add the video, click Module, and then click HTML.
  6. In the text box, paste the HTML code for the video link.
  7. Click OK to save your changes.

ShowDelete a YouTube video

  1. On the Office Live Small Business Home page, at the top, click Web Site. Page Manager appears.
  2. In Page Manager, next to the page to which you want to add the video, click Edit.
  3. Position your pointer at the far right-hand margin of the area containing the video, until the pointer becomes a four-headed arrow. Right-click, and then click Delete. Click OK.

ShowInsert a Silverlight Video

To add a Silverlight video to your Web site, see Add a video to your Web site using Silverlight.

Top of Page Top of Page

Edit an HTML module on a Web page

  1. On the Office Live Small Business Home page, at the top, click Web Site. Page Manager appears.
  2. In Page Manager, next to the page in which the module appears, click Edit.
  3. In Page Editor, right-click in the module where you want to make changes, and then click Properties.
  4. In the Add and edit HTML text box, make the changes that you want to the HTML code.

    If you want to change a link to open in a new browser window, you can do so by adding the following to the end of the HTML code:

    target="_blank"
    Your code for a text link will look similar to the following: 
    <a href="http://www.ExampleWebsite.com" target="_blank">View another artist's Web site.</a>

    Your code for an image link should look similar to the following: 

    <a href="/portfolio.aspx" target="_blank"><img src="/images/PortfolioPiece.JPG"/></a>

  5. Click OK to save your changes.

Top of Page Top of Page

Delete an HTML module from a Web page

  1. On the Office Live Small Business Home page, at the top, click Web Site. Page Manager appears.
  2. In Page Manager, next to the page in which the module appears, click Edit.
  3. In Page Editor, right-click in the module that you want to delete, and then click Delete. Click OK.

Top of Page Top of Page

Best practices for using HTML in your Web site

The following tips can help you use the HTML module successfully:

Top of Page Top of Page

See Also