Taking Your Talent to the Web: A Guide for the Transitioning Designer- P11 pptx

The Mother of All View Source Tricks Viewing source is all well and good, but what’s even better is viewing that source code in your text editor of choice.. And if your editing program w

Instead of:

<a href=”http://www.nostril.com/index.html”>

It’s also why you can reference internal files in this way:

Visit the <a href=”contact/”>CONTACT</a> page.

Instead of:

Visit the <a href=”contact/index.html”>CONTACT</a> page.

Or:

Visit the <a href=”http://www.nostril.com/contact/index.html”>CONTACT</a> page.

The systems administrator can override this default if she desires, allowing welcome.html (for instance) to serve as the default opening document In fact, welcome.html was the default opening document on many systems before index.html gained ascendancy The default page at www.zeldman.com

is still welcome.html (The old CERN server used Welcome.htm, complete with initial caps.)

These conventions vary by system Internet Information Server (IIS), on Windows, uses default.html or default.asp Again, the systems administrator

is free to override any such default (Pickledherring.html could be set up as the default document if desired.) If your server or systems administrator prefers a particular filename, you’ll be told about it on the job

G ETTING S TARTED There are plenty of books about HTML, and heaps of free online resources

After all, what better place than the Web itself to learn about the markup language with which the Web is created?

The beginner’s tutorials at Project Cool’s Gettingstarted.net (www.gettingstarted.net) and Jay Boersma’s Web Work (www.ECNet.Net/

users/gallery/webwork/www.html) can teach anyone, even your Uncle Phil, how to apply basic HTML tags to create simple web pages A more detailed tutorial, Ian S Graham’s “Introduction to HTML,” may be found at

www.utoronto.ca/webdocs/HTMLdocs/NewHTML/htmlindex.html, and our own “Ask Doctor Web” (www.zeldman.com/askdrweb/), online since 1995,

provides a readable overview on HTML and related technologies along with the psychology of web use and similar topics After you’re further along, you are sure to enjoy Lance Arthur’s Design-o-Rama at www.glassdog.com/ design-o-rama/, a wittily written treatise that includes a good introduc-tion to frames and JavaScript

These are but five of many such resources online Most of these resources are noncommercial in nature They exist only to share knowledge We told you the Web was different, didn’t we? (On the Web, this would be a hyper-link back to Chapter 2, “Designing for the Medium.”)

Being noncommercial, such resources might not always be completely up-to-date For instance, parts of Ask Dr Web show their age visually, and in places, the advice offered might not be up to current standards Neverthe-less, they are all excellent places for those who don’t know their HTML from their elbow to begin absorbing vital knowledge We urge you to visit them all before moving on to the following more advanced resources

For a superb, hand-holding tutorial that walks you through the entire realm

of HTML, you can’t beat W3C member Dave Raggett’s “Getting Started With HTML” (www.w3.org/MarkUp/Guide/) It’s simple and complete; it touches on CSS, JavaScript, and Image maps as well as HTML; and it comes from a definitive source (Raggett has been closely involved with the devel-opment of HTML since the Web’s earliest days.)

The Web Design Group’s “Web Authoring FAQ” (www.htmlhelp.com/faq/ html/all.html) is yet another fine source of HTML knowledge It even answers questions such as “How can I get my own domain name?” “Where can I announce my site?” and the ever-popular “How can I make a frame with a vertical scrollbar but without a horizontal scrollbar?”

After you’ve gotten a handle on these basics, you’ll be able to learn from the fine tutorials and articles at Webmonkey (hotwired.lycos.com/ webmonkey/), Builder.com (home.cnet.com/webbuilding/), and our own A List Apart (www.alistapart.com) Along with technical exercises and tech-niques, these three resources offer a bevy of useful tips, tricks, opinions, and (best of all) insights into the changing nature of web code, design, and content

182 HOW: HTML, the Building Blocks of Life Itself: Getting Started

You’ll be able also to visit the W3C’s “HTML 4.01 Specification”

(www.w3.org/TR/REC-html40/) without experiencing heart palpitations

This spec is the Mothership, though it can leave a neophyte feeling some-what shaky Also worth getting to know is “The Bare Bones Guide to HTML”

(www.werbach.com/barebones/) and Ron Woodall’s HTML Compendium (www.htmlcompendium.org) These three resources provide a head-to-toe anatomy of the HTML language Forget an HTML tag? Not sure how one is supposed to work? Consult these guides

But don’t start with them You’ll just upset yourself HTML is simple, but viewing dozens of pages of HTML tags and their scientific-sounding defi-nitions can daunt the staunchest heart Begin at the beginner’s sites, which are written in civilian-friendly language And learn to do one other essen-tial thing:

Most of us learned HTML, not from each other’s tutorials, but by studying the markup with which others’ web pages were built Imitation is the sin-cerest form of theft, and every one of us started out by copying and past-ing other people’s markup, changpast-ing it around, and seepast-ing what happened

Before we discuss the ethics, here’s how to get started:

When you find a web page you like, select View, Source from your

