Research Experience for Undergraduates and Teachers 

Title

   
Wayne State
WSU Pipeline
College of Sciences
Physics Department
NSF

Basic Introduction to HTML 

by Claude Pruneau

HTML stands for Hyper Text Mark Up language. It was invented for the formatting of online documents and to be used by web browsers to display documents. Background and historical perspective about HTML can be found elsewhere.

The purpose of this Basic Intro to HTML is to provide a simple example you can build on to elaborate a presentation of your project goals and results to be shown and eventually posted on the Wayne State Physics REU/RET web site.

File Naming convention

Typically, web documents use a naming convention to identify the type of files being used or transfered on the internet. Usually, HTML documents have a name followed by the extension ".html" or ".htm".  Image files will have name ending with extensions such as ".gif", "jpg", "mpg", etc.  It is recommended you  follow these naming conventions in order to minimize confusion and problems while creating your web documents. It is also recommended that the actual file name be as descriptive of their content as possible in order to facilitate ulterior work on these files.

Example of recommended names for html documents

  • mariaProject.html
  • joesPresentation.htm
  • claudeSummerReport.html

Example of less desirable names for html documents

  • a.html
  • myFile.htm
  • claudeProject.

File Location

On Unix and Linux computer systems, not all files on a disk are readily available to browse from the web. Typically, computer systems are setup so files that belong to individuals, such as yours, will be accessible for web browsing only if they are located in a special directory under the individual root or default account. At Wayne, people's account name are usually  the person's last name.  Mine is "pruneau" corresponding indeed to my last name - which incidentally is the French for "plum".  The name of the special directory where individuals  are expected to locate their web files is "public_html".  So, on your account, the first thing for you to do is to create such a directory. You can do so by  following recipe.  In the annotated code below, actual commands are shown in black and comments in red.

cd                # change directory to your root directory 
mkdir public_html # create the public_html directory 
cd public_html    # change directory to the newly 
                  # created public_html directory 
ls                # list all the files in the public_html directory

Additionally, on most system, it is assumed that a file named "index.html" is the point of entry in a directory. That is, if only a directory name is provided by a person browsing the web, the web server will search for a file called "index.html" or "index.htm" and return that file to be displayed if it exists. So it is advisable to first create such a file in your public_html directory. 

 To create such a file, invoke a text editor such as emacs or xemacs as follows

cd                   # change directory to your root directory
cd public_html       # change directory to the newly created 
                     # public_html directory
xemacs index.html    # start emacs editor, create index.html 
                     # file if it does not 
                     # already exist, and proceed to edit it.

The presence of a valid html file called index.html in your directory public_html will allow web users to load your file by typing the address of the computer where your file is located (in this case we will assume the name of the computer is rhic23.physics.wayne.edu)  followed by the your name and the file name index.html as follows

http://rhic23.physics.wayne.edu/~pruneau/index.html

In the above expression, http stands for hyper text transfer protocol, which is the protocol (or recipe) that will be used by your browser to transfer the file from the rhic23 server. rhic23.physics.wayne.edu is the full internet address of the computer. "~pruneau" indicates that one wishes to access files from account called "pruneau" - note the tilda character "~". 

Your First HTML File

For starters, you could type in the following html code  into a file named  "index.html". The code is explained next.

<html> <title> Joe's Web Page</title>
<body> <h1>Joe's Web Page</h1>
Welcome to my web site.
Click <a href="joesPresentation.html"> here </a> to access my REU presentation.
The picture below shows the STAR detector.<img src="http://rhic23.physics.wayne.edu/REU/images/starplatforms.gif">

</body>
</html>

The above code, when viewed on a web browser,  will generate an output that looks like the following:

Joe's Web Page

Welcome to my web site. Click here to access my REU presentation.

 

As you already know, it suffices the click the mouse on the word "here" to access the document it points to, in this case, the server will attempt to load a document called "joesPresentation.html".

Now for a bit of explanation about the above code...

HTML uses keywords to identify specific formatting and coding operations. For example, the keyword <html> signifies that the text that follow is an html document. Note however there is a keyword </html> at the end of the file. This indicates the end of the html document. So, the <html> keyword begins an html document, and the keyword </html> concludes it. In general, in HTML language, keywords are paired in this fashion: one begins a formatting action, the other terminates it.  In the above example, <title> precedes the title given to the page and </title> follows it. Likewise, the keyword <h1> is used to begin a phrase to be displayed as a header (size 1) and </h1> ends the phrase.

Keywords such as <html>, <title>, <h1> only have formatting implications while some keywords such as <a href="  "> bring about some actions. The <a> keyword is referred as an anchor. It is used to identify active text, that is text which when clicked on will make the browser load a new page, i.e. the page identified by the hypertext reference e.g. href="joesPresentation.html". Here, it is assumed that the file joesPresentation.html exists in the same directory as the index.html file. If so, it will be served, i.e. shown on the user's browser when the user clicks on the word "here" imbeded between <a> and </a>.

The example above introduced keywords most frequently used. The table below lists other html keywords frequently used.

Keyword Interpretation
<html> </html> Begin, end of html document
<title></title> Document title
<h1></h1> Header size 1
<h2></h2> Header size 2 (smaller than size 1)
<h3></h3> Header size 3 (smaller than size 2)
<h4></h4> Header size 4( smaller than size 3)
<p></p> Paragraph delimiter
<a href=""></a> Link identifier
<img> <img> Image identifier/loader
<table></table> Table formatting
 

For further documentation on these keywords and others available in HTML please consult html books or one of the following web sites.

Introduction To HTML and URLs: Great place to start learning how to create and link web pages
Doctor HTML: Excellent way to check web pages for errors
Web Pages that Suck: Learn good web page design by looking at bad design. Great site for learning what not to do and why. Also many links and hints on good design.

 

Send mail to pruneau@physics.wayne.edu
with questions or comments about this web site
Last modified: September 26, 2007