Docsity
Docsity

Prepare for your exams
Prepare for your exams

Study with the several resources on Docsity


Earn points to download
Earn points to download

Earn points by helping other students or get them with a premium plan


Guidelines and tips
Guidelines and tips

Introduction to CSS and DHTML, Lecture notes of Web Programming and Technologies

An introduction to CSS (Cascading Style Sheets) and DHTML (Dynamic HTML). It explains what CSS and DHTML are, their differences, and their limitations. It also discusses what they can do, such as setting fonts, defining and positioning layers, and modifying HTML tags. The document emphasizes the importance of cross-browser and cross-platform compatibility and suggests starting small and simple when using DHTML.

What you will learn

  • What are CSS and DHTML?
  • What are the limitations of DHTML?
  • What are the differences between CSS and DHTML?

Typology: Lecture notes

2021/2022

Uploaded on 09/12/2022

strawberry3
strawberry3 🇺🇸

4.6

(38)

394 documents

1 / 6

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
chapter
1What Are CSS
and DHTML?
1
INTHIS CHAPTER
What Is CSS?
What Is DHTML?
DHTML vs. Flash
Browser Hell
What You Need to Know Already
Welcome to the world of CSS (cascading stylesheets) and DHTML (dy-
namic HTML) (technically, it’s “Dynamic HTML” without HTML being
spelled out)! There’s lots of good stuff here that gives you great control
over your Web pages, and even your Web site as a whole, which can save
you and your users lots of time. Using CSS and DHTML can also be one of
the most frustrating things you’ve ever done if you don’t pay close atten-
tion to what you’re doing (trust me on this one—the stories I could
tell…). So, let’s go ahead and get started.
What Is CSS?
CSS stands for “cascading stylesheets,” but we’ll just be calling
them “stylesheets” from now on. For all practical purposes,
stylesheets are as much a part of HTML as the <img> and <table>
tags. Adding stylesheet information to a page is just a matter of
typing in some extra code. There’s nothing fancy about it.
ch01.qxd 6/14/01 10:31 AM Page 1
pf3
pf4
pf5

Partial preview of the text

Download Introduction to CSS and DHTML and more Lecture notes Web Programming and Technologies in PDF only on Docsity!

c^

h

a^

p

t^

e

r

What Are CSS

and DHTML?

IN THIS CHAPTER

  • What Is CSS?
  • What Is DHTML?
  • DHTML vs. Flash
  • Browser Hell
  • What You Need to Know Already

Welcome to the world of CSS (cascading stylesheets) and DHTML (dy-

namic HTML) (technically, it’s “Dynamic HTML” without HTML being

spelled out)! There’s lots of good stuff here that gives you great control

over your Web pages, and even your Web site as a whole, which can save

you and your users lots of time. Using CSS and DHTML can also be one of

the most frustrating things you’ve ever done if you don’t pay close atten-

tion to what you’re doing (trust me on this one—the stories I could

tell…). So, let’s go ahead and get started.

 What Is CSS?

CSS stands for “cascading stylesheets,” but we’ll just be calling them “stylesheets” from now on. For all practical purposes, stylesheets are as much a part of HTML as the and

tags. Adding stylesheet information to a page is just a matter of typing in some extra code. There’s nothing fancy about it.

Placing stylesheet information into a Web page lets you set certain aspects of that HTML page. For example, your stylesheet could say, “Make all of the text in this Web page 16 point bold Arial,” or “There’s a layer called ‘banner’ and it’s located at 60 pixels over and 90 pixels down,” or even “When the tag is used, make that text both bold and italic.” CSS is a standard created by the World Wide Web Consor- tium, the same folks who define exactly what HTML is. There are several versions of CSS (the third version, CSS3, is being worked on right now). The browsers all implement variations of the first two versions, CSS1 and CSS2. You don’t need to be concerned about them in this book—we’ll look at what works without wor- rying about which version it is.

What Can CSS Do? Stylesheets can do three things:

