Creating a Web Page - the fast and easy way

College of Engineering

Michigan Technological University

This document will help you create a simple web page.

The best web page software is Macromedic Dreamweaver.

You can also make a web page using MS Word and using 'save as' web page to your home directory as "index.htm" and you will have your first page, simple as that..

Or you can simpky use a ytext writer such Wordpad:

However, there are many resources and simple web editors out there, but all you need to get started are Wordpad (or Notepad) and a web browser. (Also, you can use Microsoft Word and use the 'save as web page' command in the left menu). After you make a basic page you can open and edit the html documents using Netscape Composer ('Edit Page'), Internet Explorer or MS Word ('save as web page'), or a more sophisticated program such as 'Macromedia Dreamweaver' or Adobe 'Go Live' etc.

To see how any web page appears in the html code, in the browser do "View / Source" or "View / Page Source". What you see are certain text in between "<" and ">" and that is the 'HTML' hypertext markup language. It is not difficult to master if you want to make pages in pure html code.

Basic Web Page using Wordpad

  1. Open Wordpad and create a folder called 'public_html' and then a file that you will 'save as...' called "index.html". This file should be 'saved as' or copied to your H: drive inot that 'public_html' folder on the network:

    http://www.doe.mtu.edu/~your own user name/
    such as: http://www.doe.mtu.edu/~ehgroth/home.html as an example.

    "index.html" is the default web page in a directory, so it doesn't need to be specified explicitly in the path.

    Open "My Computer" to find your H: drive. Open HTML files directly from there to edit them.
  2. Permissions: You may have to right click on the file name and select 'properties' to reset the permission or 'secuity' for the files in public_html folder. You will want to have the files only in that folder set so that 'everyone' can 'read' and 'execute' the files and all images.
  3. Copy and paste the following text into "index.html".

    <html>
    <head>
    <title>MTU College of Engineering| Your Home Page</title>
    </head>
    <body bgcolor="#66ff66">
    <h1>Your Home Page</h1>
    <img src="slide_1.jpg" alt="campus " align="left">
    <p>
    <b>Home Address:</b>
    MTU Street<br>
    Houghton
    </p>
    <br clear="all"><br>
    <p>
    <a href="myproject.html">My Project</a>
    </p>
    <p>
    <a href="http://www.tech.mtu.edu/">College of Engineering Home Page</a> |
    <a href="http://www.mtu.edu/">MTU Home Page</a>
    </p>
    <hr>
    </body>
    </html>

  4. Tigerholm Right-click on the Campus image and "Save Picture As..." or "Save Image As..." and save slide_1.jpg to your H: drive /public_html/ directory

  5. View your web page in a browser. Do "Refresh" or "Reload" to update the result each time you make a change to "index.html". Save your changes in "index.html" before reloading.

  6. "Index.html" has a link to a page myproject.html with text display "My Project". This file must be created and placed in the same directory as "index.html" for the link to work. That is called a relative link, and its path is case-sensitive.


    8. Add a word doc you already have: If you have MS Word document and want top put it on the web, using MS Word, 'save as a web page' and one will be made. Save it to your /public_html folder. Set the permissions as above for everyone to be able to see it. Top make a lnk to the newly added document, copy and paste the link text as above <a href="new_word_document_converted_to_web_page.html">My Report </a> Note that all file names must use the underscore "_" character in them, no spaces allowed !! Tables made in MS Word wilk convert also BUT only if they are genuinely inserted and formatted as tables with cells, rows and columns, (i.e. tables made by typing spacebars will not work at all).

  8. You may have reset the permissions for any file you add.

LINKS for making Web Pages
Colors: You can find amny colors to use in the background, page color <body bgcolor="#66ff66"> or even text colors below:

Color Sampler Link
Web Colors

Formatting and Code Information
Make a web site

Webmonkey HTML code

Netscape Toolchest