Extras

Resources

Colors

(X)HTML

CSS

Doctypes

Entities

CGI Scripts

Events

Hexadecimals

Tools

Old Way Chapters

Extra Tips

General Images Links Forms Tables Frames Multilingual Browsers Non-HTML

Extra Tips

The following are a list of miscellaneous tips and clarifications that simply did not fit in the book. They are loosely organized by topic: General, Images, Forms, Tables, Multilingual, Browsers, and non-HTML.

General tips

Markup vs. Code

Throughtout the book, I use the words markup and code rather interchangeably, which is perhaps a rather informal use of “code”. Some would like “code” to be reserved exclusively for the contents of a program or script, like perl “code”, something like:

print "$result";

Markup only changes the appearance of its content, but doesn’t change the content itself. It is static. HTML and XHTML are markup.

Still, code is such a common word that I don’t think it’s terrible to use it to refer to markup.

Validators

A Real Validator is an excellent validation utility that, like the W3C validator, checks pages against a DTD. (Thanks to Andrew Stevens.)

Warnings about color

The W3C CSS Validator will warn you if you set an element's (foreground) color without setting it's background color, even if the supposedly missing color is inherited from another element, either within that style sheet or in an external one. That doesn't seem right to me at all. I suppose it's a good idea to remind folks that you should set both values and not just one or the other, but relying on inheritance to set color or background values is setting color values and should not elicit a warning, in my opinion.

Pixels vs. Ems/Percentages

Which should you use?

Pixels give you more initial control and ems/percentages make your page more accessible to those who need to with a larger (or smaller) font. If you use pixels, that's what the browser uses. While your visitors can use the Text Size (or Zoom in Opera) option to change the size of the font (except in Explorer for Windows), the initial size is what you've specified.

Ems and percentages depend on the value of the parent element's font size, which you might have set (in which case you know what it is), or which might have been set by the browser (the default for body text is 16 pixels). In all browser except Explorer for Windows, visitors can set the default size of body text as they see fit, and the ems and percentages that you set will depend on that value. In other words, you set the relative sizes for your page and your visitor gets to decide what the base is.

In Explorer for Windows (where visitors cannot set the default size for text), they can still choose the Text Size option to expand text that is sized with ems or percentages. (Text sized with pixels can not be enlarged in Explorer for Windows.)

Here are some examples to illustrate all this.

Default HTML editor

Specifying default HTML editor for Windows In Windows 2000, choose Tools > Folder Options, and then click the File Types tab. In the list, scroll down to find the HTML extension and select it. Then click the Advanced button near the bottom of the dialog box. Select the Edit action in the Action list and then click the Edit button. Now click the Browse button to choose the word processor you'd like to use. Once the path to the desired word processor is in the "Application used to perform action" box, go to the end of that path, and then type a space and then type "%1" at the very end. That should do it.

WS_FTP Pro and Permissions

You can use WS_FTP Pro to change the permissions of a givenfile. Select the file on the server and then choose File > Operations > FTP Commands > CHMOD (unix). Then choose the desired permissions and click OK.

Souped up email links

When a visitor clicks a mailto link, the browser switches to a mail client and opens a new message window, pre-addressed with the recipient as defined in the mailto link. You can add information to the mailto link to automatically set the subject, cc, and bcc lines as well.

To soup up mailto links:

  1. Type <a href="mailto:joe@site.com, as usual.
  2. Type ?subject=topic, where topic is the text you want to appear in the subject line.
  3. Or type ?cc=person@site.com, where person@site.com is the e-mail address of the person you want to be cc’d automatically.
  4. Or type ?bcc=person@site.com, where person@site.com is the e-mail address of the person you want to be bcc’d automatically.
  5. Finally, type the closing ">.
  6. Type the clickable text.
  7. And then type </a> to complete the link.

