Making Pages for Cross-Browser Compatibility
by Florence W Deems |
For a complete list of HTML tag's, Interactive Fun, and other things, Please visit:
http://www.w3schools.com/html/ |
PROPER CODING:
To bring your coding up to the present "HTML5" standards:
- The folks at the World Wide Web Consortium (w3c) recommend always putting this tag first, even before the <html> tag:
<!DOCTYPE HTML>. However, this is for HTML5. Certain special effects tags that work in HTML 401 and earlier versions will NOT work if you use this doctype tag.
These doctype tags inform VALIDATORS how to evaluate the page. If you are not going to have your page validated, then don't use this tag and save some bytes.
- However, the doctype tag is not usually used by browsers, unless it is for HTML5 (see 2nd paragraph above.). If you want BROWSERS to know which language, e.g. English, to use to display the page, use this version of the HTML tag: <html lang="en">
- Always nest tags properly:
- Correct: <font size="4"><b>Text here.</b></font>
Incorrect: <font size="4"><b>Text here.</font></b>
- Always use lower case letters instead of caps.
Computer browsers are supposed to become much stricter about this. But ever since the W3C folks issued this warning, I haven't seen that my Safari and Chrome browsers are affected adversely by tags in caps.
- Correct: <font size="4"><b>Text here.</b><font>
Incorrect: <FONT size="4"><B>Text here.</B></FONT>
- Always use quotes around all values (that which follows the equals sign):
- <font size="4" color="white">
<body bgcolor="black" text="yellow" link="blue" vlink="orange" fontsize="small">
|
TAGS FOR THE HEAD:
Meta tags so computer browsers don't cache older versions of a page. Use both of these tags:
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 gmt">
The first is for older browsers, the 2nd for newer ones.
|
TAGS FOR THE BODY:
TABLES:
- Width: always specify width in pixels, not percents.
- If you want the page to look the same on all browsers:
a) Use width="600" (or "650") border="0" and put the whole page within this table;
Please visit Thoughts on Widths
b) Center the table, using
- <div align="center"> </div>
- To make hyperlinks within a table:
Do not use either the table tag or the td tag to make the hyperlink.
Put the hyperlink inside the td tag:
- <table> <td> <font color="black"> <a href="url of page">
Page or Image Name</a> </font> </td> </table>
- Empty td tags collapse with some older computer browsers.
Use the following to fill the td:
- <td color=??>& nbsp;</td>
Be sure to delete the space between the & and the nbsp;. This code will put a "space" (content) inside the td.
- Internet Explorer and perhaps Netscape do not show color for table borders. So add a bordercolor attribute to the table tag:
- <table bgcolor="#ccccff" border="5" bordercolor="#ccccff">
Netscape will show a "beveled" effect for the border, with lighter left side and top edges and darker right side and bottom edges. But Internet Explorer will show a flat-looking border. So to enable IE viewers to see the beveled border, you must add these two attributes:
- <table bgcolor="#ccccff" border="5" bordercolor="#ccccff" bordercolorlight="#ccccff" bordercolordark="#9999cc">
|
CENTERING TAGS:
For large items on page:
- Best: <div align="center"> </div>
Older: <center> </center>
- For images and text in a table cell:
a) Horizontal alignment:
align="center" or "right"
Do not use align="left" as this is the default in all browsers.
b) Vertical alignment:
valign="top" or "bottom" (default is "middle")
NOTE: Do not use valign="center." It simply doesn't work.
|
COMMENT TAGS:
Use proper comment tag form instead of just the brackets surrounding numerals, etc,:
Correct: <!-- comment here -->
Incorrect: <5>
Netscape will not load the page beyond an incorrect comment tag, or any incorrect tag, for that matter!
Internet Explorer will show the incorrect tag as text.
Make sure that your tags are all correct, especially if you are using the .php extension for your page's url, instead of the .html extension.
|
IMAGE TAGS:
- Always use the proper file extension for an image: jpg, gif, etc - or many browsers won't be able to see the image at all.
- In the tag always include height and width of the image in pixels.This allows browsers to reserve space for the image while the rest of the text loads, in case the image loads slowly.
- Always add a border attribute.
Make border="0" if you do not want browsers to show a default border around the image.
- Always add alt="description" to image tag. Make the description short. This is for browsers that will show an empty space, but not the image itself.
- Always add a line break after an image, because most computer users have their screens set for 800 pixels width or wider.
Example image tag:
<img src="url of image" height="pixels" width="pixels" border="0" alt="Short Description of Image">
|
SWF FILES:
These special image files require special treatment so browsers see them properly:
- Use embed src (not img src) tags for swf files.
- Use the correct .swf or whatever extension.
Do not use .gif.
- Looping #1: Do not use the attribute loop="false" or these fies will not loop. (Unless you don't want it to loop.)
- Looping #2: Also, don't use swf files as image links, because they will not loop, either.
*NOTE*: Some SWF files are designed NOT to loop.
|
PROPER USE OF SOUND TAGS:
- Use only one sound tag, the embed tag. If a browser reads both sound tags on the same page, it may play both tags, but the sounds may not be synchronized, thus making the sound fuzzy.
- <noembed><bgsound src="midi-url" loop=2></noembed>
<embed src="midi-url" autostart="true" hidden="true" loop="2"></embed>
- Loop must be expressed as whole numbers more than 1.
Do not use -1 (minus 1).
- NOTE: The embed tag must be closed.
The bgsound tag is played by older versions of Internet Explorer. However, the newer versions play both tags. Some day we'll have to write only the embed sound tag.
- If you want to put more than one song on a page so viewers can click on them, leave the sound tags off.
Use <a href="url-of-song">Name of Song</a> for each song.
|
TEXTAREA BOXES:
- Text boxes are always "default" gray with black text. (The default is different for each user and his/her settings.) The boxes can be resized.
- Example Sizes: Width - 10 cols equals 87 pixels. Multiply accordingly.
Use 60 cols for a box of 522 pixels wide and center it. Also, please see Text Area Tricks for additional info on making these spaces more interesting.
|
FLO: CONTENT
TA: PAGE LAYOUT AND EDITING
TOM: TECHNICAL ADVICE
SALLY: RESEARCH AND ENCOURAGEMENT
|
---|
|