Complete HTML (Hyper Text Markup Language) Code

HTM is sometimes used as a short form of the file name suffix for an HTML file. For example, the file for our definition of computer might be named "computer.htm" instead of "computer.html". The main advantage is that it's one character shorter. The disadvantage is that it's not quite as easy to recognize as an HTML file. Prior to wide-spread use of Windows 95 and later systems, there was another reason to prefer the three-character suffix rather than the four-character. Certain operating systems, such as Windows 3.1 and OS/2 used the original DOS operating system naming conventions, in which names were limited to eight characters and suffixes to three characters. So it was safer to create file names and suffixes that met this "8.3" limitation. (For example, if you created an HTML page coding hypertext links to your other pages based on a four-character suffix (".html") system and then moved that page to a Web server that only allowed a three-character suffix, your file name suffixes would all be shortened and your links would no longer work. And if you created links with the three-character suffix and moved it to a server that always required four-character suffixes for HTML files, you would be in trouble again.)

Today, the operating systems most people are likely to create HTML pages on and serve them from are all operating systems (such as Windows 95/98/NT, Mac OS, and UNIX-based systems) that support longer file names and suffixes. So if you were building a new Web site, you would most likely use the four-character html suffix for clarity (unless you preferred the brevity of the three-character suffix) because you could know that you could safely use either suffix - as long as the suffixes in your links and your file names matched.

However, if you have an existing Web site that started out using the three-character suffix, you may prefer to leave everything as it is. If you do move to a server that requires a four-character suffix for server consistency, you could do a search-and-replace at that time.

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language) is the set of "markup" symbols or codes inserted in a file intended for display on a World Wide Web browser. The markup tells the Web browser how to display a Web page's words and images for the user. The individual markup codes are referred to as elements (but many people also refer to them as tags).

HTML is a standard recommended by the World Wide Web Consortium (W3C) and adhered to by the major browsers, Microsoft's Internet Explorer and Netscape's Navigator, which also provide some additional non-standard codes. The current version of HTML is HTML 4. However, both Internet Explorer and Netscape implement some features differently and provide non-standard extensions. Web developers using the more advanced features of HTML 4 may have to design pages for both browsers and send out the appropriate version to a user. Significant features in HTML 4 are sometimes described in general as dynamic HTML. What is sometimes referred to as HTML 5 is an extensible form of HTML called XHTML.

HTML 4.0

HTML 4.0 is the most recent version of the Hypertext Markup Language (HTML), the basic way that Web pages are described for presentation on your Web browser. HTML 4.0 is the official "recommendation" of the World Wide Web Consortium (W3C), the group that suggests industry standards for the Web.

Among the new features in HTML 4.0 are:

• Cascading style sheets, the ability to control Web page content at multiple levels

• The ability to create richer forms

• Support for frames (which is already supported by the major browsers)

• Enhancements for tables that make it possible to use captions to provide table content for Braille or speech users

• The capability to manage pages so that they can be distributed in different languages

In practice, the two leading browsers, Netscape and Internet Explorer, support HTML 4.0 somewhat differently or offer non-standard approaches. These require Web developers that use more advanced features to create pages for each browser and send the appropriate pages to the user.

XHTML(Extensible Hypertext Markup Language)  HTML 5.0