Tips

  • This is not standard HTML, nor does any browser claim to support it. Nevertheless, it does work with Explorer and Communicator on both Macs and Windows.
  • Keep in mind that the visitor can change the subject, cc, or bcc lines as they wish. This technique only starts them off as you want them.
  • Explorer can handle all the variables at once. Communicator only allows one at a time.
Empty Elements

Note that “empty” elements are elements that don’t have anything between the opening tag and the closing tag. It doesn’t mean that they don’t make anything happen to the Web page. A typical “empty” tag is the img tag. While it has no text content, it does contain a reference to an external image.

Hexadecimal Values

Why aren’t hexadecimal colors case sensitive? Because they’re values are not enumerated in the DTD, they are simply CDATA (any content). The same way you can use alt="Any old thing, with CAPS if I feel like it", you can use <font color="#ffccAA">text</font>

Extensions

If HTML pages are supposed to use the .html extension, why do you sometimes see files that end with .asp, .php, .cgi, and .shtml, just to name a few? Those files are scripts that generate the HTML on the fly, usually using some information from the visitor in order to customize the page. In other words, the file that ends with the strange extension is not HTML, it simply creates the HTML that you’re seeing.

Extensions for Web pages

Although Mac users can theoretically omit the .html extension on Web page files, you have to think about your audience. If you want the other 90% (or so) of the Web public to be able to view your page properly, add that extension.

The convention is that Windows users use the .htm extension and Mac and Unix users use the .html extension. But it doesn't matter at all which one you use (unless you're on or want to edit the files on a Windows 3.1 system, which doesn't support four-letter extensions.)

Using Word to create HTML

If you do use Word to create your HTML and then want to tweak the code by hand, first you’ll have to open the file as Encoded Text (and then choose text-only from the dialog box that appears next).

Andrew Stevens tells me that Microsoft's Office 2000 HTML Filter 2.0 installs a "Export as Compact HTML" menu option in Word and Excel that reduces the resulting files' sizes a good bit. However, the resulting HTML is still fairly junky. The new filter is built into Office XP as well and used by selecting "Save as" > "Filtered HTML. Again, this still produces rather junky markup and is no substitute for manually produced HTML.

Andrew also mentions Dreamweaver's "Clean up Word HTML" function and HTML Tidy's Word HTML cleaning function.

xml:lang=xx lang=xx

While the W3C uses these in examples, they are not required (according to the DTD).

Borders

In (X)HTML 4, the border attribute is deprecated for images and objects, but not for tables. Use CSS' border property instead.

DOCTYPEs, Quirks and Standards modes

A number of Web designers have explored which circumstances cause browsers to go into standards mode (or quirks mode). Here are some useful links:

Finding a Host

Does your prospective web host get good reviews from fellow consumers at sites like:

Thanks to Andrew Stevens

Maintaining case when uploading

You should make sure that your FTP program is not unexpectedly changing your files' case. For example, on WS_FTP Pro the "Session" tab on the "Edit" menu has the "Force lowercase remote name" option. If this selected any uppercase letters in your files will be changed to lowercase, possibly causing broken links.

Thanks to Andrew Stevens.

When the browser displays the code

Some more things to look for:

  • Files with no file extension
  • The server having the correct mime types set for your file extensions that you are using
  • The server having the correct mime type assigned for .css files (this can cause some browsers to either not apply the stylesheets and/or display the style sheet information in the browser window)
  • Internet Explorer recovers from these errors much more frequently than other browsers, so it is important to view your pages in other browsers.

Thanks to Andrew Stevens.

Browser differences

A great resource for researching browser differences is Index Dot HTML.

It not only lists browser support for each HTML element, but it also reports "Browser Peculiarities" for each.

Thanks to Andrew Stevens.

The blink tag

I have a certain fondness in my heart for blink. It's one of the things that got people interested in creating Web pages. It's usually porn and gambling that get a medium going, and not like they were missing here, but I think blink was instrumental too.

It's always irked me that Explorer has refused to support it.

