HTML describes the structure of document, not the layout. Most documents contain at least:
And many also contain:
Electronic documents also contain a header which contains information used for the communication between the client and the server.
Each part of document is referred to as an element. In HTML, these elements are identified through the use of tags.
The user-agent (or client) is responsible for interpreting the tags and displaying the associated information in an organized and essentially standard fashion. Unfortunately, numerous differences in interpretation exist.
All HTML tags are identified by enclosing them in angle brackets "<" and ">". Information within these brackets is for use by the browser and is not displayed in the document window.
Many HTML tags exist in pairs: a start tag, followed by the contents of the specific structure, then an end tag. For example:
<HTML>... an HTML document goes here! ...
</HTML>
The start tag identifies the specific structure element, and the end tag contains the same name for proper matching of tags preceded by a slash "/", which denotes the end of the structure.
Most tags which do not identify structure elements or affect a specific range, do not have an end tag.
Any tags not supported by a browser are simply ignored. This means the browser will not "crash" the users system when it encounters some unknown element, but it also means that the contents of the tag will be treated differently than intended.
Comments can be added to HTML documents using the following tags:
<!-- place comments here! -->
Any text placed between these tags will not appear in the document window when the document is displayed.
This is Heading Level 1
<H1>...</H1>
This is Heading Level 2
<H2>...</H2>
This is Heading Level 3
<H3>...</H3>
This is Heading Level 4
<H4>...</H4>
This is Heading Level 5
<H5>...</H5>
This is Heading Level 6
<H6>...</H6>
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
<HEAD>
<TITLE> Place Your Title Here! </TITLE>
</HEAD>
<BODY>
<H1> Place Your Level 1 Heading Here! </H1>
<P>
Paragraph number one starts here.
<P>
Paragraph two starts here.
</BODY>
</HTML>
Paragraph number one starts here.
Paragraph two starts here.
These tags are used to identify the portion of a document which make up the
contents of an unordered list.
<UL>...</UL>
Individual list items are identified with the <LI> tag.
The syntax for a list is:
<UL> <LI> Item One <LI> Item Two <LI> Item Three <LI> etc... </UL>
Ordered Lists are created the same way using these tags.
<OL>...</OL>
Individual list items are also identified with the <LI> tag.
The syntax for a list is:
<OL> <LI> Item One <LI> Item Two <LI> Item Three <LI> etc... </OL>
Lists of each different type may be nested inside of each other, creating complex lists for indexes, menus, etc.
Each subsequent level is a list item of the parent list, and is created as follows:
<OL>
<LI> This is Item 1 of the main list
<UL>
<LI> This is Item 1 of the first level sub list
<LI> This is Item 2 of the first level sub list
</UL>
<LI> This is Item 2 of the main list
</OL>
Here is how the nested list looks.
When setting up a glossary or other document which contains definitions of terms, the definition list tags are used.
<DL> <DT> HTML <DD> Hypertext Markup Language <DT> VRML <DD> Virtual Reality Modeling Language <DT> SGML <DD> Standard Generalized Markup Language </DL>
When setting up a glossary or other document which contains definitions of terms, the definition list tags are used.
Two other list types in HTML are: directory and menu lists, identified by:.
<DIR>...</DIR> and <MENU>...</MENU>
Syntax:
<DIR> |<MENU> <LI> This | <LI> This <LI> is a | <LI> is a <LI> directory | <LI> menu <LI> list | <LI> list </DIR> |</MENU>
Here is a sample of <DIR> list and a <MENU> list.
|
|
Here are the four list types. Notice that the list element forces a blank line to be displayed at the end of the list to provide automaticd separation from other elements on the page.
|
|
|
|
Each of the four list types accept an Attribute called COMPACT,
which, if supported by the browser, reduces the spacing between each of the list
elements, if possible. This is not supported by all browsers, consequently it is
rarely used.
Insert a list or two into your first web page to see how it looks. You don't need
to place paragraph tags (<P>...</P>) around
your list elements, because it is recognized as another type of block structure
and will insert its own spacing!
We have looked at:
Addresses are identified using the tags: <ADDRESS>...</ADDRESS>.
Browsers generally display the content of this element in a different text style to
make it stand out.
Here's an example:
<ADDRESS>
Bill Cassidy,
St. Lawrence College,
Kingston, Ontario
<P>
The Paragraph element may be used within the Address element to
separate items, such as multiple addresses or additional contact
information.
</P>
</ADDRESS>
Here's what the example code looks like. Notice that the 3 address lines are all displayed on one line.
Bill Cassidy, St. Lawrence College, Kingston, OntarioThe Paragraph element may be used within the Address element to separate items, such as multiple addresses or additional contact information.
The line break element (<BR>) is used to force the browser to
insert a line feed at the point you desire, rather than leaving line spacing totally
up to the browser. This element is extremely useful for providing some control over
document layout, and may be used within all the block structure elements.
Here's how it is used to format the address from the previous example.
<ADDRESS>
Bill Cassidy, <BR>
St. Lawrence College, <BR>
Kingston, Ontario <BR>
<P>
The Paragraph element may be used within the Address element to
separate items, such as multiple addresses or additional contact
information.
</P>
</ADDRESS>
And here is how it displays.
Bill Cassidy,The Paragraph element may be used within the Address element to separate items, such as multiple addresses or additional contact information.
The Blockquotes Element is used for displaying large sections of quoted material, such as a paragraph from a book. This Element displays the contents differently than normal paragraphs, often by indenting the selection at both the left and right margins.
Syntax for blockquotes:
<BLOCKQUOTE>
HTML user agents may support other document types.
In particular, they may support other formal public
identifiers, or other document types altogether.
They may support an internal declaration subset with
supplemental entity, element, and other markup
declarations.
</BLOCKQUOTE>
Blockquotes example:
HTML user agents may support other document types. In particular, they may support other formal public identifiers, or other document types altogether. They may support an internal declaration subset with supplemental entity, element, and other markup declarations.
The Preformatted Text Element provides a means for you to have almost complete control over layout, but with a reduction in the amount character styling. The character formatting elements we will look at may be used within the Preformatted Text Element, but the results are rarely the same as when used in "normal" HTML.
Syntax for Preformatted Text:
<PRE> or <PRE WIDTH="70">
The character style is generally a Courier or Roman font and
character spacing is handled the same as in a text editor, such
as Notepad. There is no provision for proportional spacing.
</PRE>
The <PRE> Element has a WIDTH attribute which identifies the width, in characters, of the contents, allowing the browser to select an appropriate font and indentation. This does not appear to be widely supported by browsers and is not often used.
Here is an example without WIDTH specified:
The character style is generally a Courier or Roman font and
character spacing is handled the same as in a text editor, such
as Notepad. There is no provision for proportional spacing.
Here is an example with WIDTH specified:
The character style is generally a Courier or Roman font and
character spacing is handled the same as in a text editor, such
as Notepad. There is no provision for proportional spacing.