The Old Way

In HTML, XHTML, and CSS, Sixth Edition: Visual QuickStart Guide, I was faced with a quandary. Should I continue to talk about old, deprecated tags that had fallen out of favor? I've never been much of an extremist and don't like to dictate gospel. At the same time, I don't want new Web page designers to come across really old-fashioned tags like font and unwittingly use them in a professional setting. On the other, other hand, it feels like the book isn't complete if it doesn't cover the entire specifications, and whether the W3C likes it or not, the font tag is still perfectly valid HTML and XHTML (as long as you're using a Transitional Doctype). Perhaps more importantly, there are still sites that use these tags and it's helpful to know what they mean.

So, I decided to take the chapters out of the printed book and offer them to my readers on my Web site. The chapters included appear exactly as they did in the Fifth Edition, including page references and black and white illustrations. While I did consider updating these chapters, I'd rather spend my energy going forward with some new ideas. (I've got lots of stuff planned!)

Here's a brief explanation of why none of these chapters were included in the print edition:

Frames

I thought frames were the cat's pajamas back when they were introduced. (The example page that I created as I was exploring frames continues to be one of the most popular areas of my entire Web site.) Frames seemed like the ideal way to combine static navigation and branding areas with dynamic content areas. Frames have several disadvantages, however. First, their scroll bars take up a lot of space in the browser window. Second, they take all the power away from the visitor, since the size of the various frames is all up to the designer. Third, browsers don't navigate them that well, dealing with only the main frameset's URL instead of each individual frame's URL. If a visitor attempts to bookmark the page that's showing, they often don't get what they expect.

The death knell came from search indexes. Because a frameset is made up of several files, and each of these files may be indexed individually, it was entirely possible that the navigation area or a content area might appear by itself in search results—with no supporting frames.

The standard way to achieve static and dynamic areas in a Web page is to repeat a portion of the page—generally the navigation or branding areas—and then change just the part that is different. Use CSS to position the static areas in precisely the same position. My Web site is set up in that way. Note how the navigation areas to the left and top remain (relatively) static while the lower right content area changes.

WML

Back in 2002, when I wrote the Fifth Edition of this book, it looked like WML might win the day with mobile Web sites. There were few phones that could read XHTML and fewer still that could use CSS. Today, that has all shifted. While most phones still understand WML, most phones also can understand XHTML and CSS. And not only is it easier to learn a single technology instead of two, it's much easier to write one set of Web pages and leverage them for two (or more) purposes by creating a CSS style sheet just for mobile visitors.

Formatting: The Old Way

The HTML tags in the first Old Way chapter were already on their way out when I relegated them to the back of the Fifth Edition. There are the basefont and font elements for controlling size, color, and font face, the text, link, vlink, alink attributes of the body element for changing the color of text and links, the strike and u elements which have been replaced by the logical elements del and ins, and the completely non-standard blink element which was one of Netscape's more popular and most hated extensions.

Of those tags, only strike and u are remotely acceptable by today’s standards. Nevertheless, I continue to see the font element used and generated by Web page programs so you may want to know how it works.

I do not recommend using any of the elements explained in this chapter.

Layout: The Old Way

If the elements in the Formatting: The Old Way chapter are unfashionable, many of the elements in this chapter are downright illegal, never having made it into the official specifications at all. There is one element, however, that I decided could not be removed from the book altogether. That is center. The center tag is an abbreviation for the slightly more standard but equally deprecated combination of <div align="center">, yet it is blissfully straightforward and simple. I brought it back to the Basic (X)HTML Formatting chapter on page 79 of the Sixth Edition. The rest of the stuff in the Layout: The Old Way chapter should probably best be forgotten. I offer it to you on the site for historical purposes only.

If you are still interested in looking at these chapters, see the Old Way Chapters section of the Extras part of my Web site.

HTML, XHTML, and CSS 6th Edition Web Site

Putting all the examples from my books online is, in a word, a pain. It takes hours and hours to make sure that the files I've used as examples match the versions that I'm linking to on the Web pages. And since I've just been through a huge push to get the book done, my energy meter is really low (as my kids would say).

Still, I want you, my reader, to be able to read along in the book and then be able to find the example file on line and see if it really works as promised (and you can, and it does).

You can now find all the examples online.

You can also download the examples to work with locally from that same page. The index file in the download has a slightly different base tag so that the examples will be linked locally and not to my site. I have tested them pretty thoroughly, both on Mac and Windows and they work fine.

