|
|
|
DHTML introduction
|
|
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.
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: <> 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: <> <> <> <> < All H5 heading on that page would then look like this: Cascading style sheetsIf 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: <> <> <> <> < 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: < 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. <> And to assign that to a P tag we go like this: < 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:
Document Object Model
DOM stands for Document Object Model and is the link between scripting and elements on a page. I will not say that much about the DOM here cause I have already made a couple of tutorials that sort of cover the subject. Check the DOM tutorial and for info about the 5.x browsers and the new W3C DOM check the 5th generation tutorial. Here are some other places where you can read more about the DOM:
Scripting
DHTML can be used with VBScript or Javascript. But I will only talk about JavaScript here since that's the most used and most widely supported language. Javascript is a scripting language (like a simple programming language (Perl, C++ et. cetera)) Javascript is the part of DHTML that actually does something. It's Javascript that makes the document fly around, it's Javascript that changes the font size or any other CSS property on a element. So JavaScript plays a really big role in DHTML and it's really important to know JavaScript very well! I could have written thousands of lines about JavaScript but it would just take to long. If you don't know JavaScript and want to learn it browse around the links below. To make a standard that all browsers could support ECMA have made ECMAScript. The most current version of Javascript is Javascript1.5 and that version is ECMAScript compatible. Here are some other places where you can read more about JavaScript:
Summing it all up
So to sum it up we can really say that: You use HTML to get the element into the page, CSS to specify the look of the element, JavaScript to manipulate the element and JavaScript uses the DOM to reach the element to manipulate. Sounds logic doesn't it? Well that's it. Now you should (hopefully) understand what DHTML really is. If you still sounds kind of blurry try this DHTML introduction from WebMonkey. Good luck!Copyright ©2000-2002 DHTMLCentral.com, Bratta Communications. All rights reserved. |