.:[July 23rd - 17:29 CET/GMT-0500]:.

Tips & Tricks to RFC Compliant (x)HTML

Topics:

Document Types
Embed Flash objects in HTML
Switch pages to SSL (https://)
Embed audio in HTML
Prevent MSIE Browser using Mod Rewrite

Flash in HTML

These examples are based on the comprehensive Flash Satay by Drew McLellan. In short, they provide you a how-to embed Flash objects in HTML without breaking the standards set by W3C. For a better understanding, you should read the complete Flash Satay documentation.

Most people, probably including you, embed Flash objects into HTML using a very wrong and insecure method, and your pages will never pass through W3's HTML validator. The code you're using is likely to look something like:


	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
		codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
		width="468" height="60" align="absmiddle">
	 <param name="movie" value="flash_object.swf">
	 <param name="quality" value="high">
	 <param name="SCALE" value="noborder">
	 <embed quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
		type="application/x-shockwave-flash" 
		src="flash_object.swf" width="468" height="60" align="absmiddle"
		scale="noborder">
	 </embed>
	</object>
					

While this works, it is not the correct way to embed Flash objects in HTML.
The <embed> element is not even part of the HTML/xHTML DTD.
The classid="" attribute is based on ActiveX so all browsers except MSIE igonores it.
We are replacing it with the type="" attribute.
The codebase="" attribute contains a path to a copy of the Flash plug in-on Macromedia's servers. This is actually incorrect usage of the attribute, as any paths within it are supposed to be within the same domain–a security feature.
So out it goes. Instead we will show an image in case the browser doesn't have the Flashplayer installed.
We'll use the <img="" /> element for that.

Below are some examples of how to do it right.

Proper xHTML 1.0 & 1.1 code:


	<object type="application/x-shockwave-flash" width="400" height="300" data="flash_object.swf">
	 <param name="movie" value="flash_object.swf" />
	 <img src="noflash.gif" width="200" height="100" alt="image" title="No Flash Player Found" />
	</object>
					

Proper HTML 4.0 code:


	<object type="application/x-shockwave-flash" width="400" height="300" data="flash_object.swf">
	 <param name="movie" value="movie.swf">
	 <img src="noflash.gif" width="200" height="100" alt="image" title="No Flash Player Found">
	</object>
					

As I do it (xHTML & CSS 2)


	<object type="application/x-shockwave-flash" style="width:400px;height:300px;" data="flash_object.swf">
	 <param name="movie" value="movie.swf" />
	 <a href="http://www.adobe.com/go/EN_US-H-GET-FLASH">
	  <img src="noflash.gif" style="width:200px;height:100px;" alt="image" title="No Flash Player Found" />
	 </a>
	</object>
					

Top

Related pages