Nevertheless, please do contact me if you have any trouble or find any errata. (And if you suddenly find yourself transported to the Fifth edition pages, please let me know. It shouldn't happen!)

I hope you find it all useful.

Available at Barnes and Noble!

I've been haunting bookstores and finally found my new Sixth Edition available at Barnes and Noble! For 20% off!

Enjoy!

HTML 6ed Table of Contents

Well, I got my first copies of the new Sixth Edition of my HTML, XHTML, and CSS: Visual QuickStart Guide in my hands! They're beautiful, if I do say so myself! All full color, really clear, bigger example code, great new chapters. I'm pleased!

Check out the new Table of Contents.

I should have examples up by tomorrow. The rest of the site will be in a state of flux for the next few days, but hopefully not much longer than that.

You can preorder the book from Amazon for 37% off!

Foreign Language Editions

A number of readers have asked me if the new Sixth Edition of my HTML, XHTML, and CSS book will be available in other languages and so I've been researching that. Currently, the Fifth Edition is available in Chinese, Croatian, Finnish, French, Greek, Italian, Polish, Romanian, Serbian, and Spanish.

There are Fourth Edition books also available in Bulgarian, Dutch, Hebrew, Japanese, Korean, and Portuguese.

You can find the full table, with as many book covers as I could find, in the About section on my Web site.

As soon as I have more information about Sixth Edition translations, I'll post it here.

Two-tone borders

So, I'm doing a final read-through on the new edition of my book and I got to the section on borders in tables and there was something that just didn't make sense. I made up a little test case, and I couldn't get Internet Explorer to show me any kind of two-tone border (like outset, inset, groove or ridge). I had already achieved this feat in the Layout with Styles chapter, so I couldn't understand what was going on. Didn't IE do two-tone borders in tables?

But it wasn't the tables that were the problem. It was the color. When I tested the two-tone borders in the Layout chapter, I was using colors like purple and red and blue (since the new edition is in full color!!! :), but in my little table test, I was just using black. And therein lies the problem: Internet Explorer (at least IE6 and IE7, I confess I didn't test earlier browsers) can't do two-tone black borders.

