Lecture notes for Tuesday, 6/24

Today we'll be installing Apache and creating a very simple web page. Remember that you can find lots of useful information on the references page.

Here is a rough guide to what we'll be doing. The formatting may be a bit rough, but it should be readable. I may update this to be nicer looking later, but I might not have time for that.

First I'll walk you through the process of installing Apache. It's not 100% critical that you understand every nuance of what we're doing and why we're doing it, but you should have a general idea.


#Copy the archive from wherever I put it
cp /l/www/classes/a202-ewennstr/software/httpd-2.2.27.tar.gz .
#Don't forget that period at the end!

#Unzip it
gunzip httpd-2.2.27.tar.gz

#Unarchive it
tar xvf httpd-2.2.27.tar

#Read the installation readme
cd httpd-2.2.27
more INSTALL

#When you're done reading...
#Configure the installation for your directory
./configure --prefix=/u/USERNAME/apache
#build the program
make
#install the program
make install

#You're not the only one running Apache on this server. So you'll need to tell
#your Apache to listen to a unique port number that no one else will use.

#First, we change the directory to the one that has the configuration files
cd ..
cd apache/conf
#Now we open up the configuration file httpd.conf using the text editor pico. The
#-w option turns off wordwrap.
pico -w httpd.conf
#Go down to the line that says "Listen 80" and change the "80" to your assigned 
#port number. Mine is 61300, so I'm changing it to "Listen 61300"
#You should also go down to the line that says "User daemon" and change "daemon" 
#to your username.
#Then exit the program using the Ctrl-X command. Make sure you agree to save 
#changes.

#This is the command to start the Apache server. Remember this command, because 
#any time you need to start the server, you'll need to use this command.
~/apache/bin/apachectl start

#Did it work? You can always tell if you've got a program running by using the ps 
#command, which lists processes. There's way too many processes running to sift 
#through them all, so we'll send the output to grep, which will search for 
#whatever string we give it and only return those lines that have the string we 
#gave it.
ps -ef | grep USERNAME

#You can test to see if the server is working by going to a browser and visiting 
#"http://silo.soic.indiana.edu:APACHEPORTNUMBER". (Make sure you put your own  
#Apache port number in for "APACHEPORTNUMBER".)

Now that we've gone through the boring process of installing Apache, we're going to create a very simple web page. Remember how I said it wasn't important to understand all the details in the previous part? Well now we're about to get to making web pages (the programming part will come later), so that's not true anymore. If you turned your brain off and just went through the motions during the installation, then turn it back on again!

Apache stores all of the html files in the subdirectory called "htdocs". So let's navigate there.


[ewennstr@silo ~]$ cd ~/apache/htdocs

In case you're curious, the tilde "~" is a shorthand notation for your account's default directory. On Silo, "~" means the same thing as "/u/USERNAME" (where "USERNAME" is the username of whoever's logged in).

Now let's create our web page. It's just a text file, so we can use Pico again. The option "-w" turns off word wrap. Word wrap can get really annoying when we're writing code.* I called my page "hello.html", but you can call yours whatever you want. I recommend using the ".html" extension so that it's obvious what the file is for.

*Some purists might disagree with me, but I consider writing html "coding". But I wouldn't call it "programming"! That will come later.

[ewennstr@silo htdocs]$ pico -w hello.html

I put the following content into the file:


<html>

<head>
<title>This is a web page</title>
</head>

<body>

Hello, World Wide Web!

</body>

</html>

If you've never seen the source code for a web page before, you might want to read up a bit. There are some good links on the references page. But in the meantime, let me draw your attention to the structure of the file.

All of the web page content is contained within the html tags. The page would probably display properly without those tags, but it's good form to include them. If it does nothing else, it tells anyone (or any script) that looks at the content of the file that this is supposed to be a web page written in html.

Within the html tags, the page is divided into two sections, the "head" and the "body", which are surprisingly indicated by the head and body tags. I'll let you guess which is which. The body contains all the data that will be displayed on the page, and the head contains information about the page. There are lots of things that can go in the head section, but the most important is the title, enclosed in title tags. Put whatever title you want, and add whatever text you want to the body of the page. For demonstration purposes, I recommend making the title different from what you put in the body of the page.

Now let's actually look at the web page to see what we've created. Open up your favorite web browser and go to "http://silo.cs.indiana.edu:APACHEPORTNUMBER/FILENAME.html". Make sure to replace "APACHEPORTNUMBER" with your port number and "FILENEAME" with whatever you named your file.

You should be able to see the text that you put into the body of your web page. But where is the title? Remember, the title is in the head, so it's not part of the web page itself. It's just information about the web page. The web browser can do whatever it wants with that information, but one thing that most browsers do with it is put it in the title bar (or on the tab for the web page). But the leading modern philosophy is that html doesn't tell you how to display a web page. It's all supposed to be content. The html file tells you what the title of the page is. It's up to the browser (or an accompanying style sheet) to decide what to do with that information. If you think about it, you can probably come up with lots of other uses that a browser (or a web crawling robot, or something else entirely) might have for the title of a web page.

Making your web pages look nice is beyond the scope for this class. There are some old-school html tags (like center or font) that control what a web page looks like, but we won't talk about those at all. If we were to get into the appearance of web pages, we'd want to start working with cascading style sheets (CSS). But we've got enough stuff on our plate as it is, so our web pages will remain ugly, and we'll focus on the content of the web page and the behavior of the web page (when we get to CGI and actual programming).

Remember that when you're done installing Apache and creating your web page, you should send me an e-mail with a link to your web page to indicate that you've completed homework assignment #2.

Post-lecture wrap-up

In lecture today, you saw what happens when someone locks the door to our classroom, and we can't get in the next morning. Don't lock the door to our classroom!

The following Unix commands made their debut in class today:

We also talked about using the | ("pipe") command to redirect the output of a program

We introduced writing html and looked at the following html tags: