CSE 100 Assignment 2

Creating a Student Home Page

  1. From your web browser goto:
  2. http://www.washington.edu/computing/web/publishing/students.html

  3. Follow the directions one through four.
  4. When you have worked through these steps stop, and we will import your web page together.

Some Commonly Used Tags

There are two type of HTML tags. The fist type acts upon the text that will appear in your HTML document. These commands have a begin tag and an end tag. For example, to make text bold, the begin tag is <B> and the end tag is </B>; text between these tags will appear bold.

The second group of tags simply perform a function within your document. This type of command does not need an end tag. For example, to create a horizontal line on your page, use <HR> which stands for "horizontal rule."

List of tags can be found in any HTML book on a variety of Web sites (see the Bibliography posted under resources on the CSE 100 web page). Following are a few commonly used tag and their attributes.

Function Tags

<HTML>…</HTML>

Html begins and ends a page

<BODY>…</BODY>

Body

<TITLE>…</TITLE>

Title

<HEAD>…</HEAD>

Header

<P>…</P>

Paragraph

<B>…</B>

Bold

<I>…</I>

Italic

<FONT SIZE=#>…</FONT>

Font size

<FONT FACE="?">… </FACE>

Font type

<A HREF="???">…</A>

Insert a hyperlink

Begin/End Tags

<HR>

Horizontal line

<BR>

Line break (vertical space)

<IMG SRC="…">

Insert an image

 

 

 

 

 

 

 

 

 

Editing your Home Page using HTML

  1. Open Notepad from your desktop.
  2. Start Þ Programs Þ Accessories Þ Notepad

  3. Review some of the commonly used tags explained above.
  4. Enter in HTML coding from the web template handout.
  5. Save document.
  1. File Þ Save Þ As…
  2. Click on "Documents folder."
  3. Name the file "index.html."
  4. Note: all files you that you place on the web should end with .html or .htm. This tag is what makes your files readable on the Web.

  5. Press the "Save" button.

 

 

Now you have created and saved your first HTML document. You are half way there! Now we have to post this document to your web page. This next step makes use of a very important tool in web editing call FTP witch is an abbreviation for File Transfer Protocol, the protocol used on the Internet for sending files.

  1. Open FTP from your desktop.
  2. Start Þ WS_ FTP

  3. Profile Name: Dante
  4. Host Name/Address: dante.u.washington.edu
  5. Host Type: Automatic detect
  6. User ID: User ID for your dante account
  7. Password: Password for your dante account
  8. Comment and Account: Leave Blank
  9. In the box labeled "remote system" open the "public_html" folder (this is the folder where your web page information is housed. It is from this folder that the your web page can be see on the World Wide Web.
  10. In the box labeled "local system" opened the "Documents" folder (this is the folder on the computer were you saved your html document, so if you had saved it to your floppy disk you would open the A drive.)
  11. Select your "index.html" document and press the arrow key pointing to the right. This will replace your current index.html document with the one we just edited in class. Press the Refresh key in the remote system box.
  12. Open your browser and type in your web address. If your page is already up, just press the refresh key and you should see your changes.

Capturing an Image from the Web

  1. Find an image on the web that you are interested in copying.
  2. (For this assignment we will all capture the UW Husky logo--http://www.gohuskies.com/)

  3. Place mouse arrow over image and right click on the image.
  4. Select the "Save Picture As" option.
  5. If you have a floppy disk, save the image to the disk.
  6. (we will save the image on the hard drive in the "Documents" file)

  7. Name the image "dog". Make sure to use lowercase letters.
  8. Suggestion: try to keep your short and recognizable. For example "dog" or "UWlog" would be better than "HusckyDogImage" or "UniversityHusckyLogo"

  9. The image will be saved as a "gif" or a "bmp." You shouldn’t have to worry about this as it will automatically save the correct type.

Posting Your Image on Your Web Page

In order to place your image on your web page, we need to use FTP again.

  1. Open WS_FTP from your desktop.
  2. Log onto your dante account.
  3. Open "Documents" from your computer.
  4. Open "public_html" from dante.
  5. Select "dog.gif"
  6. Press the arrow key and send it into your public_html folder
  7. Open your web page and press the refresh button. (This should being up the image we got from the UW Sports Page.

 

Web Template Handout

 

<HTML>

<HEAD><TITLE>Type in Your Name</TITLE>

</HEAD>

<BODY>

<center><h1>The Heading at the top of your Page</h1></center>

<p>

<center>

<img src= "dog.gif">

</center>

<p>

This is the body of your web page. You can type anything you want in this section.

</p>

<HR>

<b><br>University of Washington

<br>Email -- youremail@u.washington.edu

<br>Web -- http://students.washington.edu/your web Extension

</b>

</BODY>

</HTML>