Nancy Blachman
Variable Symbols, Inc.
356 Bush Street
Mountain View, CA 94041-1332
650 966 8999
650 966 8998 fax
nancy- at -variablesymbols.com

If you want to learn how to search effectively using Google, visit Google Guide, which you can find at www.googleguide.com.

HTML and Linux Quick Reference

This guide summarizes the HTML tags and Linux commands that you are likely to use when you create Web pages to put up on VAweb. Some of the tags in this document are not presented in the How To Create Web Pages workshop.

Introduction to VA Web

There are (at least) two places to install HTML files that you want accessible from vaweb (http://vaweb.valinux.com).

~/public_html
e.g., /home/nblachman/public_html
Access using the url http://vaweb.valinux.com/~nblachman
~vaweb
which is shorthand for /home/vaweb
Access using the url http://vaweb.valinux.com
or simply vaweb

Here's how to create your own personal web site on VAweb.

Make the directory public_html in your home directory:
- mkdir ~/public_html
Make sure all users have read and execute permission on the directory and the files it contains:
- chmod 0755 ~/public_html
In the section Introduction to Linux is a description of chmod.
Create index.html in the directory ~/public_html directory. Here's a simple example.
<HTML> <HEAD> <TITLE> Nancy Blachman's Home Page </TITLE> </HEAD> <BODY> <H1>Nancy Blachman</H1> She enjoys documentary films and playing squash. </BODY> </HTML>

Introduction to Linux

mkdir directory

Make a directory.

cd directory

Change directories.

cp file1 file2

Make a copy of file1 and place it in file2.

mv file1 file2

Move (rename) file1 to file2.

xemacs filename

Edit the file named filename. An editor in which you can click and type, similar to GUI programs, such as StarOffice.

vi filename

Edit the file named filename. This editor is available on all versions of Unix and Linux. To use it, you need to learn some control sequences to add, delete, change text.

ls -lt

List files and information about them with the most recently created (or modified) file listed first.

chmod 0755 filename

Change the permission on a file to make it readable and executable by all users so that Web browsers can view the file.

Permissions are divided into 3 categories: user, group, and all.
There are 3 types of permissions: read, write, and execute.
The binary representation of the 2nd argument to chmod specifies the permissions.
The 7 (binary representation 111) gives read, write, and execute permission to the owner,
The first 5 (binary representation 101) gives read and execute permission to members of the group associated with the file or directory.
The second 5 (binary: 101) gives read and execute permission to all others.

chmod +r filename

Change the permission on a file to make it readable so that Web browsers can view the file.

Introduction to HTML

An HTML element may include a name, some attributes and some text or hypertext, and will appear in an HTML document as

<tag_name> text </tag_name>

<tag_name attribute_name=argument> 
text </tag_name>

, or just

<tag_name>

For example:

<title> My Useful Document </title>

and

<H1 align=center> text </H1>

An HTML document is composed of a single element:

<html> . . . </html>

that is, in turn, composed of head and body elements:

<head> . . . </head>

and

<body> . . . </body>

Here is the basic framework for an HTML document:

<HTML>

<HEAD>

         <TITLE>
      Page Title
  </TITLE>

</HEAD>

<BODY>

        
    Text of document.

</BODY>

</HTML>

To allow older HTML documents to remain readable, <html>, <head>, and <body> are actually optional within HTML documents.

Elements usually placed in the head element

<title> . . . </title>: Specify a document title. Note that the title will not appear on the document as is customary on printed documents. It will usually appear in a window bar identifying the contents of the window. HTML header tags perform the functions usually reserved for titles.

Elements usually placed in the body element

The following sections describe elements that can be used in the body of the document.

Text Elements

<p>: The end of a paragraph that will be formatted before it is displayed on the screen.
<br>: Forces a line break immediately and retains the same style.
<pre> . . . </pre>: Identifies text that has already been formatted (preformatted) by some other system and must be displayed as is. Preformatted text may include embedded tags, but not all tag types are permitted. The <pre> tag can be used to include tables in documents.
<plaintext>: Similar to <pre> except no embedded tags will be recognized, and since there is no end tag, the remainder of the document will be rendered as plain text. This is an archaic tag. Note that some browsers actually recognize a </plaintext> tag, even though it is not defined by the standard.
<blockquote> . . . </blockquote>: Include a section of text quoted from some other source.

Headers

<h1> . . . </h1> Most prominent header
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6> . . . </h6> Least prominent header

Logical Styles

<em> . . . </em>: Emphasis
<strong> . . . </strong>: Stronger emphasis
<big> . . . </big>: Display in a larger font
<small> . . . </small>: Display in a smaller font
<strikethrough> . . . </strikethrough>: Draw a line through the text
<pre> . . . </pre>: Preformatted text, preserve the origianl formatting
<code> . . . </code>: Display an HTML directive
<samp> . . . </samp>: Include sample output
<kbd> . . . </kbd>: Display a keyboard key
<var> . . . </var>: Define a variable
<dfn> . . . </dfn>: Display a definition (not widely supported)
<cite> . . . </cite>: Display a citation

Font Formatting

<font attributes> . . . </font>

Change the display font, size, and color of a block of text by specifying one or more of the following attributes.

SIZE="±n": Where n is an integer from 1 to 6.
The actual size of the font depends on the browser.
COLOR=name: Where name is one of the colors supported by the HTML browser.
FACE="fontnames": Where fontnames is a comma-separated list of system font names.
The first named font to be found on the system is used when rendering the text.

Colors

There are 16 color names that are recognized by most browsers. These names can be used with many different tags.

Black	Maroon	Green	Olive
Navy	Purple	Teal	Gray
Red	Lime	Yellow	Blue
Fuchsia	Aqua	White	Silver

Physical Styles

<b> . . . </b>: Boldface
<i> . . . </i>: Italics
<u> . . . </u>: Underline
<tt> . . . </tt>: Typewriter font

Alignment Features

<center> . . . </center>: To center text.
<div align=right/left/center/justify> . . . </div>: To position text.

Definition list/glossary: <dl>

<dl>
<dt> First term to be defined
<dd> Definition of first term
<dt> Next term to be defined
<dd> Next definition
</dl>

The <dl> attribute compact can be used to generate a definition list requiring less space.

Present an unordered list: <ul>

<ul>
<li> First item in the list
<li> Next item in the list
</ul>

Present an ordered list: <ol>

<ol>
<li> First item in the list
<li> Next item in the list
</ol>

Present an interactive menu: <menu>

<menu>
<li> First item in the menu
<li> Next item
</menu>

Present a directory list of items: <dir>

<dir>
<li> First item in the list
<li> Second item in the list
<li> Next item in the list
</dir>

Items should be less than 20 characters long.

Miscellaneous

Place a comment in the HTML source

<address> . . . </address>

Present address information

<img src="URL" alt="Alternate Text">

Embed a graphic image in the document. Attributes:

src: Specifies the location of the image.
alt: Allows a text string to be put in place of the image in clients that cannot display images.
align: Specify a relationship to surrounding text. The argument for align can be one of top, middle, or bottom.
ismap: If ismap is present and the image tag is within an anchor, the image will become a "clickable image". The pixel coordinates of the cursor will be appended to the URL specified in the anchor if the user clicks within the ismap image. The resulting URL will take the form "URL?m,n" where m and n are integer coordinates, and the URL will specify the location of a program that will examine the pixel coordinates, and return an appropriate document.

<br>

Forces a line break immediately and retains the same style.

<hr>

Places a horizontal rule or separator between sections of text.

Additional Information

For a tutorial introduction to HTML see: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html.

Nancy Blachman
Technical Training Manager
VA Linux Systems
nancy@valinux.com
March 21, 2000

The current URL is http://vaweb.valinux.com/Training/html/htmlReference.html
This file is based on the HTML Quick Reference http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml developed by the University of Kansas.
This quick reference was last modified Sunday, 19-Mar-2000
Problems, comments about this document to nancy@valinux.com or call (408) 542-5715.