browser’s menu bar, and save the file to your hard drive (In Netscape,

choose View, Page Source.) Reopen it in a basic text editor (such as

Sim-ple Text or Write) or an HTML editor (such as Barebones Software’s BBEdit, Optima Software’s PageSpinner, or Allaire’s HomeSite) and stare at the code until it stares back Plug your own words in between the HTML tags, save your work, and open the file in your favorite web browser Result: your first (offline) web page

Unless the layout you’ve stolen is extremely basic, you should keep it offline You don’t want to upload what you steal You just want to learn and move on Here are the links for the editors mentioned previously:

■ Bare Bones Software BBEdit www.bbedit.com(for Mac OS)

■ Optima-System Page Spinner. www.optima-system.com/

pagespinner/ (for Mac OS)

■ Allaire HomeSite. www.allaire.com/products/homesite/ (for Windows)

A Netscape Bonus

In addition to View Source, Netscape Navigator’s browser includes a nifty

File menu option called View Page Info Choose it, and the entire page will

be deconstructed for you in a new window, image by image Beside each image’s name you’ll find its complete URL (you remember…its address on the Web), its file size, how many colors it contains, and whether or not it uses transparency Click the link beside each image, and the image will load

in the bottom of the window

The way this works is not immediately intuitive; it was laid out by engi-neers, not by designers or usability experts But once you get the hang of

it, you’ll find View Page Info a useful tool for understanding how other peo-ple have created web pages IE does not offer this feature

The Mother of All View Source Tricks

Viewing source is all well and good, but what’s even better is viewing that source code in your text editor of choice That way, you can continue to work in your chosen HTML editing environment instead of dragging and dropping (or cutting and pasting) between different software programs You also will have less clutter on your screen And if your editing program wraps text, you won’t have to cope with the endless lines of markup that browsers often spit out by default in their built-in View Source windows Doin’ it in Netscape

On the Mac: Pay a visit to your Netscape Options menu Under Options,

Applications, View Source, switch from the default program to your HTML

editing program of choice (for instance, BBEdit or PageSpinner) Now when you view the source of any of your existing web pages, the resulting HTML document will automatically open in your preferred HTML program, ready for further editing Pretty nifty Similarly, when you View Source on some-one else’s site, the code will open in your HTML editor of choice, tempting you to steal other people’s work and condemn your soul to Hell

184 HOW: HTML, the Building Blocks of Life Itself: View Source

In Windows: First of all, you need to install the entire Communicator pro-gram, not just the Navigator component From Composer (the extremely limited semi-WYSIWYG “page creation” tool bundled with Netscape’s browser), choose Edit then Preferences Click Composer and register your external editor for HTML Source There That really wasn’t so bad

Doin’ it in Internet Explorer First, open Explorer’s Preferences Go to File Helpers and click Add

In a new, blank dialog box, type Source Code under Description, html under Extension, and source/html under MIME type

In the File Type area, click Browse It sounds as if you’re about to browse the Web, but you’re not You are actually navigating your hard drive to locate your web editor of choice Select it, and the File type and File cre-ator areas will be filled in automatically

You’re not done yet Under Handling, choose Post-Process With Applica-tion Hit the second Browse button, select your web editor one more time, and then hit OK Then stand on your head and recite the Cub Scout pledge

Just kidding about the pledge thing

Now when you View Source, the code will open in your favorite web edi-tor Not push-button easy, but it works—and you only have to do this once

We figure these tips alone justify the cost of buying this book, and we expect you to dog-ear this page and fondle it quietly when you think no one is watching

A BSOLUTELY S PEAKING , I T ’ S A LL R ELATIVE HTML links can work several ways The simplest link (and often the easiest

to maintain) is the relative link

Two files reside in the same directory:

index.html thankyou.html

A relative link from index.htmlto thankyou.htmllooks like this:

There is a special message for you on our <a href=”thankyou.html”>Thank You</a> page.

By contrast, an absolute link might look like this:

There is a special message for you on our <a href=”http://www.ourcompany.com/ thankyou.html”>Thank You</a> page.

Or even this:

There is a special message for you on our <a href=”http://www.ourcompany.com/ customerrelations/special/thankyou.html”>Thank You</a> page.

These are called <ABSOLUTE>links because they refer to an absolute, con-crete location in web space (Well, as real or concon-crete as “web space” gets, anyway.)

