E-mail this pageHTML Basics
HTML (Hypertext Markup Language) is the format used for World Wide Web files. HTML employs a simple text format with tags identifying the various parts (or entities) of documents, and web browsers interpret those tags in rendering the file.
Most software for editing HTML documents currently features a WYSIWYG (what you see is what you get) interface, with the result that you'll rarely actually have to write HTML code. Using FrontPage, you'll find that the HTML view is one that you resort to very rarely. Most of your work will be done without your ever knowing that tags are being added to text in the background. Nonetheless, it's a good idea to understand how HTML tags work and to be able to read an HTML page: you'll find that this knowledge can both strengthen your ability to identify layout problems on web pages and to apply some special formatting functions that FrontPage 2000's interface does not accommodate.
HTML tags generally travel in pairs--one tag identifies the start of an entity, and the other identifies its end. The closing tag is identical to the opening tag, with the addition of a slash immediately before the tag name. The following examples illustrate how tags work:
<h3>heading 3</h3> produces
heading 3
<strong>strong</strong> produces
strong
<em>emphasis</em> produces
emphasis
<p>paragraph</p> produces
paragraph
These tags all work within an HTML document to control aspects of formatting, but it should be stressed here that HTML's roots are not in a document layout language, but in a document description language: SGML. SGML (Standard Generalized Markup Language), an ISO standard since the late 1980s, was designed to allow the creation of documents with tags identifying their logical properties (emphasis, for instance), rather than their physical properties (italics). The assumption of SGML was that formatting conventions may change, but that the logical properties will remain the same. SGML relied on external files called DTDs (Document Type Definitions) to define the various entities in a document, with the result of allowing authors to create and define document-specific tags to identify specific information types: hence, an author could use SGML to tag every date, every weight, every name, every place name, etc. with a tag that could automatically be interpreted by a computer and extracted into a database. All of this is pretty heady stuff, and HTML didn't keep much of it.
What HTML did keep from its SGML ancestor was the basic tagging structure that applies to formatting, and the basic document structure that presupposes that an HTML document will have certain tags in certain places. First, every HTML document is bounded by <html> tags, identifying the document as being an HTML document. In between are a pair of <head> tags, marking off information that identifies the title of the document (between <title> tags) and sometimes also browser directives, stylesheet links, and information about the software that created the file. Following the <head> section of the file is the <body> section of the file. In between the <body> tags is the content of the HTML file. And that's it. In its simplest form, an HTML document looks like this:
<html>
<head>
<title>Hi There<title>
</head>
<body>
<p>Hi</p>
</body>
</html>
Note the position of the <html> tags at the top and bottom of the document, the <head> tags surrounding the <title> tag, and the <body> tags surrounding the document's text, which, in this instance, is simply a single paragraph containing the word "Hi".
Two other tags find frequent use: one, the <img ...> tag, which identifies an embedded image file, and the other, the <a ...> (anchor) tag, which identifies a hyperlink. Their syntax is as follows:
<a href="hi.htm">Link to URL</a>
The words Link to URL are the ones which, when clicked, would lead the user to the page identified by the href reference. The URL is a web page called hi.htm .
The <img> tag is used to identify the position where an image file is to be inserted:
<img src="images/finger.jpg" alt="Finger from the Colossus">
The location of the image is identified in between the quotation marks following src , and a description of the image appears between the quotation marks following the alt tags. The result of this tag on an HTML page would be to display the following:
Note that the sample links illustrated on this page for both the IMG and the A tags involve relative links--links that define the location of the source file relative to the file that refers to them.
That's about enough of Basic HTML to keep you out of trouble for a while: you should now be able to use the View Source option in your web browsers to have a peek at how other people's pages are laid out--and you should be able to understand at least a part of what's being done behind the browser interface.
Comments or questions? Please contact Dr. Peter Friesen , Instructional Technology Coordinator, Plattsburgh State University.