DHTML Overview: DHTML Lab 1: Introduction to DHTML NOTE: We assume that you are already familiar with the subject matter contained in the HTML Learning Labs and the Javascript Learning Labs. DHTML! We've all heard a ton of stuff about it in Internet Magazines, on the 'Net, and on TV. But what the heck is it?! Simply put, DHTML (Dynamic HyperText Mark-up Langauge) is the HTML that you already know with some really cool new features. What does the Dynamic part mean? It means that not only can you format your pages in a more precise manner, but you can change them WHILE the viewer is looking at it! DHTML makes many things possible that were very difficult, if not impossible, to do before using previous versions of HTML. "What kinds of things?" you ask? Well, let's start with the basics. Have you ever had trouble making web pages that look good on all browsers? By this I mean have you ever made a page on your computer (let's say you have a PC) and then looked at it on a Macintosh and realized that the spacing was completely different? Well DHTML provides a solution to this problem by allowing you to define precisely where on your web page certain elements will be displayed! Have you ever wanted to move portions of your page around while the user was looking at it? Perhaps you want to place normal text or links directly on top of an image. DHTML lets you do this too! See that moving title at the top of the page? That's using DHTML to move! Click the button below to see something else cool up there. Now scroll back to the top of the page. More Words Did you see "More text" show up above the scrolling text? Try doing that with plain old HTML. Now, have you ever dragged icons around on your desktop? Go back to the top of this page and drag those new words around in the same way. Cool huh? Have you ever had a whole bunch of pages, like 10, that have basically the same formatting? That is, they all have the same text color and size, all of the bold text is the same color, etc.? Well, that's all well and good, but what happens when you want to change the look of all of those pages but keep the same content. Well, with normal HTML you would have to edit each and every page! It could take days! But with DHTML you can change all of this formatting by changing only a few lines of your code...and you can even use DHTML with your existing HTML documents! But, as with anything else, when you gain functionality, you have to give something up...in the case of current DHTML you have to give up platform independence (the ability of a page to look the same on 2 or more different browsers.) That's not to say that you can't make a DHTML document look the same on Netscape and Internet Explorer at the same time, but you need to know the differences in how each browser uses DHTML before you can make such pages. What we are going to cover in these tutorials is not only how to use DHTML, but how to use it in a cross-platform manner. What does Cross Browser mean? The two main browsers in use today are built to read and use certain types of languages and syntax. Some of the parts of these languages and synataxes are contained in BOTH browsers...this is CROSS BROWSER SUPPORT. In these UserActive Learning Labs We're going to learn how to program DHTML for both Internet Explorer and Netscape. We will be learning to do as much CROSS BROWSER programming as we can. I would highly recommend that if you don't already have both Netscape Navigator 4.x or higher and Microsoft Internet Explorer 4.01 or higher, go get it. If you don't you won't be able to try the different ways things work, and you won't be able to make sure you know how to program for both browsers. Either browser will take around 2.5 hours to download, but your web programming expertise is well worth the wait. So, here's what we're going to do. In the rest of this lesson we are going to talk about the vocabulary of DHTML. Then, in the following tutorials you are going to learn-DHTML-by-doing-DHTML! What's this mean? Well if you have ever gone through a UserActive tutorial, then you already know. But for those of you poor deprived souls who haven't gone through one of our tutorials, "learning-by-doing" means that you aren't going to sit there and read a bunch of text. Instead, you're going to read some text, and then try what we're talking about right here in your browser! You'll see what I mean. Vocabulary and Compatibility: Let's talk about the different things that make up DHTML. There are a lot, but each makes a very important contribution to the whole, so pay attention for a few minutes and then you'll get to play. JavaScript, JScript: JavaScipt 1.1 was invented by Netscape Corporation to provide web pages with some interactive programming abilities. With the advent of Internet Explorer 4.0, Microsoft successfully cloned JavaScipt and called it JScript. Now JavaScript 1.1 which is the same as JScript runs on both browsers. Netscape added features and called it JavaScript 1.2 and then added more features and called it JavaScript 1.3. All the while, Microsoft added the same features and lumped it all in to what they call DHTML. yuk. Cascading Style Sheets Level 1 (CSS1): CSS1 is the first step that the browser makers took in DHTML. What CSS1 allows you to do is apply a given set of formatting features to a block of text (i.e. all bold text is also red.) Don't let the fancey technical name scare you. It is simply some new HTML tags with some new attributes which can be grouped together. Cascading Style Sheets Positioning (CSSP): CSSP is what lets us place blocks of information (text, images, etc.) at a particular position on the page...most often defined in pixels. CSSP, along with JavaScript, also allows us to move those CSSP items around on the page while the user is looking at it. We can even make it appear or disappear! Again, don't let the name run you off. The only difference between CSS1 and CSSP are a few properties or attributes of the same tags in CSS1. Document Object Model: The Document Object Model is basically the object heirarchy for accessing and scripting CSS objects. It seems to me to just be a part of Javascript or Javascript is a part of it. I think that the document object model is just another more politically correct name for what used to be called Javascript but since "javascript" was a word invented and copyrighted by Netscape every now just calls it the Document Object Model. Dynamic CSS: This is currently only supported by Microsoft Internet Explorer. Dynamic CSS allows us to change all of the CSS properties dynamically with javascript. Netscape currently only allows for positioning properties to be changed dynamically.To get same kind of control with Netscape we will have to use layers and some other tricks. Layers: Layers are proprietary to Netscape Navigator 4.x (Communicator.) This means that at this time Layers only work in Netscape Navigator 4.x. I warned you a minute ago that there would be compatibility issues with DHTML, and this is only the beginning. Layers offer nearly all of the features of CSS1 and CSSP, and some features only available with Layers. JSS: Javascript Style Sheets are just like CSS with a slightly differnet syntax. This is only supported by Netscape. We will not spend much time on JSS since we can accomplish most anything we need with CSS or Layers. Below is a venn diagram of the browser support for these "languages": Cross Browser Support None of this vocabulary actually matters, it's all just JavaScript and HTML to me!! These corporations and organizations have simply chosen to name each addition to the functionality to their browser and features as a marketing gimick, and nothing more. All you need to know is which html and JavaScript works on each browser and that's it. Don't get caught up in these marketing vocabulary terms. Now that we know the vocabulary of DHTML, who cares? It all means the same thing. We can make cool stuff that does cool new things! So, let's get started. I'm going to assume that you know HTML and JavaScript pretty well, so if you aren't comfortable if JavaScript, go to the UserActive HTML or JavaScript Learning Labs and brush up. I'll see you in the next tutorial.