Taking Your Talent to the Web- P14 potx

tags it’s optional. That inconsistency has led to sloppy markup, which in turn has caused browser problems, especially when other web standards (such as CSS) begin to interact with your HTML. So it’s a good idea to close most HTML tags whether it’s strictly required or not. (In XHTML, the suc- cessor to HTML, all tags must be closed.) CODE WARS As five minutes of web browsing will show you, HTML has been twisted every which way to enable web designers to create documents that are not so logical in their construction nor so restricted in their presentation. Cas- cading Style Sheets (CSS) and JavaScript are additional technologies that enable designers and developers to create attractive, accessible, dynamic web documents. In theory, web designers should let HTML be HTML, using it merely as a structured container for content, while relying on CSS to format pages. In practice, web designers had to design pages long before CSS was invented, so most of us developed methods for using HTML as a design tool. Even after CSS was invented (1996), the first reliably CSS-capable browser did not hit the market until 2000. As of this writing, support for CSS is still tragically far from complete in many popular browsers. More about that— including solutions—in Chapter 10, “Style Sheets for Designers.” Table Talk As a result of the Thousand Year March toward CSS compliance and while waiting for better browsers, designers still use HTML for tasks it performs reliably, if grudgingly, such as creating visual layouts by manipulating HTML tables: <! Begin menu bar. > <table border=”0” cellpadding=”0” cellspacing=”0” align=”center”> <tr> <td> <a href=”reading.html”><img src=”reading.gif” width=”20” height=”20” border=”0” alt=”Reading”></a> </td> 176 HOW: HTML, the Building Blocks of Life Itself: Code Wars 12 0732 CH08 4/24/01 1:22 PM Page 176 <td> <a href=”writing.html”><img src=”writing.gif” width=”20” height=”20” border=”0” alt=”Writing”></a> </td> <td> <a href=”arithmetic.html”><img src=”arithmetic.gif” width=”20” height=”20” border=”0” alt=”Arithmetic”></a> </td> </tr> </table> <! End menu bar. > The previous code, in conjunction with the appropriate <img> images (reading.gif, writing.gif, arithmetic.gif), will result in a clickable naviga- tional menu in visual web browsers such as IE, Netscape Navigator, Opera, and iCab. The table is used not to present tabular data (such as the con- tents of a spreadsheet) but rather to hold images in place. Setting the bor- der to “0” disguises the tabular structure to facilitate pure visual purposes. Typing the width and height for each image helps the browser more quickly calculate how the data is supposed to lay out on the page. The <ALT> attribute in each image tag makes the content accessible to users of audio browsers and nontraditional browsers such as Palm Pilots, as well as for those who surf with images turned off. XHTML Marks the Spot We keep emphasizing that HTML is logical and orderly. Let us return for a moment to the question of closing tags after they are opened. This prac- tice may seem redundant, but there is a logic to it. Refer again to the pre- ceding example. Say that your paragraph is followed by an image. If you don’t close your paragraph </p> before starting the image <IMG> tag, the browser has to guess whether you intend the image to be part of the para- graph or to follow it. Depending on what the browser guesses, your image might be preceded by a carriage return, or it might not be. If you’re using a style sheet that includes leading (line-height in CSS parlance), the browser might attempt to impose that leading on your image—or it may not. These are merely the visual complications that can arise from some- thing as simple as an unclosed tag. The structural ramifications can be more serious. 177 Taking Your Talent to the Web 12 0732 CH08 4/24/01 1:22 PM Page 177 HTML recommends that you close most tags, but it does not force you to do so, and it does not uniformly recommend tag closure. Images <IMG>, line breaks <br>, and list items <li>, for instance, are never closed in HTML. Most older browsers will accept and attempt to display all kinds of shoddy markup, including markup with unclosed tags that should be closed. And some browsers choke on optionally unclosed tags when, according to the rules of HTML, they should simply process the markup without qualms. For instance, Netscape’s 4.0 browser refuses to display web pages with unclosed table rows, even though the rules of HTML 4 state that table rows need not be closed. This inconsistency in HTML (and browsers) has resulted in sloppy markup on a surprising number of professional sites. Living in filth promotes dis- eases in human beings; slinging dirty markup can have equally dire effects on the health of the Web, particularly as the medium attempts to move forward. For this reason, among others, in 2000 the W3C stopped evolving HTML and came up with a new standard called XHTML. Don’t sweat it. For a web designer’s purposes, XHTML is essentially HTML that forces you to close your tags—including those (such as <img>, <br>, and <li>) that never required such closure before. We don’t want to confuse you with yet another acronym, but the reason XHTML works this way is because XHTML only looks like HTML. It is actu- ally the offspring of XML, which is the standard toward which the Web is evolving. (Technically, XML is a meta-language. That is, it is a set of rules for creating languages. HTML is a markup language based on the SGML meta-language. XHTML is a reformulation of HTML using XML as the meta- language. You don’t really need to know this, but it’s great at parties, par- ticularly when you’re trying to make someone stop talking to you.) Minding Your <p>’s and q’s Instead of trying to grasp the mind-numbing sentences above, you can think of XML as a much smarter—and necessarily more complex— adaptation of the idea behind HTML; as Homo sapiens to HTML’s Cro- Magnon, if you will; as a structured meta-language for containing data, if you must. In XML, you construct your own tags. Not only that, an XML tag 178 HOW: HTML, the Building Blocks of Life Itself: Code Wars 12 0732 CH08 4/24/01 1:22 PM Page 178 “knows” what other tags on the page are doing. An HTML tag does not. Nei- ther does an XHTML tag (at least, not yet). But XHTML follows the rules of XML, chief among them the demand that all code be “well-formed.” Tags that close after they open are demonstrating well-formedness in XML parl- ance. Exploring XML is beyond the scope of this book and is also beyond your immediate job requirements as a web designer. In all probability you will spend the next few years working with HTML or XHTML. In practical terms, working with XHTML is just like working with HTML, except that it enforces cleaner coding practices. HTML doesn’t care if you clean up your room. XHTML does. LOOKING AHEAD What you need to understand: ■ Web designers must learn HTML, even if most of the HTML work at their jobs is performed by web technicians. Web designers who choose not to learn HTML will limit their creative thinking as well as their employability. Frankly, few good web firms would hire a designer who lacks at least basic knowledge of the technology that drives the medium, though many would hire a great designer whose initial HTML skills are merely adequate. Fortunately, HTML is very simple and thus very easy to learn. ■ HTML was not created as a design tool, and within the next year or two, we will no longer be using it as one. However… ■ …the Web is in transition, from an anything-goes “tag soup” to a more usable and logical division of labor between technologies that structure content (HTML, XHTML, XML) and companion technologies that format its display (mainly CSS). When you begin working at a web shop, you or your coworkers will likely be formatting your pages in HTML (or XHTML) to make them compatible with late 1990s browsers. You will use CSS as well, but initially only in lim- ited ways (more about that in Chapter 10). Soon, CSS will do more and more of the design work, and HTML and its successors will be used as the Web’s creators originally intended. 179 Taking Your Talent to the Web 12 0732 CH08 4/24/01 1:22 PM Page 179 Directory Assistance On the Web, files are referenced by Uniform Resource Locators (URLs) like this one: http://www.populi.com/index.html These URLs are to cyberspace what street addresses are to the real world—no two addresses are exactly the same. UNIX was used to serve most sites at the dawning of the Web, and conse- quently, URLs follow the conventions of the UNIX Operating System (for instance, URLs are case-sensitive because UNIX is case-sensitive). UNIX is still used to serve heaps of sites due to its stability and its deep roots in the history of the Internet. Other popular web-serving operating systems include Windows NT and, increasingly, Linux. Linux is a free, open-source version of UNIX . Macs also can serve websites, though most companies prefer to host on UNIX or NT because these platforms were designed for the job. That may change some- what now that Apple has unveiled Mac OSX—its next-generation operating system with UNIX underpinnings. In UNIX, slashes separate directory names from each other and from docu- ment names, and all web servers follow these conventions. The names of web documents (including images, movies, and audio files) generally end in a three- or four- character abbreviation that clues the web server (and the browser) as to what they are (and thus, how they should be handled). HTML documents end in .html (or sometimes .htm); JPEG images end in .jpg (portrait.jpg); Flash files end in .swf (grandioseintro.swf); and so on. All web-serving platforms follow these conventions in naming. Windows 3.1 is limited to three-letter abbreviations, so .htm is used on that platform. Few sites are served from Windows 3.1, however, and you are astronomically unlikely to encounter Windows 3.1 servers in your professional career—at least in the United States, Canada, and Europe. Apache is a powerful web-serving platform with many conventions that designers follow even if they don’t know why they’re doing so. For instance, at the root level (www.populi.com), if you include a document titled index.html, that document will open automatically when the visitor types www.populi.com. This is why the ads can say “Visit www.spamulator.com” instead of “Visit www.spamulator.com/index.html.” This is also why, in writ- ing code, you can save bandwidth with URL references such as: <a href=”http://www.nostril.com/”> 180 HOW: HTML, the Building Blocks of Life Itself: Looking Ahead 12 0732 CH08 4/24/01 1:22 PM Page 180 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 [...]... somesite.com/julyissue/index.html And you wish to direct her back to the index page at: somesite.com/index.html 12 0732 CH08 4/24/01 1:22 PM Page 187 Taking Your Talent to the Web The URL would read as follows: Back 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... 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 front page Or like this (which is even smaller and doesn’t hardcode the default directory index filename): Return to the front page And reversing the direction, a link from /index.html to /julyissue/index.html... were written to the quirks of the companies’ older, nonstandardsoriented browsers Those older browsers generally ignore the declaration completely, but the validator requires it 12 0732 CH08 4/24/01 1:22 PM Page 189 Taking Your Talent to the Web This declares that the web page... Bother?” in the Web Developer’s Virtual Library (WDVL.com/Authoring/HTML/Standards/) For the validator to work properly, you need to include a This is a simple declaration that specifies what kind of HTML (or other markup language) you are attempting to write For instance: This declares the document to. .. height and width to help some browsers display the layout more quickly And, as also previously mentioned, it is essential to include 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... bonus, the code validates (www.webstandards.org) 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 latest browser Consider the front page of The Web... because they refer to an absolute, concrete 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... (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: We have left out the image’s height, width, and attribute to simplify the presentation of this idea However, as previously mentioned, it is always important to include... /index.html”>Back 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 maintaining the clarity of absolute URLs Absolute URLs also can be written like so: /index.html Where the slash represents “root directory.” By using... , , 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 techniques to offer full standards . close your paragraph </p> before starting the image <IMG> tag, the browser has to guess whether you intend the image to be part of the para- graph or to follow it. Depending on what the. Navigator, Opera, and iCab. The table is used not to present tabular data (such as the con- tents of a spreadsheet) but rather to hold images in place. Setting the bor- der to “0” disguises the. and more of the design work, and HTML and its successors will be used as the Web’s creators originally intended. 179 Taking Your Talent to the Web 12 0732 CH08 4/24/01 1:22 PM Page 179 Directory Assistance On