FreeOfficeTutorials.com logo

Microsoft Word 2E: Frames, Hyperlinks, Images, Bookmarks, HTML

Overview

Frames

  • The web page use you are viewing now uses "frames":
    • The left frame (with section drop lists for Word, Excel, PowerPoint and Access) remain while the pages on the right side change

Hyperlinks :

  • Text hyperlinks are underlined text in a web page that when clicked on refer to another web page
  • Image hyperlinks are images that when clicked on refer to another web page (images can be Shapes, WordArt, drawings or photo images)
  • Bookmarks are simply hyperlinks that instead of linking to a seperate page, link to a particular location on the current web page (e.g. when clicked go to a section below or above on the same page)

Viewing and Modifying HTML Code:

  • All web pages consist of code written in HTML (Hyper Text Markup Language)
  • Creating sophisticated web pages requires understanding of the code as changes often have to be made directly to the code itself
  • Microsoft Word converts your documents into HTML code automatically
  • You can view the code of any web page on the Internet Explorer by clicking on View / Source or View / View Source
  • Try this in your browser now and view the code for this page that you are looking at (don't be overwhelmed by the complexity of the code...have a look then come back to this page)

Common HTML code:

The following are some of the basic html codes used ( the black text indicates where you type in the options: for example where it says insertcolor you could type in the color code)

To select a background color

    <body bgcolor=insertcolor>

     

    e.g. <body bgcolor=#660099>

To insert an image

<img width=20 height=40 src="insertfilename.gif">

e.g <img width=20 height=40 src="logo.gif">

Note only files of type gif, jpg (or less common png) can be inserted, directly into code the width of the image is 20 pixels and the height is 40 pixels. If yo delete the "width=20" and "height=40" the image reverts to its original size.

To insert an image without specifying height and width (the original size will be displayed)

<img src="insertfilename.gif">

To create a hyperlink

<a href="http://www.msn.com"> Click here </a>

Note the example above will go to the msn.com site when you click on the text, however you don't have to use Click here, you could use Click here to go to MSN.com (or any other text)

To create a bookmark hyperlink to top of document

Note the example below is a hyperlink that goes to the top of a page instead of the msn.com site (bookmark hyperlinks always start with a # as shown)

<a href="#_top">Click here to go to top </a>

To change font size

<font size +3>Text</font>

Note in the example above you can change the size to +4 etc.

To change font color

<font color InsertColor> Text </font>

To add bullets

 <li>Insert sentence here </li>

To center text, or an image etc

 <center>text, or image appears here </center>

 

Problems with Using Microsoft Word for Web Pages

  • While you can create some great looking webpages in Microsoft Word very easily they may not always display exactly as you think in all conditions, and thus most professional webpages are designed in other software programs
  • While all the information in Word is converted to HTML when you save it as a web page Word saves a lot more of its own Microsoft code which makes it messy to go in and find specific HTML

Learn More HTML

  • If you are interested in learning more about HTML, simply key in HTML tutorials in your browser, there are many great sites out there

stepbystep

This website is copyright protected see contact page for details.

stepbystep