Basic HTML

Create your very own password-protected Web page

Introduction

The following steps describe how to set up a personal website on the atmospheric science department's web server frost.atms.unca.edu. If you are enrolled in this course, you will now embark upon your first credit-worthy task. For newbies to Linux and Unix, this first task might be quite difficult. There are numerous pitfalls, both with the setup on your local machine that you use to connect to Blizzard and with the use of a text editor, either on Blizzard or on your local machine. If you have made a personal website before, or already have some experience with Unix and a text editor, then this task could be very easy. Your relatively straightforward goal is to make a password-protected website on Blizzard. If you get lost in the instructions below, please don't hesitate to ask for help.

A Simple Web Page

Let's start with a very simple Web page. First, log onto Blizzard following the instructions in Preparing Your Computer For This Course. Your properly configured SSH client (i.e., Putty) should tunnel your X11 connection so that GUI windows from Blizzard pop up on your local machine. If Linux commands are new to you, I suggest familiarizing yourself with the command line interface by visiting A Command Line Primer for Beginners.

A single directory called public_html, located in your home directory, contains all of the information available on your website. Your home directory is the one in which you are placed immediately upon logging in. You can also get back to your home directory at any time by entering the command cd with no other arguments. Make a public_html directory in your home directory by entering mkdir public_html Now enter your public_html directory with cd public_html If this information is completely new to you, look at LinuxCommand.org. The sections on navigation, looking around, and manipulating files are particularly important for newbies.

Now that you are in your public_html directory, you can use a text editor to create your first file that we'll call simple.html. You can use either vim or gvim (the GUI version) to accomplish this. I like to use gvim: gvim simple.html Type something like Hello world! or whatever you like and then save the file. On a Web browser, go to the URL http://frost.atms.unca.edu/~astudent/simple.html (replace astudent with your user name), where you should see your grand entrance onto the World Wide Web.

A More Complex Web Page

Web pages are actually text files that your browser interprets and renders into pretty colors and layouts using HyperText Markup Language (HTML). You can see the HTML source for this page by going to Open Menu > Web Developer > Page Source (for Firefox), opening the three dots on the top right of a Chrome window and clicking More Tools > Developer Tools > Sources, or by simply hitting Ctrl-U in any browser. (You may need to right-click on specific frames in order to view the frame source on some pages.) In fact, viewing the source code for other Web pages is a useful learning tool for building your own site. If you see something you like, you can see how it's done and do something similar on your own page.

You can hack my example.html file, which contains some examples of common HTML tags. A great HTML tutorial with explanations and examples is available from W3 Schools. My example file, however, looks rather plain, much like Web pages from the 1990s. Many modern Web pages, including this one, use cascading style sheets (CSS) to control formatting. My complex.shtml file illustrates the use of an external cascading style sheet.

To get started, download and unpack my html.tar file. This tarball contains the previous examples, images, and style sheet. There are several ways to download a file. One approach involves downloading the file to your local machine and then uploading it via Secure FTP (e.g., WinSCP) to Blizzard. A much more efficient approach uses the wget program. From within your public_html directory, try the following: wget http://frost.atms.unca.edu/~cgodfrey/advcomp/html/html.tar The file magically arrives in your directory! Unpack this file with tar xvf html.tar This creates a directory called examples that contains a number of files that you may edit. Note that this action will overwrite any directory called examples if it already exists. You can view your new files with a Web browser at http://frost.atms.unca.edu/~astudent/examples/complex.shtml

Edit your file with a text editor. Notice that there is a lot more information in the text file that doesn't appear in your browser. You are seeing the HTML source code. Once you are pleased with your edits, I suggest renaming your home page to index.html. By default, most servers have a default name for URLs, usually index.html. So if you visit your home page (or any subdirectory) without specifying an HTML file name, you'll get the index.html file. If you use Server Side Includes (SSI) on your home page, then this won't work (at least on Blizzard), since your file must have a .shtml extension. In that case, I suggest that you get around this problem by using something like the following as your index.html file: <HTML>
  <HEAD>
    <META HTTP-EQUIV="REFRESH" CONTENT="0; URL=index.shtml">
    <TITLE>Amalie K. Student</TITLE>
  </HEAD>
  <BODY>
  </BODY>
</HTML> This will immediately redirect a browser from your default index.html to a specified file, in this case index.shtml. Again, this is only necessary if you use SSI on your home page as is the case for all of my Web pages.

In any case, you may want to move these files to the main directory of your website. To make your home page accessible from http://frost.atms.unca.edu/~astudent/ enter the following commands from within your examples directory: mv * ../.
cd ..
mv example.html index.html Before you make any drastic changes to your page, I suggest making a backup of your files. Do this with cp index.html index_backup.html If you make an irreparable mistake while editing, you can restore your backup with cp index_backup.html index.html Alternatively, you could save your file with a different name and then copy it to index.html when you are ready for the world to see it.

Even experienced HTML programmers may find that a page may not render exactly as expected, or it may work in one browser, but not another. A great way to check for HTML errors is with the W3C Markup Validation Service. Simply enter your URL to see if your page has any errors (then fix them!). I check all of my pages with the validator to make sure that everyone else sees what I want them to see. I will check yours too!

Some newbies can succumb to the temptation to use programs like Adobe Dreamweaver, Microsoft FrontPage, Google Sites, or WordPress to make attractive Web pages. While these may look great, the HTML source is often a terrible mess and you won't learn much about designing a Web page by using these programs. I highly recommend taking the time to learn how to use HTML tags.

A Password-Protected Web Page

You should submit all of your assignments for this course within a password-protected directory. You can preview my secure files with the user name atmsprof and the password advcomp. Examples for you to work with are in the protected directory of html.tar that you retrieved above. See the README file and the .htaccess file in that directory for specific instructions. To view these files or any other text file quickly, use more README. Note that you will need to use ls -la to view a listing of hidden files, including .htaccess and .htpasswd.

During the course of the semester, Google can probably answer many of your questions. You can start by searching Google for .htaccess password protected directory. A good tutorial to get you started is available from Cornell University. The only difference for Blizzard is that the file permissions on .htaccess and .htpasswd should be set with chmod 604 .htaccess .htpasswd On the other hand, file permissions for all of your directories should be set with, for example, chmod 701 public_html For more information on setting file and directory permissions, visit this chmod tutorial or this explanation of UNIX file permissions.

Please create a home page for the world to see with a link to a password-protected subdirectory for me to view your completed assignments. Don't forget to send me your chosen password in an email (not your Blizzard password!). Post all of your assignments on a password-protected page that looks something like this. Enjoy your entrance onto the World Wide Web and please ask if you have questions or get stuck.