NotesToLearnWebDevelopement/DOM.html at main · anishahossain/NotesToLearnWebDevelopement · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="DOM.css">
    <title>Document</title>
</head>
<body>
    <h1 id="Menu">Menu</h1>
    <label id="mylabel"></label>
    <br>
    <br>
<!--radio buttons with same name, different values-->
<input type="radio" name="animal" value="cat" checked="checked">
<!--check attribute by default has it checked if value is "checked"-->
<label for="cat">Cat</label>
<input type="radio" name="animal" value="dog">
<label for="dog">Dog</label>
<br>

<ul>
    <li>apple</li>
    <li>orange</li>
    <li>pineapple</li>
</ul>

<ul id="items">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
<button id="CSS">CSS</button><br><br>
<img src="krb.jpg" id="kirby" style="visibility: hidden;"> <br>
<input id="change">
<br>
<br>
<div id="mydiv" style="background-color: aliceblue; border: 1px lightcoral solid; height: 100px"></div> <br>
<div id="outerdiv" style="background-color: lightblue; border: 1px lightcoral solid; height: 100px">
<div id="innerdiv" style="background-color: blue; border: 1px lightcoral solid; height: 50px; width: 150px; position: relative; margin: 20px;"></div></div>
<div id="div2" style="background-color: blue; border: 1px lightcoral solid; height: 50px; width: 150px; position: relative; margin: 20px;"></div>
<button id="animation">Begin</button>
<div id="div3" style="background-color: bisque; height: 100px; width: 100px; position: relative;"></div>
<br>
<canvas id="mycanvas" width="500" height="500"></canvas>
<script src="DOM.js"></script>
</body>
</html>