CGS 3063 HTML tutorial QuickRead 2

QuickRead 2: The Structure and Content of an HTML document

HTML is all about tags.

It's time to draw one of those convoluted examples from real life. Let's talk about a Ms.C who is currently jogging down North-South drive. "Jogging" describes what Ms.C is doing right now. When we talk in HTML terms, we surround that descriptor in less than and greater than signs. Like so, <jogging>. Jogging has a lot of attributes associated with it like speed, attirecolor, distance, headphones etc.. Here is a possible definition of jogging taking into consideration some of these attributes:

<jogging speed="fast" attirecolor="blue" distance="3miles">

Let's consider for our example that fast, medium and slow, are the values that the attribute speed can take. Blue and orange, are the values that attirecolor can take. 1, 2, 3, 4, 5 miles, are the values that distance can take. Here's another definition for jogging:

<jogging speed="medium" attirecolor="orange" distance="2miles">

In HTML speak, jogging would be the tag descriptor or simply, the tag. Speed, attirecolor and distance, are the attributes associated with the tag jogging. Each attribute can assume a fixed number of values. If we want Ms.C to fit the first definition, this is what we would do:

<jogging speed="fast" attirecolor="blue" distance="3miles">Ms.C </jogging>

You will notice that Ms.C appears between two tags. The first one is the definition and is called the opening tag. The second tag is called the closing tag. What the tag jogging affects or describes is the stuff between the opening and closing tags. In our case the definition pertains to Ms.C and no one else because she is the only one featured. Pay attention to the slash in the closing tag. Without it, the closing tag is worthless (the system actually will see it as another opening tag).
General Structure:
< tag attribute1=value attribute2=value...attributeX=value> Content </tag>

Tags pertain to elements, entities and structures in an HTML document. Most tags in HTML are associated with attributes that can assume a fixed number of values. If we make reference to a <blah ..> tag we mean a tag with a name of "blah" as well as the attributes with it.

We are dying to see some real HTML tags!

If you worked twice as fast, you'd live twice as long!

This is how that sentence looks like with the HTML tags shown.
If you worked twice as fast you'd live twice as <tt>long</tt>!

See how some of the basic tags in HTML go to work on a simple sentence. This is pretty much how most HTML documents will look like. Text with tags thrown in between - describing how the text should appear. We'll explain these tags later but you can probably guess what 'i','b', and 'u' do.

The HTML document structure

Every HTML document starts off with the tag <html> and ends with a closing </html> tag. This tells the system that it is dealing with an html document (web page) and to act accordingly. The document itself is structured into two main sections, a head and a body, kinda like a human being. The head is where important information regarding the identity of the document is stored. It is small and fits right on top of the document. The body comes below it and its where you put in your most HTML stuff.

Here is the basic HTML document structure:

<html>
<head><title>What Ever You Choose to make the Title.</title> </head>

<body>
What Ever You Choose to Put in Your Homepage.
</body>
</html>

So here we have the head and the body. Within the head tags, you can see we have the title tags. This is where you put the stuff that gets featured on the top left corner of your browser (above the menu bar). The title isn't in the main part of the page but way up at the top in the (usually) blue bar. You cannot use HTML tags in the title. There are other tags that can go into the head section, and we'll see a few in later quickreads. We wont be dealing with them extensively though.

In HTML, the white space (ie spaces, tabs, blank lines, returns, etc) between the words and other elements do not change the display. So use a generous amount of spacing between the various tags and lines to make the code more readable. The above document could have been legitimately written down as:
<html><head><title>What Ever You Choose to make the Title. </title></head><body>What Ever You Choose to Put in Your Homepage. </body></html>

