Making Your Own Web Page

Creating Documents for the World Wide Web

You can create a web page (also known as HTML Authoring) several ways. The easiest is by using Microsoft's Word Web Templates. During lab 4, we already worked with the Microsoft Word. Word's Save AS HTML feature simplifies the process of creating Web documents by automatically converting Word formatting into HTML form

Web Page Templates and Copyrights

A Web page template is an HTML file that has been organized and formatted with a basic framework of content for you to modify to fit your needs. By modifying Web pages templates that are available for you to use, you can save a lot of time and create some very powerful Web pages. What is also nice about Word's Web Page Templates, is that users of Word have permission from Microsoft to modify and reuse the Web Page Templates. Copying someone else's Web page may be a copyright infringement. Many Web pages have a copyright statement near the bottom of the page. The safest way to protect yourself from copyright violation (this is a serious offense), is to get permission to use any copyrighted images or documents.

Creating a New Web Document

Note your RB355 labs do not have the web templates loaded. Please check your home PC for these great shortcuts! These are professionally put together, so I would give them a look. So if you have the web templates, proceed with the following else do the other set of instructions!
  • Launch Word.
  • Click File and then New. You must use the menu approach to access the templates
  • Click the Web Pages tab to access its list of templates.
  • Select the Web Page Wizard.wiz icon.
  • Click the Personal Home Page option, and then click the Next button.
  • Click Festive ( or another choice if this is not available)
  • Click the Finish button to end the selection process. A document home page template will appear. This template represents some text and placeholders for a heading and subtitle. You need only insert the text you want to complete the template. For our tutorial we will:

    • Loading the festive web template from the CS104 Virtual Homepage

  • Launch your favorite browser (Netscape or IE).
  • Go to the cs104 homepage. Click Lab Materials.
  • Under Lab 5, click on Word Web Template. You should see a page that says Insert Heading Here.
  • Click File->Save As. Change the filename to index.html and change the Save in: to your floppy or zip drive. You are saving this html file to your disk.
  • Close the browser.
  • Launch Word.
  • CLick File -> OPen and select index.html from your disk. You should see the html page again, but this time through Word!

    • Editing the page.

  • Click at the beginning of "Insert Heading Here"
  • Delete these words, and then type your first and last name
  • Click the Subheading placeholder
  • Delete the word and type My Home Page

    • Notice that the layout, font and font size are already selected for your use. Also that a few additional items, such as "Work Information" and "Personal Interests" appear beneath the "Contents" heading highlighted in a different color. This highlight indicates that these words are actually links (either bookmarks or hypertext links) to other places. Bookmarks jump to other places within the same web page, whereas hypertext links jump to a different web page. In this case, the Contents list are bookmarks that will lead visitors to your page to other areas of interest about you.

  • Click the "Biographical Information" bookmark Note that you "jumped" to a new place within your web page with a corresponding heading. You could enter new text that you would want people to know about you if they "visited" this place. Remember, what you put here can/may/will be seen by millions of visitors. It is not wise to put up things like phone numbers, etc. on your page.
  • Click the "Back to top" bookmark.
  • Proceed and edit the Biographical Information section.
  • A Web page can contain links to other places. Insert into the the biographical section: I am a student at Ball State University. Highlight Ball State University. Click the Link icon (the world with a paper clip)from the Composition Toolbar. A Insert Hyperlink window will display. At the top it will say Link Link to file or URL. Enter http://www.bsu.edu/ into to text box and Click on OK. The window will disappear and the text selected will be underlined and displayed in the "linked" color.
  • Save your file to your floppy or zip disk as index.html.

    • Viewing and testing a local HTML File in a browser (IE or Netscape).

  • Launch your favorite browser.
  • Click File on the menu bar and then point to Open Page. Click Open Page. Type either A:\index.html zip_drive_designation:\index.html in the text box and then point to Open button. Click the Open button. You should now see your page in the browser.
  • Scroll down to the BSU link, click on it to determine if the Ball State page comes up. If it does, great! If it doesn't, the next item will help you out. But proceed with these instructions. Click the Back button on the toolbar. Click File and Close to return to the window.
  • Even though index.html is a local file, when opened in the browser, it functions the same as if it were on the Web. If you had any problems with the links, go back to Word, highlight the linked text again, Click on Link icon and recheck your typing. Most likely you have a typing error. Correct the link and hit OK.

    • You have just created your second HTML document. However, right now only your lab partners who are sitting next to you can see how beautiful it is. To let others see it you must go through the pain of publishing your document. I will warn you that each site is different because they use a different server to hold the web documents and there are different web administrators for each site. Publishing will be left for another time, so back to creating.

    Adding an E-Mail Link

  • Go back to Word and open up index.html.
  • Click on link Personal Interests contained in index.html. This will take you close to the bottom of the page.
  • Right above Last Revised, press Enter and type To Contact Me Directly: your_email_address.
  • Select just the email portion
  • Click the Link button on the Composition toolbar, in the Link to page location or local file text box type mailto:your_email_address, then click OK.

    • Save the file again but don't close Word. Bring up you page into the browser again (directions above) and test out the email link. See if you receive a message.

    Creating another page

  • Go back to Word and create another new web page. File->New->Web Pages->Blank Web Page. (I believe in our labs the Web Page is just blank!)
  • At the Cursor enter the title, "My Spring Break Plans".
  • Save this file as spring.html. File->Save As, then enter the filename, spring in the File name textbox and click the Save As button. Save this file again on your zip or floppy disk.
  • At the top toolbar click on Window and toggle back to the file index.html.
  • Again click on link Personal Interests.
  • Replace the text, "Type some text", under Personal Interests with "Spring Break Plans".
  • Select this text. Click the Link button on the Composition toolbar, in the Link to page location or local text box browse to find your spring.html file, then click OK.
  • Now test this link. Bring up the index.html in the browser. If your browser was still up, do not forget to Reload. Click on the Spring Break Plans link and check if your empty Spring break plans file appears.

    To get your lab points, please print out a copy of just the index.html file. If time permits, you can do the homework assigned for this week. However, remember that to do the homework, you must have finished this assignment. The homework depends on it.