The Different Kinds of HTML

by scottstanton
on March 27, 2012

Creating a website can be a bit of a daunting task.  If you’re eager to build your own website but find all this coding talk to make your head hurt, you may want to look in to an online website builder like www.wix.com.  Wix is unveiling a free HTML website builder on the 26th of March, 2012 that’s as easy to use as dragging and dropping.  Wix has already gained widespread popularity for their drag-and-drop Flash website builder that allows users to easily build complex, powerful, and stunning websites.  Whether you’re looking for an easy way to put together site with a full screen background, or display your portfolio online, Wix is certainly worth checking out.  It doesn’t matter if you’re a seasoned web developer or an ambitious do it yourself-er, creating a free HTML website or SEO friendly Flash website has never been easier.

Most anyone who has been in the web design industry for more than a few minutes knows what HTML is, or has at least heard of it.  It’s a language that people throw around a bit loosely these days and some people might not even realize there are slight variations of HTML, such as XHTML, CHTML, and DHTML

C-HTML, or Compact Hyper Text Markup Language, was a language used on first generation smart phones and PDAs.  C-HTML was a simpler form of HTML required to work with devices containing hardware restrictions like no keyboard or mouse, low memory, and low powered CPUs with little to no storage.

XHTML is a less flexible version of HTML, which is an application of the Standard Generalized Markup Language, or SGML.  However, XHTML is an application of XML, which is a more restricted version of SGML and are able to be parsed with XML.  HTML uses a HTML-specific parser that is much less restrictive than the XML version.

There are a few syntax differences between HTML and XHTML.  XML requires that all elements are closed, either by a self closing tag or a separate closing tag that follows the content within the element.  For example <img src=”image.jpg” /> would be a self closing tag and <h1>This is my header</h2> would be a separate closing tag.  XML is also case-sensitive when it comes to the names of attributes and elements, unlike HTML.  Along with syntactical differences there are also behavioral differences, most notably being that an incorrect tag structure in XML will cause the processing of a document to abort.

Then there’s DHTML, or Dynamic Hyper Text Markup Language.  DHTML is like the fruit cake of HTML languages, it incorporates a little bit of everything.  DHTML combines the static language of HTML with an end user language like JavaScript, a style defining language like CSS, and the Document Object Model (DOM).  Quite simply, DHTML allows you to take an otherwise static web page and alter the look of the page after it has been fully loaded.

DHTML allows a developer to embed a news ticker in their site that will automatically keep itself up to date with the most recent news headlines without requiring the viewer to refresh the page.  You may also use Dynamic HTML in the navigation of your site to create drop-down menus and rollover buttons.

Below is an example of how to create this very basic drop-down menu with DHTML

<html>

<head>

<style>

body{font-family:arial;}

table{font-size:80%;background:black}

a{color:black;text-decoration:none;font:bold}

a:hover{color:#fff}

td.menu{background:#33cccc}

table.menu

{

font-size:100%;

position:absolute;

visibility:hidden;

}

</style>

<script type=”text/javascript”>

function showmenu(elmnt)

{

document.getElementById(elmnt).style.visibility=”visible”;

}

function hidemenu(elmnt)

{

document.getElementById(elmnt).style.visibility=”hidden”;

}

</script>

</head>

 

<body>

<h3>Drop down menu</h3>

<table width=”100%”>

<tr bgcolor=”#FF8080″>

<td onmouseover=”showmenu(‘contact’)” onmouseout=”hidemenu(‘contact’)”>

<a href=”#”>Contact</a><br />

<table id=”contact” width=”120″>

<tr><td class=”menu”><a href=”#”>Phone</a></td></tr>

<tr><td class=”menu”><a href=”#”>Email</a></td></tr>

<tr><td class=”menu”><a href=”#”>Mailing Address</a></td></tr>

<tr><td class=”menu”><a href=”#”>Office Address</a></td></tr>

</table>

</td>

</table>

</body>

 

</html>

About scottstanton

Scott Stanton has spent the past decade working nights developing HTML websites as a freelance web designer, only to write about the latest HTML website design trends at his day job as a freelance writer. Scott is a regular contributor for Wix.com and you can hang on his every word @TheScottStanton and on Google+

Top