Lab 3: Editing your web site

Keywords: HTML, text editor , URL, UW web space, dante, HTML tags, header, body

Objectives

• Locate your UW web space.
• Edit a web page in a text editor
• Upload your web page to your UW web space.

You will be using the web to publish parts of your completed assignments (homeworks, labs, and projects) throughout the quarter. Therefore, you must know how to upload files to your web directory on dante. This will be a useful skill throughout your college career, so take the time to learn how to do it now.

Preparation

You should have completed the objectives in the previous labs before doing this lab. If you have trouble with logging on to the remote system dante, go back and review the previous labs (Lab 1 and Lab 2).

You should also have activated your student web publishing services in Lab 1. This is a crucial step for this lab, so if you have not activated it yet take the time to go back and do it now.

Locate your UW web space

For this part of the lab, you will need to know your UW NetID. This is the part of your UW email address that is located before the '@' symbol, and is your username for all things UW-related.

1. Go to http://students.washington.edu/. This is the page responsible for hosting each and every UW student's web page.

   

2. Type your UW NetID into the address bar of your browser right after 'http://students.washington.edu/', making sure not to leave any spaces between the address and your NetID. The combination of these two forms the URL (standing for Uniform Resource Locator, a fancy way of saying 'address') for your UW student web space.
3. Press 'Enter'. You will be taken to your student web space. Chances are, there is nothing here at the moment except for a placeholder page. But this will soon change.
4. Write down the URL for your student web space. You'll need it later.

Edit a web page in a text editor

HTML stands for "HyperText Markup Language", and is the language of the World Wide Web. HTML documents are documents written using HTML formatting conventions. Most of the pages you view online are in HTML format.

HTML files are simply plain text files with HTML formatting. This means that HTML documents can be edited in any appliocation that can edit plain text, from simple editors like Notepad to specialized applications like Macromedia Dreamweaver. In this lab we'll use TextPad, a basic editor that contains some helpful features. We recommend that you do not use Microsoft Word or FrontPage to edit your HTML, as they can add special characters to your HTML documents that will prevent them from working properly in all web browsers.

