Learning Criteria
Time to Complete 21 min.
Audience Level CIT 100 Level
Technology Requirements Basic
Self-Assessment None
Prerequisites LM: IA
Explanations of Learning Criteria

Publish a Web Page on uoregon.edu in 21 Minutes or Less

This learning module describes how to create a simple web page and install it on the University's web server, uoregon.edu.

The examples shown here show a site folder named 111. If you are in a different class, just substitute 110 or 281, etc. Although the name of the folder will change, the main ideas do not.
  1. Getting Ready: Install the necessary software on your computer.

    For the Mac, open Setup your Mac and install the following applications:

    1. Install a text editor: Fraise (Snow Leopard, 10.6 and above) or Smultron (10.5, 10.4).
    2. Install a file transfer program: CyberDuck.
    3. Or: install only Aptana Studio, which includes both an editor and an SFTP client.

    For Windows, open Setup your Windows PC and install the following applications:

    1. Install a text editor: TextPad.
    2. Install a file transfer program: CyberDuck for Windows (or SSH client for Windows).
    3. Or: install only Aptana Studio, which includes both an editor and an SFTP client.

  2. Getting Ready: Review the concepts of Information Architecture.

    Learning Module: IA.

  3. Getting Started: Create a Site Folder on the Local Host.

    On the computer you are using for this exercise, create a folder named 111.

    Create subfolders in 111 named p1, p2, examples, css and images. (Do change the spelling in any way-- use all lower case and no spaces or special characters.)

  4. Create a Hello, World! web page on your computer.

    On the computer you are using start a text editor.

    Create a file named hello.html. Use the editor's File Save As.. command to save the file in your /111/examples/ folder.

    Enter this single line of text: <h2> Hello, World!</h2>

  5. Preview hello.html in a web browser.

    A) If your text editor has a Preview in Web Browser feature, use it to view hello.html.

    B) If your text editor does not have a preview feature: Start Firefox, and use the File Open File.. command to open /111/examples/hello.html.

    Although hello.html is not a complete html document, your web browser will display Hello, World! as an H2 header.

  6. Start an SSH/SFTP client, and connect to uoregon.edu using your DuckID.

    Mac and Windows: use CyberDuck.

    When your first connect to uoregon.edu, the default directory (Unix's name for a folder) is your home directory.

  7. On the server, create a subdirectory named public_html, if it does not already exist. If a public_html folder already exists in your home directory, go to step 6.

    Do change the spelling in any way-- use all lower case, an underscore (_) and no spaces or special characters.

    Q: What is the directory "public_html" for?
    A: All files and folders for a website must go inside public_html to be accessible on the Web.

  8. On the server, create your site folder in public_html.

    Using your SFTP client, create a subfolder folder named 111 in your public_html folder.

    Open 111, and create subfolders named p1, p2, examples, css and images.

    Do change the spelling in any way-- use all lower case and no spaces or special characters.

  9. Upload /111/examples/hello.html from your computer to uoregon.edu & Open it in Firefox.

    Using your SSH client, upload hello.html to the /111/examples/ folder on the server.

  10. View your published web page in Firefox.

    Enter this URL into the location bar, substituting your actual username for yourDuckID:

         http://www.uoregon.edu/~yourDuckID/111/examples/hello.html

  11. Understanding URLs and Pathnames.

    The URL http://www.uoregon.edu/~jilleb/ corresponds to the Unix pathname /home7/jilleb/public_html/ on the server. This pathname may be abbreviated ~/public_html/.

    The URL http://www.uoregon.edu/~jilleb/111/ corresponds to the Unix pathname /home7/jilleb/public_html/111/ on the server. This pathname may be abbreviated ~/public_html/111/.

    The URL http://www.uoregon.edu/~jilleb/111/examples/hello.html corresponds to the Unix pathname /home7/jilleb/public_html/111/examples/hello.html on the server. This pathname may be abbreviated ~/public_html/111/examples/hello.html.

    Note that you never include public_html in a URL-- it is the default directory for all web pages.

  12. HTML5: a First Look.

    HTML5 is a W3C standard for web pages.

    Copy the following XHTML code and paste it into hello.html.

    <!DOCTYPE html>
    <html lang='en'>
    <head>
    <title>Web Page Demo</title>
    </head>
    <body>

    <h2> Hello, World!</h2>
    <p>

    `Twas brillig, and the slithy toves
    Did gyre and gimble in the wabe:
    All mimsy were the borogoves,
    And the mome raths outgrabe.

    </p>
    </body>
    </html>

    Presto! You now have a standards-compliant web page, which you can verify at the W3C Markup Validation Service.

    Preview the document in your text editor.

    If everything looks OK, upload it to server and view it in FireFox.

  13. Next: Learn the basics of Html, Xhtml and CSS.

    --> Learning Module: Html, Xhtml and CSS.


Warning

Avoid uploading the 111 folder itself to the server. Although this uploads the 111 folder and all its subfolders in a single operation (tempting), it has this major drawback: uploading the entire folder will change all of the time-stamps on the contained files. Time-stamps are used to verify that your projects are uploaded to the server on time. For grading purposes avoid changing the time-stamps on your project files.

Don't upload the 111 folder itself.

Do upload files, images, etc., one at a time.

Do store files locally in the same folder they will occupy on the server.

Example: JilleB creates a new file named p2.html and saves it in her /111/p2/ folder on her computer. When she is finished working on p2.html and it looks just the way she wants it to, she then uploads it to /111/p2/p2.html on uoregon.edu.

IF it looks perfect on the local computer it will look perfect on the server IF she uploads to the corresponding folder-- this is the Philosopher's Stone of Information Architecture.