What is Dynamic HTML? E-mail
User Rating: / 3
PoorBest 
Written by Administrator   
Wednesday, 29 August 2007 16:26

What is Dynamic HTML?

In this short tutorial I'll try and explain the basics of DHTML and give you some links to places where you can find more info. Most of the scripts and tutorials on this site does require some basic knowledge of DHTML.

There are some different opinions on what DHTML really is but here it is in a nutshell:

Dynamic HTML is really just CSS (cascading style sheets), DOM (document object model), Scripting (Javascript and VBscript) and HTML. DHTML isn't really a language or a "thing" in itself it's just a mix of those technologies.

That means that to master DHTML you have to know as much as possible about each technology. I'll explain the basics on the next pages. We'll start with CSS. 

Cascading Style Sheets

 

CSS stands for Cascading style sheets and is the part of DHTML that controls the look and placment of the elements on a page. With CSS you can basically set any style property of any element on a HTML page.

One of the biggest advantages with CSS instead of the regular way of changing the look of elements (the font tag and similar) is that you split content from design. You can for instance link a CSS file to all the pages in your site that sets the look of the pages, so if you want to change like the font size of your main text you just change it in the CSS file and all pages are updated!

The syntax for CSS code is basically like this:

<style type="text/css">
  ELEMENT{property1:value1; property:value2} 
</style>

Let me give you a couple of examples:

We always place the style tag inside the head of the document. So a document could look like this:

<html>
<head>
<style type="text/css">
  H5{background-color:blue; color:white; font-size:20px} 
</style>
<body>
  <h5>Cascading style sheets</h5>
</body>
</html>

All H5 heading on that page would then look like this:

Cascading style sheets

If you wanted only that single H5 heading to look like that you could have used a id on the tag and done it like this:

<html>
<head>
<style type="text/css">
  #heading{background-color:blue; color:white; font-size:20px} 
</style>
<body>
  <h5 id="heading">Cascading style sheets</h5>
</body>
</html>

Or you could used something called inline styles which means placing the style directly in the tag. This can be useful in some cases, but as you can see it sort of takes away some of the point with CSS:

<h5 style="background-color:blue; color:white; 
font-size:20px">Cascading style sheets</h5>

If you use inline styles you still have to go into the actual content to change the style for the element.

Now, there's a third way of doing this. If you for instance have 10 P tags on your page and you want 5 of them to be bold, but not the rest of them, then you use a class. You can name a class whatever you want, just remember to have a "." in front of the name.

<style type="text/css">
 .whatever{font-weight:bold}
</style>

And to assign that to a P tag we go like this:

  <p class="whatever">This is bold text!</p>

This is the absolute basic of CSS.

Unfortunately CSS is supported a little differently on the different browsers and is only supported at all on 4.x+ browsers.

Here are some places where you can read more about CSS:

 

  • W3C CSS Specification and info
  • Known CSS problems in Netscape
  • Get Started With Cascading Style Sheets
    		•