Metropolitan State University

ICS 225 Web Design and Implementation

Fall 2004

 

Lab 1:  HTML and File Transfers

 

Part I.  Introducing HTML

In this assignment you will create simple web pages using HTML.

 

HTML References :  Refer as necessary to the following references in completing these exercises.
  1. Appendix of McCracken text, User-Centered Website Development
  2. http://www.w3schools.com/html  has an excellent HTML tutorial and reference.
  3. http://www.devguru.com/ has a very good HTML reference with examples.
  4. http://www.wdvl.com/  Web Developer’s Virtual Library has useful tutorials and articles on a wide variety of topics, including HTML
  5. Elizabeth Castro, HTML for the World Wide Web with XHTML and CSS, Peachpit Press, 2003.  ISBN:  0-321-15068-6.

 

HTML Editors:  You may use any text editor you wish in completing the exercises. The following are available in the Metro State labs:

1.       TextPad

2.       Microsoft Notepad.  Quick, simple, free. No formatting.

  1. Microsoft WordPad.  Quick, simple, free.  Some formatting.

 

Avoid the use of tools such as FrontPage or DreamWeaver since the point of this exercise is to become familiar with XHTML tags.  Whatever your choice of editor, be sure to save your files with extensions of .htm or .html.  If saving from WordPad, Save As a text document, not Rich Text Format (.rtf).

 

Note:  You may safely save your work on the H: drive.  This disk space is yours and it is private.  The files will remain there until your Metro State login is disabled.  However, when you have used up all of your disk space, you may not be able to save your work.  This sometimes creates unexpected problems.  So be sure to make copies of your work on diskette, CD or zip disk and delete unused files or large (picture) files from the H: drive.

 

A.  Formatting documents
  1. Create an HTML document with a list of the names several related items, for example, red, green, blue, yellow, purple, etc.  Be sure to pick your own example.  Put each element on a separate line. Add your name to the document and center it.  Save the document.
  2. Start with the same document. Leave each item on its own line, but separate each line with a horizontal rule. Save the new file with a different name.
  3. Start with the same document. Format each of the lines with a different one of the six HTML headings (<H1>, <H2>, etc.). Save the new file with a different name.
  4. Create an HTML document using the following text formatting styles: bold, italic, superscript, and subscript. Save the file.

 

B. Images

    1.    Download one or two graphic images from the web and save them: 

    1. Right-click on an image
    2. Select “Save Picture As”
    3. Choose the H: drive.

Here is one website with free pictures you can download: http://freetravel.cc/index.php or you can use a search engine and search for free pictures.

  1. Create an HTML document that includes the image with text describing it. Save the file.  Please respect the rights of others by not downloading images which are copyrighted.
 

C.  Tables

  1. Create a web page which contains a table with at least 3 rows and 4 columns.  You can create a new page or you can add the table to an existing page.

 

D. Links
1.       Insert a link into each of your web pages.  Each link should point to the next web page you created.  The last web page should point to the first web page you created.

 

 

Part II.  File Transfer Protocol

ftp stands for File Transfer Protocol.  During this lab you will be using an ftp tool to transfer your .html files to a server.  Once your .html files are on the server, in your public_html directory, they can be viewed by anyone on the world wide web.

 

Server and Login Information

The server that has been provided for use by this class is named redhat.ics.metrostate.edu   The server is running the Linux operating system.  Its physical location is not important as long as you know its name.

 

An account has been created on this server for you to use while you are taking this class.

 

Your account name is:   f04225xx           where the xx stands for a number to be given to you by your teacher.

Your password is:          fall225

 

When you are ready to view your .html files, open a browser such as Netscape or Internet Explorer on your computer and type in this URL:

redhat.ics.metrostate.edu/~f04225xx/yourfilename.html

 

A. SSH Secure Shell

You will be using the SSH Secure Shell software to transfer files from the computer on which you created them to the server. 

 

1.   To initiate the transfer of files to the server using SSH Secure Shell, click Start | All Programs | SSH Secure Shell | Secure File Transfer Client.

  1. Once the software is running, you will need to gain access to the server by connecting to it.  Click Profiles | Add Profile… 
  2. Give your profile a meaningful name such as your first or last name.
  3. Click on Profiles | Edit Profiles…
  4. Enter the following information:

 

            Host Name:       redhat.ics.metrostate.edu

            User Name:       f04225xx

 

6. Click File | Connect.  Enter your password (initially fall225) at the prompt.

 

B. Directories

On the left side of your screen, you will see directories and files located on the computer you are using right now.  Navigate through these directories until you have located the file(s) you wish to transfer.

 

On the right side of your screen, you will see the directories and files which already exist in your account on the server.  You should see two directories:

 

            Documents

            public_html

 

Any files you place in the public_html directory and its subdirectories will be visible and accessible from the world wide web.  However, if you do not place your files in public_html or its subdirectories, your files will not be visible from the Internet. 

 

Double click on public_html to open this directory.

 

C. Transferring Files

To transfer (copy or upload) your files to the server, drag and drop files from the directories on your PC to the public_html directory on the server.  Alternatively you can use Operation | Upload or you can use the up arrow button to initiate an upload.

 

D.  Subdirectories

Subdirectories of public_html are also visible from the web.  Subdirectories are a useful way to keep your web space well-organized.

 

To create a subdirectory, click the New Folder icon.  Use the same drag and drop technique to move files from your client computer to the server.

 

E. Viewing Your Web Pages From the Internet

To view this web page from the Internet, open Internet Explorer, Netscape or some other browser.  Enter a URL of

 

            redhat.ics.metrostate.edu/~f04225xx/yourfilename.html

 

If you cannot remember the name of your file, try typing

 

            redhat.ics.metrostate.edu/~f04225xx/

 

The contents of your public_html directory should be displayed on the screen.   From there, you can click on the file of your choice.

 

 

Part III.  Using Linux Commands to Change Your Password

The default password for everyone in the class was set to fall225.  You should change your password in order to prevent vandals from breaking into your account and changing your web pages.  This time you will be logging into your server account to change your password.  You only need to do this once this term, but you should do it now.

 

A.  Changing Your Password

 

Using the Secure Shell software, click on Window | New Terminal.  You will see a prompt that looks something like this:

 

f04225??@tyr~>

 

To change your password, type the passwd command and respond to the prompts:

 

            passwd

            Old password:   fall225

            New password:

 

Reconfirm the new password when asked.

 

Remember your new password.

 

B. Logging Out

 

Type exit at the command prompt and close the window.

 

 

Part IV.  Setting Up At Home

If you would like to download the SSH software at home, check out this site:  http://redhat.ics.metrostate.edu/ssh.zip

 

 

Turn in (optional):

This assignment will not be graded.  However, if you would like to receive feedback on your work, send an email to me at sue.fitzgerald@metrostate.edu with the URL of your web pages.