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:
- Type
<a href="mailto:joe@site.com
, as usual. - Type
?subject=topic
, where topic is the text you want to appear in the subject line. - 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. - 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. - Finally, type the closing
">
. - Type the clickable text.
- 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.
- Type
- 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:
- Henri Sivonen's Activating the Right Layout Mode in Mozilla, Mac IE 5 and Windows IE 6
- Matthias Gutfeldt's Doctype switching and standards compliance: An overview and in particular his doctype switch table
- Finding a Host
Does your prospective web host get good reviews from fellow consumers at sites like:
- Epinions (http://www.epinions.com)
- Web Hosting Talk (http://webhostingtalk.com)
- In the Google Usenet archives (http://www.google.com/grphp)
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
andtitle
attributes for imagesHere’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 thetitle
tag in all current browsers (see page 68). If you’d like tool tips on images in all browsers, use thetitle
tag in addition toalt
(which will still appear when the image does not). If you don’t want tool tips at all, settitle=""
.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:
Links tips
- 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
andname
attributes in themap
element Get this. In XHTML, you must set the
id
attribute in themap
element (for client-side image maps. Conceivably, then you'd set theusemap
attribute to the value of the id. But, most browsers don't get this, and so you need to set thename
attribute (in themap
element) as well. However, thename
attribute formap
(anda
,applet
,form
,frame
,iframe
, andimg
) 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 inselect
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. Usebordercolordark="color"
andbordercolorlight="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, useborder="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. Useshow
if they should have borders andhide
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
andcolgroup
You can use the asterisk as part of the value for the width attribute in the
col
orcolgroup
elements in a table. The asterisk works the same way it does with framesets. However, sincecol
andcolgroup
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.