practice/html_basics_example.html at master · mohd-khan09/practice · 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
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>
     <!-- A basic HTML Tags -->
     <div>
        <a href="https://www.google.com/"> click me</a>
    <h1>hello, this ia a heading tag</h1>
     <p> this ia a paragraph tag,Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. </p>
     <b>this <span>hello i am span</span> is bold tag</b> <br>
     <i>italic tag</i> <br>
     <hr>
     <u>underline tag</u>
     <br>
     <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
        </div>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
            </div>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
                </div>
     <img class="square has-transition" src="https://plus.unsplash.com/premium_photo-1664304967446-d1f2f8201422?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8dXJsfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60" style="width: 200px; height: 200px; border: 2px solid red;" >
     <h2>un orderd list</h2>
     <ul>
        <li>hello 1</li>
        <li>hello 2</li>
        <li>hello 3</li>
     </ul>
    <h2>ordered list </h2>
    <ol>
        <li>hello 1</li>
        <li>hello 2</li>
        <li>hello 3</li>
    </ol>

    <h1>flex box </h1>
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>33</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>

    </div>
</body>
</html>