CSE/IMT 100: Assignment 3

Constructing Your First Web Page

You will have time to begin working on the first part of this assignment in Tuesday’s lab. Please complete steps 1-6 by Wednesday, October 6. The remainder of the assignment, using Microsoft Word as an HTML editor, will be the topic of Thursday’s Lab and due by the following lab, October 12.

  1. Have you ever used Notepad before? It is a simple text editor that comes with Windows. To open it, click on the Start button, then go to Programs, Accessories, and click on the Notepad entry. You will be presented with a blank window and a flashing cursor in the top left corner.
  2. Type in the following code, exactly as shown:

    3. <HTML>

    <HEAD>

    <TITLE>My First Web page</TITLE>

    </HEAD>

    <BODY>

    <H1>Welcome to [your name here] Web site!</H1>

    <HR ALIGN="center" WIDTH="80%">

    <P>

    This is an HTML document that I hand-coded myself. I wrote the code in Notepad and transferred the document up to my Web directory using FTP.

    </P>

    <H2>Fun with Text</H2>

    <P>

    In this section I am using HTML to format text:<BR>

    <I>this is italics</I><BR>

    <B>this is bold</B><BR>

    <FONT COLOR="red">this is red</FONT>

    </P>

    <H2>Links</H2>

    <P>

    Here is a hypertext link from the phrase

    <A HREF = "http://www.cs.washington.edu/100/">CSE 100</A>

    to the course Web page for Fluency with Information Technology.

    </P>

    <H2>A Quote</H2>

    <P>

    This section of text is displayed in a fixed-width font:

    </P>

    <PRE>

    Hardware: The parts of a computer system

    that can be kicked.

    -- Jeff Pesis

    </PRE>

    <H2>A Basic List</H2>

    <P>

    This is a unordered list of my favorite colors:

    </P>

    <UL>

    <LI> green

    <LI> blue

    <LI> red

    </UL>

    <P>

    Thanks for visiting! You can write me at:

    <ADDRESS>Name (UWNetID@u.washington.edu)</ADDRESS>

    </P>

    </BODY>

    <HTML>
  3. Now save the file as a text document with the name index.htm (or index.html).
  4. Open up your preferred browser and open this page to see your code displayed as a Web page.
  5. If you are happy with the results, it’s time to move the document to your Web directory. However, before you can transfer your file, you must enable Web Publishing. Open up your Web browser and click up:

    6. http://www.washington.edu/computing/web/publishing/students.html

  6. Read and complete steps 1 through 4 (you have already done step 2 in Notepad).
  7. Microsoft Word, while not specifically an HTML editor, can facilitate the process of creating Web pages. The goal of this second component of the assignment is to learn how to re-create with a tool, such as MS Word, what you hand-coded in Notepad during the previous lab.
  8. Open up Word if you haven’t already done so and working from the display of your first Web page, try to duplicate the various elements. Don’t worry too much about being exact with elements like the section headers.
  9. When you are done, select "File" from the menu bar and "Save as HTML". Once the document has been saved, select "View" from the menu bar and "HTML Source". Does it look the same as the code you wrote? What’s different? Note a few of the differences.
  10. In lab your TA will go over a few special hyperlinks: specifically, the "mailto" link and the internal page hyperlink. Add one of each to your page.
  11. Now you are going to take this document and add your digital photo (find it here). To grab your photo:
    1. Right click on the image
    2. Select "copy"
    3. Bring your Web document up on the screen
    4. Select "Edit" from the menu bar and "Paste"
  12. Note: when you save your document in Word, the image name will automatically be saved and referenced. However, when you FTP your Web document over to your Dante account, be sure to transfer your image as well, or it won’t be displayed.
  13. Once you are happy with your new Web page, save it and prepare it for transferring to your Dante account. If you’d like you can make this file your new home page (by naming it index.htm), or you can link to it from your existing home page. Don’t forget to also transfer any images you’ve included. Email the URL to your TA.