It must be something about the algorithm it uses to calculate the two colors. Usually, if you choose a two-tone border, the browser calculates the second color from the first one you chose. But if you choose a really dark color like black (or #020202, which I also tried), Internet Explorer chooses something so dark for the offset color that you can't tell the difference. The result is that your outset, inset, groove or ridge borders look decidedly solid:

IE can do red two-tone borders, but not black ones

 

Firefox does any color two-tone borders

 

Opera, too, does any color two-tone borders

Here's the little sample table with two-tone borders.

Personalized Google Home - and tip

So I've fallen in love with Google's Personalized Home. (Click on Personalized Home in the upper-right corner of Google's home page. This is where you can add a few RSS feeds, the comics (which I miss since I don't get the printed paper anymore), the weather, and the wonderful Google Calendar, and all sorts of other things to suit your fancy. Since I've always got a browser open, I've always got quick access to it. Nothing new to you vanguardistas, I'm sure.

But there's a lovely shortcut for getting there. As long as you usually look at Personalized Home (and not Classic Home) and you're already signed in with your Google Account, all you have to do is put your cursor in the Google Search box (with nothing in it), which is always waiting for you at the top of your browser window, and click Enter. Poof! You're there.

Bye Bye Embed on A List Apart

I've just had my first article published on A List Apart about embedding movies without embed. I'm very excited about it.

Let me add a few notes about the videos themselves... The first one I took on April 23 this year in the Plaça Sant Jaume in Barcelona. April 23 is Saint George's Day. He's the one who slayed the dragon and is the Patron Saint of Barcelona. It's also the Day of the Book and the Rose in which people give their partners books and roses. (Generally, the men get books and the women roses, but not in my family :) The whole city is festooned with Catalan flags, roses of every color, and booksellers on every corner. I love it.

It's also one of only two days during the year that they open the Generalitat (roughly equivalent to the American Congress, except about 800 years older) to the public. And people line up around the block to visit and, in my opinion, to declare ownership. When we came out this year into the plaza in front of the Generalitat, we were watching some Sardana dancers and then a demonstration arrived. The demonstrators asked the band to strike up the Catalan National Anthem (Els Segadors) and the entire crowd joined in. It sent chills down my spine. You'll notice a few people holding up four fingers. They symbolize the four red stripes in the Catalan flag. At the end of the song, they chant "In, In-de, In-de-pendencia!" and "Long Live Catalonia".

The wmv video is just a fish store that we happened by one day a few years ago. This was just a little store, on a side street in a pretty average neighborhood. But look at that fish! Does this exist in the US? The more time we spend out of Catalonia, the more I like to remember the normal, everyday kind of things. Like fish stores.

The QuickTime movie was from a night my husband and I went out for dinner (around 9pm) and bumped into these Devils in our neighborhood. I forget even what they were celebrating. They have shopping carts full of firecrackers and huge paper-maché dragons in which they attach them, but often times they just dance around with their own individual lights. And loud drummers. These firecracker devils date from the Black Plague era and are such an institution in Catalonia that they took center stage during the closing ceremonies of the 1992 Olympics. There are 215 clubs listed in the Federation of Devils and Demons of Catalonia. They are the rauxa in the classic description of Catalan character: seny i rauxa, roughly translated as wisdom and craziness.

Sixth Edition of HTML, XHTML, and CSS Visual QuickStart Guide!

I have just updated the home page of my Web site to reflect the upcoming release of the Sixth Edition of my bestselling book on HTML, XHTML, and CSS:

In August, 2006, the full-color, Sixth Edition of my bestselling guide to creating Web pages will be released. HTML, XHTML, and CSS, Sixth Edition: Visual QuickStart Guide continues the tradition that helped earlier editions sell more than a million copies:

• clear, concise step-by-step instructions,
• a complete treatment of HTML, XHTML, and CSS,
• a modern approach that espouses standards without getting religious,
• information and techniques for cross-platform, cross-browser compatibility,
  
• and a thorough index that makes the book the most complete and useful reference on the subject that you will find anywhere.

I can hear you saying, “The specs haven't changed. What could be different in this book?" Well, it's true that the specifications for HTML, XHTML, and CSS haven't changed much, but the way people use those specifications has changed. A lot. And the browsers that interpret those specs have also evolved. I have revamped the examples throughout the book to reflect new and updated browsers, the growing emphasis on standards, CSS layout, and also the push toward multimedia and syndication. There are brand new chapters on using CSS for Handhelds and on Syndication and Podcasting as well as added individual sections throughout the book. And it's all in color!

I will be posting more information about the new Sixth Edition, including the updated table of contents, in the coming weeks, as soon as I come out from under the gun of its impending deadline. If you'd like, you can pre-order the book from Amazon at a 37% discount. I look forward to any comments you may have.

Video podcasting

I've been working a lot on video and podcasting and have a tiny sample online. It has a corresponding blog.

I'm totally jazzed by the possibilities, I have to admit. I've got ideas falling out of my ears. I just have to get through this book first...

IE7 beta 3

Microsoft released a new version of its Internet Explorer 7 browser today. (I'm getting strange "can't find that file" errors everywhere on Microsoft's site, not sure what that's about but I'm glad I was able to download it already). I had to uninstall IE7 beta2 (instructions here) in order to install beta3, but luckily with Parallels, I could just make a copy of my whole Virtual machine so I can still have beta 2 kicking around if I want to compare.

Speaking of comparing, I couldn't find a lot of differences at first glance in (X)HTML or CSS display at first glance. But I'll let you know.

Bad typing, good tips

So I've been doing a lot of testing and I type out these enormous URLs over and over and my fingers after a while go and do their thing without me. It's funny how they can type what they should and I don't even think about it. And they usually get it right.

But just now, in IE7, I (well, my fingers) hit return before I got to the .html and I expected a 404 but it never happened. The page actually showed up. And I immediately thought, oh IE, they're just adding one more little shortcut thing. But then I checked it in Firefox for both Windows and Mac (and Opera 8, IE5.5-win, Netscape 4.7 Win, and Safari 1.3) and it does the same thing.

Since when don't you have to type the extension for the file in a URL?? It even works if you make an extension-less link in an (X)HTML document:

try me

And what happens if you have a folder with the same name? Well, I tried that and if you do have a folder with the same name, the browser chooses the folder (sigh of relief). Hmm. Take back the sigh of relief. If the browser has the file in its cache, it may show that instead of the folder contents until you do a Refresh.

keyboard.html
keyboard (If you clicked the keyboard.html link first, you may have to Refresh here to see the folder contents.)

And what happens if don't specify an extension but it turns out you have two files with the same name but one with .htm and one with .html. The .htm gets picked every time:

No L

Is that a server thing? Where have I been? It seems sort of a basic thing I missed during the last ten years.

It's kind of cool, but sort of disconcerting in a way for a do-it-by-hand control-freak like me.

A side note and thank you to Mr. Berkman, my highschool typing teacher who taught me one of the most useful skills I have.

Parallels WorkStation Tip #1 (CD/DVD)

If you insert a disk into a Mac with Parallels Workstation running, it often thinks the CD or DVD was meant for it, and then the disk doesn't appear on your Mac desktop. To make Parallels give the disk up, go to Devices > CD/DVD-ROM and then choose Disconnect. The disk will quickly appear on your Mac desktop.

The reverse is also true. If the Mac desktop was active when you selected the disk, your Windows machines under Parallels won't see the disk. Go to Devices > CD/DVD-ROM and then choose Connect, and presto changeo, there it is.

Testing Web Pages for Mobile Devices and Handhelds

All I can say is Thank God for Parallel WorkStations... it turns out that most handheld device simulators only work on Windows. But I'm starting at the end.

Suppose you want to look at your Web site with a mobile device. First, I suggest pulling out your telephone. Most telephones these days do support XHTML (and also HTML, though they don't admit it readily) and CSS. WML is on the decline.

Once you've gotten over the shock of seeing your page shoehorned into that tiny telephone screen (well, mine's tiny anyway), you might want to see it in other handheld browsers. There are lots and lots but here are some links to get you started.

Openwave's handheld browser, according to Wikipedia, "has shipped on over one billion handsets, approx 49% of the global browser-capable device shipments". That's a lot of phones. Openwave's simulator is the easiest to get up and running. You can find it at developer.openwave.com. It only runs on Windows. You can type your URL in the Go box and hit enter to go there instead of plodding along with the number keys. (It's a good idea to know how much of a pain it is to get to certain sites, but when you're testing, you only really need to do that a few times before you get the message loud and clear.)

Nokia's phone simulators are a pain to install, because there are lots of bits and pieces, including the Nokia Mobile Gateway (NMG), Nokia Mobile Browser Simulator, Nokia Update Manager, Nokia Connectivity Framework, and Nokia Mobile Internet Toolkit (NMIT). You can find them all at www.forum.nokia.com. Nokia's stuff only works on Windows as well... and they demand a zillion-digit serial code number (free, thankfully) that I had to transfer laboriously for each of the components from my other Mac where my email is... Ugh!

The easiest software to use is that from Opera (www.opera.com). It turns out that Opera is one of the leading developers of mobile browsers. To facilitate testing Web sites for mobile devices they have a clever option on their desktop browsers. Choose View > Small Screen from a desktop version of Opera and it will show you what its Mobile Opera would show.

And what would it show? Well, if you haven't created a handheld style sheet for your Web page, it will adapt your site on the fly for the small screen. If you have created (and linked) a handheld style sheet for your Web page, it will use that.

Opera's new Mini mobile software is pretty cool too. I was able to download it to my very average telephone (whose model number eludes me) and it's pretty good at adapting pages to my weeny screen. You can emulate the Mini mobile software with a Java application that Opera has published on the Web. It is tiresome to type with number keys! Click the hash symbol (#) to get to the lowercase letters--otherwise you'll never get to your site (unless, it too is in all caps). Since I haven't figured out how to backspace, I'm very careful not to make any typos... if you know, drop me a line! I did figure out how to Refresh the Opera Mini simulator... when you've finally gotten to your Web site, click the Menu button (top left) and then use the arrow buttons to get down to Tools, and then choose Reload. Yee-ha!

I also admit to creating entry pages with very short names in the top level of my domain with links to the pages I'm testing. I just can't be bothered to push that many number keys!

Updating Firefox's Live Bookmarks

If you're creating a new XML feed for your web site (which I'll explain in the new edition of my HTML book), you'll want to check that the new feed is working properly. You can go to the site in Firefox, click the orange RSS icon



to add the feed to your bookmarks toolbar:



Then test the Live Bookmark by choosing it from the Bookmarks Toolbar:



OK, so far so good. But once you change the XML feed, how do you get Firefox to update the bookmark? I found a rather complicated way to change Firefox's refresh rate, through the about:config page (and the "browser.bookmarks.livemark_refresh_seconds" preference, but it didn't seem to work very well.

The easiest way was hidden in the contextual menu: right-click the live bookmark and then choose Reload Live Bookmark



I'm the kind of person who forgets this as soon as I don't need it anymore (like when I've finished updating the XML feed). I post this here in the hope that I'll be able to quickly find this information the next time I am testing my XML feed... or for the next time you are testing your XML feed.

(Another option for updating live bookmarks is to quit Firefox and restart.)

Add Flickr photos to web pages

When you go to see your Flickr photos, the address is up in the Address bar as usual. This address won't work as the source for an img tag, however. Instead, select the photo, and then click the All Sizes button up above the image.



Then choose the size you'd like to have appear on your web page. It will appear in the new window. Below the image you'll find the URL of the image itself as well as a premade chunk of HTML code for the image linked to its home on Flickr.



I dunno, maybe this is obvious, but I couldn't remember where it was and it took me a few minutes to find it again.

Pixels, Font Size, and Internet Explorer

I've been fussing with Internet Explorer* 7 beta and trying to figure out why it matters that IE won't resize pixel-sized elements and how this affects using relative font sizing in CSS.

Let's recap. If you set a relative font size, it has to be relative to something. Indeed, a font size set in ems or percentages is calculated with respect to the element's parent. So, a p element set to 100% would be 100% of its parent, which is usually the body.

What is the size of the body? If none has been set, the browser uses its default--usually 16 pixels (though Firefox lets users adjust this value). If a relative size has been set, it is calculated with respect to this default and then this number is used to find the size of the p and any other descendants.

The tricky part comes when visitors use the Text Size option (called Text Increase in Firefox). What an average visitor might expect, and what happens in Firefox and others, is that when they choose a new Text Size, the size of all the text in the Web page changes in proportion to their original sizes.

But in Internet Explorer, the Text Size option seems to affect only the default size of the body element, and any other elements that are relative to the body. Any element whose font size is set to a fixed size (e.g., in pixels) is not changed when a visitor chooses a new setting for Text Size. This kind of makes sense. If the designer sets a pixel size for an element, why should changing the default size of the body have any effect on it?

But there's one very weird thing. If you set a pixel size for the body, thinking that you can then have control over all the elements contained in that body, for some reason Internet Explorer decides that header elements are not children of the body element and do not inherit its size. This has a further consequence: when the visitor uses the Text Size option, the headers grow and shrink but other elements, like p (rightly treated as children of body), do not.

No matter that h1 and p are both children of body.

One more point. If you decide to set a pixel size for the body and then give the header elements a relative size, all of a sudden Internet Explorer recognizes the parent-child relationship between the body and the header and immediately applies the calculation (and stops affecting headers with the Text Size option).

It's just not quite right.

The solution is probably to continue to follow Owen Briggs' proposal to use both percentages and ems to size text.

(*Note, Internet Explorer's unwillingness to resize pixel-specified font sizes is not peculiar to version 7. Earlier versions have the same characteristic.)

Viewing those file extensions on Windows

I'm clearly not a Windows user. Still, don't laugh. I can never remember how to view extensions, and I just don't trust Windows to put the extensions that I want on my files. I've just upgraded to Windows XP and while I thought this might be a help to some of you, I know I'll come back to it another day when once again I can't see those dumb things.

Why might you want to view your file extensions? Well, sometimes Windows programs add their own extensions to your files. If you think you're creating an html file with the extension .html but Windows (or WordPad, or whatever) is actually creating a file called "example.html.txt" it just won't work the same way in your browser. In fact, it won't work at all.

To view your file extensions in Windows XP
1. Click on the Start menu and choose Control Panel.
2. If you're looking at Categories, click on Appearances and Themes. If you're already looking at the individual control panels, click on Folder Options.
3. Those of you who clicked Appearances and Themes in the previous step should now see the Folder Options control panel. Click it.
4. Click on the View tab in the Folder Options window.
5. Finally, uncheck the box next to Hide extensions for known file types.


6. Click OK to close the box and now when you go to the Desktop, you'll be able to see if you've got the right extension going.

Now I remember why I can never find that rather hidden option.

Hope this was helpful.

A new blog

Well, I've started using Blogger to create my news blog in an attempt to keep it more up to date. Going back over previous entries, I see that I didn't even announce my two last books:

Publishing a Blog with Blogger: Visual QuickProject Guide

and...

Creating a Photo Book and Slideshow with iPhoto 5: Visual QuickProject Guide

You can find excerpts, tables of contents, indices, and reviews on their respective sites.