Developer

New Web admins: Ensure you understand these basics

If you're new to Web administration, you should make sure you're familiar with four fundamentals. Mike Jackman has your list.


There’s no need to fear Web development. Even if you’re new to Web administration, you can learn quickly. You might wish to get started by reading last week’s glossary of basic terms.

This week, I will examine four additional Web development terms and concepts you should be familiar with if you’re building Web sites or preparing to create more dynamic Web pages.

Four Web fundamentals
As a new Web administrator, you should have a solid grasp of four Web fundamentals. They are:
  • ·        Cascading style sheets
  • ·        Dynamic Hypertext Markup Language
  • ·        Document Object Models
  • ·        Forms

Let’s examine each.

Cascading style sheets (CSS) is one method of separating text formatting from the content, or data, of a Web page. (XML is another way of doing this). The system is called “cascading” because the set of rules defining which style is displayed in case of a conflict of two or more possibilities is called the cascade.

Web developers can define styles in a separate file—called an external style sheet—that is imported by a Web page, embedded in the page (defined between the <HEAD> and </HEAD> tags of an HTML page using the <STYLE> and </STYLE> tags) or inline by adding a STYLE attribute to any tag. For example, <H1 STYLE=”color: green; font-size: 14pt”> will change whatever is in that specific heading tag to green and a 14 point font size. Creating an H1 definition in an embedded style on the page or a separate style sheet will change the definition of all H1 tags.

Should there be a conflict on a Web page between H1 definitions, according to the cascade, the specific inline definition prevails.

The CSS specification gives the ability to create many more possibilities for layout and design than HTML. For example, using styles, Web pages can add first-line indents, text boxes, and overlapping text. One problem that arises is that different browsers and even different browser versions implement CSS differently (no surprise there for seasoned Web designers).

By itself, CSS doesn’t really make a page dynamic or interactive. But the CSS can be manipulated by scripts that change styles on the fly in response to user input, so CSS can be a basis for dynamic and interactive pages.

For a nice tutorial on CSS, try Dave Raggett’s “Adding a touch of style.” Also see EarthWeb’s CSS Tutorials, which include help on using scripts to make CSS pages dynamic.

DHTML, or Dynamic Hypertext Markup Language, can be used to create pages that move, animate, or respond to users in other ways. DHTML pages respond on the client side. That is, they’re self-contained. The user’s Web browser handles the work, thus taking the load off of the server. It’s a little hard to describe, as DHTML requires some combination of HTML, JavaScript, CSS, and perhaps Netscape’s Layers tags. It requires Internet Explorer or Netscape 4.0 or greater to work. To use DHTML, it helps to understand the Document Object Model (DOM), defined below. DHTML is easier to demonstrate than it is to define. For some interesting demonstrations, see Earthweb’s DHTML & Layer Tutorials. For more detail, try DHTML School.

DOM is a hierarchical (think “tree” with branches) representation of a Web page. It’s important because it lets JavaScript access any piece of the page, from the browser window (the highest level of the DOM), down to any tag (for example, an image). All the pieces of a page are referred to as objects. Once you can reference an object, you can control it. That’s why the DOM is so important for dynamic and interactive Web pages.

In JavaScript, each branch of the document is referred to by a period. For example, if you created a catalog page, that page, containing an image named “blender” (using the image tag’s name attribute, as in <image src=”blender.jpg” name=”blender”>) would be referenced as document.blender;.

As another example, a form named “requestinfo” might have a text box named “yourname.” It would be referenced in JavaScript as document.requestinfo.yourname;.

As you might expect, different browsers access the DOM in different ways. For a good basic tutorial, see The Document Object Model Tutorial.

Forms should be familiar to anyone who filled out information on a Web page and pressed a button called Submit or Send. Forms allow pages to be sent to a Web server (through methods called post or get), where they can interact with scripts or programs for processing. One important use for JavaScript is in validating forms, or making sure forms are filled out correctly before they’re sent. Form tags can be used in Web pages without sending them, as ways to make pages more interesting and interactive by adding drop-down boxes, for example, to open up definitions of terms within a page.

Still have questions?
Never fear. Look for definitions to additional Web administration terms in next week’s article.

Editor's Picks

Free Newsletters, In your Inbox