Learn HTML 101
This page is dedicated to helping people learn HTML and write their own homepages for the world wide web. Through it you can access most of the tools and tricks you need to get going. Please note that this page is done on a volunteer basis (thanks for all those correcting my spelling which stinks!). Unfortunately I can’t devote as much time to it as I would like. If you notice a link has changed, please let me know. HTML or Hypertext Markup Language is used to create webpages for websites on the World Wide Web. Once you have seen a bit of what is out there you may want to contribute a page of your own. HTML is a relatively simple language that utilizes elements, such as TAGS to create the desired features of the page.
TAGS are used to translate the text so that a viewer can understand what to display. A viewer (a.k.a. browser) can be Netscape, Mosaic, Cello, or whatever you use to view the World Wide Web. Many HTML programs are available and they often include pre-written tags in the form of radio buttons. Below you will find links to various HTML editors. Tags are also used to link various pages together. Each time you click on the blue (in Netscape) text of a page a tag is called upon to address and link to another place. Tags are the basis for the HTML language are fairly easy to understand.
There are many sites that offer good introductions to HTML, they can be found on search engines. Here is a very basic HTML program to give you a better idea of the language:
<HTML>
<HEAD>
<TITLE> Sample HTML Page </TITLE>
</HEAD>
<BODY>
<H1> This is a simple page written in HTML </H1>
<HR>
This would be your first paragraph of text.
<P>
This would be your second.
</BODY>
</HTML>
this is what it looks like..
This is a simple page written in HTML
This would be your first paragraph of text.
This would be your second.
As you can see, HTML is not that difficult. There are of course things in HTML that take a bit longer to learn. These include forms and imagemaps, but you don’t need to know them to get started. The sites listed below offer more indepth coverage of HTML and all its aspects. Always remember that HTML is an evolving language (the 3.0 standard is being worked out now) and that different viewers can interpret HTML a bit differently.
HTML reference
The HyperText Markup Language (HTML) is composed of a set of elements that define a document and guide its display. This document presents a concise reference guide to HTML, listing the most commonly used elements from Versions 1 and 2 of HTML, and giving a brief description of those elements.
Users should be aware that HTML is an evolving language, and different World-Wide Web browsers may recognize slightly different sets of HTML elements.
Introduction
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>, or just
text </tag_name><tag_name>
For example:
<title> My Useful Document </title>
and
<a href="argument"> text </a>
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>
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
<isindex>- Specifies that the current document describes a database that can be searched using the index search method appropriate for whatever client is being used to read the document. For example, a Lynx user will use the “s” keyboard command.
<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.
<base href="URL">- Specify the name of the file relative to which partially qualified pathnames in URLs should be interpreted. If not otherwise specified the URL containing the document being displayed is used as the base.
<link rev="RELATIONSHIP" rel="RELATIONSHIP" href="URL">- The link tag allows you to define relationships between the document containing the link tag and the document specified in the “URL”. The
relattribute specifies the relationship between the HTML file and the Uniform Resource Locator (URL). Therevattribute (for “reverse”) specifies the relationship between the URL and the HTML file. For example,<link rev="made" href="URL">indicates that the file maker or owner is described in the document identified by the URL. (Note that link tags are not displayed on the screen as part of the document. They define static relationships, not hypertext links.)
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.
<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. <listing>. . .</listing>- Example computer listing; embedded tags will be ignored, but embedded tabs will work. This is an archaic tag.
<xmp>. . .</xmp>- Similar to
<pre>except no embedded tags will be recognized. <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.
Hyperlinks or Anchors
<a name="anchor_name">. . .</a>- Define a target location in a document
<a href="#anchor_name">. . .</a>- Link to a location in the base document, which is the document containing the anchor tag itself, unless a base tag has been specified.
<a href="URL">. . .</a>- Link to another file or resource
<a href="URL#anchor_name">. . .</a>- Link to a target location in another document
<a href="URL?search_word+search_word">. . .</a>- Send a search string to a server. Different servers may interpret the search string differently. In the case of word-oriented search engines, multiple search words might be specified by separating individual words with a plus sign (+).
An anchor must include a name or href attribute, and may include both. There are several optional attributes, but they are rarely encountered.
The structure of a Uniform Resource Locator (URL) may be expressed as:
- resource_type:additional_information
where the possible resource types include: file, http, news, gopher, telnet, ftp, and wais, among others, and each resource type relates to a specific server type. Since each server performs a unique function, each resource type requires different additional_information. For example http and gopher URLs will have a structure like:
- resource_type://host.domain:port/pathname
The colon followed by an integer TCP port number is optional, and is used when a server is listening on a non-standard port.
Strictly speaking, the anchor_name and
search_word information included in the name and href attributes in the examples above are part of the URL. They are presented as separate entities for simplicity. A more complete description of URLs is presented in http://www.w3.org/hypertext/WWW/Addressing/Addressing.html
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
<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
Physical Styles
<b>. . .</b>- Boldface
<i>. . .</i>- Italics
<u>. . .</u>- Underline
<tt>. . .</tt>- Typewriter font
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.
Entities
&keyword;- Display a particular character identified by a special keyword. For example the entity
&specifies the ampersand ( & ), and the entity<specifies the less than ( < ) character. Note that the semicolon following the keyword is required, and the keyword must be one from the lists presented in: - http://www.w3.org/pub/WWW/MarkUp/html-spec/html-spec_9.html#SEC9.7
&#ascii_equivalent;- Use a character literally. Again note that the semicolon following the ASCII numeric value is required.
HTML Forms Interface
The HTML forms interface allows document creators to define HTML documents containing forms to be filled out by users. When a user fills out the form and presses a button indicating the form should be “submitted,” the information on the form is sent to a server for processing. The server will usually prepare an HTML document using the information supplied by the user and return it to the client for display.
The following tags implement the forms interface:
<form>. . .</form><input><select>. . .</select><option><textarea>. . .</textarea>
The last four tags can only be used within a <form> . . . </form> element.
Define a form
<form> . . . </form>
Defines a form within an HTML document. A document may contain multiple <form> elements, but <form> elements may not be nested. Note that non-form tags can be used within a <form> element. Attributes and their arguments:
action="URL":- The location of the program that will process the form.
method=data_exchange method- The method chosen to exchange data between the client and the program started to process the form: One of
getorpost.postis preferred for most applications.
- Example:
<form action="http://www.cc.ukans.edu/cgi-bin/register" method=post>. . .</form>
Define an input field
<input> (there is no ending tag)
Defines an input field where the user may enter information on the form. Each input field assigns a value to a variable which has a specified name and a specified data type. Attributes and their arguments:
type="variable_type"- Specifies the data type for the variable, where:
type="text"andtype="password"fields accept character datatype="checkbox"fields are either selected or nottype="radio"fields of the same name allow selection of only one of the associated valuestype="submit"defines an action button that sends the completed form to the query servertype="reset"defines a button that resets the form variables to their default valuestype="hidden"defines an invisible input field whose value will be sent along with the other form values when the form is submitted. This is used to pass state information from one script or form to another.type="image"defines an image map within a form and returns the coordinates of a mouse click within the image.
name="textstring"- where
textstringis a symbolic name (not displayed) identifying theinputvariable as in:
<input type="checkbox" name="box1"> value="textstring"- where the meaning of
textstringdepends on the argument fortype.- For
type="text"ortype="password",textstringis the default value for theinputvariable. Password values will not be shown on the user’s form. Anything entered by the user will replace any default value defined with this attribute. - If
type="checkbox"ortype="radio",textstringis the value that will be sent to the server if the checkbox is “checked”. - For
type="reset"ortype="submit",textstringis a label that will appear on the submit or reset button in place of the words “submit” and “reset“.
- For
checked- No arguments. For
type="checkbox"ortype="radio", ifcheckedis present theinputfield is “checked” by default. size="display_width"- where
display_widthis an integer value representing the number of characters displayed for thetype="text"ortype="password" inputfield. maxlength="string_length"- where
string_lengthis the maximum number of characters allowed withintype="text"ortype="password"variable values. This attribute is only valid for single line"text"or"password"fields.
Define a select field
<select> . . . </select>
Defines and displays a set of optional list items from which the user can select one or more items. This element requires an <option> element for each item in the list. Attributes and their arguments:
name="textstring"- where
textstringis the symbolic identifier for theselectfield variable. size="list_length"- where
list_lengthis an integer value representing the number of<option>items that will be displayed at one time. multiple- No arguments. If present, the
multipleattribute allows selection of more than one<option>value.
Define a select field option
<option>
Within the <select> element the <option> tags are used to define the possible values for the select field. If the attribute selected is present then the option value is selected by default. In the following example all three options may be chosen but bananas are selected by default.
<select multiple>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
Define a text area
<textarea> . . . default text . . . </textarea>
Defines a rectangular field where the user may enter text data. If “default text” is present it will be displayed when the field appears. Otherwise the field will be blank. Attributes and their values:
name="textstring"textstringis a symbolic name that identifies the<textarea>variable.rows="num_rows"andcols="numcols"- Both attributes take an integer value which represents the lines and number of characters per line in the
<textarea>to be displayed.
Miscellaneous
<!--text-->- 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
aligncan be one oftop,middle, orbottom. ismap- If
ismapis 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.
BACKGROUNDS & COLORS
The simplest, yet possibly most effective spice to add to a page is a nice background. I very rarely write a page using simple web-page gray as the background color.
- How to do it
<BODY BACKGROUND="filename">is all you need.. It’s nice to also add an ending</BODY>at the end of the file, as well.<BODY BGCOLOR="#RRGGBB">allows you to set the color of the background to something specific.<BODY TEXT="#RRGGBB">sets the color of all normal text within the document.<BODY LINK="#RRGGBB" VLINK="#RRGGBB" ALINK="#RRGGBB">sets the color of all other text in the document. LINK is just a regular, never before visited link, VLINK is a previously viewed link, and ALINK is an active link (“The color when you click on it”). Any or all of these three options can be omitted, of course.RR, GG, and BB are two-digit hex numbers (00-FF) representing the amount of red, green, and blue in a particular color. Since it would be too difficult to have a good defined list of color names, hex numbers are used as well, so you get to invent your own colors. “#FFFFFF” represents white and “#000000” is black.
Can’t get background colors working?
If you can’t get the background color working, make sure you’re following “The Background Rule.” This rule states that your page must have the following format or backgrounds may not work:
<HTML>
<HEAD>
<TITLE>My Title</TITLE>
Any other heading information goes here
</HEAD>
<BODY (and background/bgcolor info if you wish)>
The document body goes here...
</BODY>
</HTML>
As long as all of those tags are in the right place, you’ll be fine.
Thanks for visiting.
How to Tip – 101
The following list suggests what are generally considered to be adequate amounts on how to tip various people for services rendered.
It should be kept in mind that tips are a way of expressing satisfaction.
Larger tips should be left for those who provide extraordinarily good service; smaller tips or no tip at all should be left when service is poor.
This table is by no means a RULE. Use your own judgment when you think amounts should be adjusted.
Again, these are just suggestions.
