The following documentation is meant as a basic primer for the complete beginner who wants a basic understanding of how HTML works and how to write or edit a simple document. It also provides a few links of comprehensive HTML tutorials and resources for those wishing to go further.
I. Introduction
HTML: Hyper Text Markup Language.
Hyper Text Markup Language simply stated, is a simple scripting format which uses a tagging mechanism to layout text and inline images or information in such a way as can be interpretted by an HTTP enabled browser. HTML is non-case sensitive which means you can interchange upper or lower case characters within the code.
Hyper Text literally means active text. This refers to text that does something, in this case provides links to other documents or places within the same document. The original concept was to provide a mechanism in which the user could jump from point to point rather than sticking to the traditional linear flow of documentation.
HTTP: Hyper Text Transfer Protocol. This is the standard by which HTML documents are processed through networks and interpretted through browsers.
II. Hello World!
Please view the code below:
<html>
<head>
<title>Hello World - example 1</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>To see the results click here (results will pop up in a separate browser window!)
First Notice the following:
Head and Body
The HTML document contains two sections: the head and the body.
The head of the document generally contains information which gives the browser special instructions about interpretting the document or gives information about the content and origin of the document. Elements which will be found in the document head include <title>, <script>, <style>, <meta>, etc. (Notice that the information in the title element is placed at the top bar of the browser!)
The body is the document itself. Elements (or tags) within the body give information regarding the layout and placement of the content of the document. There is a wide variety of tags which are found in the body.
III. Hello World in Color: Tags / Elements
Please view the code below:
<html>
<head>
<title>Hello World in Color -example 2</title>
</head>
<body bgcolor="black" link="purple" vlink="lime" text="white">
<p align="center">
<font size=+4><font color="blue">Hello</font> World!</font>
</p>
<p align="center"><b>
<font size=+2 color="red">Don't
<font color="pink">You</font>
<font color="green">Love</font>
<font color="purple">My
<font color="yellow">Colors?</font>
</font>
</b></p>
<p align="left">
<font size=-1><a href="sherpalogo.html">Next</a></font>
</p>
</body>
</html>To see the results click here (results will pop up in a separate browser window!)
Element: a tag, the information inside it, and it's closing counterpart. (i.e. <font color="blue">Hello</font>).
Tag: (i.e. <head>, or </p>) a description included within < >'s which give instruction to the browser about what to do with the information within the opening and closing tag. Tags frequently include attrubutes. In fact, some tags are completely useless without them.
Attribute: a piece of information within a tag that gives specific description to the element. Examples of attributes include size, color, width, align. The attributes are placed in the beginning tag of each element. Each attribute must have a value.
The value of an attribute is set off in quotes. (Often quotation marks are left off numeric values.) Examples of attributes with values are size=+2, color="blue", width=75, align="left". Since elements may be nested, the values are taken first from the innermost tags and then work their way out. (In other words, if text="black" is specified in the body, all the text will be black unless otherwise specified within the body element. Notice in the code above that the text color is listed as white within the body, later on, we set off an entire block as being red and within that block, there are smaller blocks of other colors. The color which show up will be that of the innermost element.)
A concise list of tags and their possible attributes and respective values can be found at http://www.hotwired.com/webmonkey/reference/
II. Graphical Elements and Colors
Please view the code below:
<html>
<head>
<title>Sherpa Rules -example 3</title>
</head>
<body bgcolor="white" text="red" link="#d30111" vlink="red">
<center>
<p>
<img src="sherpalogo.gif" width=190 height=65>
<br><font size=+1><b>SHERPA RULES!!</b></font>
</p>
</center>
</body>
</html>To see the results click here (results will pop up in a separate browser window!)
Graphics
Some tags have no closing counterparts. These tags are generally graphical in nature and are used to imbed an image. (ie: <img src="sherpalogo.gif" width=190 height=65>) Images are technically separate files which are embedded into your HTML. This is why you sometimes see web pages with broken images in them. The designer has deleted or misnamed an image file.
When embedding an image, the most important attribute of the <img> tag is the src attribute. src stands for source. The value of this should be the exact name of your image file (which must be saved in .gif or .jpg/jpeg format).
Colors
HTML allows you to specify colors (for elements such as text and background colors) in two ways. You can give an exact color name verbally (i.e. white), but the shades for this are limited to a limited few. For a list of these colors, visit http://felix.scvnet.com:80/~weber/colortxt.html.
You can also name colors using hexidecimal equivalents for their RGB values (i.e. #d30111). While this allows for precise shade matching, it may be a bit confusing for the novice. While any possible shade can be named this way, the designer must determine an RGB numeric value for the color and then change that value to a hexidecimal equivalent.
III. That's it!
Well now you are ready to write a very basic web page! That's it. If you'd like to improve your skills, there is a list below of resources. I would also recommend using an HTML editor to begin with.
The best reference you can find is the work of others! If you see a web page that really impresses you and you aren't sure how they did something, then view the source!! (In Netscape, click View from the drop down menu at the top, then choose page source. MS Internet Explorer also has a similar function.)
Great HTML References -ONLINE:
Great HTML References -BOOKS:
Other Help
Lecture Notes to Accompany this Document morenotes.doc