1. Set the font of text on a page 2. Define a layer and position it on the page 3. Modify HTML tags If you decide to use stylesheets to set your page’s fonts, you can define different classes of fonts, like “headlineText” or “footerText” or “mainBodyText,” and use different fonts for all three. This may not sound exciting, but if used properly, this can save you hours and hours that you’d otherwise spend using the nasty and decrepit tag.

When Is CSS Really Used? Stylesheets are really used only for the first two items above: set- ting fonts and positioning layers. You can use stylesheets to mod- ify HTML tags, but I (and most other Web developers) haven’t found that to be very useful. It tends to confuse more than to fa- cilitate. So, I’ll be concentrating mostly on using stylesheets to set fonts and position layers throughout this book. I’ll show you how to modify tags, but there won’t be a lot of examples—that would be like showing you the proper way to ride a bicycle underwater. I’ll show you how to do it, but an extended tour wouldn’t serve any real purpose.

2 Chapter 1 • What Are CSS and DHTML?

GEEK NOTE:

To be fair, there are developers who find modifying HMTL tags to be useful, and they modify vague tags to mean something specific, like the EM or STRONG tags. Experiment to see what you prefer.

Everything in this book is fully cross-browser and cross- platform. In fact, I’m ignoring everything that’s Netscape- specific or IE-specific. As of this writing, Netscape hasn’t com- pletely lost the browser war yet, so Netscape users must still be considered. Also, Netscape 6 is less popular than expected, so Netscape 4.x users must still be considered and coded for.

When to Use DHTML To be honest, I only use DHTML to make layers appear and dis- appear, and for simple animation. However, not everyone has such pedestrian ambitions for their DHTML, so you’ll find exam- ples that go beyond those few uses in this book. In fact, I expect to see a lot more DHTML on the Web fairly soon, now that al- most everyone has Netscape 4.7+ and IE 5.x. All the browser met- rics I’ve seen indicate that at least 95% of Web surfers have a 4.0+ browser. When you start to code your own DHTML, start small and simple. It’s easy to make large promises to a client, and as a bril- liant programmer, I’m sure you’ll deliver on them, but you’ll save yourself a lot of heartache and late nights if you build your pages in incremental phases.

 DHTML vs. Flash

Full disclosure: I love Flash. There aren’t any browser or platform issues with creating Flash movies. Of course, Flash requires a downloadable plug-in, but that’s gradually gaining in popularity as an acceptable thing for Web sites. Flash can do just about everything DHTML can, a lot of things it can’t, and the language to control Flash (called ActionScript) is based on JavaScript, so it’s pretty easy to learn.

4 Chapter 1 • What Are CSS and DHTML?

The decision to use Flash or DHTML rests primarily on your target audience. Are you creating a bitchin’ cool site for teen girls or a brochureware site for a marketing consultant intended for

SIDE NOTE:

I’d be nuts if I didn’t make a shameless plug right now for my Flash book , Advanced Flash 5 for Web Professionals. It’s got everything you need to know about ActionScript. I had a blast writing it, and you might like it too.

corporate CEOs? Higher-up executive types tend to not want to spend valuable time downloading plug-ins, while teens are more likely to. It all comes back to your audience and their typical behavior.

 Browser Hell

Web developers have hoped for years that eventually IE and Netscape would conform to the same standards. However, we now have Netscape 4.x, Netscape 6, and IE each commanding significant market share. These browsers act oddly at times, so keep your expectations low for writing code once and having it work as expected on all browsers. If it does, sacrifice a mouse to the browser Gods; they have been good to you.

 What You Need to Know Already

I mentioned this already in the Introduction, but not everyone reads the full introduction when they buy a book, so I’ll repeat it here: You should know some JavaScript before diving into this book. You don’t need to be an expert, but you should know how to do image rollovers and how to place some text into a form field. You can get by without knowing those things, but it’ll be more of a struggle.

What You Need to Know Already 5

SIDE NOTE:

Last shameless plug: If you need some JavaScript help, check out Es- sential JavaScript for Web Professionals by yours truly.

’Nuff said. Let’s get started with some stylesheets!