WebPage in Word

Making a Web Page in Microsoft Word

Getting Started	Inserting a Target within the same page
Saving Your Document	Inserting an E-mail Link
Formatting a Background or Themes	Inserting A Horizontal Line
Saving Pictures	Inserting Bullets and Numbers
Inserting Pictures	Indentions
Create Even Columns and Align Graphics in Tables	Proper Disclamer
Shade Cells in Tables	Navigation
Inserting Hyperlinks	What's a Page?

Getting Started

1. In MSWord, Select File, New and Select Web Page under the General Tab. Click on OK.

2. Type up your document/home page as you normally would, using whatever font, size and color you wish. Check

under theView menu that you are in Web Layout.

Saving your document

1. Create a folder on your harddrive in which all your web pages will be saved.
2. Choose Save As Web Page or Save and be sure the file type is Web page. Your home page should be saved as
    index.htm. When you save your page, click the Change Title button to give your home page a Title. This is the title that
    appears when someone bookmarks prints your home page..    If you make other pages for your web site, be sure there are
    NO spaces in the file name.
    Examples: CORRECT: myhomepage.htm(l) OR my_home_page.htm(l)
                     INCORRECT: my home page.htm(l)

Formatting a Background

1. If you want to add a background click on Format and select Background. You can choose a solid color.

2. Clicking on More Colors… will bring up a rainbow from which to choose. You can select Standard Colors or you Click

on Custom to select gradients within in a specific color.

3. If you click on a Fill Effect, you get the following options: Gradient, Texture, Pattern, or Picture.

4. If you select Gradient, you can then chooset the number of colors, shading style, etc., for your background.

5. If you select Texture, yoy can select various colors and textures for your background.

6. If you select Pattern, you can select a pattern and thn choose the foreground and background colors.

7. If you select Picture, you can insert pictures or icons for your background. These can be pictures you've scanned or
      pictures you have saved from the Internet. There are many "Free" Background and Clipart websites on the net. You can
      use a search engine to find these free sites. If you find a background you want, you can save it to your folder with your
      web documents and select it for your background. It's very similar to putting in a background on a slide in PowerPoint.

8. Click on the Picture Tab and then click on Select Picture.

9. Now you can select the folder where your pictures/icons are located on your harddrive. Select the picture you want to use and then click on Insert.

Or . . . You Can Choose a Theme:

To pick an already created theme in Microsoft Office, (background, bullets, colors etc.), go to Format and select Theme. The theme used in this tutorial is Citrus Punch.

Saving a Picture: Find a graphic (free to use) on the web you want to use , right-click on it and choose Save Picture As then place it into the folder on your harddrive where you have saved your web pages.

Inserting Pictures:

1. You insert pictures in your html document the same way as with Word. Click on Insert and choose Picture.The
graphics however, you must select how you want your graphics to be placed on the page. Align left, right or
centered.

2. If you want the pictures next to text, a table must be used. ( See tables below. ) Notice these "Big AL" graphics are
animated—they insert the same way. Be sure the graphics you use are yours or free. Some graphic sites ask that you
give them credit on your page.

Two in a row, Left Aligned

Centered

Right Aligned

3. Insert the picture by Selecting Insert, Picture and theh From File. Browse to the folder where you saved your picture and
      other web files. Select the picture you want and click Insert. You can resize the picture if you wish. Remember . . . the
      picture will insert wherever your cursor is at the time. You may also insert pictures from clipart if your computer has a
      gallery. You may also insert pictures you’ve taken with a digital camera or scanned as long as they are .gif or jpg types of
      files.

Create even columns and align graphics:

      Avoid using the tab key to set up columns. Instead, insert a table. Click Table and choose Inser and then Table.Choose
      the number of columns and at least one row. Tab from cell to cell when entering text and the tab key will also add a new
      row if you wish to continue. In the table below, Borders has been selected.


Heading	Heading	Heading	Heading
Border lines are	showing here.	Text	Text

In the Table below the "Border" has not been de-selected .

Heading Heading Heading
Heading

Border lines are

removed here.
Text Text

Below are several examples of how you can use graphics and text with tables.

You can type an entire paragraph in a cell and add a picture to the left to illustrate your point.

You can align within a cell, whether text or graphics. You can merge cells together to become one or split cells to become two again.

This example show the lines, the one below has the lines removed.

Here’s a totally different look for a simple table.

Notice that you can shade cells as well or change the width.

This can make your page colorful or call attention to a group of items.

	You can type an entire paragraph in a cell and add a picture to the left to illustrate your point.
