1 form login page <title><head><body><center> <h1 student login information (/h1) </center><form><div class ="Container"> <center><div> <label> Username : </label><input type="text" place holder = "enter the username required> </div><div><label> Password :</label><input type="Password" place holder ="enter the Password" required> </div><div> <button type= "Submit"> login </button> </div><input type="checkbox" checked =" Checked"remember me<div> <button type="button" class= Cancel btn"> Cancel </button> </div><div> forget <a href ='#'> password </a> </div</div></form></body></html>2 key animation<!DOCTYPE html><head><Style> h1{Color black;text align: Center;}div{ Position:relative;animation jtp 7s infinite;}@keyframes jtp {0% { top: 100px;width: 0px;Font-size: 10px;transform : translate (0px) Scale (1.4) rotate (80deg);}25%{ top:100px;background: yellow;Width: 50px;Font-size: 20px;transform : translate (100px) Scale (1.3) rotate (60deg);}50%{ top:100px;background: orange;Width: 50px;Font-size: 20px;transform : translate (200px) Scale (1.2) rotate (40deg);}75%{ top:100px;background: pink;Width: 50px;Font-size: 40px;transform : translate (400px) Scale (1.1) rotate (20deg);}100%{ top:100px;background: red;Width: 10px;Font-size: 60px;transform : translate (400px) Scale (1) rotate (0deg);}}</style></head><body><div><h1>Multimedia and animation</h1></div></body></html>3 Multiple animation<!DOCTYPE html><html><head><style> div {width: 100px; height: 100px;background-color: red; position: relative; animation-name:example; animation-duration: 4s;}@keyframes example{ 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px;top:0px;}50% {background-color:blue; left:200px; top:200px;}75% {background-color:green; left:0px; top:200px;}100% {background-color:red; left:0px; top:0px;}}</style></head><body><h1> Multiple Animation</h1><div></div><p><b>Note:</b> Whenan animation is finished, it goes back to its original style.</p></body></html>4 Font property<!DOCTYPE html><html><head><style>p.a { font: 15px Arial, sans-serif;}p.b { font:italic small-caps bold 12px/30px Georgia, serif;}</style></head><body><h1>The fontProperty</h1><p class="a">This is a paragraph. The font size is set to 12 pixels, andthe font family is Calibri.</p><p class="b">This is a paragraph. The font is set to italicand bold, with small-caps (all lowercase letters are converted to uppercase). The fontsize is set to 12 pixels, the line height is set to 30 pixels, and the font family isGeorgia.</p></body></html>1 Svg circle<!DOCTYPE html><html><body><center><h1 style="color:green">Welcome To multimedia andanimation</h1><svg height="400" width="400"><circle cx="150" cy="150" r="100"stroke="gray"stroke-width="2" fill="green" /></svg><svg height="300"width="300"><circle cx="150" cy="150" r="100" stroke="green"stroke-width="2"fill="blue" /></svg></center></body></html>2.Svg ellipse<html> <title>SVG Ellipse Sample SVG Ellipse Image
Ellipse #1: Withoutopacity. 3 Svg star SVG SVGStar
4 Stroke text