HTML Learning (File Name:- MyFirstWebpage)(File Type :- HTML)(CSS:- StyleMFW)
<html>
<head>
<title> My First Webpage </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="StyleMFW.css">
</head>
<body>
<div id="s1">
<br>Hello, I am Thakral Kashyap. This is the first webpage created by me.</br>
<br>Scroll down for more. Hope you like it.</br>
</div>
<hr>
<ul>
<div id="hd">
<br>
<li>Changing position of words :</br>
</li>
</div>
<div id="txt">
<br>Normal</br>
<br>
<p>Paragraph align</p>
</br>
<br>
<center>At center</center>
</br>
</div>
<div id="hd">
<hr>
<br>
<li>Making the words move :</br>
</li>
</div>
<div id="txt">
<br>
<marquee>Normally</marquee>
</br>
<br>
<marquee direction="right">In opposite direction</marquee>
</br>
<br>
<marquee direction="up" height="100px">In upward direction</marquee>
</br>
<br>
<marquee direction="down" height="100px">In downward direction</marquee>
</br>
<br>
<marquee width="50%">From center of the screen</marquee>
</br>
<br>
<marquee scrollamount="30">With more speed</marquee>
</br>
</div>
<hr>
<div id="hd">
<br>
<li>Changing the size of the words :</br>
</li>
</div>
<br>
<h1>Size 1</h1>
</br>
<br>
<h2>Size 2</h2>
</br>
<br>
<h3>Size 3</h3>
</br>
<br>
<h4>Size 4</h4>
</br>
<br>
<h5>Size 5</h5>
</br>
<br>
<h6>Size 6</h6>
</br>
<hr>
<div id="hd">
<br>
<li>Changing the size of a letter in an word :</br>
</li>
</div>
<div id="txt">
<br>
<font size=1>H</font>Hello (Size 1)</br>
<br>
<font size=2>H</font>hello (Size 2)</br>
<br>
<font size=3>H</font>Hello (Size 3)</br>
<br>
<font size=4>H</font>Hello (Size 4)</br>
<br>
<font size=5>H</font>Hello (Size 5)</br>
<br>
<font size=6>H</font>Hello (Size 6)</br>
<br>
<font size=7>H</font>Hello (Size 7)</br>
</div>
<hr>
<div id="hd">
<br>
<li>Words with underline, in Italics, in Bold :</br>
</li>
</div>
<div id="txt">
<br><u>Underlined</u></br>
<br><i>In Italics</i></br>
<br><b>In Bold</b></br>
</div>
<hr>
<div id="hd">
<br>
<li>Listing Names with numbers :</br>
</li>
</div>
<ol>
<div id="txt">
<br>
<li>Changu</li>
</br>
<br>
<li>Mangu</li>
</br>
<br>
<li>Chhagan</li>
</br>
<br>
<li>Champa</li>
</br>
<br>
<li>Chameli</li>
</br>
</div>
</ol>
<hr>
<div id="hd">
<br>
<li>Listing names with bullets :</br>
</li>
</div>
<ul>
<div id="txt">
<br>
<li>Changu</li>
</br>
<br>
<li>Mangu</li>
</br>
<br>
<li>Chhagan</li>
</br>
<br>
<li>Champa</li>
</br>
<br>
<li>Chameli</li>
</br>
</div>
</ul>
<hr>
<div id="hd">
<br>
<li>Changing color of the words :</br>
</li>
</div>
<div id="cc">
<font color=#008000>Green</font>
<font color=#FFFF00>Yellow</font>
<font color=#FF00FF>Magenta</font>
<font color=#00FF00>Lime</font>
<font color=#FFA500>Orange</font>
<font color=#00FFFF>Cyan</font>
</div>
<hr>
<div id="hd">
<br>
<li>Textbox with rounded corners :</br>
</li>
</div>
<table>
<tr>
<td>
<div id="rc01">
<div id="rctxt">All corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc02">
<div id="rctxt">All corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc03">
<div id="rctxt">All corners rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc11">
<div id="rctxt">Top left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc12">
<div id="rctxt">Top left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc13">
<div id="rctxt">Top left corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc21">
<div id="rctxt">Top right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc22">
<div id="rctxt">Top right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc23">
<div id="rctxt">Top right corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc31">
<div id="rctxt">Bottom right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc32">
<div id="rctxt">Bottom right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc33">
<div id="rctxt">Bottom right corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc41">
<div id="rctxt">Bottom left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc42">
<div id="rctxt">Bottom left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc43">
<div id="rctxt">Bottom left corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc51">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc52">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc53">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc61">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc62">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc63">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Adding images & GIFs :</br>
</li>
</div>
<br>
<img src="https://i.pinimg.com/736x/60/5b/31/605b31a1adf8b5b2cbab0649b91134f3.jpg" id="img0">
<img src="https://media.nojoto.com/content/media/663521/2019/08/feed/b9753af2ee1010616e1d4354a9572e63/b9753af2ee1010616e1d4354a9572e63_default.jpg" id="img0" style="background-image:linear-gradient(#FF0000,#FFD700);padding:10px 10px 10px 10px;">
<img src="https://image.freepik.com/free-vector/best-inspirational-wisdom-quotes-life-forget-mistake-remember-lesson_67445-7.jpg" id="img0" style="border-radius:0px 20px 0px 20px;">
<img src="https://media.allauthor.com/images/quotes/gif/quote-xcuse-me-i-found-something-under-my-shoes-oh-its.gif" id="img0" style="border-radius:50%;">
</br>
<hr>
<div id="hd">
<br>
<li>Adding interactive images:</br>
</li>
</div>
<table>
<tr>
<td>
<div id="txt">
<img src="https://edusaint.com/wp-content/uploads/2020/03/word-image-5.png" id="img0" usemap="#mirrors">
<map name="mirrors">
<area shape="rect" coords="40,15,60,160" alt="concave mirror"
href="https://byjus.com/jee/concave-mirror-image-formation/">
<area shape="rect" coords="135,15,155,160" alt="convex mirror"
href="https://byjus.com/physics/convex-mirror/">
</map>
</div>
</td>
<td>
<div id="hc">
<img src="https://i1.wp.com/www.csscodelab.com/wp-content/uploads/2020/03/html-hover-over-text-animation-effect.png?fit=1011%2C690&ssl=1.jpg" id="img0">
<div id="overlay1">
<div id="otxt">Hello</div>
</div>
</div>
</td>
<td>
<div id="tr1">Hello</div>
</td>
<td>
<div id="tr2">Hello</div>
</td>
<td>
<div id="tr3">Hello</div>
</td>
<td>
<div id="tr4">Hello</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Creating animations :</br>
</li>
</div>
<table>
<tr>
<td>
<div id="ani1">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : 1</div>
</div>
</td>
<td>
<div id="ani3">
<div id="atxt">Animation starts 2 sec after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : 1</div>
</div>
</td>
<td>
<div id="ani5">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : infinite</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="ani2">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : infinte</div>
</div>
</td>
<td>
<div id="ani4">
<div id="atxt">Animation starts 2 sec after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : infinite</div>
</div>
</td>
<td>
<div id="ani6">
<div id="atrtxt">
<center>Hello</center>
</div>
</div>
<div id="ani11">
<div id="atrtxt">
<center>Hello</center>
</div>
</div>
</td>
<td>
<div id="ani7">
<div id="atrtxt">
<center>Hello</center>
</div>
</div>
</td>
<td>
<div id="ani12">
<div id="trtxt">Hello</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="ani8"></div>
</td>
<td>
<div id="ani9"></div>
</td>
<td>
<div id="fani13"></div>
</td>
<td>
<div id="ani13"></div>
</td>
<td>
<div id="ani10">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 4 sec
<br>Number of times : infinite</div>
</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Rotating images & GIFs :</br>
</li>
</div>
<marquee scrollamount="15"><img src="https://dogtrainingobedienceschool.com/pic/4426266_full-work-hard-quotes-#000000-and-#FFFFFF-work-hard-in-silence-let-success-make-the-noise-motivational.jpg" id="img0"></marquee>
<marquee scrollamount="15" direction="right"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeBFSqMx9Q8SYs4mJ7sv-hNeGfmgcfq89VMg&usqp=CAU.jpg" id="img0"></marquee>
<marquee scrollamount="15" width="50%"><img src="https://ih1.redbubble.net/image.233303085.8070/raf,750x1000,075,t,EDE272:cfc3479bac.jpg" id="img0">
</marquee>
<marquee scrollamount="25"><img src="https://i.stack.imgur.com/Aw6ZN.png"></marquee>
<marquee scrollamount="15" direction="up" height="500px"><img src="https://loveexpands.com/wp-content/uploads/2020/10/Every-morning-you-have-two-choices-1060x1060.png" id="img0"></marquee>
<marquee scrollamount="15" direction="down" height="500px"><img src="https://i0.wp.com/www.themindsetjourney.com/wp-content/uploads/2018/11/IMG_0140.png?fit=2048%2C2048&ssl=1.jpg" id="img0"></marquee>
<hr>
<div id="hd">
<br>
<li>Rotating images with Captions :</br>
</li>
</div>
<br>
<marquee scrollamount="15"><img src="https://i.pinimg.com/236x/9e/8d/e1/9e8de193db7f73bc7e95e34093583f72.jpg" id="img0">
<figcaption>Quote of the day</figcaption>
</marquee>
</br>
<br>
<marquee scrollamount="15"><img src="https://wallpapercave.com/wp/wp2037798.jpg" id="img0">
<figcaption>Taj Mahal</figcaption>
</marquee>
</br>
<hr>
<div id="hd">
<br>
<li>Adding Images which changes when zoomed :</br>
</li>
</div>
<picture>
<source media="(min-width:900px)" srcset="https://www.1zoom.me/big2/19/121217-kissa.jpg" id="img0">
<source media="(min-width:800px)" srcset="https://24rdmo160xr11sgco31bxj30-wpengine.netdna-ssl.com/wp-content/uploads/2020/04/clement-fusil-Fpqx6GGXfXs-unsplash-400px.jpg" id="img0">
<source media="(min-width:700px)" srcset="https://www.w3schools.com/css/klematis4_big.jpg" id="img0">
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg" width="auto" id="img0">
</picture>
<picture>
<source media="(min-width:1000px)" srcset="https://st.depositphotos.com/1428083/2946/i/600/depositphotos_29460297-stock-photo-bird-cage.jpg" id="img0">
<source media="(min-width:800px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCosNE8U8r4l6IY0NHJ7icaHynM8gFLQimNg&usqp=CAU.jpg" id="img0">
<source media="(min-width:600px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2JoWjpdapIEg0kXRJvM5DdFaJr1hbdzL9yP2Fmvldzi-2mo8TkUc_BEmMwK2GgweVd20&usqp=CAU.jpg" id="img0">
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg" width="auto" id="img0">
</picture>
<hr>
<div id="hd">
<br>
<li>Blending Images :</br>
</li>
</div>
<table>
<tr>
<td><img src="https://static.vecteezy.com/system/resources/thumbnails/000/588/660/small/blurrbackground7-01.jpg">
<figcaption>Original Image 1</figcaption>
</td>
<td><img src="https://static.vecteezy.com/system/resources/thumbnails/000/204/051/small/abstract-gradient-background.jpg">
<figcaption>Original Image 2</figcaption>
</td>
</tr>
<tr></tr>
<tr>
<td>
<div id="ib1">
<figcaption>Multiply</figcaption>
</div>
</td>
<td>
<div id="ib2">
<figcaption>Screen</figcaption>
</div>
</td>
<td>
<div id="ib3">
<figcaption>Overlay</figcaption>
</div>
</td>
<td>
<div id="ib4">
<figcaption>Darken</figcaption>
</div>
</td>
<td>
<div id="ib5">
<figcaption>Lighten</figcaption>
</div>
</td>
<td>
<div id="ib12">
<figcaption>Color Burn</figcaption>
</div>
</td>
</tr>
<tr></tr>
<tr>
<td>
<div id="ib6">
<figcaption>Soft Lighten</figcaption>
</div>
</td>
<td>
<div id="ib7">
<figcaption>Hard Lighten</figcaption>
</div>
</td>
<td>
<div id="ib8">
<figcaption>Color Dodge</figcaption>
</div>
</td>
<td>
<div id="ib9">
<figcaption>Saturation</figcaption>
</div>
</td>
<td>
<div id="ib10">
<figcaption>Color</figcaption>
</div>
</td>
<td>
<div id="ib11">
<figcaption>Luminous</figcaption>
</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Adding Hyperlinks :</br>
</li>
</div>
<div id="hyperlinks">
<br><a href="https://www.w3schools.com/tags/default.asp"><abbr title="W3 Schools">Click here to learn more
HTML tags</abbr></a> (This link will be opened in the same tab)</br>
<br><a href="https://www.w3schools.com/tags/default.asp" target="_blank"><abbr title="W3 Schools">Click here
to learn more HTML tags</abbr></a> (This link will be opened in a new tab)</br>
</div>
<br><button onclick="document.getElementById('hyperlinks').style.display='block'">Click here to get the
links.</button></br>
<hr>
<div id="hd">
<br>
<li>Making tables :</br>
</li>
</div>
<table border="4px" style="border-color:#000000;color:#FFFFFF;background-color:#FF0000;">
<caption style="font-size:15;color:#000000">Result</caption>
<tr>
<th>Subject</th>
<th> Semester-1 </th>
<th> Semester-2 </th>
</tr>
<tr>
<td>Physics</td>
<td>94</td>
<td>96</td>
</tr>
<tr>
<td>Chemistry</td>
<td>91</td>
<td>90</td>
</tr>
<tr>
<td>Mathematics</td>
<td>93</td>
<td>95</td>
</tr>
<tr>
<td>Computer</td>
<td>100</td>
<td>100</td>
</tr>
</table>
<table border="4px;" style="border-color:#000000;background-image:linear-gradient(to bottom right,#FF00FF,#0000FF);color:#FFFFFF;background-color:#FF0000;">
<caption style="font-size:15;color:#000000">Result</caption>
<tr>
<th>Subject</th>
<td>Physics</td>
<td>Chemistry</td>
<td>Mathematics</td>
<td>Computer</td>
</tr>
<tr>
<th>Semester-1</th>
<td>94</td>
<td>91</td>
<td>93</td>
<td>100</td>
</tr>
<tr>
<th>Semester-2</th>
<td>96</td>
<td>90</td>
<td>95</td>
<td>100</td>
</tr>
</table>
<table border="3" style="border-color:#000000;background-color:#FF0000;color:#FFFFFF;">
<caption> </caption>
<tr>
<th colspan="5">
<center style="padding:5px 0px 0px 0px;">
<div id="txt">Result</div>
</center>
</th>
</tr>
<tr>
<th>Name</th>
<th>Physics</th>
<th>Chemistry</th>
<th>Maths</th>
<th>Computer</th>
</tr>
<tr>
<td>Cahmpa</td>
<td>95</td>
<td>89</td>
<td>91</td>
<td>93</td>
</tr>
<tr>
<td>Chameli</td>
<td>97</td>
<td>92</td>
<td>93</td>
<td>90</td>
</tr>
<tr>
<td>Changu</td>
<td>86</td>
<td>91</td>
<td>88</td>
<td>83</td>
</tr>
<tr>
<td>Mangu</td>
<td>97</td>
<td>92</td>
<td>90</td>
<td>94</td>
</tr>
<tr>
<td>Chhagan</td>
<td>93</td>
<td>94</td>
<td>88</td>
<td>93</td>
</tr>
</table>
<br>
<br>
<center><button type="button" onclick="alert('Do you want to go to Registration Form page?')"><a href="FormN.html">Next>></a></button></center>
</br>
<center>
<p>Thank you for visting my webpage.</p>
</center>
</ul>
</body>
</html><html>
<head>
<title> My First Webpage </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="StyleMFW.css">
</head>
<body>
<div id="s1">
<br>Hello, I am Thakral Kashyap. This is the first webpage created by me.</br>
<br>Scroll down for more. Hope you like it.</br>
</div>
<hr>
<ul>
<div id="hd">
<br>
<li>Changing position of words :</br>
</li>
</div>
<div id="txt">
<br>Normal</br>
<br>
<p>Paragraph align</p>
</br>
<br>
<center>At center</center>
</br>
</div>
<div id="hd">
<hr>
<br>
<li>Making the words move :</br>
</li>
</div>
<div id="txt">
<br>
<marquee>Normally</marquee>
</br>
<br>
<marquee direction="right">In opposite direction</marquee>
</br>
<br>
<marquee direction="up" height="100px">In upward direction</marquee>
</br>
<br>
<marquee direction="down" height="100px">In downward direction</marquee>
</br>
<br>
<marquee width="50%">From center of the screen</marquee>
</br>
<br>
<marquee scrollamount="30">With more speed</marquee>
</br>
</div>
<hr>
<div id="hd">
<br>
<li>Changing the size of the words :</br>
</li>
</div>
<br>
<h1>Size 1</h1>
</br>
<br>
<h2>Size 2</h2>
</br>
<br>
<h3>Size 3</h3>
</br>
<br>
<h4>Size 4</h4>
</br>
<br>
<h5>Size 5</h5>
</br>
<br>
<h6>Size 6</h6>
</br>
<hr>
<div id="hd">
<br>
<li>Changing the size of a letter in an word :</br>
</li>
</div>
<div id="txt">
<br>
<font size=1>H</font>Hello (Size 1)</br>
<br>
<font size=2>H</font>hello (Size 2)</br>
<br>
<font size=3>H</font>Hello (Size 3)</br>
<br>
<font size=4>H</font>Hello (Size 4)</br>
<br>
<font size=5>H</font>Hello (Size 5)</br>
<br>
<font size=6>H</font>Hello (Size 6)</br>
<br>
<font size=7>H</font>Hello (Size 7)</br>
</div>
<hr>
<div id="hd">
<br>
<li>Words with underline, in Italics, in Bold :</br>
</li>
</div>
<div id="txt">
<br><u>Underlined</u></br>
<br><i>In Italics</i></br>
<br><b>In Bold</b></br>
</div>
<hr>
<div id="hd">
<br>
<li>Listing Names with numbers :</br>
</li>
</div>
<ol>
<div id="txt">
<br>
<li>Changu</li>
</br>
<br>
<li>Mangu</li>
</br>
<br>
<li>Chhagan</li>
</br>
<br>
<li>Champa</li>
</br>
<br>
<li>Chameli</li>
</br>
</div>
</ol>
<hr>
<div id="hd">
<br>
<li>Listing names with bullets :</br>
</li>
</div>
<ul>
<div id="txt">
<br>
<li>Changu</li>
</br>
<br>
<li>Mangu</li>
</br>
<br>
<li>Chhagan</li>
</br>
<br>
<li>Champa</li>
</br>
<br>
<li>Chameli</li>
</br>
</div>
</ul>
<hr>
<div id="hd">
<br>
<li>Changing color of the words :</br>
</li>
</div>
<div id="cc">
<font color=#008000>Green</font>
<font color=#FFFF00>Yellow</font>
<font color=#FF00FF>Magenta</font>
<font color=#00FF00>Lime</font>
<font color=#FFA500>Orange</font>
<font color=#00FFFF>Cyan</font>
</div>
<hr>
<div id="hd">
<br>
<li>Textbox with rounded corners :</br>
</li>
</div>
<table>
<tr>
<td>
<div id="rc01">
<div id="rctxt">All corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc02">
<div id="rctxt">All corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc03">
<div id="rctxt">All corners rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc11">
<div id="rctxt">Top left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc12">
<div id="rctxt">Top left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc13">
<div id="rctxt">Top left corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc21">
<div id="rctxt">Top right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc22">
<div id="rctxt">Top right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc23">
<div id="rctxt">Top right corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc31">
<div id="rctxt">Bottom right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc32">
<div id="rctxt">Bottom right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc33">
<div id="rctxt">Bottom right corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc41">
<div id="rctxt">Bottom left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc42">
<div id="rctxt">Bottom left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc43">
<div id="rctxt">Bottom left corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc51">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc52">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc53">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc61">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc62">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc63">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Adding images & GIFs :</br>
</li>
</div>
<br>
<img src="https://i.pinimg.com/736x/60/5b/31/605b31a1adf8b5b2cbab0649b91134f3.jpg" id="img0">
<img src="https://media.nojoto.com/content/media/663521/2019/08/feed/b9753af2ee1010616e1d4354a9572e63/b9753af2ee1010616e1d4354a9572e63_default.jpg" id="img0" style="background-image:linear-gradient(#FF0000,#FFD700);padding:10px 10px 10px 10px;">
<img src="https://image.freepik.com/free-vector/best-inspirational-wisdom-quotes-life-forget-mistake-remember-lesson_67445-7.jpg" id="img0" style="border-radius:0px 20px 0px 20px;">
<img src="https://media.allauthor.com/images/quotes/gif/quote-xcuse-me-i-found-something-under-my-shoes-oh-its.gif" id="img0" style="border-radius:50%;">
</br>
<hr>
<div id="hd">
<br>
<li>Adding interactive images:</br>
</li>
</div>
<table>
<tr>
<td>
<div id="txt">
<img src="https://edusaint.com/wp-content/uploads/2020/03/word-image-5.png" id="img0" usemap="#mirrors">
<map name="mirrors">
<area shape="rect" coords="40,15,60,160" alt="concave mirror"
href="https://byjus.com/jee/concave-mirror-image-formation/">
<area shape="rect" coords="135,15,155,160" alt="convex mirror"
href="https://byjus.com/physics/convex-mirror/">
</map>
</div>
</td>
<td>
<div id="hc">
<img src="https://i1.wp.com/www.csscodelab.com/wp-content/uploads/2020/03/html-hover-over-text-animation-effect.png?fit=1011%2C690&ssl=1.jpg" id="img0">
<div id="overlay1">
<div id="otxt">Hello</div>
</div>
</div>
</td>
<td>
<div id="tr1">Hello</div>
</td>
<td>
<div id="tr2">Hello</div>
</td>
<td>
<div id="tr3">Hello</div>
</td>
<td>
<div id="tr4">Hello</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Creating animations :</br>
</li>
</div>
<table>
<tr>
<td>
<div id="ani1">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : 1</div>
</div>
</td>
<td>
<div id="ani3">
<div id="atxt">Animation starts 2 sec after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : 1</div>
</div>
</td>
<td>
<div id="ani5">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : infinite</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="ani2">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : infinte</div>
</div>
</td>
<td>
<div id="ani4">
<div id="atxt">Animation starts 2 sec after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : infinite</div>
</div>
</td>
<td>
<div id="ani6">
<div id="atrtxt">
<center>Hello</center>
</div>
</div>
<div id="ani11">
<div id="atrtxt">
<center>Hello</center>
</div>
</div>
</td>
<td>
<div id="ani7">
<div id="atrtxt">
<center>Hello</center>
</div>
</div>
</td>
<td>
<div id="ani12">
<div id="trtxt">Hello</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="ani8"></div>
</td>
<td>
<div id="ani9"></div>
</td>
<td>
<div id="fani13"></div>
</td>
<td>
<div id="ani13"></div>
</td>
<td>
<div id="ani10">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 4 sec
<br>Number of times : infinite</div>
</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Rotating images & GIFs :</br>
</li>
</div>
<marquee scrollamount="15"><img src="https://dogtrainingobedienceschool.com/pic/4426266_full-work-hard-quotes-#000000-and-#FFFFFF-work-hard-in-silence-let-success-make-the-noise-motivational.jpg" id="img0"></marquee>
<marquee scrollamount="15" direction="right"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeBFSqMx9Q8SYs4mJ7sv-hNeGfmgcfq89VMg&usqp=CAU.jpg" id="img0"></marquee>
<marquee scrollamount="15" width="50%"><img src="https://ih1.redbubble.net/image.233303085.8070/raf,750x1000,075,t,EDE272:cfc3479bac.jpg" id="img0">
</marquee>
<marquee scrollamount="25"><img src="https://i.stack.imgur.com/Aw6ZN.png"></marquee>
<marquee scrollamount="15" direction="up" height="500px"><img src="https://loveexpands.com/wp-content/uploads/2020/10/Every-morning-you-have-two-choices-1060x1060.png" id="img0"></marquee>
<marquee scrollamount="15" direction="down" height="500px"><img src="https://i0.wp.com/www.themindsetjourney.com/wp-content/uploads/2018/11/IMG_0140.png?fit=2048%2C2048&ssl=1.jpg" id="img0"></marquee>
<hr>
<div id="hd">
<br>
<li>Rotating images with Captions :</br>
</li>
</div>
<br>
<marquee scrollamount="15"><img src="https://i.pinimg.com/236x/9e/8d/e1/9e8de193db7f73bc7e95e34093583f72.jpg" id="img0">
<figcaption>Quote of the day</figcaption>
</marquee>
</br>
<br>
<marquee scrollamount="15"><img src="https://wallpapercave.com/wp/wp2037798.jpg" id="img0">
<figcaption>Taj Mahal</figcaption>
</marquee>
</br>
<hr>
<div id="hd">
<br>
<li>Adding Images which changes when zoomed :</br>
</li>
</div>
<picture>
<source media="(min-width:900px)" srcset="https://www.1zoom.me/big2/19/121217-kissa.jpg" id="img0">
<source media="(min-width:800px)" srcset="https://24rdmo160xr11sgco31bxj30-wpengine.netdna-ssl.com/wp-content/uploads/2020/04/clement-fusil-Fpqx6GGXfXs-unsplash-400px.jpg" id="img0">
<source media="(min-width:700px)" srcset="https://www.w3schools.com/css/klematis4_big.jpg" id="img0">
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg" width="auto" id="img0">
</picture>
<picture>
<source media="(min-width:1000px)" srcset="https://st.depositphotos.com/1428083/2946/i/600/depositphotos_29460297-stock-photo-bird-cage.jpg" id="img0">
<source media="(min-width:800px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCosNE8U8r4l6IY0NHJ7icaHynM8gFLQimNg&usqp=CAU.jpg" id="img0">
<source media="(min-width:600px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2JoWjpdapIEg0kXRJvM5DdFaJr1hbdzL9yP2Fmvldzi-2mo8TkUc_BEmMwK2GgweVd20&usqp=CAU.jpg" id="img0">
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg" width="auto" id="img0">
</picture>
<hr>
<div id="hd">
<br>
<li>Blending Images :</br>
</li>
</div>
<table>
<tr>
<td><img src="https://static.vecteezy.com/system/resources/thumbnails/000/588/660/small/blurrbackground7-01.jpg">
<figcaption>Original Image 1</figcaption>
</td>
<td><img src="https://static.vecteezy.com/system/resources/thumbnails/000/204/051/small/abstract-gradient-background.jpg">
<figcaption>Original Image 2</figcaption>
</td>
</tr>
<tr></tr>
<tr>
<td>
<div id="ib1">
<figcaption>Multiply</figcaption>
</div>
</td>
<td>
<div id="ib2">
<figcaption>Screen</figcaption>
</div>
</td>
<td>
<div id="ib3">
<figcaption>Overlay</figcaption>
</div>
</td>
<td>
<div id="ib4">
<figcaption>Darken</figcaption>
</div>
</td>
<td>
<div id="ib5">
<figcaption>Lighten</figcaption>
</div>
</td>
<td>
<div id="ib12">
<figcaption>Color Burn</figcaption>
</div>
</td>
</tr>
<tr></tr>
<tr>
<td>
<div id="ib6">
<figcaption>Soft Lighten</figcaption>
</div>
</td>
<td>
<div id="ib7">
<figcaption>Hard Lighten</figcaption>
</div>
</td>
<td>
<div id="ib8">
<figcaption>Color Dodge</figcaption>
</div>
</td>
<td>
<div id="ib9">
<figcaption>Saturation</figcaption>
</div>
</td>
<td>
<div id="ib10">
<figcaption>Color</figcaption>
</div>
</td>
<td>
<div id="ib11">
<figcaption>Luminous</figcaption>
</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Adding Hyperlinks :</br>
</li>
</div>
<div id="hyperlinks">
<br><a href="https://www.w3schools.com/tags/default.asp"><abbr title="W3 Schools">Click here to learn more
HTML tags</abbr></a> (This link will be opened in the same tab)</br>
<br><a href="https://www.w3schools.com/tags/default.asp" target="_blank"><abbr title="W3 Schools">Click here
to learn more HTML tags</abbr></a> (This link will be opened in a new tab)</br>
</div>
<br><button onclick="document.getElementById('hyperlinks').style.display='block'">Click here to get the
links.</button></br>
<hr>
<div id="hd">
<br>
<li>Making tables :</br>
</li>
</div>
<table border="4px" style="border-color:#000000;color:#FFFFFF;background-color:#FF0000;">
<caption style="font-size:15;color:#000000">Result</caption>
<tr>
<th>Subject</th>
<th> Semester-1 </th>
<th> Semester-2 </th>
</tr>
<tr>
<td>Physics</td>
<td>94</td>
<td>96</td>
</tr>
<tr>
<td>Chemistry</td>
<td>91</td>
<td>90</td>
</tr>
<tr>
<td>Mathematics</td>
<td>93</td>
<td>95</td>
</tr>
<tr>
<td>Computer</td>
<td>100</td>
<td>100</td>
</tr>
</table>
<table border="4px;" style="border-color:#000000;background-image:linear-gradient(to bottom right,#FF00FF,#0000FF);color:#FFFFFF;background-color:#FF0000;">
<caption style="font-size:15;color:#000000">Result</caption>
<tr>
<th>Subject</th>
<td>Physics</td>
<td>Chemistry</td>
<td>Mathematics</td>
<td>Computer</td>
</tr>
<tr>
<th>Semester-1</th>
<td>94</td>
<td>91</td>
<td>93</td>
<td>100</td>
</tr>
<tr>
<th>Semester-2</th>
<td>96</td>
<td>90</td>
<td>95</td>
<td>100</td>
</tr>
</table>
<table border="3" style="border-color:#000000;background-color:#FF0000;color:#FFFFFF;">
<caption> </caption>
<tr>
<th colspan="5">
<center style="padding:5px 0px 0px 0px;">
<div id="txt">Result</div>
</center>
</th>
</tr>
<tr>
<th>Name</th>
<th>Physics</th>
<th>Chemistry</th>
<th>Maths</th>
<th>Computer</th>
</tr>
<tr>
<td>Cahmpa</td>
<td>95</td>
<td>89</td>
<td>91</td>
<td>93</td>
</tr>
<tr>
<td>Chameli</td>
<td>97</td>
<td>92</td>
<td>93</td>
<td>90</td>
</tr>
<tr>
<td>Changu</td>
<td>86</td>
<td>91</td>
<td>88</td>
<td>83</td>
</tr>
<tr>
<td>Mangu</td>
<td>97</td>
<td>92</td>
<td>90</td>
<td>94</td>
</tr>
<tr>
<td>Chhagan</td>
<td>93</td>
<td>94</td>
<td>88</td>
<td>93</td>
</tr>
</table>
<br>
<br>
<center><button type="button" onclick="alert('Do you want to go to Registration Form page?')"><a href="FormN.html">Next>></a></button></center>
</br>
<center>
<p>Thank you for visting my webpage.</p>
</center>
</ul>
</body>
</html><html>
<head>
<title> My First Webpage </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="StyleMFW.css">
</head>
<body>
<div id="s1">
<br>Hello, I am Thakral Kashyap. This is the first webpage created by me.</br>
<br>Scroll down for more. Hope you like it.</br>
</div>
<hr>
<ul>
<div id="hd">
<br>
<li>Changing position of words :</br>
</li>
</div>
<div id="txt">
<br>Normal</br>
<br>
<p>Paragraph align</p>
</br>
<br>
<center>At center</center>
</br>
</div>
<div id="hd">
<hr>
<br>
<li>Making the words move :</br>
</li>
</div>
<div id="txt">
<br>
<marquee>Normally</marquee>
</br>
<br>
<marquee direction="right">In opposite direction</marquee>
</br>
<br>
<marquee direction="up" height="100px">In upward direction</marquee>
</br>
<br>
<marquee direction="down" height="100px">In downward direction</marquee>
</br>
<br>
<marquee width="50%">From center of the screen</marquee>
</br>
<br>
<marquee scrollamount="30">With more speed</marquee>
</br>
</div>
<hr>
<div id="hd">
<br>
<li>Changing the size of the words :</br>
</li>
</div>
<br>
<h1>Size 1</h1>
</br>
<br>
<h2>Size 2</h2>
</br>
<br>
<h3>Size 3</h3>
</br>
<br>
<h4>Size 4</h4>
</br>
<br>
<h5>Size 5</h5>
</br>
<br>
<h6>Size 6</h6>
</br>
<hr>
<div id="hd">
<br>
<li>Changing the size of a letter in an word :</br>
</li>
</div>
<div id="txt">
<br>
<font size=1>H</font>Hello (Size 1)</br>
<br>
<font size=2>H</font>hello (Size 2)</br>
<br>
<font size=3>H</font>Hello (Size 3)</br>
<br>
<font size=4>H</font>Hello (Size 4)</br>
<br>
<font size=5>H</font>Hello (Size 5)</br>
<br>
<font size=6>H</font>Hello (Size 6)</br>
<br>
<font size=7>H</font>Hello (Size 7)</br>
</div>
<hr>
<div id="hd">
<br>
<li>Words with underline, in Italics, in Bold :</br>
</li>
</div>
<div id="txt">
<br><u>Underlined</u></br>
<br><i>In Italics</i></br>
<br><b>In Bold</b></br>
</div>
<hr>
<div id="hd">
<br>
<li>Listing Names with numbers :</br>
</li>
</div>
<ol>
<div id="txt">
<br>
<li>Changu</li>
</br>
<br>
<li>Mangu</li>
</br>
<br>
<li>Chhagan</li>
</br>
<br>
<li>Champa</li>
</br>
<br>
<li>Chameli</li>
</br>
</div>
</ol>
<hr>
<div id="hd">
<br>
<li>Listing names with bullets :</br>
</li>
</div>
<ul>
<div id="txt">
<br>
<li>Changu</li>
</br>
<br>
<li>Mangu</li>
</br>
<br>
<li>Chhagan</li>
</br>
<br>
<li>Champa</li>
</br>
<br>
<li>Chameli</li>
</br>
</div>
</ul>
<hr>
<div id="hd">
<br>
<li>Changing color of the words :</br>
</li>
</div>
<div id="cc">
<font color=#008000>Green</font>
<font color=#FFFF00>Yellow</font>
<font color=#FF00FF>Magenta</font>
<font color=#00FF00>Lime</font>
<font color=#FFA500>Orange</font>
<font color=#00FFFF>Cyan</font>
</div>
<hr>
<div id="hd">
<br>
<li>Textbox with rounded corners :</br>
</li>
</div>
<table>
<tr>
<td>
<div id="rc01">
<div id="rctxt">All corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc02">
<div id="rctxt">All corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc03">
<div id="rctxt">All corners rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc11">
<div id="rctxt">Top left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc12">
<div id="rctxt">Top left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc13">
<div id="rctxt">Top left corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc21">
<div id="rctxt">Top right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc22">
<div id="rctxt">Top right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc23">
<div id="rctxt">Top right corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc31">
<div id="rctxt">Bottom right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc32">
<div id="rctxt">Bottom right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc33">
<div id="rctxt">Bottom right corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc41">
<div id="rctxt">Bottom left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc42">
<div id="rctxt">Bottom left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc43">
<div id="rctxt">Bottom left corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc51">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc52">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc53">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc61">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc62">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc63">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Adding images & GIFs :</br>
</li>
</div>
<br>
<img src="https://i.pinimg.com/736x/60/5b/31/605b31a1adf8b5b2cbab0649b91134f3.jpg" id="img0">
<img src="https://media.nojoto.com/content/media/663521/2019/08/feed/b9753af2ee1010616e1d4354a9572e63/b9753af2ee1010616e1d4354a9572e63_default.jpg" id="img0" style="background-image:linear-gradient(#FF0000,#FFD700);padding:10px 10px 10px 10px;">
<img src="https://image.freepik.com/free-vector/best-inspirational-wisdom-quotes-life-forget-mistake-remember-lesson_67445-7.jpg" id="img0" style="border-radius:0px 20px 0px 20px;">
<img src="https://media.allauthor.com/images/quotes/gif/quote-xcuse-me-i-found-something-under-my-shoes-oh-its.gif" id="img0" style="border-radius:50%;">
</br>
<hr>
<div id="hd">
<br>
<li>Adding interactive images:</br>
</li>
</div>
<table>
<tr>
<td>
<div id="txt">
<img src="https://edusaint.com/wp-content/uploads/2020/03/word-image-5.png" id="img0" usemap="#mirrors">
<map name="mirrors">
<area shape="rect" coords="40,15,60,160" alt="concave mirror"
href="https://byjus.com/jee/concave-mirror-image-formation/">
<area shape="rect" coords="135,15,155,160" alt="convex mirror"
href="https://byjus.com/physics/convex-mirror/">
</map>
</div>
</td>
<td>
<div id="hc">
<img src="https://i1.wp.com/www.csscodelab.com/wp-content/uploads/2020/03/html-hover-over-text-animation-effect.png?fit=1011%2C690&ssl=1.jpg" id="img0">
<div id="overlay1">
<div id="otxt">Hello</div>
</div>
</div>
</td>
<td>
<div id="tr1">Hello</div>
</td>
<td>
<div id="tr2">Hello</div>
</td>
<td>
<div id="tr3">Hello</div>
</td>
<td>
<div id="tr4">Hello</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Creating animations :</br>
</li>
</div>
<table>
<tr>
<td>
<div id="ani1">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : 1</div>
</div>
</td>
<td>
<div id="ani3">
<div id="atxt">Animation starts 2 sec after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : 1</div>
</div>
</td>
<td>
<div id="ani5">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : infinite</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="ani2">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : infinte</div>
</div>
</td>
<td>
<div id="ani4">
<div id="atxt">Animation starts 2 sec after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : infinite</div>
</div>
</td>
<td>
<div id="ani6">
<div id="atrtxt">
<center>Hello</center>
</div>
</div>
<div id="ani11">
<div id="atrtxt">
<center>Hello</center>
</div>
</div>
</td>
<td>
<div id="ani7">
<div id="atrtxt">
<center>Hello</center>
</div>
</div>
</td>
<td>
<div id="ani12">
<div id="trtxt">Hello</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="ani8"></div>
</td>
<td>
<div id="ani9"></div>
</td>
<td>
<div id="fani13"></div>
</td>
<td>
<div id="ani13"></div>
</td>
<td>
<div id="ani10">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 4 sec
<br>Number of times : infinite</div>
</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Rotating images & GIFs :</br>
</li>
</div>
<marquee scrollamount="15"><img src="https://dogtrainingobedienceschool.com/pic/4426266_full-work-hard-quotes-#000000-and-#FFFFFF-work-hard-in-silence-let-success-make-the-noise-motivational.jpg" id="img0"></marquee>
<marquee scrollamount="15" direction="right"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeBFSqMx9Q8SYs4mJ7sv-hNeGfmgcfq89VMg&usqp=CAU.jpg" id="img0"></marquee>
<marquee scrollamount="15" width="50%"><img src="https://ih1.redbubble.net/image.233303085.8070/raf,750x1000,075,t,EDE272:cfc3479bac.jpg" id="img0">
</marquee>
<marquee scrollamount="25"><img src="https://i.stack.imgur.com/Aw6ZN.png"></marquee>
<marquee scrollamount="15" direction="up" height="500px"><img src="https://loveexpands.com/wp-content/uploads/2020/10/Every-morning-you-have-two-choices-1060x1060.png" id="img0"></marquee>
<marquee scrollamount="15" direction="down" height="500px"><img src="https://i0.wp.com/www.themindsetjourney.com/wp-content/uploads/2018/11/IMG_0140.png?fit=2048%2C2048&ssl=1.jpg" id="img0"></marquee>
<hr>
<div id="hd">
<br>
<li>Rotating images with Captions :</br>
</li>
</div>
<br>
<marquee scrollamount="15"><img src="https://i.pinimg.com/236x/9e/8d/e1/9e8de193db7f73bc7e95e34093583f72.jpg" id="img0">
<figcaption>Quote of the day</figcaption>
</marquee>
</br>
<br>
<marquee scrollamount="15"><img src="https://wallpapercave.com/wp/wp2037798.jpg" id="img0">
<figcaption>Taj Mahal</figcaption>
</marquee>
</br>
<hr>
<div id="hd">
<br>
<li>Adding Images which changes when zoomed :</br>
</li>
</div>
<picture>
<source media="(min-width:900px)" srcset="https://www.1zoom.me/big2/19/121217-kissa.jpg" id="img0">
<source media="(min-width:800px)" srcset="https://24rdmo160xr11sgco31bxj30-wpengine.netdna-ssl.com/wp-content/uploads/2020/04/clement-fusil-Fpqx6GGXfXs-unsplash-400px.jpg" id="img0">
<source media="(min-width:700px)" srcset="https://www.w3schools.com/css/klematis4_big.jpg" id="img0">
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg" width="auto" id="img0">
</picture>
<picture>
<source media="(min-width:1000px)" srcset="https://st.depositphotos.com/1428083/2946/i/600/depositphotos_29460297-stock-photo-bird-cage.jpg" id="img0">
<source media="(min-width:800px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCosNE8U8r4l6IY0NHJ7icaHynM8gFLQimNg&usqp=CAU.jpg" id="img0">
<source media="(min-width:600px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2JoWjpdapIEg0kXRJvM5DdFaJr1hbdzL9yP2Fmvldzi-2mo8TkUc_BEmMwK2GgweVd20&usqp=CAU.jpg" id="img0">
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg" width="auto" id="img0">
</picture>
<hr>
<div id="hd">
<br>
<li>Blending Images :</br>
</li>
</div>
<table>
<tr>
<td><img src="https://static.vecteezy.com/system/resources/thumbnails/000/588/660/small/blurrbackground7-01.jpg">
<figcaption>Original Image 1</figcaption>
</td>
<td><img src="https://static.vecteezy.com/system/resources/thumbnails/000/204/051/small/abstract-gradient-background.jpg">
<figcaption>Original Image 2</figcaption>
</td>
</tr>
<tr></tr>
<tr>
<td>
<div id="ib1">
<figcaption>Multiply</figcaption>
</div>
</td>
<td>
<div id="ib2">
<figcaption>Screen</figcaption>
</div>
</td>
<td>
<div id="ib3">
<figcaption>Overlay</figcaption>
</div>
</td>
<td>
<div id="ib4">
<figcaption>Darken</figcaption>
</div>
</td>
<td>
<div id="ib5">
<figcaption>Lighten</figcaption>
</div>
</td>
<td>
<div id="ib12">
<figcaption>Color Burn</figcaption>
</div>
</td>
</tr>
<tr></tr>
<tr>
<td>
<div id="ib6">
<figcaption>Soft Lighten</figcaption>
</div>
</td>
<td>
<div id="ib7">
<figcaption>Hard Lighten</figcaption>
</div>
</td>
<td>
<div id="ib8">
<figcaption>Color Dodge</figcaption>
</div>
</td>
<td>
<div id="ib9">
<figcaption>Saturation</figcaption>
</div>
</td>
<td>
<div id="ib10">
<figcaption>Color</figcaption>
</div>
</td>
<td>
<div id="ib11">
<figcaption>Luminous</figcaption>
</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Adding Hyperlinks :</br>
</li>
</div>
<div id="hyperlinks">
<br><a href="https://www.w3schools.com/tags/default.asp"><abbr title="W3 Schools">Click here to learn more
HTML tags</abbr></a> (This link will be opened in the same tab)</br>
<br><a href="https://www.w3schools.com/tags/default.asp" target="_blank"><abbr title="W3 Schools">Click here
to learn more HTML tags</abbr></a> (This link will be opened in a new tab)</br>
</div>
<br><button onclick="document.getElementById('hyperlinks').style.display='block'">Click here to get the
links.</button></br>
<hr>
<div id="hd">
<br>
<li>Making tables :</br>
</li>
</div>
<table border="4px" style="border-color:#000000;color:#FFFFFF;background-color:#FF0000;">
<caption style="font-size:15;color:#000000">Result</caption>
<tr>
<th>Subject</th>
<th> Semester-1 </th>
<th> Semester-2 </th>
</tr>
<tr>
<td>Physics</td>
<td>94</td>
<td>96</td>
</tr>
<tr>
<td>Chemistry</td>
<td>91</td>
<td>90</td>
</tr>
<tr>
<td>Mathematics</td>
<td>93</td>
<td>95</td>
</tr>
<tr>
<td>Computer</td>
<td>100</td>
<td>100</td>
</tr>
</table>
<table border="4px;" style="border-color:#000000;background-image:linear-gradient(to bottom right,#FF00FF,#0000FF);color:#FFFFFF;background-color:#FF0000;">
<caption style="font-size:15;color:#000000">Result</caption>
<tr>
<th>Subject</th>
<td>Physics</td>
<td>Chemistry</td>
<td>Mathematics</td>
<td>Computer</td>
</tr>
<tr>
<th>Semester-1</th>
<td>94</td>
<td>91</td>
<td>93</td>
<td>100</td>
</tr>
<tr>
<th>Semester-2</th>
<td>96</td>
<td>90</td>
<td>95</td>
<td>100</td>
</tr>
</table>
<table border="3" style="border-color:#000000;background-color:#FF0000;color:#FFFFFF;">
<caption> </caption>
<tr>
<th colspan="5">
<center style="padding:5px 0px 0px 0px;">
<div id="txt">Result</div>
</center>
</th>
</tr>
<tr>
<th>Name</th>
<th>Physics</th>
<th>Chemistry</th>
<th>Maths</th>
<th>Computer</th>
</tr>
<tr>
<td>Cahmpa</td>
<td>95</td>
<td>89</td>
<td>91</td>
<td>93</td>
</tr>
<tr>
<td>Chameli</td>
<td>97</td>
<td>92</td>
<td>93</td>
<td>90</td>
</tr>
<tr>
<td>Changu</td>
<td>86</td>
<td>91</td>
<td>88</td>
<td>83</td>
</tr>
<tr>
<td>Mangu</td>
<td>97</td>
<td>92</td>
<td>90</td>
<td>94</td>
</tr>
<tr>
<td>Chhagan</td>
<td>93</td>
<td>94</td>
<td>88</td>
<td>93</td>
</tr>
</table>
<br>
<br>
<center><button type="button" onclick="alert('Do you want to go to Registration Form page?')"><a href="FormN.html">Next>></a></button></center>
</br>
<center>
<p>Thank you for visting my webpage.</p>
</center>
</ul>
</body>
</html><html>
<head>
<title> My First Webpage </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="StyleMFW.css">
</head>
<body>
<div id="s1">
<br>Hello, I am Thakral Kashyap. This is the first webpage created by me.</br>
<br>Scroll down for more. Hope you like it.</br>
</div>
<hr>
<ul>
<div id="hd">
<br>
<li>Changing position of words :</br>
</li>
</div>
<div id="txt">
<br>Normal</br>
<br>
<p>Paragraph align</p>
</br>
<br>
<center>At center</center>
</br>
</div>
<div id="hd">
<hr>
<br>
<li>Making the words move :</br>
</li>
</div>
<div id="txt">
<br>
<marquee>Normally</marquee>
</br>
<br>
<marquee direction="right">In opposite direction</marquee>
</br>
<br>
<marquee direction="up" height="100px">In upward direction</marquee>
</br>
<br>
<marquee direction="down" height="100px">In downward direction</marquee>
</br>
<br>
<marquee width="50%">From center of the screen</marquee>
</br>
<br>
<marquee scrollamount="30">With more speed</marquee>
</br>
</div>
<hr>
<div id="hd">
<br>
<li>Changing the size of the words :</br>
</li>
</div>
<br>
<h1>Size 1</h1>
</br>
<br>
<h2>Size 2</h2>
</br>
<br>
<h3>Size 3</h3>
</br>
<br>
<h4>Size 4</h4>
</br>
<br>
<h5>Size 5</h5>
</br>
<br>
<h6>Size 6</h6>
</br>
<hr>
<div id="hd">
<br>
<li>Changing the size of a letter in an word :</br>
</li>
</div>
<div id="txt">
<br>
<font size=1>H</font>Hello (Size 1)</br>
<br>
<font size=2>H</font>hello (Size 2)</br>
<br>
<font size=3>H</font>Hello (Size 3)</br>
<br>
<font size=4>H</font>Hello (Size 4)</br>
<br>
<font size=5>H</font>Hello (Size 5)</br>
<br>
<font size=6>H</font>Hello (Size 6)</br>
<br>
<font size=7>H</font>Hello (Size 7)</br>
</div>
<hr>
<div id="hd">
<br>
<li>Words with underline, in Italics, in Bold :</br>
</li>
</div>
<div id="txt">
<br><u>Underlined</u></br>
<br><i>In Italics</i></br>
<br><b>In Bold</b></br>
</div>
<hr>
<div id="hd">
<br>
<li>Listing Names with numbers :</br>
</li>
</div>
<ol>
<div id="txt">
<br>
<li>Changu</li>
</br>
<br>
<li>Mangu</li>
</br>
<br>
<li>Chhagan</li>
</br>
<br>
<li>Champa</li>
</br>
<br>
<li>Chameli</li>
</br>
</div>
</ol>
<hr>
<div id="hd">
<br>
<li>Listing names with bullets :</br>
</li>
</div>
<ul>
<div id="txt">
<br>
<li>Changu</li>
</br>
<br>
<li>Mangu</li>
</br>
<br>
<li>Chhagan</li>
</br>
<br>
<li>Champa</li>
</br>
<br>
<li>Chameli</li>
</br>
</div>
</ul>
<hr>
<div id="hd">
<br>
<li>Changing color of the words :</br>
</li>
</div>
<div id="cc">
<font color=#008000>Green</font>
<font color=#FFFF00>Yellow</font>
<font color=#FF00FF>Magenta</font>
<font color=#00FF00>Lime</font>
<font color=#FFA500>Orange</font>
<font color=#00FFFF>Cyan</font>
</div>
<hr>
<div id="hd">
<br>
<li>Textbox with rounded corners :</br>
</li>
</div>
<table>
<tr>
<td>
<div id="rc01">
<div id="rctxt">All corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc02">
<div id="rctxt">All corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc03">
<div id="rctxt">All corners rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc11">
<div id="rctxt">Top left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc12">
<div id="rctxt">Top left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc13">
<div id="rctxt">Top left corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc21">
<div id="rctxt">Top right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc22">
<div id="rctxt">Top right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc23">
<div id="rctxt">Top right corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc31">
<div id="rctxt">Bottom right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc32">
<div id="rctxt">Bottom right corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc33">
<div id="rctxt">Bottom right corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc41">
<div id="rctxt">Bottom left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc42">
<div id="rctxt">Bottom left corner rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc43">
<div id="rctxt">Bottom left corner rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc51">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc52">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc53">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div id="rc61">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc62">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
<td> </td>
<td>
<div id="rc63">
<div id="rctxt">Top right & left corners rounded</div>
</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Adding images & GIFs :</br>
</li>
</div>
<br>
<img src="https://i.pinimg.com/736x/60/5b/31/605b31a1adf8b5b2cbab0649b91134f3.jpg" id="img0">
<img src="https://media.nojoto.com/content/media/663521/2019/08/feed/b9753af2ee1010616e1d4354a9572e63/b9753af2ee1010616e1d4354a9572e63_default.jpg" id="img0" style="background-image:linear-gradient(#FF0000,#FFD700);padding:10px 10px 10px 10px;">
<img src="https://image.freepik.com/free-vector/best-inspirational-wisdom-quotes-life-forget-mistake-remember-lesson_67445-7.jpg" id="img0" style="border-radius:0px 20px 0px 20px;">
<img src="https://media.allauthor.com/images/quotes/gif/quote-xcuse-me-i-found-something-under-my-shoes-oh-its.gif" id="img0" style="border-radius:50%;">
</br>
<hr>
<div id="hd">
<br>
<li>Adding interactive images:</br>
</li>
</div>
<table>
<tr>
<td>
<div id="txt">
<img src="https://edusaint.com/wp-content/uploads/2020/03/word-image-5.png" id="img0" usemap="#mirrors">
<map name="mirrors">
<area shape="rect" coords="40,15,60,160" alt="concave mirror"
href="https://byjus.com/jee/concave-mirror-image-formation/">
<area shape="rect" coords="135,15,155,160" alt="convex mirror"
href="https://byjus.com/physics/convex-mirror/">
</map>
</div>
</td>
<td>
<div id="hc">
<img src="https://i1.wp.com/www.csscodelab.com/wp-content/uploads/2020/03/html-hover-over-text-animation-effect.png?fit=1011%2C690&ssl=1.jpg" id="img0">
<div id="overlay1">
<div id="otxt">Hello</div>
</div>
</div>
</td>
<td>
<div id="tr1">Hello</div>
</td>
<td>
<div id="tr2">Hello</div>
</td>
<td>
<div id="tr3">Hello</div>
</td>
<td>
<div id="tr4">Hello</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Creating animations :</br>
</li>
</div>
<table>
<tr>
<td>
<div id="ani1">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : 1</div>
</div>
</td>
<td>
<div id="ani3">
<div id="atxt">Animation starts 2 sec after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : 1</div>
</div>
</td>
<td>
<div id="ani5">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : infinite</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="ani2">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : infinte</div>
</div>
</td>
<td>
<div id="ani4">
<div id="atxt">Animation starts 2 sec after loading the page.<br>Time for 1 aimation : 3 sec
<br>Number of times : infinite</div>
</div>
</td>
<td>
<div id="ani6">
<div id="atrtxt">
<center>Hello</center>
</div>
</div>
<div id="ani11">
<div id="atrtxt">
<center>Hello</center>
</div>
</div>
</td>
<td>
<div id="ani7">
<div id="atrtxt">
<center>Hello</center>
</div>
</div>
</td>
<td>
<div id="ani12">
<div id="trtxt">Hello</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="ani8"></div>
</td>
<td>
<div id="ani9"></div>
</td>
<td>
<div id="fani13"></div>
</td>
<td>
<div id="ani13"></div>
</td>
<td>
<div id="ani10">
<div id="atxt">Animation starts instantly after loading the page.<br>Time for 1 aimation : 4 sec
<br>Number of times : infinite</div>
</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Rotating images & GIFs :</br>
</li>
</div>
<marquee scrollamount="15"><img src="https://dogtrainingobedienceschool.com/pic/4426266_full-work-hard-quotes-#000000-and-#FFFFFF-work-hard-in-silence-let-success-make-the-noise-motivational.jpg" id="img0"></marquee>
<marquee scrollamount="15" direction="right"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeBFSqMx9Q8SYs4mJ7sv-hNeGfmgcfq89VMg&usqp=CAU.jpg" id="img0"></marquee>
<marquee scrollamount="15" width="50%"><img src="https://ih1.redbubble.net/image.233303085.8070/raf,750x1000,075,t,EDE272:cfc3479bac.jpg" id="img0">
</marquee>
<marquee scrollamount="25"><img src="https://i.stack.imgur.com/Aw6ZN.png"></marquee>
<marquee scrollamount="15" direction="up" height="500px"><img src="https://loveexpands.com/wp-content/uploads/2020/10/Every-morning-you-have-two-choices-1060x1060.png" id="img0"></marquee>
<marquee scrollamount="15" direction="down" height="500px"><img src="https://i0.wp.com/www.themindsetjourney.com/wp-content/uploads/2018/11/IMG_0140.png?fit=2048%2C2048&ssl=1.jpg" id="img0"></marquee>
<hr>
<div id="hd">
<br>
<li>Rotating images with Captions :</br>
</li>
</div>
<br>
<marquee scrollamount="15"><img src="https://i.pinimg.com/236x/9e/8d/e1/9e8de193db7f73bc7e95e34093583f72.jpg" id="img0">
<figcaption>Quote of the day</figcaption>
</marquee>
</br>
<br>
<marquee scrollamount="15"><img src="https://wallpapercave.com/wp/wp2037798.jpg" id="img0">
<figcaption>Taj Mahal</figcaption>
</marquee>
</br>
<hr>
<div id="hd">
<br>
<li>Adding Images which changes when zoomed :</br>
</li>
</div>
<picture>
<source media="(min-width:900px)" srcset="https://www.1zoom.me/big2/19/121217-kissa.jpg" id="img0">
<source media="(min-width:800px)" srcset="https://24rdmo160xr11sgco31bxj30-wpengine.netdna-ssl.com/wp-content/uploads/2020/04/clement-fusil-Fpqx6GGXfXs-unsplash-400px.jpg" id="img0">
<source media="(min-width:700px)" srcset="https://www.w3schools.com/css/klematis4_big.jpg" id="img0">
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg" width="auto" id="img0">
</picture>
<picture>
<source media="(min-width:1000px)" srcset="https://st.depositphotos.com/1428083/2946/i/600/depositphotos_29460297-stock-photo-bird-cage.jpg" id="img0">
<source media="(min-width:800px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCosNE8U8r4l6IY0NHJ7icaHynM8gFLQimNg&usqp=CAU.jpg" id="img0">
<source media="(min-width:600px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2JoWjpdapIEg0kXRJvM5DdFaJr1hbdzL9yP2Fmvldzi-2mo8TkUc_BEmMwK2GgweVd20&usqp=CAU.jpg" id="img0">
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg" width="auto" id="img0">
</picture>
<hr>
<div id="hd">
<br>
<li>Blending Images :</br>
</li>
</div>
<table>
<tr>
<td><img src="https://static.vecteezy.com/system/resources/thumbnails/000/588/660/small/blurrbackground7-01.jpg">
<figcaption>Original Image 1</figcaption>
</td>
<td><img src="https://static.vecteezy.com/system/resources/thumbnails/000/204/051/small/abstract-gradient-background.jpg">
<figcaption>Original Image 2</figcaption>
</td>
</tr>
<tr></tr>
<tr>
<td>
<div id="ib1">
<figcaption>Multiply</figcaption>
</div>
</td>
<td>
<div id="ib2">
<figcaption>Screen</figcaption>
</div>
</td>
<td>
<div id="ib3">
<figcaption>Overlay</figcaption>
</div>
</td>
<td>
<div id="ib4">
<figcaption>Darken</figcaption>
</div>
</td>
<td>
<div id="ib5">
<figcaption>Lighten</figcaption>
</div>
</td>
<td>
<div id="ib12">
<figcaption>Color Burn</figcaption>
</div>
</td>
</tr>
<tr></tr>
<tr>
<td>
<div id="ib6">
<figcaption>Soft Lighten</figcaption>
</div>
</td>
<td>
<div id="ib7">
<figcaption>Hard Lighten</figcaption>
</div>
</td>
<td>
<div id="ib8">
<figcaption>Color Dodge</figcaption>
</div>
</td>
<td>
<div id="ib9">
<figcaption>Saturation</figcaption>
</div>
</td>
<td>
<div id="ib10">
<figcaption>Color</figcaption>
</div>
</td>
<td>
<div id="ib11">
<figcaption>Luminous</figcaption>
</div>
</td>
</tr>
</table>
<hr>
<div id="hd">
<br>
<li>Adding Hyperlinks :</br>
</li>
</div>
<div id="hyperlinks">
<br><a href="https://www.w3schools.com/tags/default.asp"><abbr title="W3 Schools">Click here to learn more
HTML tags</abbr></a> (This link will be opened in the same tab)</br>
<br><a href="https://www.w3schools.com/tags/default.asp" target="_blank"><abbr title="W3 Schools">Click here
to learn more HTML tags</abbr></a> (This link will be opened in a new tab)</br>
</div>
<br><button onclick="document.getElementById('hyperlinks').style.display='block'">Click here to get the
links.</button></br>
<hr>
<div id="hd">
<br>
<li>Making tables :</br>
</li>
</div>
<table border="4px" style="border-color:#000000;color:#FFFFFF;background-color:#FF0000;">
<caption style="font-size:15;color:#000000">Result</caption>
<tr>
<th>Subject</th>
<th> Semester-1 </th>
<th> Semester-2 </th>
</tr>
<tr>
<td>Physics</td>
<td>94</td>
<td>96</td>
</tr>
<tr>
<td>Chemistry</td>
<td>91</td>
<td>90</td>
</tr>
<tr>
<td>Mathematics</td>
<td>93</td>
<td>95</td>
</tr>
<tr>
<td>Computer</td>
<td>100</td>
<td>100</td>
</tr>
</table>
<table border="4px;" style="border-color:#000000;background-image:linear-gradient(to bottom right,#FF00FF,#0000FF);color:#FFFFFF;background-color:#FF0000;">
<caption style="font-size:15;color:#000000">Result</caption>
<tr>
<th>Subject</th>
<td>Physics</td>
<td>Chemistry</td>
<td>Mathematics</td>
<td>Computer</td>
</tr>
<tr>
<th>Semester-1</th>
<td>94</td>
<td>91</td>
<td>93</td>
<td>100</td>
</tr>
<tr>
<th>Semester-2</th>
<td>96</td>
<td>90</td>
<td>95</td>
<td>100</td>
</tr>
</table>
<table border="3" style="border-color:#000000;background-color:#FF0000;color:#FFFFFF;">
<caption> </caption>
<tr>
<th colspan="5">
<center style="padding:5px 0px 0px 0px;">
<div id="txt">Result</div>
</center>
</th>
</tr>
<tr>
<th>Name</th>
<th>Physics</th>
<th>Chemistry</th>
<th>Maths</th>
<th>Computer</th>
</tr>
<tr>
<td>Cahmpa</td>
<td>95</td>
<td>89</td>
<td>91</td>
<td>93</td>
</tr>
<tr>
<td>Chameli</td>
<td>97</td>
<td>92</td>
<td>93</td>
<td>90</td>
</tr>
<tr>
<td>Changu</td>
<td>86</td>
<td>91</td>
<td>88</td>
<td>83</td>
</tr>
<tr>
<td>Mangu</td>
<td>97</td>
<td>92</td>
<td>90</td>
<td>94</td>
</tr>
<tr>
<td>Chhagan</td>
<td>93</td>
<td>94</td>
<td>88</td>
<td>93</td>
</tr>
</table>
<br>
<br>
<center><button type="button" onclick="alert('Do you want to go to Registration Form page?')"><a href="FormN.html">Next>></a></button></center>
</br>
<center>
<p>Thank you for visting my webpage.</p>
</center>
</ul>
</body>
</html>
