html_in_one_video.html
<!-- html -->
<!-- markup language -->
<!-- tags -->
<!-- Attributes -->
<!-- types of tages -->
<!-- types of Atributes -->
<!-- boilor plate of html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MianwaliCodeHouse</title>
<link rel="shortcut icon" href="material/complete html,css&js.png" type="image/x-icon">
</head>
<body>
<a href="#bottom" id="top">bottom</a>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
<!-- achor tag -->
<a href="https://www.google.com/">google</a>
<a href="an_other_page.html">next</a>
<b>bold</b>
<i>italic</i>
<span>text</span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus at maiores earum quasi sint <b>bold</b>molestiae in sapiente provident voluptatibus ullam delectus adipisci ea dolor corporis sunt, et ratione hic labore autem. Tenetur veniam obcaecati, quae officiis sint sed laboriosam ipsam repellendus non facilis, facere vero inventore optio dignissimos, nostrum cum. <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis est explicabo mollitia deleniti repudiandae adipisci provident, rem culpa corporis dolore laboriosam recusandae quis pariatur fugiat id neque facilis. Dolore voluptate aspernatur mollitia? Porro numquam doloribus rem, consectetur ad laborum ipsa ipsam tempora voluptas illum nam dolores recusandae nostrum voluptates? Corporis. <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius culpa iusto doloremque neque. Aliquam sapiente dolorum velit minus provident! Doloribus eum est, accusamus ex voluptas quis! Adipisci provident veniam odio eos blanditiis sequi vel in at suscipit, dicta nemo nulla libero aperiam asperiores, magnam, atque pariatur quo! Vero, provident sapiente?
</p>
<pre>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos optio placeat!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro repellendus eveniet voluptate quo eius molestias rerum dolor atque fuga cupiditate saepe cum laborum, nemo vitae ducimus quas autem, accusamus incidunt explicabo. Nulla quae repellendus tenetur aut labore quas! Amet suscipit est impedit voluptatem. Commodi dicta, fuga sequi ducimus pariatur tempora minima quas autem provident distinctio animi reprehenderit nam laborum ab quam aliquam suscipit voluptatibus cupiditate ipsum voluptas natus! Ipsum dolores cumque hic alias quidem molestias ex a molestiae quibusdam magnam, amet esse perferendis labore harum aliquid tempora ipsam et explicabo nobis aut impedit sapiente excepturi quaerat voluptatibus? Ducimus, maxime eligendi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda fugit alias laborum quidem? Quos ducimus voluptas nam tempora temporibus nisi id dolore suscipit accusamus minus dignissimos, laborum non enim quod!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis impedit consequatur incidunt.
</pre>
<pre>
<code>
print("hello world")
</code>
</pre>
<hr>
<h1>Ordered list</h1>
<ol>
<li>item1</li>
<li>item2</li>
<li>box1</li>
<li>box2</li>
<li>box3</li>
<li>box4</li>
<li>box5</li>
</ol>
<h1>Unordered list</h1>
<ul>
<li>unordered list items no: 1</li>
<li>unordered list items no: 2</li>
<li>unordered list items no: 3</li>
<li>unordered list items no: 4</li>
<li>unordered list items no: 5</li>
<li>unordered list items no: 6</li>
<li>unordered list items no: 7</li>
<li>unordered list items no: 8</li>
<li>unordered list items no: 9</li>
<li>unordered list items no: 10</li>
</ul>
<table border="1">
<thead>
<tr>
<th>Roll number</th>
<th>student name</th>
<th>father name</th>
<th>department</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>yasir</td>
<td>sajid</td>
<td rowspan="4">bscs</td>
</tr>
<tr>
<td>1</td>
<td>nasir</td>
<td>yasir</td>
</tr>
<tr>
<td>20</td>
<td>sultan</td>
<td>kashif</td>
</tr>
<tr>
<td>12</td>
<td>hasnat</td>
<td>junaid</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Total</th>
<th colspan="2">100</th>
</tr>
</tfoot>
</table>
<!-- media tags
-->
<img src="material/complete html,css&js.png" alt="error loading">
<video src="material/myvideo.mp4" width="100%" controls></video>
<audio src="material/audio.mp3" controls></audio>
<img src="material/gif.gif" alt="" width="100%" height="100%">
<iframe width="560" height="315" src="https://www.youtube.com/embed/yvDW7x4Xhsk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://muhammadyasirhussain.blogspot.com/" frameborder="0"></iframe>
<iframe src="https://trinket.io/embed/python3/5fa64561a8" width="100%" height="356" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
<form action="html_in_one_video.html" method="post">
<input type="text" name="" id=""> <br>
<input type="email" name="" id=""> <br>
<input type="date" name="" id=""> <br>
<input type="file" name="" id=""> <br>
<input type="color" name="" id=""> <br>
<input type="number" name="" id=""> <br>
<input type="password" name="" id=""> <br>
<input type="image" src="" alt=""> <br>
<input type="submit" value="submit"> <br>
<input type="reset" value="reset"> <br>
</form>
<header id="bottom">
<nav></nav>
</header>
<main>
<section>
<div></div>
</section>
<section>
<div></div>
</section>
<section>
<div></div>
</section>
<section>
<div></div>
</section>
</main>
<footer>
</footer>
<a href="#top">top</a>
<!-- javascript -->
</body>
<!-- javascript -->
</html>
an_other_page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>An other page</h1>
<a href="html_in_one_video.html">back</a>
</body>
</html>
.png)