That said, you should know that blinking text, and other high-contrast images on your page, can provoke seizures in people with epilepsy.

Browsers in Examples

Why, you might ask, do I use Explorer for Macintosh for so many examples in the links chapter? Because it's the only browser that lets you see the entire URL of the link you're going to (unless it's impossibly long) in the status area. The other browser have so much other (non-configurable) junk down there, that the link gets hidden. And since that's what I want to show in the links chapter, that's the browser I needed.

Images tips

Extra alternate text

If you use very lengthy alternate text, and know your visitors depend on it, let them know about a special option in Internet Explorer 6 that displays all the alternate text and makes sure none gets cut off. Tell them to, from Explorer's Tools menu, choose Internet Options and then click the Advanced tab. Then check the "Always expand alt text for images" option. (While this seems like it should be useful, I haven't been able to get Explorer to explore only part of the alternate text...)

Then, get this, Explorer 6 for Windows actually recognizes the returns you put in the alternate text, which be important if you've got a whole paragraph (or more). (Explorer 5 for Mac does not.)

Netscape and Opera both show all the alternate text, no matter what (as long as the image does not appear), regardless of the returns. Opera centers its alternate text and places a border around it. In Netscape, you can't even tell an image was supposed to go there; it is replaced by what looks like normal text.

You can format alternate text by applying styles to the image. This is supported by all current browsers except IE6 for Windows.

Internet Explorer 6 and resizing images

It looks like IE6 for Windows can automatically resize images, and may not always show them at full size, even in their own windows.

Screen dumps in Mac

Once in a while I get a question from someone asking how to do screendumps. I came across these tips on the CSS-discuss list (of all places):

  • Command-Shift-3 - to capture entire screen to PICT
  • Command-Shift-4 - for marquee tool to select part of screen to capture as PICT
  • Then, put the CapsLock on, and press Command-Shift 4 to get a target icon that you click on the desired object that you wish to save as a PICT.
    The PICT files are placed in your root folder (even on OS X).
  • Add Control key to any of these three to copy to the clipboard instead of creating a PICT file.
JPEGs

Some links on the topic of repetitive JPEG edits reducing image quality:

alt and title attributes for images

Here’s what the tip says in the Offering Alternate Text section in the Using Images chapter:

On IE Win 5+ and Netscape 4.x, the alt tag text is automatically used as a tool tip (Figure 6.5), similar to the effect of the title tag in all current browsers (see page 68). If you’d like tool tips on images in all browsers, use the title tag in addition to alt (which will still appear when the image does not). If you don’t want tool tips at all, set title="".

The only problem is that Netscape 4.x does not understand the title attribute, so there’s no way to get rid of tooltips in that browser.

General speed

Andrew Stevens says: I try to keep my pages under 40k

A couple links to look at on this issue:

Keyboard navigation in Opera

Opera, so good with standards support in other areas, completely drops the ball with the accesskey and tabindex attributes. First of all, to enable keyboard navigation of the page at all, you have to press the F9 key. Then to move from one link to the next, type the letter "a" or Ctrl+down, to go to a previous link, press the letter "q" or Ctrl-up. But, it pays no attention whatsoever to the accesskey you've specified in your (X)HTML code, or to the order of the links as specified with the tabindex attribute.

Keyboard navigation in Netscape

I've already told you that when your visitor presses the Tab key, they automatically go to the Address/Location box. Then in Explorer the next Tab gets them to the first link (which you can modify with the tabindex attribute. In Netscape, the second Tab doesn't look like it does anything--perhaps it gives the page focus?--and it is the third tab that goes to the first link you've specified.

The id and name attributes in the map element

