Please note: this simple "tutorial file" was originally produced to be available on another system, with other files/paths/ .gif-files and resources available. It will have several missing .gif files, but viewing the html source for this tutorial along with how the browser displays the various "tags" will still provide a basic introduction to html.
A work-in-progress...  


The Computer Science "unix" course utilizes a Linux-based machine for it's practice, labs, and assignments. The distributed Apache httpd-server is used to demonstrate basic httpd access and server behavior. Each student has a "web-page" and can edit/modify it to learn the basic html tags. This document serves as an example of the basics.

Fundamentals of html

The best way to view this document is to first use the View-Source option of the browser to view the html source document and print it as an ascii file. Then while reading the printed copy, view this tutorial file again with your browser to see how the information is displayed and how the browser responds to the various html parameters. Notice that the html document contains text that is reformatted by the browser. The html specification permits the original document file to contain whatever multiple spaces, carriage-returns, line-feeds and tabs as are necessary and convenient to build the html document file. All of these will be edited to a single-space character in the final display, unless specifically formatted by html tags to preserve the original text-layout, as in using the <PRE> tag.

HTML is an acronym for HyperText Markup Language. Every .html document will include "html" tags within angle-brackets <html tags here>

A few examples are provided below. NOTE: many html-tags will indicate the START and the END of the tags with BEGIN/END pairs. Such as:

   <TITLE> HTML Tutorial Information </TITLE>

Notice that the keyword TITLE begins the document title information and the same keyword with the slash terminates the range-effectiveness of the keyword.

You can skip directly to sections on:

  1. HTML tags
  2. picture files
  3. icon files
  4. special characters
  5. httpd server
  6. server-side includes
  7. list of other html documents

or, examine this brief TABLE-tutorial


HTML keywords and definition/usage


The general lay-out of an html document is:
 <HTML>         begin an html document file
   <HEAD>       begin document header
     <TITLE>    begin document title
       specify document title here
    </TITLE>      end title tag
  </HEAD>         end header information

 <BODY>     begin the BODY of the document
     the bulk of the html document is here. 
</BODY>     end of document BODY
</HTML>     end of HTML document


Within the BODY of an html document, you may utilize a wide variety of markup tags, a few of the more common are briefly listed here. EM begin/end EM-phasized text (Italicized) STRONG begin/end STRONGLY-emphasized text B begin/end BOLD text I begin/end ITALIC text U begin/end UNDERLINED text TT begin/end TypeWriter font H1 begin/end HEADER, level 1 (largest font) H2 begin/end HEADER, level 2 (large font) H3 begin/end HEADER, level 3 (moderate font) H4 begin/end HEADER, level 4 (small font) H5 begin/end HEADER, level 5 (smaller font) H6 begin/end HEADER, level 6 (smallest font) PRE begin/end PRE-formatted text, ie leave lines "as-is" CODE begin/end mono-spaced font text SAMP begin/end mono-spaced font text BLINK begin/end flashing or blinking of text P new Paragraph of your document HR place a Horizontal Reference line in the document BR place a "hard" carriage return in the document OL ORDERED(numbered) list with <LI> UL UN-numbered list with <LI> LI a LIST-item <IMG SRC="filepath/tosome/imagefile.gif" > <A HREF="http://www.HostName.com/filespec.html"> Click-Here </A> <A HREF="folder/filespec.html"> Click-Here </A>


This is Header3 information

Lists can be provided for easy listing of items:


"Special" characters

The HTML document sometimes needs to display characters that are part of the html-tags itself, or are likely to be difficult to specify on the variety of web-browsers available to users.
Observe that these keywords are case-sensitive,
whereas other html tags are NOT case-sensitive.
These can be coded in an html document with a reserve syntax: ampersand-KEYWORD-semicolon

Displayed Coded Description
< &lt; less-than
> &gt; greater-than
& &amp; ampersand
  &nbsp; hard-space character
© &copy; copyright
® &reg; registered
&trade; trademark
° &deg; degrees
&lsquo; quote-left
&rsquo; quote-right
&prime; prime (minutes, feet)
&Prime; double prime (Seconds, Inches)
" &quot; double-quote
&ldquo; double-quote-left
&rdquo; double-quote-right
¢ &cent; Cent
¥ &yen; Yen
&euro; Euro
£ &pound; Sterling
« &laquo; Left angle quote
» &raquo; Right angle quote
&para; Paragraph
§ &sect; Section sign
&dagger; dagger
&Dagger; dagger Double
¼ &frac14; One Quarter
½ &frac12; One Half
¾ &frac34; Three Quarters
¹ &sup1; SuperScript 1
² &sup2; SuperScript 2
³ &sup3; SuperScript 3
÷ &divide; Divide
± &plusmn; PlusMinus
é &eacute; acute-accented e
è &egrave; grave-accented e
É &Eacute; acute-accented E
È &Egrave; grave-accented E
Æ &AElig; dipthong ligature
æ &aelig; dipthong ligature
ñ &ntilde; tilde-n
¸ &cedil; cedilla
ö &ouml; o-umlaut
´ &acute; acute accent
¿ &iquest; question (SideUPdown)
¡ &iexcl; exclamation (SideUPdown)

