Now that you've learned about HTML and how the Internet works, it's time to learn more! In this lab you will:

1. Make your own web page
2. Understand the HTTP protocol better

If at any point you get lost and don't know what I mean when I say to do something, ask a neighbor or me for help. I assume a certain level of proficiency with Microsoft Windows, but I realize that not everyone is good with it.

Please read at least a little bit ahead before you start following the instructions. This is particularly important in the "Being the Browser" section of the lab.

Download (right click, save as) the template here to your "My Documents" folder. Then, bring up the My Documents window to rename it to this format:

[pitt username]_first_page.html

(Depending on your computer's settings, the .html extension may or may not appear or be editable. The file already is an .html file so don't worry.)

So for example, I would save mine as rym4_first_page.html.

Now, load up Wordpad (Start, Programs, Accessories, Wordpad)¹⁾ and open your renamed web page template. In the "Open File" dialog, you may have to elect to view all files and not just .rtf/.txt files. You should see the HTML source that we saw in Monday's class.

Go ahead and change the title of the page to something like, "[your name here]'s Web Page Excursion."

We're going to organize our content into a few sections. First, you'll add a personal information section about yourself. Then, you'll get to be a web browser (seriously) and talk about it a bit.

So let's add some content to the page. Change the boring header found in the <h1>…</h1> tags to "Adventures in Web Page Design!"

Change the boring text found in the <p>…</p> tags to say (feel free to edit this):

This is my first web page for CS0134. First I'll give some information about myself and demonstrate that I know how to use HTML. Then I'll demonstrate that I understand somewhat how HTTP works when obtaining HTML files.

Go ahead and save your file. You should be able to double-click it from "My Documents" and view it to make sure it looks correct. If double-clicking it just opens it up in Wordpad again (it did for me :() then right click on your .html file and on the "Open With" submenu, click Firefox. Internet Explorer also works…

After the </p> tag which closes what you just typed in, we want to add 2 more sections to the web page. Since both of these sections are really subsections of the overall "Adventures in Web Page Design!" section, we'll use a subheading. Since we used the <h1> tags in that overall heading, we'll use <h2> tags in the subheadings. You'll notice that if our <h2> sections have subsections of their own, those subsections use <h3> tags. You can use up to <h6> tags. These heading rules aren't hard and fast rules. Instead, these are guidelines. If you follow guidelines such as these, others reading your HTML code will have an easier job understanding what's going on and you'll be able to read your code and add content more easily as well.

So, after the </p> tag (but before the </body> and </html> tags), we'll add the following sections²⁾:

<h2>All about me</h2>
<h3>The Physical Me</h3>
<p>
  Hi there! My name is ___. I am ___ feet, ___ inches tall and my eyes are ___, but my hair is ___.
</p>
<h3>The Intellectual Me</h3>
<p>Some of my <em>favorite</em> books include ___, ___, and ___. </p>
<h3>The Musical Me</h3>
<p>I like to listen to music (who doesn't?). My favorite genre is <strong>___</strong>. My favorite artists are ___, ___, and ___ although when I was a kid, I really loved listening to ___.</p>
<h3>Contacting Me</h3>
<address>
  [ROOM NUMBER], [BUILDING]<br />
  University of Pittsburgh<br />
  Pittsburgh, PA 15260
</address>
<h2>All about my life as a web browser</h2>
<p>One time I decided to imitate a web browser in order to get a better understanding of how HTTP and HTML work together. Also, my instructor required me to do it in order to get a good grade.
</p>
<p>
  Being the browser was easy; I just used telnet to establish a TCP connection to the server at ___.com (whose IP address is ___.___.___.___) on port __.
</p>
<p>
  I saw some new things while I was exploring [put the website which you visited here]. I noticed some HTML tags I have not seen before, including ___, ___, and ___.
</p>
<hr />
  <h6>&copy; 2008 [YOUR NAME HERE]</h6>
<hr />

Now, fill in the blanks for the first <h2> section with your information, save the file, and reload it in your web browser. Does it look like you expect it to?

If you don't understand some of the new tags in there, don't worry. You might be able to guess what they are for (such as <address>) or you can remove some of them to see the effect. For example, removing <br /> will make your address lines run together on one line. <br />, as it turns out, stands for break; it puts a break in a line and starts a new line.

We're going to pretend to be a web browser for a moment. As we learned, the web browser normally connects to port 80 on a web server in order to request a page using the HTTP protocol. There's nothing magical about web browsers, we can in fact ask for the web page ourselves.

Click the start button, then "run." Type in "cmd" and hit enter. The command prompt (a window with whitish text on a black background) should be on your screen now. This is where we can run text-based commands and see their output.

Think of the web page you'd like to view. For example, we might want to access http://www.google.com/index.html. The "http" part shows that to access the page we need to speak the HTTP protocol/language when communicating with the server found at www.google.com. Implicitly, we will have to connect to port 80 because this is the default port to use if the port is not given to us ³⁾. "index.html" is the file we will request. Remember, file names are case-sensitive. "index.html" is not the same file as "Index.HTML".

In the command prompt window, we will establish a TCP connection to the web server and ask for a file. It will then give us the file over the TCP connection. To do this, we will use the telnet program which lets us send and receive text over a TCP connection. So, at the command prompt type⁴⁾:

telnet www.google.com 80

This will establish a TCP connection to the web server at Google. Now, we need to follow the HTTP protocol exactly in order to get the desired page (index.html). Assuming no errors popped up on your screen, type:

GET index.html HTTP/1.1

Then, hit the enter key twice. You should see lots of HTML code fill up your screen.

You may not be able to "see" what you're typing, but rest assured that it's being sent to the web server. Also, you won't be able to use the backspace key at all, so make sure you type it in correctly the first time. Remember, uppercase/lowercase matters. If you mess up, my advice is to just type lots of garbage and hit enter lots of times until the web server disconnects you. Then, in the command line window, retype the telnet command again.

By typing this, we are telling the server that we are an HTTP client and that we're following version 1.1 of the HTTP protocol. Furthermore, we're telling it that we would like to get the page called index.html from the server.

You can still type and ask for another file, or just wait for the server to disconnect you.

There are many ways to find the IP address of a web server. The easiest is to just use the "ping" command at the command line. Simply type:

ping www.google.com

And then hit enter. You should see the IP address of the server scroll by as the ping command attempts to contact it. This is different than connecting and asking for a page; ping only finds out if a computer was at that address, not whether that address will serve up web pages.

Bring up Notepad again and edit the second <h2> section of your web page to list some tags you were able to find in the output of the server that you were connected to. Remember to just name them, don't include the < and > symbols or else the browser will assume that you mean to create something with that kind of tag.

Notice the css section of your web page? Notice how it says background-color? Well, white is a little boring. Change the background color to be one of aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, or yellow by simply replacing the word "white" with the new color. Don't forget to make sure the line ends with a ";". You may not be able to read the text easily. Change where it says color: black; to be a new color that is easy to read on your background color. Save the page and reload it in the browser. Make sure it has the colors you expect it to, and that you've filled in all the information.

Finally, follow this guide to upload your web page to the FTP server. Put it in the Lab01 directory. Then, show me your web page so I can spot check it and make sure that you submitted it properly. You may then leave.

Congratulations! You've just edited your own web page HTML source and edited its CSS to change the look of it.