4 Class
Uploaded by
sandeep4 Class
Uploaded by
sandeepClass 5:
Client/Server Architecture:
A request will sent to server. Server validates request ,process and sent back response.
Request= header + body (optional)
TOP 4 types of request
GET – Read friend details in FB
POST -
PUT--- Update--- Change city in FB
DELETE- Delete profile in fb
Response : header + body
Ways to talk server:
Form Submit
http request
ajax call
some frame work
Block level elements:
Used for structuring the HTML content
<div> - division tag – it starts the block of content from new line always, used for groping the
content. It is good practice to provide class (classification) property for every div element for
grouping purpose.
<span> - inline element – it never starts from a new line, always keeps it in same line.
form action="https://anubhavtrainings.com" method="POST">
<div class="login">
<label>User Name</label>
<input name="username" id="idUser">
</div>
<div class="login"></div>
<label>Password</label>
<input name="password" type="password" id="idPass">
</div>
<div class="login">
<input type="submit">
</div>
<div class="others">
<input type="color">
<input type="date">
<input type="email">
<input type="number" min="10" max="15">
</div>
</form>
<table>
<thead>
<tr>
<th>Song Name</th>
<th>Artist</th>
<th>Rock On!</th>
</tr>
</thead>
<tbody>
<tr>
<td>Beautiful</td>
<td>Ed Sareen</td>
<td><audio controls></audio></td>
</tr>
<tr>
<td>Best Song Ever</td>
<td>One Direction</td>
<td><audio controls></audio></td>
</tr>
<tr>
<td>La Vida</td>
<td>Cold play</td>
<td><audio controls></audio></td>
</tr>
<tr>
<td>Tu Bhoola Jise</td>
<td>KK</td>
<td><audio controls></audio></td>
</tr>
</tbody>
</table>
<iframe width="853" height="480"
src="https://www.youtube.com/embed/TGl7b1B5TeI?
list=PLcxqFaocb9WJ8g8TZPsHQIEcSjKW9F0IE" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<iframe src="https://www.anubhavtrainings.com" width="100%"
height="600px"></iframe>
<br>
<video src="https://www.w3schools.com/html/mov_bbb.mp4"
controls></video>
<audio src="https://pwdown.com/10142/04%20Tu%20Bhoola%20Jise%20-
%20Airlift%20(KK)%20190Kbps.mp3" controls>
<a href="https://anubhavtrainings.com">Click here</a>
<br>
<a href="https://anubhavtrainings.com">
<img src="images/anubhavtrainings.png" width="300px"
height="300px">
</a>
What is CSS?
CSS stands for Cascading Style Sheet, It is used for format and beautify HTML content. Before CSS,
we used to use html tags to style our content.
<h2>I Love India</h2>
<h2>I <color value=“red”><b><em>Love</em></b></color> India</h2>
There are 3 ways we can apply CSS
1. Inline CSS – is applied at html element level using property called style=“prop:val;prop:val;
…”
2. Internal CSS – is reusable and centrally kept at page level using <style> tag
3. External CSS – is reusable where the style content is written in a separate file called .css and
we can later <link> it.
4. <style>
5. selector {
6. prop: val;
7. prop: val;
8. prop: val;
9. }
10. </style>
11. Selector- element(S) which we want to target
12. Single element by its id - #id
13. Multiple elements by their class names = .classname
14. Multiple elements by their tag name = tagName
15. Exercise: Bring all three boxes for content in straight line.
16.<html>
17. <head>
18. <style>
19. /* h2{
20. color: magenta
21. } */
22. .box{
23. width: 180px;
24. }
25. .box-title{
26. color: red;
27. border: 1px solid black;
28. }
29. .box-content{
30. background-color: yellow;
31. color:blue;
32. font-family: cursive;
33. border: 1px solid black;
34. }
35. </style>
36. </head>
37. <body style="background-color: turquoise;">
38. <div class="box">
39. <div class="box-title">
40. <h2>What is HTML</h2>
41. </div>
42. <div class="box-content">
43. <p>HTML stands for<b><em>Hyper Text Markup
Language</em></b>, it is used to design
44. static web content
45. </p>
46. </div>
47. </div>
48. <div class="box">
49. <div class="box-title">
50. <h2>What is CSS</h2>
51. </div>
52. <div class="box-content">
53. <p>CSS stands for Cascading Style Sheets, It is used to
style/beautify
54. our content
55. </p>
56. </div>
57. </div>
58. <div class="box">
59. <div class="box-title">
60. <h2>What is JS</h2>
61. </div>
62. <div class="box-content">
63. <p>JS stands for Java Script, it is the browser's
programming language</p>
64. </div>
65. </div>
66. <h2>Personal Details</h2>
67. <div>
68. <label>first name</label>
69. <input>
70. </div>
71. <div>
72. <label>last name</label>
73. <input>
74. </div>
75. </body>
76.</html>
Up to class4 all code:
<html>
<head>
<style>
.box{
width : 180px;
}
.box-title{
color : coral;
border: 1px solid black;
}
.box-content{
color : crimson;
border: 1px solid black;
font-family: cursive;
background-color: darkkhaki;
}
</style>
</head>
<body>
<iframe src="https://infrabeat.com/" width="100%" height="600px"> </
iframe>
<br>
<div class="video">
<iframe width="853" height="480" src="https://www.youtube.com/embed/
Q1NKMPhP8PY" title="YouTube video player" frameborder="0" allow="accelerometer
; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" a
llowfullscreen></iframe>
<p>Welcome to BAS</p>
<button>Get Details</button>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/
2wCEAAoHCBYWFRgVFRYYGBgZGhgYGhoaGBoYGhoYGRgZGhkYGBocIS4lHB4rIRgYJjgmKy8xNTU1Gi
Q7QDs0Py40NTEBDAwMEA8QHxISHzYrJCs0NDQ2NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0
NDQ0NDQ0NDQ0NDQ0NDQ0NP/AABEIALEBHQMBIgACEQEDEQH/
xAAbAAACAwEBAQAAAAAAAAAAAAAAAwECBAUGB//
EADcQAAEDAgMEBwcEAwEBAAAAAAEAAhEDIQQxQRJRYXEFIoGRodHwExQyUpKxwQZi4fEVQlPScv/
EABkBAAMBAQEAAAAAAAAAAAAAAAABAgMEBf/
EACwRAAICAQMEAgEDBAMAAAAAAAABAhEDEiExBBNBUSJhFAWRoTJScbEVI0L/2gAMAwEAAhEDEQA/
APk7HkKTddDE4RwzZxtosREZhaRaZrLHKLpjKMQWnXLmoZSkwhhByV2knKx+6Y1ToYykW3JieI+yl1
PkfBVBn4s+OfeqvaQbFTTNdktlsDsODoezRZn0SOS3Uq0WcVocA4WcORgdx1RbXIu3GStHJa46qWs1
WmtRM6dhCU0kWKswcXF7jHw6DHBMp4abyAN5Sp5KWAzIlDXo0TV7oa8SCBp4rC9q6LGA5G/
JIfQ370kE4t7mWmbgrY+iYDtCkBkFb6dduyWOyN2ncdRyICb2FjinakZDVgRqqHepqNl3enMp9XthM
VNuhuHEgjh9rpFSlErTRYZAGYV6jbmRmM+EKeGbuGqJjeAWi94hKYmPbuShmqRg+RxbISH5LRQ3Kjm
ICStWZoUtKlzVaiLpoyrcs9iWm1ClwmN8lXhVIsmOCoQgllWNlONhxVqdM6epQ9kZoCnyJ2ZXRwrdm
DlDT3mViYbi0J768tPOB5+t6lo0xtRdisRUtzJKzhspr22VC+ECbt2x9LE//XerVXg/
CRxCyFpCsUqK7kqpgQdO5Wa7fPYfV0MfG9PaDpPggUVfBQGTme1MLDrMqvs0xr5sUGiXsKbNCh9CMr
p4Yr1WWSs10bGUPjMFLiTmtIw8iRnulVbRIKdohwkJLCteEws5plslJdIAGYRdlxgk7YjEU4mNLJLH
Rc33z9wukzDyJ8FerhWhs6apX4L7TfyRzHtmIBSnMK1NaWktMx6utFPDg+rp2Z6GxGEw03Pj+EVeo4
gQW6RxWvEv2LN1Ejgk4dm3DctB36+KF7KcUviuS+Ad1w6MuJATcUQSdmYmZ1J3clbF0dgtYPiHWd3W
H3U0qUtzUOuTojFpPGc19O8jJKqMvOi14lkGAmUWAsdO+fAKr2Od47k0c9lrpjBmrGiRpZMowqZCi0
6ZhqtVaITsQEptgmjCaqRR5V2NtKXEpz8oTJW+4oqoCsQiEyRzK2zlnP8ASS90qitCQ7b2GtbAJPD8
lUpNJ9ZBXdkeyO7NSynnpYd5QUo7g9s5fwqupN3qzWyLaLPUF1DLapXRZpBzQ1sZ5KjXJrSmSnZaoy
DmDxCdQeBPFKdUJzv91QEoLtJ2jTYqfZpTXLbMtGUxeJ8Qk9jWNS5IL7QqG6q8qKTusPylQ3LemOpM
vErVTpzbsCzuN7eu1DahzufW5SbQaTovXZBTKDbHRWcdrPNXbSIhKzRQ+VrgWx5aR6Kq55JI0OSaWg
2hTVplsW7B6sqsHF19FsNhdpwDrcSlVz1zaAIHZknsrSImCr1Ke11t4AKm3e5pojKNRMNSnrE8VTDv
jn5Lc2j1SLpDcMJmfyqTMpYmmmjVtbbQ8i4seSpQpEEgH1uTMNUDCfsZvvhanNnZLcjmdfFS3Wx0Ri
mrfPk5tTDEyddyUxuy6H2BWikNp0HMTP8ACdicM0kcu1O62Zjo1fKJzsSCLC4GXJKc3KE/
EsLbbsuSja6sd38KlwYyjcnZnq0ZWSqxb3TEHJZnMvG9UjnyRRFLDHYL9xhKcF38Rhtils/
NB8FxHNRGWovNh7VJ80KDNyoWLbh2XMgwB/
SzVDeVV7nM47WZyFYNV2slMdCZCRVomTyTqTNqeJvyCgU56rc/
AJ9KWsjODpBsolwb44778CGVNm28Ge63csVXNNe8pClLyTkn4RMK7UNfwV7HKy0IRCArbBzQ22iB0W
DMitFOkY/
Pkq0HgWcJB8NxCY9kQM84P54JM2gklZWq0gXCSuuwNAG2C5pAAu3OL9maw1cLbaZlzB7LclKZc8flF
GOyWu0W9FYQ/SEymb28k3EITrY2GrujjPkujhX7QEi4y/
sLlUXda9wtzSBkBOhG71vWconbhnvbYpzyx9xacluZsuIG0AIi+fIDVYcW+4Ov3VsNsky4kEaIa2HG
dSa8WajhQDInfY7lVlcNgd40g9is/FAWBz++47lUYfbEgiRmLb7mNVPjc2bV/
wDXyPxDBBdOYEW1WbAQSY+IafcrXSZsjZsQQdAI4G8arDQGy8jI9yIu00GS006/
yPq4UuLjFxr+EYdhbZ3wkgZgjxAWzDMqEmfhIMfdPexpbtG32nhGShy8GkcSfyWzODiGw8GYz9eK2U
sUS6NkOmxMRA8lTpHDnMDL1mtWApPDCNppyyLT9iVo2nGzmhFrK4rbyczGM0HoLO+p1Y3Lo4ylHA68
iubs804vYyzQakwgkC8+CRk5vAhdLDt/
aO1Z6jOsTG5WnZlLG1TOx0z8AjcPsvPQu7jXl9Np5flYAyBkssWyOnrVrmmvSMmLeG9Rp1vzWEhPrs
MqtNi6I7I8uduVAynZVcxPcICqXQpciu2qFUmEEE2BMKcTVnLkqPfPNUIQlfInLStKEuVS1Nc1UTZg
0GypATIRCZekqCU3bnNV2VOygFaL20Tmu0y/
PYs4amAlOi0xjgQLGw0U0sURbSe5UVdhFWPU07RqrxmBnrkeazVGa5qwUtQo0DlZFFxC1NxQ7fys5C
qGFDimOMpR4N7XbQkdyq52+345LK0kJ9N5m90tNGiyWJqOIMSt+AxhabZ3y9ZrNXZJS29U2II4T+Qh
xUkKOSUJWmelw+JY8hsgOOUTE7oO9JxWAghxPVO65jgFhwZBEQJ0Pkus/
FBrNg3zkk3jgR3LCUXGWx6kc8ckPkZamIa1o2STE9Uk98q1F7Hi7iCZsJ3G4hcvEEE2SGPLTIJC07a
aOZ9W1LdbHUrYgjqPJ78tL8IW3A4ZrmSx/W4W3Lg1qjndZxJJzJzWjo/
EPBhsj1qlKHx2FDqE8ltWju1MLLZdncTbMZgrF/jTsywbV9/
krux2w0iZJ32HmfBIw3TGwbcsrd0idfNYKEuUdks+JtJmJ8ixBBCGmRG7Vegq0m1ADsQ46iYjtXMfh
C3lv0vxCtSTVcMl4ZJ6k7RDX7TA2NfBQ9jTLZyFtxWh9HYYSTEWB/
1M8ZWGmwzwA2ieHohKNU6DInaTXJgriVncYK0vMmdJy1WSsVpq2PPnCnZBeozU06ZJTH0ozU6tx6JN
WI2VVyc5ij2cK9Rk4GchV2E5yqk5NkaUO9kj2a6LaKt7unqNe0c0UlPsl0hhke7J60HZZzgxWFNb/
d1YYdPWHaZgFNW9ktwoJgoI1AsTOcKSkUV0hh1PuyNY+yzm+xU+yXTGGVK1MNBccgjWDxNI53s0tz2
tN3AHmsOJ6WcbNEDfmew6aLnc/
Xkk5nPKS8Hcd0gwTJJPAZ9qw1OkifhaAONysJQBKzc2S3KRqZ0nUbdpA7B+VZvSdWSdqZEXAI7jrxW
ZlOVYU1Dmy0pey4x1T5u8DyVv8i+ZtyhK9kqbF4nfdNTZLizfR6S0eO0eS3YbHtNgY52XAMKZ9Z+Cp
TYlKUWemY7buDteKv7A7l5nD13sIcwwdDHgZtqvQdFdKe0dsvADt8xO6xVa2b45xk6lydTBYtzLZjc
d26d67NJ7HnaEbQFzkbb/ALrluwyGAjf65LKSUt0enizSx7PdD+mPgERbOxE7rb1zqg2aY/
cJJIP4H9ruUXCNtxkyTFp9ZJOPYwiRBi45m8d5WKco7V5Ox6J27V0eXfszYgc8+1ILSStmOgWhIZRf
nEDfl/a1Ujzp4/lX+h9IbAmLpQpOcZTKYMyT6+/
gmkk2vHAR4lJPctxuKXgzvpBuqzVHhaX0zy8UsUb3t23WiZzzi3skZQDuRslazASS/
gnZi4Ud9tNXFJaNlTsrLUdyghApKfZJwarhqNRagjOKSu2jwTw1XAS1DUEZ/
YqzaK0tamMYpcylBGdtFMGHWlrE9rVLmWoIwjDLifqp2zRjq9Yxcwcr7I1PmvVEwvK9Pfp99auHtMt
LYMkAN2cgLTB5HNOMt9zm6mLUGoq2zx+Hwxde0cTF+e+yZRYzUuDp5ZSYJmxy3ZFauk8D7J4puc0/
CS1pLiAZsLC+val1nNIDAwNdIlxcbCLB2QGWtxs929njaWnTA4VjgAw9Yi4uTaSdLADfw5qHYIzAEk
SS0dYgDMyNFamS34JB/
wBoc0tIbcFrpN87SbHNdDD4oH4g5pEbAAEEQ6DcHhbmokzaEbMWHwpMQRfwJyHct2H6P3tJMGwtkBe
+k9326PR+GL9Gw1rczNtk2zGecZz49xnR7/
jYNjasAJECBHP4Z5lc0stHp4+mi1bPGP6PNyAdkXJ2dNYE3A81kfhSSRmYJO4EaSLaL2uK6LIGwQ0E
yQ42jZEQDlmAZ4Ea24VYhjusIEva7YJGrZGZjRXDJZlmwUrRx24DqzaIkkG+UxB/
E6JVZrLAbjJ62+06kxeFuxOKcZaxpaJOySYcQCT14sdLZTvXPewRtAi1+sQHOP8AtA3LdM8+UaKtpN
cSB1RBPWNgb9WQLm40UYZxp1GmQC065RkZibZpteq1zSQxrMo2Ztv2gT4xokMY55a1rS5xMDiTkBuV
GfnY+i0GbYBtGc/ynCnFgEnoHAGjRa1xJPxEWs43IEaLqGmLGFg57ntxTcU2qZlo9HvdeICd/
j2jN0nmAuoKrS2BGWtrrlVqD3T1h2GR2rKeWR1YMGN7tnPxODpzMSRkFz8SJMQLabuZ/
C6xwQbm6eMEfiFndhWDJze4z4LOMnZ3SUHGlRxXUyTb+ezcmNovyA7V1BTYLZ8gf7TWPj4WHuAWus5
Hj32TOSOjnu3+uKYOhjqO9dhtcjTxS34l5y8AUd30S+mvdo5NTooDOO7zWV2EbuHgunXFQ/
6nwXOqUHk7u1aRn9nLlwNcI64cpleE96qf9H/W7zUjF1P+j/rPmt+19nAut+j3YhWBXgxi3/8AR/
1O81b3p/zv+t3ml2/sv836PdgqweF4MYp/zv8Ard5qRiX/ADv+t3mjtD/N+j37CnsXzwYh/wA7/
rd5qwxD/nf9bvNLsP2Uut+j6QxqcGBfNRXf87/qPmrtqv8And9R80n0z9lLrE/
H8n0F6GNXhGPf8zu8+a0sL/mPeUuw/
ZrHOpeD1GM6EpVCS5jdoiC4CHZRmM7b1iH6bpANbsu6uR2iZMRJGRPrKy5jWP8AmPemtpu3+KFCS8h
ohJ20b3/
ppgpvawvbtCSAA6S24EHPIDMTfhHIf+nKzGF52SwS4j4SBAvs5DlP+q3sDt571ppk6lTKL9lx6aN2t
g6F6LrAy0EECciDBGWVtc4FivpP6XdSDIcGhwEdYCwGdoXi8LUO8rL+pulHsbT2XEElwnWLLklFxkm
i8+LVCr2O50/gzUqEUQWjrDaghuzNxIF9LLxVfoGs98NaTeCXAsDYgTLoBi/
wz8NpsvYVa5iATAEDkFzaz37z3nzRjjLk0WD4KLZyKH6KJM1avyyGNBNhbrOFgN0aDs6I/
R+HgjZMER8V4mY2s8+KW+q/53fUfNZamJrfO/
6nf+l06ZvyYvpYR8WdSn+ksPLTsDqggXJEHfe54rczomnT+BjG62AGeeS8q7E1v+j/AK3f+kh+Lr/
9H/W7zR2ZvyJaIO1H+D2fsQodTC8JUxtb/o/63eazux1b/o/
63+aa6eXsmXUQXhnv3uDbysr8WPmjsC8G/GVTnUf9bvNKdianzv8Ard5pS6SUuWEOvxw/8s9y7Ez/
ALHu8gkHEfu8P5XiTianzv8Aqd5qhxD/AJ3/AFHzS/DkvJT/
AFWH9rPctxQ+Zx7R+ApdigPUnxXhTin/ADv+p3mqHFVPnd9TvNH4r9h/ysa/
pf7nvPfkt+P9SvCnEv8Anf8AUfNUOIf87vqKa6T7Il+qx/tf7ns62M4jvWN2KHzeC8v7d/
zO+o+ar7R3zO7yrXT15MZfqSfgqFMKFIXWeSiQFZVBUhyVDsuFYBLBVgUykxjVdqUHepVw/
imUmaGlXZPoFZw/l4JjXIKUjWx/b23Wui/1M/lc9lQ8fBOY/meTWpNG0MlHTY/
1AT2v59xXOZWA1AH/AMO7paQE1lad08HEHsErNxOmOV2dAVFZlWDmufUxTGi7ha157sly6/
TbQYaJ46LKS9G/5EY8s9pQrrhfrKv1Kd7hztP2/wABcF/T9T/
WB4rHice98BztqL9qzUHdsjL1kJQcY3Z9OZidoTI71V7vVl89o9O1miA4HmN3anU/
1LVB60EbhLfFJQaNl12Jrez2VUrFUqLk0v1Gx1nDZ4mT9k/
31jh1XDvgd+0FrFeyZdRCX9LNLn+rpFR/PtCQ+tH9eZSn1OA7gPwtlE5pZmTVqcvXasz3H1J/
Cl7z6ySHv9StEjmlOwcfWSU8qC/
klufx7kGTkSVUqC5UJQQ2SVUhBKjaSJsiFBCklVKAIUFShBBEqVUKQgCVYFVVTWASboBoUwsrq53Kh
eTqp1Idm0vAzKj3hu/
wWFCNTHZu96bxR7435SsKEamLUzeOkP2nvTWdKftP1fwuWgJamNSaOqelz8veR+AFnr9IvdbIbhksi
Em2y9Un5Jc8nMkolQhImywcjaVVCVD1DNtVLlCECthKljiLgwoQmBqp9IPaIBHaAr/
5R+4ePmsSqU7YOUvZvPSJ+Ud5VPfv2rGhO2LUzZ77+1R72Nx8FkQjUxWzZ7yDvUio06rEhPUws3SFB
WNryMimNrHVCkgseoVG1AVZWnYglRKCoQBQ1FBqpaFnqYEucTmoQhSAIQhAAhCEACEIQAIQhAEypVU
IHZZChSgoEShQlQEoUKJTE2WUKEIFZJKhCECBCEIAEIQgAQhCABCEIAFIcVCEAXFRT7RLQnqYAhCEg
BCEIAEIQgAQhCABCEIAEIQgAQhCAJClCEFIFCEIGBUIQglghCECBCEIAEIQgAQhCABCEIAEIQgAQhC
ABCEIA//Z">
<a href="https://infrabeat.com/" target="_blank" >Vist Infrabeat</a>
<!-- <h1> What is HTML?</h1> -->
<div class="box">
<div class="box-title">
<h2> What is HTML?</h2>
</div>
<!-- <h3> What is HTML?</h3>
<h3> What is HTML?</h3>
<h4> What is HTML?</h4>
<h4> What is HTML?</h4> -->
<div class="box-content">
<p>
HTML Stands for<b> <em>hyper text mark up langauage</em></b> it is us
ed to design static webcontent
</p>
</div>
</div>
<div class="box">
<div class="box-title">
<h2>What is the CSS?</h2>
</div>
<div class="box-content">
<p>
CSS stands for Cascading style sheet, it is used to style/beatify the
content.
</p>
</div>
</div>
<div class="box">
<div class="box-title">
<h2>What is JS?</h2>
</div>
<div class="box-content">
<p>
JS stands for javascript. it is the browsers programming language
</p>
</div>
</div>
<form action="https://infrabeat.com/" method="GET">
<div class="login">
<label>User Name</label>
<input>
</div>
<br>
<div class="login">
<label>Password</label>
<input type="password">
</div>
<div class="login">
<input type="submit">
</div>
<div class="others">
<input type="file">
<input type="checkbox">
<input type="date">
<input type="email">
<input type="number" max="5" min="4">
</div>
</form>
<br>
<img src="images/PASSPORT_PHOTO.JPG" width="150px">
<ul>
<li>Apple</li>
<li>Bannana</li>
<li>Kiwi</li>
</ul>
<ol>
<li>ABAP</li>
<li>SAP UI5</li>
<li>SAC</li>
</ol>
<table>
<thead>
<th>Name</th>
<th>id</th>
<th>place</th>
<th>Image</th>
</thead>
<tbody>
<tr>
<td>Sandeep</td>
<td>8400733</td>
<td>bangalore</td>
<td><img src="images/PASSPORT_PHOTO.JPG" width="100px"></td>
</tr>
<tr>
<td>MAhesh</td>
<td>8400734</td>
<td>Hyderabad</td>
<td><img src="images/PASSPORT_PHOTO.JPG" width="100px"></td>
</tr>
</tbody>
</table>
<br>
<audio src="https://mp3teluguwap.net/mp3/2021/RRR/RRR/Nattu%20Nattu.mp3"
controls>
</audio>
<br>
<video src="https://www.learningcontainer.com/wp-content/uploads/2020/05/
sample-mp4-file.mp4" controls>
<br>
</div>
</body>
</html>