The specifications for the HTML escape or special characters is extensive and may have subtle variations from one browser to another. A web-search for: HTML special characters can locate several detailed lists, for example:
www.Natural-Innovations.com or www.HTMLhelp.com
The Greek alphabet is displayed by mapping regular keyboard characters into a Symbol font.


httpd - the web server

The Linux web-server is a program that is available at all times to "serve" any network requests for html-files. The program must be started by the system administrator and is a daemon called 'httpd'. "httpd" has configuration and log files that are kept in /etc/httpd you are encouraged to explore and understand the contents of these files. You can change directory to the logs and then use more [logfile] or view [logfile] to examine the contents.

The LOG files are:


 /etc/httpd/logs/access_log
 /etc/httpd/logs/agent_log
 /etc/httpd/logs/error_log
 /etc/httpd/logs/referer_log
There is also a "man page" on httpd.

You might also be interested in running "lynx" to view your web-page, see the man-page for lynx, briefly use 'q' to quit, to start, from your linux vt100-telnet-logon screen: lynx http://10.6.10.22


Server-Side Includes

There are some specifications that can be placed in a html document that will cause the httpd-server to execute something special. NOTE: the httpd-server must be "configured" by the system administrator to perform the 'Server-Side Include' functions, so your system may not perform these functions. that is why they look like html-comments, so that when the feature is turned-off, they are simply "comments" to the browsers. The general form is:
<!--#fun-name parm=some-value -->

<!--#echo var= DATE_GMT     --> produces:
<!--#echo var= DATE_LOCAL     --> produces:
<!--#echo var= LAST_MODIFIED     --> produces:
<!--#echo var= DOCUMENT_NAME     --> produces:
<!--#echo var= DOCUMENT_URI     --> produces:
<!--#config sizefmt= bytes     --> produces:
<!--#config datefmt= %y/%m/%d --> produces:
<!--#fsize     virtual=index.html--> produces:
<!--#flastmod virtual=index.html--> produces:
<!--#config sizefmt= abrev     --> produces:
<!--#config datefmt= %d/%m/%y --> produces:
<!--#fsize     virtual=index.html--> produces:
<!--#flastmod virtual=index.html--> produces:


ICON files are also available

The Linux "apache" httpd distribution also provides several "icons" for your use:
gray bullet   <IMG SRC="/icons/ball.gray.gif">
red  bullet   <IMG SRC="/icons/ball.red.gif">
gray computer <IMG SRC="/icons/comp.gray.gif">
blue computer <IMG SRC="/icons/comp.blue.gif">
back arrow    <IMG SRC="/icons/back.gif">
forward arrow <IMG SRC="/icons/forward.gif">
up arrow      <IMG SRC="/icons/up.gif">
down arrow    <IMG SRC="/icons/down.gif">
left arrow    <IMG SRC="/icons/left.gif">
right arrow   <IMG SRC="/icons/right.gif">
Fortran pgm   <IMG SRC="/icons/f.gif"> a fortran program
C pgm         <IMG SRC="/icons/c.gif"> a    c    program
Pascal pgm    <IMG SRC="/icons/p.gif"> a  pascal program
Please see /home/httpd/icons/README for information on many-many more available icons. Notice the tag references /icons/filename.gif, this is relative to the httpd-server's "HOME", which is /home/httpd, with the 'icons' subdirectory below. With the student "web-page-home" under the 'html' subdirectory.


Referencing a list of other .html documents

My hobby is astronomy, you can view some of the recent research announcement circulars from this
list.

If you are interested in a brief Astronomy lesson, click here.

Still want to know more..., click here.

For some information on the Solar System, click here. Habla espanol?, aqui.


Information on inclusion of picture files

Html has a convenient and powerful feature of direct referencing of other html documents or files of many other types, directly in the document. The browser will handle the file according to the file type and html specifications. The generic term for a file designation is a URL or Uniform Resource Locators. The specification tells the browser how to communicate with the http server to get the file.

Picture files(.gif and .jpg) can be referenced for inclusion

M45  
     is a small picture of M45, 
     the Pleiades Star Cluster in Taurus.
     A larger and more detailed image of M45 can be viewed 
     here.

M51  
     is a small picture of M51, 
     the WhirlPool Galaxy in Canes Venatici.
     A larger and more detailed image of M51 can be viewed 
     here.

M31  
     is a small picture of M31, 
     the Andromeda Galaxy.
     A larger and more detailed image of M31 can be viewed 
     here.

M57  
     is a small picture of M57, 
     the Ring Nebulae in Lyra.
     A larger and more detailed image of M57 can be viewed 
     here.

M104 
     is a small picture of M104, 
     the Sombrero Galaxy at the Corvus-Virgo border.
     A larger and more detailed image of M104 can be viewed 
     here.
Note the different alignment of the text, next to each small picture.

Return to the tutorial contents.

The above examples should serve our purposes in the unix class. However, if you are interested in more html (for use beyond this course), you can find a nice beginner html tutorial, with additional links and references, here.