This is illegible for most people. Use spaces and blank lines where it makes sense to you, like between paragraphs or sections in your web page. (By the way, if you do want to go to the next line or have blanks lines then use the tag. There is no closing tag. More on this will come in Quickread #3). Remember that you will be editing your web page many times over a long time. Making the code look good will help you later on in editing. While I hope that this example drives home the point, don't go overboard with the spaces either, it too will be annoying to edit later. HTML (both tags and attributes names) is also case insensitive when it comes to reading it's tags. This means it doesn't care whether you use capital or lower case letters. So <body>, <BoDy>,<BODy> and <bODy> all mean the same. Most people use all lower case or all upper case for their HTML.

How do I get started on my home page?

In this course, we teach you how to make and edit HTML files on the Grove Unix server directly. Here is what that sentence meant: each of you has a class account on the Grove computer located on campus. With instructions provided in class, you will learn to telnet (connect) to the Grove computer from home or the labs using a PC or Mac. You can then make or edit the files and directories that make up your web page. You will also learn how to copy, move and change access permissions on your html and other files in a Unix environment. Unix is not like windows and so somethings make look strange. We will try to explain what we are doing but you may have to take a leap of faith at times. The unix tutorial may answer some questions you have about unix.

This is really the hardest part of making your web page. The instructions here need to be followed carefully. Check the common mistakes section if you have problems seeing your web page.

Login in to your grove account either using telnet or sitting at a grove terminal.
Change directories into your home directory by entering cd at the Unix prompt (this is the directory you are in when you first login so this command is redundant). Then, execute the command mkdir public_html . This creates the directory in which your home page must be stored. The computer will automatically look in the public_html directory for your WWW documents when a web browser requests to look at them.
Execute the command chmod 755 public_html. This allows web browsers to see your home page and any other files in this directory. (it gives read write and execute permissions to you and read/execute permissions to the group and others). This command is basically equivalent to chmod uog+r+x public_html which is mentioned in the book.
Enter cd public_html to change directories to the public_html directory.
Use your favorite text editor (pico, vi, and emacs are available) to create a file called index.html. If you don't know these text editors (think of them as really simple versions of Microsoft Word) then just use pico. For pico the command you type to edit/create a file is pico filename, so to create a file called index.html you need to type pico index.html, the command is similar for vi or emacs. You may use any text editor you wish but you may not use an html editor such as Microsoft Word, Netscape, Front Page, or Hot Dog. Your file needs to have, at the least, have the following lines to work properly:
```
<html>
<head>
<title>What Ever You Choose to Make the Title</title> 
</head>

<body>
What Ever You Choose to Put in Your Homepage.
</body>
</html>
```
It creates a file that looks something like this. Add whatever other text/links you wish to in between the <body> and the </body> tags.
When you are done editing the file, exit the editor and save the file. In pico this is done by holding the control key down and then pressing the letter X (for exit). It will ask
Save modified buffer (ANSWERING "No" WILL DESTROY CHANGES) ?
Press the letter Y then it will display
File Name to write : index.html
(or whatever filename you are working on) since this is the correct name just press enter. If you want to save the file without exiting pico, hold the control key down and press the letter O. This will display
File Name to write : index.html
to which you just press the enter key.
Execute the command chmod 644 index.html (which is basically equivalent to chmod uog+r index.html mentioned in the book). This allows the web browser to read the file index.html by assigning the permissions of read (r) and write (w) for you (the user) and r for group and others. You must execute this command for each file you want a web browser to be able to read including pictures, sound files, and other webpages. The file named index.html is the file that acts as your main home page. It is the file that the web will be looking for it so don't use any other filename for now. This file will be read whenever someone enters http://grove.ufl.edu/~c3063xxx into their web browser (note that xxx should be replaced with the last three letters of your class account).

Congratulations!! You now have a web page.
Notice that it is public_html and index.html and that this difference is important (no spaces in public_html or index.html, spaces are generally a bad idea in any filename for your web pages or pictures).

In the future, to edit your page you would login to your account through telnet then type cd public_html hit the enter key then type pico index.html and hit the enter key again. Once you have created your public_html directory (ie typed mkdir public_html) you do NOT need to do this again. Also, when you type pico index.html you should see your previous web page code show up. If it doesn't then you are in the wrong directory or you mis-spelled index.html. You should not have files like index.html.save nor should any of your web page files be in any directory other than the public_html directory (for now). Note that files in your home (root also called main) directory won't work on the web.

Get behind the wheel!

This section allows you to try out some of your own html code. It will create a temporary page with the information you type in.
Try typing out the following and hit "voila!" You could cut and paste the code but in the beginning it's better if you typed it out so you get a very hands on feel for the tags.
Pressing Start Over will clear the box.

<html>
<head><title>What Ever You Choose to make the Title. </title></head>

<body>
What Ever You Choose to Put in Your Homepage.
</body>
</html>

Index