When two pages reside in the same directory, there is no need to use absolute links Using relative links lowers your character count (you can get rid of http://www.ourcompany.com/customerrelations/special/), and that,

in turn, conserves bandwidth

Relative links are easy to maintain on simple sites (though they become fiendishly complex as a site grows and uses more and more directories) For instance, if all images are kept in a directory called Images, the URL to an image file might read like so:

<IMG SCR=”images/image.gif”>

We have left out the image’s height, width, and <ALT>attribute to simplify the presentation of this idea However, as previously mentioned, it is always important to include an image’s height and width to help some browsers display the layout more quickly And, as also previously mentioned, it is essential to include <ALT>attributes so that those with visual disabilities

or those who surf with images turned off will have some idea of the image’s function

The more complicated the site’s directory structure, the likelier relative links are to require debugging For instance, the reader is here:

somesite.com/julyissue/index.html And you wish to direct her back to the index page at:

somesite.com/index.html

186 HOW: HTML, the Building Blocks of Life Itself: Absolutely Speaking, It’s All Relative

The URL would read as follows:

<a href=” /index.html”>Back</a> to the Index Page.

The two dots ( ) preceding the slash mean “go up one directory level before locating this file.”

With more directories, you have more and more complex links:

<a href=” / / / / /index.html”>Back</a> to the Index Page.

This can quickly lead to madness Are you stuck writing out full, absolute URLs? Heck, no

Instead, you can use a shorthand form of absolute linking to retain the advantages of relative URLs (portability, low bandwidth) while maintain-ing the clarity of absolute URLs

Absolute URLs also can be written like so:

/index.html Where the slash represents “root directory.”

By using this method, if you wished to move from the July Issue index page

up one directory to the root level index page, your URL would look like this:

Return to the <a href=”/index.html”>front page</a>.

Or like this (which is even smaller and doesn’t hardcode the default directory index filename):

Return to the <a href=”/”>front page</a>.

And reversing the direction, a link from /index.htmlto /julyissue/index.html

would look like this:

Read the <a href=”/julyissue/”>July issue</a>.

Unfortunately, absolute URLs of this kind cannot be tested offline You must load these pages to your web server to make certain the links work correctly

By contrast, relative links work on or offline, which enables you to keep one

or more fully functioning web sites on your hard drive

That was relatively painless, wasn’t it? Absolutely

Technically, good HTML is code that validates—that is, code that fully com-plies with current W3C standards and contains no errors To make sure your HTML validates, run it through the W3C validator at validator.w3.org, a free service from those wonderful people who brought you the Web For more

on this topic, see “HTML Standards Compliance: Why Bother?” in the Web Developer’s Virtual Library (WDVL.com/Authoring/HTML/Standards/) For the validator to work properly, you need to include a <DOCTYPE> This

is a simple declaration that specifies what kind of HTML (or other markup language) you are attempting to write For instance:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

This declares the document to be HTML 4.01 strict HTML 4.01 strict emphasizes structure over presentation and balks at “deprecated elements” such as background colors in table cells, <FONT FACE>, <FRAMES>, and other stuff we’re supposed to do with CSS instead of in HTML

Newer browsers such as IE5/Mac, Netscape 6, and Mozilla render HTML 4.01 strict documents according to web standards and use a “quirks” mode for older or unspecified document types to emulate rendering bugs in older browsers The engineers responsible for these browsers applied these tech-niques to offer full standards support for new sites without breaking old sites that were written to the quirks of the companies’ older, nonstandards-oriented browsers Those older browsers generally ignore the <DOCTYPE>

declaration completely, but the validator requires it

188 HOW: HTML, the Building Blocks of Life Itself: What Is Good Markup?

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

This <DOCTYPE>declares that the web page is written in HTML 4.01 tran-sitional markup, which tolerates deprecated presentational HTML attrib-utes (<FONT FACE>, for example) so that such documents will render correctly in older, less standards-compliant browsers IE5/Mac, Netscape 6, Mozilla and IE 6 will render these documents the same way older browsers would This affords web designers the ability to support older and newer browsers while making the transition from a buggy Web to one that relies

on standards (See the section, “The 18-Month Pregnancy” in Chapter 2 to understand why a transitional or interim period is accommodated in this way.)

Other <DOCTYPE>s include HTML 3.2, HTML 4.01 Frameset, and XHTML Strict and Transitional

What Is Sensible Markup?

Conceptually, good markup is code that gets out of its own way and helps communicate your message in the simplest, most intuitive way possible—

just like good design

Beginning writers use too many adjectives Beginning designers use too many shapes, fonts, and colors Beginning HTML authors often fall so in love with the medium that they forget to communicate Instead, they cram every page with embedded MIDI (music) files, pointlessly scrolling JavaScript messages, huge full-color photographs, animated GIFs (flames and dripping blood are especially popular), and blinking and moving text, often in a dozen different font faces and sizes

That is bad design, and (we think) bad markup, even if it validates—which

is pretty unlikely because folks attracted to dripping blood animations tend not to spend much time learning about web standards

HTML AS A D ESIGN T OOL Though this won’t always be the case, one of the beautiful things about HTML (and eventually, CSS instead) is that it can be used as a powerful design tool—a design tool that loads instantly No images are required; there are no fancy plug-ins and no worries about every user having the lat-est browser

Consider the front page of The Web Standards Project (www.webstandards org) Aside from one large Seymour-Chwast-like illustration, the rest of the front page is designed entirely with HTML and CSS Now view the source

An HTML color in the <BODY>tag defines the entire background The con-tent grid is made up of a table, and the grid areas and background colors are defined with table cell colors

190 HOW: HTML, the Building Blocks of Life Itself: HTML as a Design Tool

Figure 8.1

This site for the Web

Standards Project contains

almost no graphics The

shapes and colors are

cre-ated using nothing more

than HTML and CSS It is

possible to fill the screen

with color and content

without wasting

band-width on images As a

bonus, the code validates

(www.webstandards.org).