You can align within a cell, whether text or graphics. You can merge cells together to become one or split cells to become two again.

	This example show the lines, the one below has the lines removed.

Here’s a totally different look for a simple table.	Notice that you can shade cells as well or change the width.	This can make your page colorful or call attention to a group of items.

To Shade Cells
1. Right Click on your table and click on Table properties.
2. Click on the Boarders and Shading Tab.

3. You can now select the color, shading, or border you want. Under Apply to: you can select whether you want the color
you chose for an entire Table or just the selected cell.

Inserting hyperlinks:

1. If you want your reader to link to another page from yours, select the text you want to be the link and then go to Insert and

select Hyperlink.

2. Either choose from the recent urls listed, copy and paste the url from a page you’re currently at in IE or Netscape or type in

the actual including the http://. Then simply click OK.

Inserting a target/anchor within the same page:
    Inserting a target will allow the user to link to other information within the same page. This tutorial is using targets with the
    same page. When you click on a topic at the beginning of the tutorial, it takes you to the information which is included in this
    page/file. Note: Targets are also called anchors.

1.Put the cursor at the beginning of a line where you want to create a target, or select some text at the beginning of a line.
2.Open the Insert menu and choose Target.
3.Type a name for the target in the edit box (up to 30 characters). If you selected some text in step 1, this box already
contains a name.
4.Click OK. A Target icon (visible only in the Composer window) appears in your document to mark the target's location.
5.Put the cursor on the text or image that you want to link to the target.
6.Open the Insert menu and choose Link.
7.Open the File menu and choose Browse Page; then click the link you just created.

Inserting a link for e-mail:

1. If you want to add your e-mail as a link, type for example, your name as the link word(s). Highlight your name (selected text)

by putting your cursor right before your name begins and holding down the left mouse button and highlighting the text.

2. Now, select Insert and Hyperlink. Click on the E-mail Address button in the bottom left corner of the dialogue box.

3. Then simply supply the full e-mail address (username@bama.ua.edu). Notice that Word automatically adds the mailto:

statement so that your email will become an active link. You can type in the subject if desired, but that field is typically left

blank.

4. Click OK and you’re done.

Inserting a horizontal line:

1.If you want a horizontal division line, put your cursor in the proper place and go to Format and select Borders and Shading.

2. Choose the Borders tab and select the line style, click horizontal line, and then OK.

3. You can then select the line you want, and select the insert icon.

Once the line is inserted in your hone page, Right-Click, go to Format Horizontal Line to change the length, color, thickness etc. of the line.

See the examples below.

**You can also find clipart lines on the web that might be more colorful or decorative. You would insert those as you would a picture.**

Using numbers and bullets:

You might want to use the number and bullet tools on your Formatting Toolbar to show lists on your page.You can even format them to look more decorative.Remember that if you’ve chosen a theme, your bullet has been already selected to be blend with the theme, but you can certainly change it if you wish.

Item 1

Item 2

Item 3

Item 1
Item 2
Item 3

Indentions:

If you want to chang/ or add an indention(S) due to a background or other reason, simply use the Decrease and Increase Indent tools on the Formatting Toolbar.

Proper identification:

At the end of your page, give the date it was last updated, any disclamer(s). Review the UA's World Wide Web Policies ) especially Section 3.0, which states that "All Unofficial University Web Sites must carry the following disclaimer or similar: "The views, opinions, and conclusions expressed in this page are those of the author or organization and not necessarily those of The University of Alabama or its officers and trustees. The content of this page has not been reviewed or approved by the University of Alabama, and the author or organization is solely responsible for its content."

Navigation:
You need to have either Navigation buttons, icons, or text in your web pages. These Navication tools need to be on every
page.
These Navigation tools help the visitor as to where they are, what page of the site they are on and how to get back to the
main page. Notice in this tutorial, there is the " Back to Top" page navigation text.

Below is an example of using Navigation icons for a course. The Calendar icon is for the class calendar of due dates, the open book icon is for the course syllabus, and the Books icon is for the course reader for the entire course.

These icons are placed on the right hand side of every page. Notice that they do not have a description. The description was given on the first home page. These Navigation tools aid the user to navigate around the site. See the example below:

What is a Page?
A web page is typically one (1) .htm(l) file. This tutorial is one web page. It's ONE file. Everything in this tutorial is
located in ONE .html file called index.htm.

If, you are asked to develop five (5) web pages, you will develop five (5) separate .htm(l) files. Click on the link Festival to
see an example of what 5 pages would look like.