Module 3 In-Class Exercise: / Creating a Simple HTML Page

Name:

Overview

We are going to develop our web-pages the “old-fashioned” way. We will build them by hand. Even if you eventually decide to use WYSIWYG tools to make web pages, understanding what these tools are doing is critically important.

In this series of activities, we will use a text editor to create a web page. The page will not be fancy, but it will start the development of what will become your home page for this course.

Part 1: Using a text editor

Open the BBEdit (or its free version, TextWrangler) application. BBEdit should be installed in the Mac’s Taskbar. If not, then you can find it easily. If you are not familiar with using Mac OS X, there are two places where you should look for an application. In our lab, since a lot of students use the same applications in their classes you can look in the Apple menu, in the Recent Items sub-menu; this menu is created by the operating system to keep track of the last few applications and files that have been used. The other place to look is in the Applications folder near the right end of the task bar. Holding down the mouse on this folder will pop-up a menu. If you are working on a Mac that does not have an Applications folder in the task bar, your next place to look is to open the Mac's Hard Drive (usually labeled Macintosh HD. As you double-click, look for an Applications folder within BBEdit should be in this folder… Once you find it, double-click icon to launch the program.

Part 2: Very simple web page

Type the following into your untitled document exactly as you see it (use the tab key to indent – BBEdit will help you by automatically indenting subsequent lines):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"

<html>

<head>

<title>Name's WF Home Page </title>

</head>

<body>

Name's Web Foundations Home Page

Links to my WF project:

Project Stage 2

Project Stage 3

About Me

This will be a paragraph about me. It might

include my hobbies, where I grew up, etc.

This will be a paragraph about why I took this

course and what I hope my career will be.

Some of My Favorite Web Sites:

</body>

</html>

Double-click on the word Name in both places and, when it is highlighted, type your own name.

You are going to save your document. It is going to eventually be the home page for your course web site. What should the document be called? There is a special file name, “index.html” that is used for one page in each folder that gets loaded automatically when you don’t type a file name in your browser’s location bar, so save this page as index.html on the desktop of the computer on which you are working. (Select File>Save from the menu, in the dialog box, navigate to, and open the Desktop folder.

Part 3: Previewing your page in a browser

What does you web page look like in a browser? Try it!

What do you notice about the lines of text for your favorite links and your projects?

Why does this happen?

Part 4: Adding headings, paragraphs and line breaks to your web page

Now add some tags that will add more structure to your document. These tags will be added to the existing document.

  1. Make “Your Name’s Web Foundations Home Page” a level 1 heading using the <hncontainer. (“n” represents a number between 1 and 6. A level 6 heading would begin: <h6>)
  1. Make “Links to my WF project,” “About Me,” and "Some of My Favorite Web Sites” into level 2 headings.
  1. Make the “Project Stage...” lines into separate lines using the stand-alone<br /> tag at the end of each line.
  1. Mark up the two “about me” paragraphs using the <p> container tags to indicate that they are paragraphs.
  1. Preview the document (save it so you preview the latest and greatest version).

What's the difference between the <hn and the <p> tags (in terms of how they look in the browser window?

What is the difference in appearance between the <p> and the <br /> tags?

  1. Add the names (not the URLs, just the names) of three of your favorite web sites (we'll make the links work in another module).
  1. Instead of using the break (<br />) tags which should generally be avoided since they have no structural meaning, we're going to mark these up as a “list.” Lists are built of nested tags, the list tag, and the list item (<li>) tag. We'll begin by marking the list up as an “unordered” list using the <ul> and <li> tags:

<ul>

<li>

<li>

<li>

</ul>

  1. Save your document and view it in a browser.
  1. Now let's change our “unordered” list into an “ordered” list. Change the <ul> tag into an <ol> tag. Don't forget to change the corresponding </ul> end tag to an </ol> tag. See the difference? Which do you prefer here? Use the type of list you prefer.

Part 5: Adding a title and more to your page

Finally, notice the <title</title> tag in your document’s head section. Your document’s title should be “Your Name’s WF Home Page” where Your Name is replaced with your actual name.

Where does the title get displayed?

Use the rest of your time to experiment with the tags you’ve learned today… Be sure to try the <em> (emphasis) and <strong> container tags and the <hr /> stand-alone tag.

What do they do?

<em>Some Text</em>______

<strong>Some Text</strong>______

<hr />Some Text______

Part 6: Back-up your work

Save your work onto your USB Thumb Drive so that you can use it in future exercises. If you've forgotten to get these, you can e-mail this small file to yourself. When you use a web-based e-mail system it is helpful to create a ZIP file archive of HTML files so that the e-mail system doesn’t just embed your code into the e-mail message. To create a ZIP archive: select your index.html file in the Finder, then select Compress “index.html” from the Finder’s File menu.

Part 7: Uploading

FTP stands for file transfer protocol. It is the way that we traditionally uploaded (transfered) our files to a server of any kind (including a web server) over the internet. However FTP sends your username and password over the internet unencrypted, and so is insecure. (This was not a problem in the early days of the internet when all the users were trusted.) SFTP is a secure version of FTP that works on top of the SSH (Secure Shell) which is an encrypted version of the old Telnet program.

SFTP – Secure File Transfer Protocol

  1. Open the Fugu program. Fugu is an sftp client that allows you to use the sftp protocol to transfer files to and from another computer.
  2. Open a new connection to gibson.rit.edu. Use your RIT username and password.

  1. Double click on folders to enter them. Use the pull-down menu to move up to a parent directory.

In the left pane you can navigate to the files on your local machine that you wish to upload. If you have inserted a USB drive you can find it in Volumes:

Double click on the www folder – only files inside of www can be seen on the web.

  1. Inside the www folder click the New Folder button and create a folder named “wf” (without the quotes).
  2. Double click on your new wf folder.Once you are inside of wf, you can drag your index.html file from the local pane (or the Finder) to the server pane.
  3. After you have uploaded your file it is time to go ahead and check to see if we can view it on the web!
  4. Open up a browser and try to visit the following URL: (replace abc1234 with YOUR RIT userid). Notice that the “www” directory is NOT part of the web address.
  5. What do you see? Any ideas why?

(this may work for some folks and not for others… If it doesn't work for you, don't be sad… It just means you did it right. (or at least, they way we expected.  )

Anti-climactic? Perhaps. But there are some very important concepts that come next and they will enable you to make your web pages readable to the rest of the world.

1