HTML


 
   
Intro

 

HTML, Hyper-Text Markup Language, was created with a more general document 'definition' language called, SGML (a meta-language). It was also inspired by notions of 'hypertext' in the 1970s (but stretching back decades before that) and was used with the first 'web browsers', like the early Mosaic. HTML is just plain text, a plain text document. The HTML 'codes' were used to markup portions of text documents so that the browser could display different portions using different fonts and color, and a few other things. And as time went on, many features were added to HTML, particularly a feature called - TABLE - which is still the principle HTML element used for rendering web pages, today, from the most complicated web sites to the least.

HTML was intended as a means to markup documents to emphasize content or order. It wasn't intended as a means of laying out document art. But with the inclusion of - TABLE - and the variety afforded by - FONT - and some other things (e.g. horizontal line tags), it was inevitable that people designing web pages would prefer to include some idea of layout, particularly when people were 'surfing' the web with relatively few, simple and well-understood 'web browsers'. But it was not intended that the layout of the page could be counted on, with every browser. The 'purists', in this, offered, in later years, a different technology, not compatible with earlier browsers (if that ever poses a real problem), called Cascading Style Sheets (CSS). CSS would be used to lay out a document in a visual web browser, taking into consideration margins, and kerning, and padding around elements, and actual absolute placement locations on a page, and much else.

HTML was intended, instead, as a means of marking up a document in the way XML is now used. But, again, the idea was still a bit confused in the early days. Only now, from roughly 2001, or even later, has the idea of separating content from layout been clearly defined in the new and latest standard for HTML, now called XHTML, which is the blending of HTML with the more rigorous forms and purpose of XML.

 
World Wide Web

 

