CO285: Introduction to Networks

Creating and Publishing an HTML Document: Your first Home Page

The purpose of this lab is to get a basic overview of HTML documents by creating and publishing a personal homepage. You will begin creating your own homepage using a simple text editor (Notepad) using basic tags, then upload it by FTP to a personal account for access via the internet. Once you've seen the background behind HTML, you can research and acquire any editor you'd like for creating and maintaining websites.

By first understanding the basics of HTML and what goes on behind the web page, you will be better equipped to:

Prior to performing this lab, you must complete some basic requirements. First, you need to have an account on a computer system with a web server, and permissions for the account to publish to the web. If you have no other way of doing so, I have a server that can publish pages for this purpose. The account should allow you to publish your pages by FTP in addition to any proprietary methods, like Microsoft FrontPage; after we've covered some of the basics using FTP, webs hosted on my server can be edited with FrontPage. Also, give yourself a brief overview of HTML documents by reading the HTML Primer   [http://www.zdnet.com/pcmag/issues/1411/pcm00104.htm] published by PC Magazine. Tables for Your Home Page [http://www.zdnet.com/pcmag/pctech/content/14/18/pp1418.001.html] is also recommended, but the features described will not be required additions for your page.

There is also an interactive site on the Internet that you can use to learn a lot about HTML:

Learn HTML now!
http://www.davesite.com/webstation/html

Required Tasks:

  1. Create a blank document in Notepad.
  2. Add the minimum tags for an HTML document:

    <HTML>

    <HEAD>
    </HEAD>

    <BODY>
    </BODY>

    </HTML>

  3. Customize your homepage and add some content:
    1. Add a title to the page using <TITLE>...</TITLE> tags in the <HEAD>...</HEAD> section.
    2. Add a headline to the page using <H1>...</H1> tags in the <BODY>...</BODY> section
    3. Add some text to the <BODY>...</BODY> section.
    4. Add a horizontal rule using the <HR> tag.
  4. Save your page to a local drive.
  5. Browse your homepage

    While you are developing your homepage, if you want to preview it to see what it looks like, run your web browser and use the File|Open command to open a locally saved file (your web page). As you make changes to your page, you'll need to

    1. Save the page in your editor.
    2. Refresh the view in the browser.
  6. Insert an image into the document using the <IMG SRC="URL"> tag.
  7. Obtain an image from the net and make a local copy for your website. Insert the image into your page.

    You can typically save an image you're viewing in a browser by the following:

    1. Right-click on the image.
    2. Select "Save this image as" in the pop-up menu. You can then save the image file to a local drive.

      3. The following web sites have many interesting pictures:

  8. Add links to other pages to your homepage using the <a href="URL">...</a> tag.
    1. Add a link to the CO285 information site (http://teach.millard.org/).
    2. Add a link to the Unofficial List of Student webs (http://www.cs.rockhurst.edu/rockhome.html).
    3. Add links to at least two additional URLs. These pages can be on your own web or any other.

    If you have a web page that is at the same directory as your home page, you can simply put the file name in the URL field of the tag. This is known as a relative reference.

    There are many interesting sites on the Web. The following lists a few (beware, sites change and the URLs on this list are not guaranteed to work:

    9.  

  9. Prepare your site.

    After you develop your homepage, you can publish it via our teach.millard.org web server. The following instructions are specifically for publishing to teach.millard.org, so if you're using a different server, you'll have to figure out the rules for yourself. To publish on teach.millard.org, you need to put your home web page (named default.htm) in the root directory. After placing the home page, you can create additional directories, etc. for any level of complexity for your site.

  10. Publish your homepage

    In order to publish your pages, you need to transfer them to the web server. One way to accomplish this is with FTP, which is almost universally accepted for any website. Start the program WS_FTP. This will let you copy files from your PC to your account on teach.millard.org. Make a connection using your login name and password. You then should see two windows, the left one showing files on your PC and the right one showing files in your personal spave. In the left window, select all the files you created (default.htm and any .GIF or .JPG files in that directory). Click on the right arrow to send the files to your site.

    Some sites may require further manipulation of the files you transfer to make them visible to the rest of the world. The teaching site automatically sets the permissions, but another host may not. Your service provider can give you additional assistance if this is the case.

    Using a proprietary Web publishing tool like Microsoft FrontPage on an enabled web server, or the specialized publishing options on some GUI editors can take all the drudgery out of publishing these pages, but this method is a fall-back that you should always be able to rely on if those tools fail you.

  11. The Universal Resource Locator (URL)

    If you're using the site I've provided, the URL of your page is http://teach.millard.org/username/, where the username is your login name. You can then give this URL to your friends so that they can check out your page. To browse your own web page, simply enter the URL in your browser.

Summary of tasks:

Electronic: Your web page must be published with the minimum additions to a publicly accessible website. Email the URL to the instructor.

Hardcopy: A printout of your home page source code.

Comments? Email jim3@millard.org Last updated November 02, 1999