Recitation: Making your first web page with HTML

Overview

In the first half of the semester we will learn to program by using Javascript. First, however, we must learn to create web pages with HTML. We will add our Javascript programs to the web pages.

There are many online resources for learning HTML. This tutorial is an abbreviated tutorial appropriate for 1.25 hour recitation. The w3 school offers complete details and examples.

This recitation is divided into these four parts:

HTML background (slides)
Creating an HTML file to store a web page
A tutorial of basic HTML
Making your web page public

Creating an HTML file

By the end of this stage you will be able to view a simple web page, that is a file ending with the .html extension.

Start a new text file with a text editor. On Windows use Notepad. On Mac use Simple Text.
Enter some text, such as "Hello World".
Save the file with these specifications:

Name the file index.html
Make sure to specify type "text" (default in Notepad).
Remember the directory where you save the file.

Close the text editor.
Verify the file name.

Open the directory where the file is saved.
Check that the file name has only one period with a format like this "index.html".
If the name is incorrect, rename it.

Open the web page in your browser. Two ways: drag the file onto the browser or use the file, open menu item.
Great job so far!

A tutorial of basic HTML

This recitation's lengthy list of HTML tags.
W3 School is a more complete list. Use the W3 School website after you are familiar with HTML.

Questions after we complete the HTML introduction:

What happens if a pair of tags is missing or wrong? How would you find the problem?
How can you make an image into a link so that a web page opens when you click it? Hint: HTML tags can be nested.
How do the tutorial instructions display the <> characters? The <> characters are used for tags. What technique could you use to find the answer?

AFS Space

Now to make your web page public on the internet. This web page is the start of your "home page". Your web page will be on the UNC web server. The UNC web server gets your web pages from your UNC AFS space, also sometimes called the H drive (at least in the ITS labs). Your AFS space could be on any drive depending on the laptop setup. An example of an AFS directory:

Example onyen = vman, h drive is connected to AFS
File directory: h:\isis.unc.edu\home\v\m\vman

Information from UNC ITS

These are my shorter instructions. If they do not work, refer to the ITS links. If all else fails, contact ITS help 962-HELP. You will need the following. Linked documents describe how to complete a given step.

Your laptop needs software to access the AFS space. You are done if you can already access your AFS space on your laptop. If not you need AFS client software. Search for AFS.
Your onyen account needs to be setup for a web page. You are done if you already have a UNC web page. If not, setup your onyen www service.
Check that your AFS space has a public_html directory. If not, create the directory.
Copy your web page into the public_html directory.
Now try to access your web page at: http://www.unc.edu/~onyen/filename.html. Problems? ask for help.

Dorian Miller