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

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. GETTING STARTED 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, 181 Taking Your Talent to the Web 12 0732 CH08 4/24/01 1:22 PM Page 181 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 12 0732 CH08 4/24/01 1:22 PM Page 182 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: VIEW SOURCE 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, changing it around, and seeing 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) 183 Taking Your Talent to the Web 12 0732 CH08 4/24/01 1:22 PM Page 183 ■ 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 12 0732 CH08 4/24/01 1:22 PM Page 184 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. ABSOLUTELY SPEAKING,IT’S ALL RELATIVE 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.html to thankyou.html looks like this: There is a special message for you on our <a href=”thankyou.html”>Thank You</a> page. 185 Taking Your Talent to the Web 12 0732 CH08 4/24/01 1:22 PM Page 185 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 concrete 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 12 0732 CH08 4/24/01 1:22 PM Page 186 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.html to /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. 187 Taking Your Talent to the Web 12 0732 CH08 4/24/01 1:22 PM Page 187 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. WHAT IS GOOD MARKUP? 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? 12 0732 CH08 4/24/01 1:22 PM Page 188 <!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. 189 Taking Your Talent to the Web 12 0732 CH08 4/24/01 1:22 PM Page 189 HTML AS A DESIGN TOOL 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). 12 0732 CH08 4/24/01 1:22 PM Page 190 [...]... browsers, your frameset should include a tag Browsers that can’t read frames can read the plain HTML that you insert between opening and closing tags Copy the content that appears in your frames, paste it between the tags, and you are on your way to creating a site everyone can access, regardless of their browser’s capabilities Framing Your Art Despite these hazards... visitors to an updated page Regardless of the application, tags are placed in the section of HTML markup That is, all elements show up between the and the tags Now let’s wrap our own around them to see how this all works: Search Me When Aunt Moira (the old battleaxe) enlists the help of a search engine to find a topic or subject, one way in which the search... composed of many small files that would take a long time to download (And if the visitor had images turned off, the visual effect would be lost.) Creating the layout in HTML and CSS means that the page loads almost instantly, no matter how slow the visitor’s connection may be And the layout is backward compatible with browsers dating back to Netscape 3 (a 1997 browser), although the CSS formatting will... target =”content”> Naming also enables us to perform JavaScript stunts, which are mainly useful for avoiding the maddening usability hazards associated with frames, such as the following The Frames of Hazard Through a search engine such as Google.com, Aunt Moira finds one of our client’s content pages Unfortunately, that’s all she finds the naked content page, immodestly lacking its associated navigational... than code (and a few lowbandwidth images) PLUG-INS OH MY! AND TABLES AND FRAMES, In the transitional Web, designers use HTML tables to lay out pages, as just described (with additional commentary and how -to- do-it type verbiage to come in the next chapter) We also use , a Netscape “extension” to HTML which has temporarily made it into the HTML 4 Transitional standard but which will eventually... hazards and hassles, frames can be quite useful to web designers Frames allow you to present a menu bar that stays in place while content frames change They also enable you to create layouts where, for instance, your content will always appear in the center of the screen, regardless of the visitor’s monitor size View Marc Klein’s Creative Republic (www.creative-republic.com) to see this in action, and then... Page 191 Taking Your Talent to the Web The content area is enclosed within a black outline created with one line of CSS Originally, the same effect was created by wrapping one HTML table inside another CSS is used to create the typography and leading Creating a layout like this in Photoshop, cutting its elements into pieces, and assembling those pieces via HTML, would have resulted in a large web page... standards-compliant and avoids the usability and accessibility hazards engender But to switch from to CSS, we must wait for some browsers to improve their CSS support and all users to upgrade to these better browsers Please Frame Safely Some old browsers do not understand frames Neither do text and audio browsers Nor do Palm Pilots and web-enabled telephones To accommodate these devices and browsers,... sort data is through tags Some search engines compare search words with descriptions, and they return the web pages that provide the best matches, as in the following: . Because we have named our frames and because the good Lord (well, actually, Netscape) gave us JavaScript, we can instruct the browser to load named frames if they are not already visible on the page visitors click in a menu area, we want the content they’ve chosen to show up in the content frame—not in the menu frame. Assigning a target name to each 193 Taking Your Talent to the Web 12 0732 CH08. that stays in place while content frames change. They also enable you to create layouts where, for instance, your content will always appear in the center of the screen, regardless of the visitor’s