Metropolitan State University

ICS 225 Web Design and Implementation

Fall 2006

 

Lab 1:  XHTML and File Transfers

 

Part I.  Introducing XHTML

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

 

XHTML References:  The following references may also be helpful to you.
  1. http://www.w3schools.com/html has an excellent XHTML tutorial and reference.
  2. Appendix of McCracken text, User-Centered Website Development
  3. http://www.devguru.com/ has a very good XHTML 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 XHTML and HTML.
  5. Elizabeth Castro, HTML for the World Wide Web with XHTML and CSS, Peachpit Press, 2003.  ISBN:  0-321-15068-6.

 

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

·         TextPad

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

  • 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).

 

Class Web Site:  Remember that examples demonstrated in class can be viewed from the class web site at http://cs.metrostate.edu/~fitzgesu/courses/ics225/fall2006/.  Use View | Source from the browser to see the XHTML script behind the scenes.

 

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.  Tutorial

If you are not familiar with HTML or need to refresh your memory, work the tutorial at this location: 

 

http://www.w3schools.com/html

HTML Introduction

HTML Elements

HTML Basic Tags

HTML Links

HTML Lists

HTML Images

HTML Forms

 

B.  Practice formatting documents
  1. Create an XHTML document with a couple of paragraphs of text and one or more headers.
  2. Add an unordered list of the names several related items, for example, red, green, blue, yellow, purple, etc.  (Pick your own example.)  Mark each list element with a symbol other than the default bullet.
  3. Make a copy of the list and turn it into an ordered list.  Number with Roman numerals.
  4. Add a link to the web page linking to an existing commercial site.
  5. Save the file with an extension of .htm or .html
  6. Upload and test (see Part II)

 

C. 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.  Please respect the rights of others by not downloading images which are copyrighted. 

  1. Create a new XHTML document. 
  2. Add a link to the page you created in Part B.
  3. Add an image to this web page.  Add some text describing it. Use the ALT attribute to acknowledge the source of the picture.
  4. Add another image to the web page.  Turn it into a link to another web page.
  5. Save the file with an extension of .htm or .html
  6. Upload and test (see Part II)
 

D.  Forms

  1. Create a third XHTML document. 
  2. Create a form.
  3. Add one of each of these types of input fields:  text, textarea, set of radio buttons, set of checkboxes, submit button, drop down menu (select).
  4. Turn the fields in your form into one or more fieldsets.

 

 

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 or one of its subdirectories, they can be viewed by anyone on the World Wide Web.  This is the same procedure you will use to turn in your projects.

 

Server and Login Information

The server that has been provided for use by this class is named http://cs.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 ics225fa07xx where the xx stands for a number to be given to you by your teacher.  Your password was given to you with your account number.

 

A. SSH Secure Shell

In the Metro State computer labs, 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.
  2. Once the software is running, you will need to gain access to the server by connecting to it.  Click Profiles | Add Profile… 
  3. Give your profile a meaningful name such as your first or last name.
  4. Click on Profiles | Edit Profiles…
  5. Enter the following information:

 

            Host Name:       cs.metrostate.edu

            User Name:       ics225fa07xx

 

  1. Click the Profiles button, then click on your profile.  Enter your password at the prompt.
  2. Click on OK when asked for an authorization response.

 

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 three directories:

 

bin

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 to initiate an upload of any files which are selected on the left side of your screen.  Or you can use the up arrow button to browse through your files and upload them.

 

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

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

 

http://cs.metrostate.edu/~ics225fa07xx/yourfilename.html

 

If you see a security alert message, just click through it – it is not important.

 

Part III.  Using Linux Commands to Change Your Password

You may change the password for your account if you wish.  However, this is not required.  This time you will be logging into your server account to change your password. 

 

A.  Changing Your Password

 

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

 

ics225fa07xx@cs:~>

 

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

 

            ics225fa05xx@cs:~> passwd

            Old password:  

            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.  To complete disconnect from the server, close all of the Secure Shell software windows.

 

 

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

 

 

Part V.  Send Email

Send an email to me at sue.fitzgerald@metrostate.edu to make sure that your domain has not been blocked by my virus checking software.  Feel free to send me the URL for your sample pages although this lab assignment will not be graded.