Basic HTML for your Password-Protected Webpage

Contents

  1. Basic HTML for your Password-Protected Webpage
    1. Introduction
    2. A first web page
      1. create bland.html
    3. A second web page
      1. Advice on Editing files at your website
    4. A third web-page: password-protected

Introduction

Instructions are given for how to set up a personal website on the SoM web server designated to this course: gentry.metr.ou.edu .

For those of you enrolled in this course, and about to embark on your first task: welcome. For newbies to Linux and Unix, this first task could be very difficult. For those of you who already have made a personal website before, and who already have a basic proficiency with Linux/Unix and a text editor, this first task is going to be very easy. All you will need to do is to make a password-protected website on Gentry, in which to show the instructor your future completed tasks.

There are PLENTY of hurdles here for newbies to stumble on. Some of the hurdles will be on your end, with the Mac/Linux/Windows workstation that you use to connect to Gentry. Another big hurdle could be the use of a text editor, either on Gentry or on your local workstation.

This course aspires to be newbie-friendly. In reality, it may fall a bit short of that goal. Feel free to contact the instructor for assistance.

A first web page

In this first part of the tutorial you will make a very simple html document to show at your personal website. Most of the directions are specific for making and installing the website on the Linux computer gentry.metr.ou.edu.

To log onto Gentry, you must ssh as explained in Ready. Connection via ssh should allow "forwarding of X-window traffic", so that you can run a GUI text editor, gedit or nedit on the monitor of your local computer. Once again, if you are unfamiliar with Linux commands, you are invited to visit An introduction to the Linux command line.

Gentry is configured to access users web pages in the directory public_html. If you do not have that directory yet, make it with: 

mkdir public_html

All users have a unique group, containing the user and the webserver, in this case apache. The name of this unique group is also the name of the user.

Gentry is rather paranoid about security, and wants minimal permissions granted to files and directories that will be displayed on the web. All html files should be readable by the group, but not writable. There is no point of having any of your files or directories readable, writable or executable by others. If order for you public_html directory to be navigable by apache, it should be executable by your group. Therefore: 

chmod 710 public_html

Similarly, in order for apache to navigate to your public_html directory, your top directory in /home should be executable by your group. For example, if your login is jstudent, you can set this by 

chmod 710 /home/jstudent

(On some accounts issued after Sept 4, 2005, the above step may have been done for you.) By the way (for those of you who need or want to know), in /etc/bashrc, the following is now set: umask=0027. This means your default permissions for files is 640 and for directories is 750. In other words, no permissions are allowed for others, by default. See Configuring the bash shell and Understanding file permissions Tutorial.

Go into your public_html directory with 

cd public_html

If the Unix commands mkdir, chmod and cd are unknown to you, you may want to become familiar with them at linuxcommand.org. Here is a site that explains chmod. But beware that the examples at the bottom of that page are for a server without apache in the user's group, in which case apache would be "other". On Gentry, we only need to open up permissions for your personal group (containing you and apache) for the web site to be functional.

create bland.html

If you do not have a file bland.html within the /home/joestudent/public_html directory, use an editor (gedit is recommended for newbies) to create one: 

gedit bland.html

or, to keep your command line functional, run gedit as a "background process": 

gedit bland.html &

Type in the text hello world or other bland nonsense and save it. You may want to set minimal permissions for this file: 

chmod 640 bland.html

Then in a browser, on any computer connected to the internet, go to http://gentry.metr.ou.edu/~joestudent/bland.html, and you should see your nifty webpage.

A second web page

You do not need to build your website from scratch. You are welcome to download a simple website, which contains my ex1.html, ex2.shtml, among other goodies.

You can edit the html files to modify them for your own needs. Even if you already have a website, you still might want to play with these examples, in order to learn some more about html. Or you skip this section entirely, and learn basic html syntax on your own. In recent years, most students skip this section.

Now for the download: htmlex.tar. But before you click, read: GettingFiles.

The following command on Gentry will extract a directory htmlex from htmlex.tar. Be careful: it will overwrite files if you already have a directory htmlex: 

tar xvf htmlex.tar

The example files should now be viewable at: 

http://gentry.metr.ou.edu/~yourname/htmlex/ex1.html

If you want to move this example system of web pages into the top of your website, and thus have it accessed from 

http://gentry.metr.ou.edu/~yourname

Do the following within htmlex 

mv * ..
cd ..
mv ex1.html index.html

You will need to use a text editor immediately on the file ex1.html (or index.html, if you moved it there), otherwise you will be known as "Joe Student" to the rest of the world. Notice when you look at ex1.html in a text editor, there are a lot more characters that did not appear when you looked at your page through a web browser. In the editor, you are seeing the html language that defines your page.

In the 1990s, we could learn more about html by using a browser (Firefox) option "View Page Source", which is available by right clicking on a web page. Try using this option on pages you are browsing, to see how they are constructed. But with frames so prevalent, you may need to right click on the frame and go to the "This Frame" menu. But most web pages are so complicated these days, you can rarely learn much this way. Most web pages, including this one, are translated to html from a simpler template.

For html files that you own, you may compare what you see through a web browser with what is seen in the text editor. In the text editor, you may see the html for "server-side includes" that were processed by the "server" before the page was sent to your computer. You will not see that code using the "view page source" method. ex2.shtml which has lots of server side includes.

For this course, all you need is some simple old-fashioned 1990's HTML. But you can learn a bit more than that if you desire:

Advice on Editing files at your website

After you make your editing changes and save the file, try the "reload" option on the browser on your local machine to see what it looks like. Use "shift-reload" to download all the graphics again, rather than use the ones in your cache.

In general, you should make a copy of your html file before doing a lot of heavy editing. This can be done by using the Unix command for copying: 

cp index.html index.html.backup

If you damage your index.html, you can always revert to the backup with: 

 cp index.html.backup index.html

Alternatively, you may copy your index.html to a file with a hard-to-guess name, such as obscure.html. Then hack away on obscure.html and copy it back when you are ready to show it off. (You may still want to have an index.html.backup)

A third web-page: password-protected

{*} You will need to submit your completed assignments to the instructor within a password protected directory. Here is mine: use login/password metrprof/tooeasy to access files in my secret directory

This directory secret is contained within the htmlex.tar, which was offered for download in the first part of the tutorial. See the file readme within that directory. You will need to deal with some hidden files, .htaccess and .htpasswd. At the very least, be aware of the use of ls -a to include hidden files in a directory listing.

There are a bunch of tutorials out there: try google with .htaccess password protected directory

This one is quite close to what we need to do: password protecting a directory. But I suggest one exception to what was stated there. I recommend: 

chmod 640 .htaccess .htpasswd

Or try this one: .htaccess tricks and tips

But in the example I make the following exception: Instead of naming the password file .htpasses, I name it .htpasswd and keep it within the secret directory itself.