HTML is the very stuff of web pages. And so it might tend to rope in consideration of all things 'web', like search engine placement, add-in technologies (like Flash), java (for those sometimes annoying and browser-crashing applets), browser 'wars' (though it's generally agreed that Microsoft won both with the gradual upgrading to Win95/98 and the crash of Netscape Navigator in version 6), javascript, transfer protocols, right down to network layers and information packets.

 
Tags and Attributes

 

Just taken by itself, HTML is stored, generated, loaded in as a text file, as mentioned, and using the extension of .htm, or .html (other extensions like .asp, or .aspx, and a host of others, indicate that the document contains other types of commands or code, as well, and/or is partly generated by the server, and so on). Within the text of the document, HTML is the collection of 'commands', and 'arguments' (for the commands). Different browsers might handle the same HTML, somewhat differently, depending on the manufacturer of the web browser. Sometimes different browsers can recognize certain 'commands' that others cannot. And the 'commands' are the markup, in the form of - tags, or synonymously, elements. Tags/elements are just these specific words/'commands', which are contained inside greater than and less than symbols, termed - angle brackets. So, for example, the HTML tag, <HR>, is alone sufficient to tell the browser to display a horizontal line, using a number of standard/default parameters/arguments/values, called - attributes. As an example of attribute, <HR SIZE="2">, shows SIZE is used as an attribute of the HR tag, and it tells the browser that the horizontal line is specified as being two dots/pixels thick. It once was the preference was that both tags and attributes would be in purely uppercase letters, with no spaces allowed in either name. With the newer XHTML, all tags/attributes are supposed to be just lowercase. And it is important that all attribute values be placed in double quotes, as seen here.

The last standard for HTML was HTML 4.0, from a few years ago. Prior to that, and even during, the various manufacturers, particularly Microsoft and Netscape (and later AOL/Netscape), introduced a host of their own proprietary tags which the other didn't recognize. You would write, they would prefer, web pages that could display on one, but not nearly as well on the other. Since then, this combination of layout and content has been discouraged with the latest standard for HTML, no longer HTML, but now - XHTML.

 
Empties and Closing Tags

 

HTML attributes are always included in a tag, with an element. Again, the tag begins with an 'open' angle bracket, a 'less than' sign, and ends with a close bracket. So <HR SIZE="2"> has the attribute, SIZE, which are inside the brackets of the HR tag. However, HR is a somewhat unique tag. It's - empty. The tag for displaying a photo or general image - IMG - is also empty. Most HTML tags are not empty. They are, closed.

The tag for a paragraph - P - just the letter, P, while the standard didn't used to insist it be 'closed', practice generally was to close the paragraph tag. So there wouldn't just be the tag, <P>, but after the text of the paragraph, the tag would be closed - </P>. Put a forward slash before the tag name to close it. And most HTML tags have to be closed. Some have referred to these as - containers, tags that have a start and end, as it were, containing text, or other HTML tags, in the middle.

 
Nesting

 

And because most HTML tags have to be, closed, they have stuff in the middle, other tags can be placed inside, as well. More than that, certain tags are only allowed to be inside of certain others. Some are not allowed. And in the case of something like, TABLE, certain tags allow certain others, and then those, in turn, allow more and different tags. But they have to go in order - there's a certain order of nesting.

 
HTML Tables

 

So given all of that, here are some fairly commonly used HTML tags and attributes for TABLE, the principle tag used, even today, in literally laying out web pages across the worldwide web. This, below, of course, even this entire page, uses TABLE for layout:

TAG  ATTRIBUTE  EXAMPLENOTE

TABLEBORDER<TABLE
BORDER="3">
123456

 BORDER="0">
123456

border shown around rectangle of table and between cells
WIDTH<TABLE
WIDTH="60%">
123456

 WIDTH="100%">
123456

60% of full browser window, or table column, and so on, but depends on other alignments (Microsoft (MS) and Netscape (NN) might handle it differently)
CELLPADDING<TABLE
CELLPADDING="8">
123456

 CELLPADDING="0">
123456

number of pixels around the text inside each cell of the table
BGCOLOR<TABLE BGCOLOR="#FFFFF0">
123456
something called 'arctic white', I believe. Either a name like - "red", or "yellow" can be used, or these triple 'tuple' hexadecimal values can be used to specify the color according to an RGB color model - the first FF is for red, the second for green, and the F0 for blue, with each running from 0-FF and the pound sign to indicate that it's a hex value.
Example:

<TABLE CELLPADDING="2" CELLSPACING="3" BORDER="1" WIDTH="100%" BGCOLOR="#FFF7E0">
<TR><TD>1234</TD><TD>1234</TD></TR></TABLE>

 
12341234
introducing a new attribute, cellspacing, this pads around the outside of the cell, 3 pixels, in this case. Cellpadding pads inside the cell, 2 pixels here. The table has a thin border, typically a raised border. And it's 100% - the width of the browser window, or the full table cell (as here).

TR<TABLE> <TR>tag which is used just inside of a table tag. It's the next step down. Indicates the start of a new row in the table - table row. You can use BGCOLOR with TR.

TD<TABLE> <TR> <TD>tag which is used just inside of a TR tag. It's the next step down. Indicates the start of a new 'data' cell, a new column, in the table. You can use BGCOLOR and WIDTH with TD.
ROWSPAN<TABLE> <TR> <TD ROWSPAN="2">
123456
789
span rows
 
It might take a while to explain. But there is this tutorial on how tables can be created.
COLSPAN<TABLE> <TR> <TD COLSPAN="2">
123
456789
span columns
 
Again, there is this tutorial on how tables can be created. Row and column span are basically straightforward, but take a few paragraphs to really explain. The tutorial deals with these, directly.

 
 
 More to read:

The Code Project HTML tutorial
Active Jump HTML tutorial
W3 Schools HTML main page
Lycos WebMonkey HTML main page
(Robin) Cover Pages Archived page of SGML spec for HTML
W3C Overview WWW Consortium overview of HTML
W3C WWW Consortium HTML 4.01 (last of the HTML specs)