This is a quick note for my following project.
https://github.com/Amitmund/ABCD_samvrita
Learn A to Z with image and audio... just for fun and for my daughter [ samvrita ]
For sound recording in mac:
say -o apple.m4a "a,p,p,l,e,apple"
1) a.html
Following is an example of sample code.
<html>
<head>
<title> Home page </title>
</head>
<body>
<figcaption>
<img src="./images/apple.jpg" alt="apple" width="300" height="300" align="top"/>
<br />
<figcaption><font size="6">APPLE</font></figcaption>
</figcaption>
<!-- <audio controls autoplay> -->
<audio autoplay>
<source src="./sounds/a_for_apple.m4a" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
2) home.html
<html>
<head>
<title> Home page </title>
</head>
<body>
<p>
<img src="./images/sritu_page.jpg" alt="sritu_page" width="1000" height="750"/>
<br />
</p>
</body>
</html>
3) index.html
<html>
<frameset cols="25%,*" border="10" bordercolor="#A9D0F5">
<frame name="leftFrame" src="navigation.html" marginheight=30 marginwidth="30">
<frame name="mainFrame" src="home.html" marginheight="30" marginwidth="25">
</frameset>
</html>
4) navigation.html
<html>
<head>
<title> Navigation </title>
</head>
<body>
<style type="text/css">
.vertical { background-color: yellow; }
.horizontal { display: inline; font-size: 60px }
</style>
<a href="a.html" target="mainFrame"><li class="horizontal">A</li>
<a href="b.html" target="mainFrame"><li class="horizontal">B</li>
<a href="c.html" target="mainFrame"><li class="horizontal">C</li>
<a href="d.html" target="mainFrame"><li class="horizontal">D</li>
<a href="e.html" target="mainFrame"><li class="horizontal">E</li>
<a href="f.html" target="mainFrame"><li class="horizontal">F</li>
<a href="g.html" target="mainFrame"><li class="horizontal">G</li>
<a href="h.html" target="mainFrame"><li class="horizontal">H</li>
<a href="i.html" target="mainFrame"><li class="horizontal">I</li>
<a href="j.html" target="mainFrame"><li class="horizontal">J</li>
<a href="k.html" target="mainFrame"><li class="horizontal">K</li>
<a href="l.html" target="mainFrame"><li class="horizontal">L</li>
<a href="m.html" target="mainFrame"><li class="horizontal">M</li>
<a href="n.html" target="mainFrame"><li class="horizontal">N</li>
<a href="o.html" target="mainFrame"><li class="horizontal">O</li>
<a href="p.html" target="mainFrame"><li class="horizontal">P</li>
<a href="q.html" target="mainFrame"><li class="horizontal">Q</li>
<a href="r.html" target="mainFrame"><li class="horizontal">R</li>
<a href="s.html" target="mainFrame"><li class="horizontal">S</li>
<a href="t.html" target="mainFrame"><li class="horizontal">T</li>
<a href="u.html" target="mainFrame"><li class="horizontal">U</li>
<a href="v.html" target="mainFrame"><li class="horizontal">V</li>
<a href="w.html" target="mainFrame"><li class="horizontal">W</li>
<a href="x.html" target="mainFrame"><li class="horizontal">X</li>
<a href="y.html" target="mainFrame"><li class="horizontal">Y</li>
<a href="z.html" target="mainFrame"><li class="horizontal">Z</li>
</body>
</html>
No comments:
Post a Comment