Objects embedded within XHTML
To conform to the XHTML specification, the object element must be used to embed external web applications such as Flash, Director within XHTML web pages. The object element must also be used to embed external audio and video in XHTML web pages.
Standalone web applications should scale and be centred (see section 4.25 'Screen layout').
Menus must be disabled within Flash and Director players.
The syntax for embedding a Flash interactive within a web page is:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title><!-- tlf:content-title --></title> <link rel="stylesheet" type="text/css" media="screen" href="css/mystyle.css" id="default" title="default" /> </head> <body> <div id="divcenter"> <object type="application/x-shockwave-flash" data="loader.swf" width="100%" height="100%" id="loader"> <param name="movie" value="loader.swf" /> <param name="quality" value="high" /> <param name="scale" value="showall" /> <param name="bgcolor" value="#ffffff" /> <param name="menu" value="false" /> <param name="seamlesstabbing" value="false" /> </object> <br /> <div class="logo"> <img src="support_files/tlf_logo.png" id="logo" title="The Le@rning Federation" alt="TLF Logo" /> </div> <div class="partnerlogo"> <!-- <img src="support_files/partner_logo.png" id="partnerlogo" title="Insert partner institution name" alt="(partner institution)logo" /> --> </div> <div class="copyright-conditions"> <span id="copyright"><!-- tlf:content-rights --></span> <span id="conditions"><!-- tlf:conditions-of-use --></span> </div> </div> </body> </html>
This should be styled with the following CSS:
html, body {
height: 100%;
}
div {
height: 95%;
}
#divcenter {
text-align: center;
}
#copyright {
font-family: Arial,Helvetica,sans-serif;
font-size: 8pt;
}
#conditions {
color: #ff0000;
font-family: Arial,Helvetica,sans-serif;
font-size: 8pt;
}
#bold-italic {
font-weight: bold;
font-style: italic;
}
.logo {
width: 20%;
float: left;
}
#logo {
width: 103px;
height: 48px;
float: left;
}
.partnerlogo {
width: 20%;
float: right;
}
#conditions a,#conditions a:link {
color: #0000ff;
}
#conditions a:visited {
color: #990099;
}
#conditions a:active {
color: #aaffaa;
}
#conditions a:hover,#conditions a:focus {
color: #ff0000;
outline: 1px solid #000000;
}
The syntax for embedding a Shockwave interactive within a web page is:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title><!-- tlf:content-title --></title> <link rel="stylesheet" type="text/css" media="screen" href="css/mystyle.css" id="default" title="default" /> </head> <body> <div id="divcenter"> <object type="application/x-director" data="index.dcr" width="760" height="570" id="object"> <param name="src" value="index.dcr" /> <param name="swStretchStyle" value="none" /> <param name="swRemote" value="swSaveEnabled='true' swVolume='false' swRestart='false' swPausePlay='false' swFastForward='false' swTitle='My object' swContextMenu='false'" /> <param name="bgColor" value="#FFFFFF" /> </object> <br /> <div class="logo"> <img src="support_files/tlf_logo.png" id="logo" title="The Le@rning Federation" alt="TLF Logo" /> </div> <div class="partnerlogo"> <!-- <img src="support_files/partner_logo.png" id="partnerlogo" title="Insert partner institution name" alt="(partner institution) logo" /> --> </div> <div class="copyright-conditions"> <span id="copyright"><!-- tlf:content-rights --></span> <span id="conditions"><!-- tlf:conditions-of-use --></span> </div> </div> </body> </html>