This Brief HTML Primer won't answer all your questions, and sometimes the instructions won't tell you everything you need to know, so play around a bit! Learning HTML and using it to build your own webpages can be fun, and it's certainly a great way to learn about computers in general, and the web in particular.
This document consists of two parts a somewhat passive part and and a really active part. It was originally designed for students at the University of Arizona who had access to their own accounts on the u.arizona.edu menu system. The passive part can be read using any browser; the instructions assume you are using Netscape or Lynx, but if you are using another browser, it is a simple matter to adapt the instructions.
Most people do not find it necessary to print out this primer. For the active part, however, it is useful to be at a computer where you can view this primer in one window and edit a file in another window. University of Arizona students can do the editing by telnet'ing to their own accounts (ask a lab monitor if you need help doing that); others will have to figure out a way to get the files to a web server for display to others, but they can still do the editing to learn and practice HTML using any editor (e.g., NotePad, WordPad, TextPad, UltraEdit (a personal favorite); or even WordPerfect or Word so long as the file is saved as text).
The World Wide Web is a world-wide network of computers whose resources are woven together so as to make them easily accessible one to another. The most essential aspect of the Web is that it is based on hypertext: Instead of reading a document from top to bottom, you can follow links embedded in the text that take you somewhere else -- in the same document or in another document. To read such a hypertext file and to be able to follow those links, you need a web browser, such as lynx (note the pun on the animal and links) or Netscape (a graphical browser that lets you see pictures and other images in addition to text). For general help in using lynx, press h while in lynx; in Netscape, click on the help menu. To follow a link in lynx, use your up and down cursor keys to highlight the link you want, then press [ENTER] or the right arrow key; use the left arrow key to return from the link. In Netscape, click with the left mouse button on the link to follow the link; click on Back (at the top left of your screen) to return from the link.
If you have something you've written that you would like others to be able to "browse", you will edit the text file you want to offer and "mark it up" to add special formatting and hypertext links. To do this, you use special words and symbols to tell a browser how it should interpret parts of your text. The language you use to mark up text for browsing is called, unsurprisingly, HyperText Mark-up Language or HTML.
The purpose of this Primer is to tell you just enough about HTML to allow you to compose your own simple web pages. If you want more info, information on HTML abounds on the web, including many tutorials. One good place to start is Yahoo's Beginners' Guide, or check local bookstores. Many bookstores now have great web sections, but you can easily spend $30 to $50 (or more!) on a web book. You wouldn't need such a book for doing the simple things required in one of my courses, but you would find one helpful if you get interested in more extensive web publishing.
Marking up hypertext is accomplished using "tags". These tags are simply characters typed into your document, and they come in basically two flavors, which I'll call onesies and twosies. Twosie tags come in pairs: One turns something on (like underlining) and the other turns it off. Onesies stand alone (like a NewParagraph marker). All tags start with "<" and end with ">". Twosie tags look the same to turn something on and to turn it off, except to turn it off, you have a "/" just after the "<". Let's look at some examples.
The very first thing in your file should be the tag <HTML>, the "on" tag that tells the browser to interpret everything as hypertext until it comes to the </HTML> tag, which should be the very last thing in your document. Look at Sample File 1 to see these tags, and you can watch me build an HTLM document as we go along. When you first follow the link you see the "rendered document", that is, what the document looks like when viewed or rendered in your browser, following your instructions. In lynx, press the "\" key to see the HTML tags themselves; this is called viewing the source code In Netscape, click on the View menu, then choose Document or Page Source, or just press Ctrl-U. When you look at the rendered version of the above sample document, you see nothing because there is no text there to see, only a couple tags. When you look at the source code, you can see those tags.
In the paragraphs that follow, I will tell you about an aspect of HTML, then I will link to a file where I've added the new elements to the ones I already had. In this way you can watch me build a sample HTML document. You should follow each of the links I provide and use the "\" key in Lynx or Ctrl-U in Netscape to view them in both rendered and "source code" versions. (Indeed, look at the source code now while looking at this document and you will see the codes I put in to make it look the way you see it. Most of these codes will make more sense to you as your read through this document.)
Between the <HTML> and the </HTML>tags, a web document file is broken into two major parts, the header (which tells about the document) and the body (which is the document). Both of these parts are punctuated by twosie tags: <HEAD> ... </HEAD> and <BODY> ... </BODY>; look at Sample File 2 to see these tags in action. (Remember to look at the source code or you won't see anything!)
For present purposes, the only thing that needs to go inside the header is the title of the document, set off by the twosie tags <TITLE> and </TITLE>: Check out Sample File 3. Did you see how the document has changed? If not, look again, and you'll see "Ron Wright's Scratch Page" at the top of the screen.
Between the <BODY> and </BODY> tags goes the document itself: Everything you want people to see when they look at your published document. This primer will teach you four types of tags to go in the body of your documents: Headings, paragraphs, italics and links. With these simple tags you will be able to post your term paper on your own web page. And that's all I've used in making this document, too.
Headings are made with twosie tags and come in 6 levels, from big/important <H1> ... </H1> to small/unimportant <H6> ... </H6>. The first level <H1> is for the main headings in your document, typically only the title of the whole document, often the same as the title you put in the header. (Question to answer by looking: How do these two titles function differently?) The second level <H2> are for major subdivisions of your paper or document. In a research report, for example, <H2> headings might be used for the Methods, Results and Discussion sections. I also often use <H2> headings for my name and course, just under the <H1> title of the document. I use mostly <H1>, <H2> and <H3> Sample File 4, but check out the others in your own files.
At the place where you want to start a new paragraph, use the onesie tag <P>. (Some people use this as a twosie tag and it is OK to use it that way, too; the </P> goes at the end of the paragraph.) Note that browsers otherwise don't pay any attention to where line breaks are. Nor to extra spaces, nor tabs, nor indentations. Since different browsers do things differently, including using different font sizes, the browser breaks lines where it thinks best. If you want to override this behavior, you insert your <P> tag. Sample File 5 (When you create a new paragraph using a <P> tag, the browser usually puts an extra blank line in. If you want only to go to the next line, you can use a <BR> like break tag. Did you see what happened when I added the <BR> inside the <H2> heading?)
Then there's this hypertext business. The hypertext tag is what allows you to put a link in your document to take the reader to some other web document or to a different part of your own document (for example from the table of contents to the corresponding part of the document, or from a reference in the text to the full citation in the Refrence List). Each web document has a special address that tells your browser where to find it. These addresses have a uniform structure that allows your browser to break it up into parts and locate the resource you are interested in, and indeed these addresses are called Uniform Resource Locators, or URL's. A URL has 5 parts separated by punctuation:
METHOD :// MACHINE / PATH / FILENAME [# PLACE]
The [ ] around the last component mean that it's optional: Although most URLs don't include them, some do, and they allow you not only to specify a particular file to look at, but a particular place in that file. Sometimes other components may be missing and browsers have to be smart enough to figure out the whole URL from the parts given. Let's begin by taking a URL and breaking it down into its parts, for example, the URL for this primer:
http://www.u.arizona.edu/ic/wrightr/html.primer.html
The method for getting to this resources is called http, for hypertext transfer protocol, that's the protocol (think "diplomatic protocol" -- the special rules and arrangements diplomats have to work with to communicate in formal contexts) that computers use to trade hypertext pages back and forth. In the above case, the machine is www.ic.arizona.edu. On this machine, the path to the file is via the "comm114" directory and its "lessons" subdirectory. The filename is html.primer.html; this URL points to the whole document, and there is no place indicated inside this document.
If the file name is missing, that is, only a directory is given, then the browser assumes you mean the file index.html in that directory. That may be what happens when you give your personal URL, too. Here's mine:
http://www.u.arizona.edu/~wrightr/
that is...
http :// www.u.arizona.edu / ~wrightr / index.html
The path is ~wrightr, where that tilde (~) in front of my user name is shorthand for "the directory belonging to user" wrightr -- just like "~comm114" is the directory belonging to the Communication 114 course. Again, since no filename is given the browser looks for the file index.html. Check out your index.html file once you create your own home page. I'll explain below how to alter your index.html file as you desire so that people who look you up see what you want them to see.
Indicators of links in HTML-speak are called "anchors" and the twosie tags that represent them are <A> and </A>. There are two things you have to communicate to a browser to make a link work: (1) the text to be highlighted or underlined that indicates the link, and (2) the action to be taken if the link is activated (or "followed"). How do you communicate this information to a browser? The text you want to highlight to mark the link goes between the <A> and </A> tags; the action to be taken -- most typically the other HTML page to jump to -- goes inside the opening A tag.
Let's look at an example. To have highlighted text saying "HTML Primer" which points to this document you write:
Check out the Sample File 6 which contains a link back to my Communication Theory web site. If you look at the source code, you'll see the HTML tags we've just discussed -- and some other things we won't talk about here, but look at the other HTML references recommended to learn more. I've also added another link to the sample file, called a mailto link because it allows the reader to send email to someone, usually you. The method in this case is "mailto" but instead of a machine, what comes next is the address of the person you want to send mail to.
OK, well, that's it for the passive part. I hope you were at least active enough to follow the links to the sample files and to examine the source code of each one. (If you didn't, you might want to go back and do that now.) What follows is directed at those from the University of Arizona who have accounts on the u.arizona.edu system. If you are not such a person, you can still use the information in this primer to practice some HTML tags. If you have access to a web site somewhere, you can open a file on that web site and go through the instructions below, skipping over the instructions specific to the University of Arizona, or adapting them to your situation. If you don't have a place to put web pages, you can practice using my HTML Practice Pad. Whichever way you do it, it will work best if you open the file you're working on in a different window from this one.
All users of a shared computer like u.arizona.edu have their own section of the hard disk for storing their files; this is called their home directory. Since my userid on u.arizona.edu is wrightr, my home directory is referred to as ~wrightr -- that funny tilde followed by my userid. Note here again the tilde is used as shorthand for "the home directory of"; the full name of my home directory is /home/u6/wrightr, and you will see the full name of your home directory when you use DirEd as discussed below.
Each u.arizona.edu user has such a home directory. Normally, the files in your home directory are private and no one can read them except you. In order for you to make your files available to others, you must create a special subdirectory of your home directory called your called your "public_html" directory, and you place the files you want to be public in this directory. You must also change the "permissions" on these files to tell the computer that other people have your permission to access those files; look at the information below for how to do this. Once you have placed the files in your public_html directory and set the permissions, anyone with a web browser and the name of your URL can read these files. This includes your mother in New Jersey with an America Online account and a 13-year-old in a school in Zaire. For the most part, of course, no one will look at your files, because they won't know they're there.
One of the great advantages of the u.arizona.edu menu system is that it provides an easy way to accomplish many of the above tasks at once. The first thing you should do, therefore, is "Create Your Own Home Page" via the menu system: Log onto your account by telnet'ing to menu.u.arizona.edu. From the u.arizona.edu opening menu, cursor down to
* Misc --------- Miscellaneous (Home Page, Password, Signature)
Then press <Enter>; or press the right arrow to follow the Misc link. This will bring you to a new Misc menu; choose:
* Home Page ---- Create Your Own WWW Home Page
This will take you to a third menu that says:
WWW Home Page -- Create Your Own Homepage
Help -------- "What is a homepage?" and how to create it
Sample ------ Look at a sample homepage (index.html)
Home Page --- Create a homepage, Manage/Upload public_html files
Permission -- Set access permissions on all public_html files
Register ---- Register your homepage with UAInfo
From here choose Home Page to create your homepage and you will then get a message that says:
Your Home Page
You have a directory in your home directory called "public_html". In
this directory is a file called "index.html". Unless you've already
edited it, this file contains a simple home page with some basic
information about yourself. The URL (Web Address) for your page is:
[1]http://www.u.arizona.edu/~wrightr
Edit -------- Edit your home page
Manage ------ Manage/Upload public_html files
Permission -- Set access permissions on all public_html files
Register ---- Register your homepage with UAInfo
Use the [DOWN] cursor key to go down to the Permission link and
follow it by pressing [ENTER]; this will set the permissions
correctly for your public_html subdirectory, while keeping other files
in your home directory private. This page offers you the
opportunity to edit your new (and minimalist) home page which the menu
system has just created for you. I suggest you wait and edit your home page
as discussed below. You are also offered the opportunity to
"register" your home page with the university so people can find it
without your telling them where it is. Whether you register your page
is up to you, based on your needs for privacy or publicity. Registering
is not necessary for students in my courses.
NOTE: Having completed the above steps you are "on the web". I challenge my students to create a personal comm.html page according to the steps outlined below (sometimes it's a homework assignment). Once they've accomplished that task, this HTML Primer serves as the jumping off point for any files that they create for my courses.
To create a new web page, return to the opening u.arizona.edu menu ("Main Screen"), by pressing m or by pressing the left arrow key twice; then choose
* File --------- Edit and Manage Your FilesFrom the File menu, choose
* DirEd ------ Edit and Manage Your Home DirectoryHere you will see a list of all of the files in your home directory. You may not have many if you only use your account for email. Use the [UP] and [DOWN] cursor keys to highlight the public_html directory, then press [ENTER] to view that directory. This will list files in your public_html directory. For now, you might only have the index.html file you created by the Create Home Page process above. If you use the resources provided by the University, most of your hands- on HTML work will happen from this directory. In what follows I will call this "your public_html" directory. Set a lynx bookmark here by pressing A to add then D for document; a good title for the bookmark would be "Edit my HTML files". Setting the bookmark will make it easy to come back here whenever you wish to create a new file or modify an old one.
The remaining steps in completing HTML assignments are easiest to teach by having you do them. In what follows, I will focus on how to complete this task, but this information is very much a part of general information about HTML that you will need to know.
While viewing your public_html directory, press c to create, then f for file. Name the file comm.html and press [ENTER]. (Be sure you type the file name exactly this way: all lower case letters, 2 m's in comm, no space, a period, then html) Now you will see a new file listed in your directory, looking something like this:
-rw------- 1 wrightr comm 0 Aug 31 10:22 comm.htmlThat 0 in the middle is the size of the file. Since you haven't put anything in it yet, the size is 0. To put something in it you need to edit the file. To edit the file, use the cursor keys to highlight the file you want to edit, then press e to edit. This will take you into an editor like the editor in PINE which you can use to send email. Complete your editing in stages as I did with the Sample Files. Start by typing in
<HTML> <HEAD> <TITLE>(your name)'s Personal Comm 300 Page</TITLE> </HEAD> <BODY><H1>(Your name)'s Comm 300 Page</H1> </BODY> </HTML>
Exit the editor via ^X. (Remember: ^X means hold down the Ctrl key and press X at the same time.) With the file highlighted, press [ENTER] to view the file. You will see not the contents of the file, but the rendered version. (Occassionally, you'll have to press ^R to reload the file before you'll see the changes.) Essentially here you have followed a link to the contents of your file. If this looks the way you want it to, this is your first success. If it doesn't, press the left arrow key to return from the link and press e again to re-edit your file. This back and forth from the rendered view to editing the file is an important process.
Once you're satisfied with your heading, open the file again for editing and add three more elements. Add a new paragraph marker and write something about yourself. Any sentence will do. Make it several sentences if you feel like it; this is your page to connect with other people in the class, so tell them what you would like them to know. Start simple now and add as the semester goes on. Exit the editor (^X) then follow the link and see if the page looks the way you want when rendered. (And press ^R if needed.)
Now go back and open the file one more time in the editor. Add a new paragraph marker after your sentence about yourself, then type in "Return to the my home page" Use the pattern in the sample files to make this a link. Check the rendered version of your file again; does the link work? Finally, edit the file one more time and add a mailto link to yourself. Again, follow the pattern in the sample file and adapt it to your email address.
When you've done this, you've completed the assignment. If you are a student in one of my courses, go to our class home page and look in the private pages for a link to Personal comm.html Pages, then find your name and follow that link. Did it get to your page? If not, you probably didn't name your page exaclty as indicated above. Press v to view your bookmarks and go to your HTML files and check your filename. If it's wrong, use M)odify N)ame to rename it. I will grade this homework assignment by going down the list of names, so make sure I get to yours. Also check again to make sure your link back to your home page and your mailto link work. Now go relax and feel the glow of accomplishment. You now know enough to do a great deal of web work; congratulations!
There are two common mistakes students make at this point. The first is that they edit their home page (the index.html file) instead of creating a new comm.html file. If you did that, you can rename the file (Modify Name per above), but then you won't have a home page anymore, so you might just go back and create it as before. The second common mistake is to place the correctly-named file in the home directory rather than the public_html directory. In this case you can use Modify Location and indicate public_html as the new location.
On another day, take some time to play. Try adding more headings and some new paragraphs. Add an another link, say to some other favorite page. Take one of the workshops that the libaray offers. Remember, you don't have to create everything "from whole cloth": Look to see how other people have done things and adapt their HTML to your own purposes. Look at other HTML files and examine the source code to see how the author made it look the way it does.
I can't emphasize enough that learning to do HTML and to feel comfortable with the computer is a matter of doing not reading or just thinking about it. Alan Watts said trying to learn about Zen by reading about it is like going to a restaurant and eating the menu. The same is true with computers (and most everything else). Play! Try things! What does the "/" key do? What about Ctrl-Q or Ctrl-X? Or press P. This is one of those times when being active is extremely important. Be curious, ask questions, make guesses and test them out, see what other people are doing, check out their home pages, etc.
If you've done all the things to this point, you've completed the assignment. If you want to check yourself, here are the parts:
The information you need to accomplish these steps is in this primer. I really useful way to accomplish step 3 is to look at the file the system created for you in step 1 and adapt those HTML codes to your purposes.
If you get stuck, come by office hours. In order to help you, we will need a description of the problem(s) you encountered and what you have done to solve them. Details help. Write down the exact error message if you can, even if it doesn't make any sense to you. Include the name of the directory and file you were working in and/or the URL of the page you are having a problem with; whether you were working in a lab on a terminal or from home on your own computer; whether you were using a pc or mac, and other information that might help us help you. A phone number where you can be reached (and best time to call) is useful in email messages.
Can you explain all of the following?
HTML tag
Your public_html directory
Link
A web browser
Rendered vs source view
Hypertext
Web page vs Home Page