All HTML documents consist of the same basic parts: a header and a body. The header consists of information about the page, or metadata (which literally means 'data about data'), such as the page title, the author, and any JavaScript or CSS that the page uses (we'll cover these later). The body contains all of the actual content on the page, and is what most people think about when they think of a web page.

In order to make an HTML document, text strings called tags are used. Tags are pieces of HTML code that tell a web browser how to display a certain web page. Or tell a search engine how to store a page. Or tell a browser what other files to load. Tags are used for a great deal of things in HTML documents, and it is helpful to think of them as the 'skeleton' of an HTML document, for without them a web page would not function at all.

Next we'll use the text editor TextPad to build a simple HTML document. First, let's take a quick look at TextPad.

1. Open the program TextPad from the Start menu. You should be able to find it by choosing 'All Programs' and looking through the menus there. TextPad is similar to Notepad, but contains some additional features that will help you write HTML documents.
2. If it's not on already, you might want to turn on line numbering. Choose the item 'Line Numbers' from the 'View' menu. This places a line number beside every line, which may help you remember your place and find errors in your code.

We'll give you some example HTML to start with. Copy the HTML text in the box below and paste it into a new TextPad document.

<html> <head> <title>Hello world!</title> </head> <body> <p>Hello world!</p> </body> </html>

The HTML code in this example contains tabs to show how certain tags are inside other tags. For example, the <head> and <body> tags are inside the <html> tag, and the body text is inside the <body> tag. It is not strictly necessary to use tabs in this way, but it helps to make the document easy to read. Once you begin working on larger HTML documents, you'll see the importance of making your documents readable.

1. Take a moment to look over the various tags in the document. Notice that each tag has an opening and a closing tag to it (for example, <p> is closed by the tag </p>), and that there are many different tags that come together to make even a simple page like this. Here are a few of the tags on the page and their meanings:
   
   • <html> - This tag is used to tell the browser that the page is HTML, and it should display the page just like it would any other HTML document.
   • <head> - The tag that defines the "header" of the page. The header is used to store information about the document, such as the title. Information in the header does not display in the browser window.
   • <title> - This tag contains the title of the page (i.e. what you see in the top of your web browser).
   • <body> - The body tag tells a web browser where the body of the page is, as explained above.
   • <p> - This tag tells the web browser that the text inside of a tag is a paragraph.
   In addition to these tags, there are other tags that tell the web browser how to format text on the page, like in Microsoft Word. Here are a few examples of these tags:
   • <b> - Makes a word bold.
   • <i> - Makes a word italic.
   Like all of the other tags, these tags have both an opening tag and a closing tag, and any text in the middle of the opening and closing tags will have that tag applied to it. For example, writing 'Hello <b>world</b>!' will print the word 'world' in bold.
2. TextPad has a feature that highlights HTML tags in a different color than the text. This is called syntax highlighting and makes the document easier to read.

   To turn on syntax highlighting for your document, save the text you copied on the Desktop in a file named 'hello.html'. This lets TextPad know that the file is an HTML document, and should activate syntax highlighting.

   

   Syntax highlighting can also be useful for finding errors in your HTML. One common mistake is to forget to include a closing HTML tag, or to miss one of the HTML tag brackets. Sometimes these errors cause the syntax coloring to change, which helps us find them. In the example below, the title tag is missing an opening bracket, '<'. This error is easy to see because it's changed the color of the HTML tag.

   

3. Now we'll change the text of the HTML document. Find the text 'Hello world!' in between the <p> and </p> tags. Note that the title also says 'Hello World!', so be sure to pick the right one.
4. Replace the words 'Hello world' with 'Hello, my name is ', followed by your name.
5. Click on File > Save to save the modified HTML document (it's okay to write over the old one) The file extension '.html' indicates that the file is an HTML document.
6. Without closing TextPad, double-click the file on the Desktop to open it in a web browser. Look the document over to make sure that your document is correct. If you made a mistake, just switch back to TextPad, change the file around, save it, and hit the 'Reload' or 'Refresh' button in your browser to see the changes.
7. Now that you know a little bit about tags, you can play around a bit with some of the formatting tags. Practice making the text bold or italic. Each time you make a change like this, it is a good idea to save the page and then open it up in your web browser. That way if you make a mistake, you'll know exactly what caused it instead of having to guess at it.

Congratulations! You have just edited your first HTML file! Now it's time to put it on the web.

Upload a web page to your UW web space

To upload and download your files to and from a remote computer, you must log in to the remote computer. For this lab, you will use a program known as SSH Tectia File Transfer (or Secure FTP) to log in to dante. This is the same program that was used in Lab 2 to upload and download files.

1. Log into your dante account the same way you did in Lab 2.
2. Navigate to your 'public_html' directory in the file listing on the right-hand side. The 'public_html' directory is where all of your web files are stored. Files in this directory can be seen by anyone with an internet connection, so be careful what you put here. Remember to use the student_html directory if you have both public_html and student_html directories on dante.

   

3. Navigate to the 'fit100' folder that you created in Lab 2. If you do not have a 'fit100' folder, you should review Lab 2 to create one.
4. Create a new folder in your 'fit100' directory and name it 'lab3', then navigate to this new directory.
5. The directory listing on the left side should show the files on your desktop. If it does not, navigate there now.
6. Drag the file hello.html from the left side of the window to the right side (in your 'lab3' directory). There should be a brief delay as the file is transferred to the remote machine.
   
   

   

7. The file is now available on the web! Go to the URL for your UW web space that you discovered previously, and then add fit100/lab3/hello.html at the end. Make sure to double check that your file has been uploaded correctly and is in the right place.

When you're finished, take a moment to look at the HTML source for this lab assignment by choosing 'View Source' (or something similar) from the browser menu. Many of the HTML tags in this document should be familiar to you by now.

Checklist

• I understand the keywords for this lab and can give examples of what they mean.
• I know where my UW web space is located.
• I know the basic structure of an HTML document.
• I know how to edit HTML files.
• I can upload files and documents so that they are available on the Web.

Turning in the assignment

This lab assignment must be turned in to your TA. When you are finished with the assignment, email your teaching assistant with a link to the completed page on your UW web space in order to receive credit for this lab. Be sure to use the subject line 'lab 3'.