Smile

SMIL Tutorial

SMIL Tutorial for

SMIL Tutorial for XHTML

SMIL

Synchronized

Multi-media

Markup

Language



Syncronised multi-Media Language. Pronounced "smile".
This tutorials purpose is for showing how to combine SMIL with XHTML.
Extensible Hypertext Markup Language.

SMIL is a XML based language. And XHTML is a easily write-able adaptation of HTML into the XML Language.
SMIL follows all the rules of XML syntax and therefore is easily combined in a XHTML document.

Below is an example of the source code for an entire document.
The tutorial will explain each section of the document with examples of how to implement the components of SMIL.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+SMIL//EN"
"http://www.w3.org/2001/SMIL20/WD/xhtmlplussmil.dtd">
<html xmlns:time="urn:schemas-microsoft-com:time" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:smil="http://www.w3.org/2001/SMIL20">
<head>
<title>Forest ,Forest in British Columbia,British Columbia Forest,Prince George,Walk in the Forest,Hiking,Woods,SMIL Forest,SMIL</title>
<?import namespace="time" implementation="#default#time2" ?>
<link rel="stylesheet" href="http://www.seang64.com/swamp/pics/for.css"></link>
<meta name="keywords" content="SMIL,Slideshow,Prince George Forest Region,Forest,Hiking,Woods,Walk,Photo." />
<meta name="description" content="A walk in the Forest,SMIL slideshow of pictures taken in the Prince George Forest Region." />
<meta name="LOCATION" content="Prince George, British Columbia, Canada" />
<meta name="ROBOTS" content="ALL" />
<meta name="copyright" content="copyright 2003 Sean Ginter" />
<style>.time {behavior: url(#default#time2)};.t {behavior: url(#default#time2)}</style>
</head>
<body text="FFD700">
<h1>A WALK IN THE FOREST</h1>
<table align="center" border="0">
<tr>
<td>
<time:seq repeatCount="indefinite">
<img class="time" src="//www.oocities.org/seang64/swamp/pics/rfa.jpg" dur="5s" alt="" />
<img class="time" src="//www.oocities.org/seang64/swamp/pics/tfb.jpg" dur="5s" alt="" />
<img class="time" src="//www.oocities.org/seang64/swamp/pics/tfc.jpg" dur="5s" alt="" />
<img class="time" src="//www.oocities.org/seang64/swamp/pics/tfa.jpg" dur="5s" alt="" />
<img class="time" src="//www.oocities.org/seang64/swamp/pics/wfa.jpg" dur="5s" alt="" />
<img class="time" src="//www.oocities.org/seang64/swamp/pics/tfd.jpg" dur="5s" alt="" />
</time:seq>
</td>
</tr>
</table>
<table align="center">
<tr>
<td>
<time:seq repeatCount="indefinite">
<p class="time" dur="5s">
Heading out on the logging roads..
</p>
<p class="time" dur="5s">
...on the way out into the woods.
</p>
<p class="time" dur="5s">
Here are some photographs of the multitude...
</p>
<p class="time" dur="5s">
..of scenery in the Prince George Forest Region.
</p>
<p class="time" dur="5s">
Lakes rivers and streams abound.
</p>
</time:seq>
</td>
</tr>
</table>
</body>
</html>

Here is the link to the above example.Use your back button to return to the tutorial.

Next page of the tutorial.

Contents


XML RSS feedRSS feed for this page.