Get this. In XHTML, you must set the id attribute in the map element (for client-side image maps. Conceivably, then you'd set the usemap attribute to the value of the id. But, most browsers don't get this, and so you need to set the name attribute (in the map element) as well. However, the name attribute for map (and a, applet, form, frame, iframe, and img) is deprecated in XHTML 1.0. Which just goes to show that you can't please all of the specs all of the time.

Checking links

Xenu is an excellent free link checking utility. (Thanks to Andrew Stevens.)

Forms tips

Form text boxes

Andrew Stevens writes:

You might want to add a tip explaining that different browser will display text boxes at different size even when the size is set with the size attribute.

A good resource to point to could be Sizing Up the Browsers: page 4, Form elements

The multiple attribute in select tag

It seems crazy to me that WML and XHTML don’t allow the same values in the multiple attribute of the select tag. XHTML insists on “multiple” and WML insists on either “true” or “false”. What a shame, when they could actually accept the same attributes so the page would work on either platform. Ugh.

Tables tips

Extra spaces in tables

While white space is not supposed to affect layout, extra white spaces are known to create weird effects in tables in some browsers. If your table is suffering from gaps here and there, make sure that there are no spaces between tr and td tags, either opening or closing.

Changing Border Color for IE only

Microsoft has developed proprietary extensions for changing the border color. Use bordercolor="color" to set a solid, unshaded border color. Use bordercolordark="color" and bordercolorlight="color" to set shaded colored borders. Of course, they only work in Explorer (for Mac and Windows). They don’t work unless you’ve also used the border attribute.

Borders in older browsers

In older browsers, if you leave out the border attribute, you still get a 2 pixel border—it’s just invisible. To get rid of it entirely, use border="0".

More Border stuff for tables

There are more properties for controlling table borders:

border-collapse determines whether there are individual borders around cells (separate) or whether cells share borders (collapse).

border-spacing is supposed to specify the amount of space between one cell's borders and the next. You can specify one value for both horizontal and vertical spacing, or specify two values for individual horizontal and vertical spacing (in that order). Negative values are not permitted.

empty-cells lets you determine if empty cells should have borders. Use show if they should have borders and hide if they shouldn't.

None of these properties is widely supported, even in current browsers. For more info, see the tables section of the official specs.

Relative Lengths in col and colgroup

You can use the asterisk as part of the value for the width attribute in the col or colgroup elements in a table. The asterisk works the same way it does with framesets. However, since col and colgroup are not well supported, I wonder if the asterisk is supported at all. cf http://www.w3.org/TR/html401/sgml/dtd.html

Frames tips

Accessibility And Frames

http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web

Also: http://www.w3.org/TR/WCAG10-HTML-TECHS/#frame-names

Thanks to Andrew Stevens

Multilingual tips

Mozilla and Encodings

If you use Mozilla or Netscape Composer to write (X)HTML and save it with the ISO-8859-1 encoding (choose Save Charset as, which in my opinion should be called “Save with Charset as”, it automatically and rather annoyingly converts all of the accented characters (that is, anything past 128) into character references. This is absurd, since these characters are part of the ISO-8859-1 encoding and it makes it extremely cumbersome to edit the source code for these files.

If you save the file with a different encoding (I’ve tried MacRoman and UTF-8), no conversion is made.

The same thing happens with Namo Editor, by the way.

Include Byte-Order Mark (BOM)

Some text editors let you save especially utf-8 encoded files with a byte order mark (or BOM). This marker helps text editors recognize the encoding when the file is opened for editing. Unfortunately, some browsers dont know what to do with it and display an extra symbol in its place (which sometimes looks like a Euro symbol).

I recommend not using the BOM, and simply being careful when you open your files for editing to choose the appropriate encoding.

Browsers tips

Command-click to open link in new window

Ooh, just discovered a new trick in Explorer 5 for Mac. Command-click a link to make it automatically open in a new window, none of this waiting for the pop-up menu to appear and then select the menu, then go back and select it again because you selected the wrong thing by mistake.

Non-HTML tips

Photoshop 7 and Tif compression

Photoshop 7 adds annoying black lines to compressed tif images with white backgrounds. Solution: either save the file in Photoshop 5.5 or save it in 7 without compression.