As the World Wide Web Consortium (W3C) describes it, XHTML (Extensible Hypertext Markup Language) is "a reformulation of HTML 4 as an application of the Extensible Markup Language (XML)." For readers unacquainted with either term, HTML is the set of codes (that's the "markup language") that a writer puts into a document to make it displayable on the World Wide Web. HTML 4 is the current version of it. XML is a structured set of rules for how one might define any kind of data to be shared on the Web. It's called an "extensible" markup language because anyone can invent a particular set of markup for a particular purpose and as long as everyone uses it (the writer and an application program at the receiver's end), it can be adapted and used for many purposes - including, as it happens, describing the appearance of a Web page. That being the case, it seemed desirable to reframe HTML in terms of XML. The result is XHTML, a particular application of XML for "expressing" Web pages.

XHTML is, in fact, the follow-on version of HTML 4. You could think of it as HTML 5, except that it is called XHTML 1.0. In XHTML, all HTML 4 markup tags and attributes (the language of HTML) will continue to be supported. Unlike HTML, however, XHTML can be extended by anyone that uses it. New tags and attributes can be defined and added to those that already exist, making possible new ways to embed content and programming in a Web page. In appearance, an XHTML file looks like a somewhat more elaborate HTML file.

Advantages

To quote the W3C again, the advantages are "extensibility and portability."

Extensibility means that as new ideas for Web communication and presentation emerge, they can be implemented without having to wait for the next major version of HTML and browser support. New tags or attributes can be defined to express the new possibilities and, assuming some program at the receiving end can understand and act on them, new things may happen on your Web page that never happened before. Specific sets of extensions for XHTML are planned for mathematical expressions, vector graphics, and multimedia applications.

If extensibility is likely to lead to more complicated pages and larger programs, the portability advantage means that Web pages can now be made simpler than they were before so that small devices can handle them. This is important for mobile devices and possibly household devices that contain microprocessors with embedded programming and smaller memories. XHTML defines several levels of possible markup complexity and each document states its level of complexity at the beginning. Programs in microdevices might expect XHTML-coded files that state the simplest level of complexity so that they could be handled by a small program and memory.

Differences and Distinctive Features

You can find out more by reading the specification and tutorials, but here are some distinctive features of XHTML and differences between HTML 4:

• XHTML requires strict adherence to coding rules. Notably, it requires that you use closing as well as opening tags (this is known as well-formed syntax) and that all tags be in lower case. HTML was much less rigorous about notation and browsers tended to be even more forgiving.

• This means that XHTML files will tend to be "busier" than HTML. However, they won't necessarily be harder to read because rigor may force more order in coding. In addition, the major editing and file creation tools will probably lay out pages for easier readability.

• XHTML would seem to encourage a more structured and conceptual way of thinking about content and, combined with style sheets, a more creative way of displaying it.

•  XHTML will make it easier for people to dream up and add new tags (and develop browsers or other applications that support them).

The first XHTML specification is currently in the W3C Working Draft stage.

W3C (World Wide Web Consortium)

The World Wide Web Consortium (W3C) describes itself as follows:

"The World Wide Web Consortium exists to realize the full potential of the Web.

The W3C is an industry consortium which seeks to promote standards for the evolution of the Web and interoperability between WWW products by producing specifications and reference software. Although W3C is funded by industrial members, it is vendor-neutral, and its products are freely available to all.

The Consortium is international; jointly hosted by the MIT Laboratory for Computer Science in the United States and in Europe by INRIA who provide both local support and performing core development. The W3C was initially established in collaboration with CERN, where the Web originated, and with support from DARPA and the European Commission."

Organizations may apply for membership to the Consortium; individual membership isn't offered. The W3C has taken over what was formerly called the CERN httpd or Web server. You'll find some useful information at the W3C Web site (http://www.w3.org).  

Complete Tags Reference of

HyperText Markup Language (HTML)

Basic Tags

<html></html>
Creates an HTML document

<head></head>
Sets off the title and other information that isn't displayed on the Web page itself <body></body>
Sets off the visible portion of the document

Header Tags

<title></title>
Puts the name of the document in the title bar

 Body Attributes

<body bgcolor=?> Sets the background color, using name or hex value

<body text=?> Sets the text color, using name or hex value

<body link=?> Sets the color of links, using name or hex value

<body vlink=?> Sets the color of followed links, using name or hex value

<body alink=?> Sets the color of links on click

Text Tags

<pre></pre>
Creates preformatted text

<h1></h1>
Creates the largest headline

<h6></h6>
Creates the smallest headline

<b></b>
Creates bold text

<i></i>
Creates italic text

<tt></tt>
Creates teletype, or typewriter-style text

<cite></cite>
Creates a citation, usually italic

<em></em>
Emphasizes a word (with italic or bold)

<strong></strong>
Emphasizes a word (with italic or bold)

<font size=?></font>
Sets size of font, from 1 to 7)

<font color=?></font>
Sets font color, using name or hex value

 Formatting

<p></p>
Creates a new paragraph

 <p align=?>
Aligns a paragraph to the left, right, or center

 <br>
Inserts a line break

<blockquote> </blockquote>
ndents text from both sides

<dl></dl>
Creates a definition list

<dt>
Precedes each definition term

<dd>
Precedes each definition

<ol></ol>
Creates a numbered list

<li></li>
Precedes each list item, and adds a number

<ul></ul>
Creates a bulleted list

<div align=?>
A generic tag used to format large blocks of HTML, also used for stylesheets

Graphical Elements

<img src="name">
Adds an image

<img src="name" align=?>
Aligns an image: left, right, center; bottom, top, middle

<img src="name" border=?>
Sets size of border around an image

<hr>
Inserts a horizontal rule

<hr size=?>
Sets size (height) of rule

<hr width=?>
Sets width of rule, in percentage or absolute value

<hr noshade>
Creates a rule without a shadow

Links

<a href="URL"></a>
Creates a hyperlink

<a href="mailto:EMAIL"></a>
Creates a mailto link

<a name="NAME"></a>
Creates a target location within a document

<a href="#NAME"></a>
Links to that target location from elsewhere in the document

Tables

<table></table>
Creates a table

<tr></tr>
Sets off each row in a table

<td></td>
Sets off each cell in a row

<th></th>
Sets off the table header (a normal cell with bold, centered text)

Table Attributes

<table border=#>
Sets width of border around table cells

<table cellspacing=#>
Sets amount of space between table cells

<table cellpadding=#>
Sets amount of space between a cell's border and its contents

<table width=# or %>
Sets width of table - in pixels or as a percentage of document width

<tr align=?> or <td align=?>
Sets alignment for cell(s) (left, center, or right)

<tr valign=?> or <td valign=?>
Sets vertical alignment for cell(s) (top, middle, or bottom)

<td colspan=#>
Sets number of columns a cell should span

<td rowspan=#>
Sets number of rows a cell should span (default=1)

<td nowrap>
Prevents the lines within a cell from being broken to fit

Frames

<frameset></frameset>
tag in a frames document; can also be nested in other framesets

<frameset rows="value,value">
Defines the rows within a frameset, using number in pixels, or percentage of w idth

<frameset cols="value,value">
Defines the columns within a frameset, using number in pixels, or percentage of width

<frame>
Defines a single frame - or region - within a frameset

<noframes></noframes>
Defines what will appear on browsers that don't support frames

 
Frames Attributes

<frame src="URL">
Specifies which HTML document should be displayed

<frame name="name">
Names the frame, or region, so it may be targeted by other frames

<frame marginwidth=#>
Defines the left and right margins for the frame; must be equal to or greater than 1

<frame marginheight=#>
Defines the top and bottom margins for the frame; must be equal to or greater than 1

<frame scrolling=VALUE>
Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto. " The default, as in ordinary documents, is auto.

<frame noresize>
Prevents the user from resizing a frame

Forms

For functional forms, you'll have to run a CGI script. The HTML just creates the appearance of a form.

<form></form>
Creates all forms

<select multiple name="NAME" size=?></select>
Creates a scrolling menu. Size sets the number of menu items visible before yo u need to scroll.

<option>
Sets off each menu item

<select name="NAME"></select>
Creates a pulldown menu

 <option>
Sets off each menu item

<textarea name="NAME" cols=40 rows=8></textarea>
Creates a text box area. Columns set the width; rows set the height.

<input type="checkbox" name="NAME">
Creates a checkbox. Text follows tag.

<input type="radio" name="NAME" value="x">
Creates a radio button. Text follows tag

<input type=text name="foo" size=20>
Creates a one-line text area. Size sets length, in characters.

<input type="submit" value="NAME">
Creates a Submit button

<input type="image" border=0 name="NAME" src="name.gif">
Creates a Submit button using an image

<input type="reset">
Creates a Reset button

Design By Hashim Farooqi