web-design/week-3.html at master · mlnp3/web-design · 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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Week 3 </title>
</head>

<body>
    <!-- Add navs later when showing most tags -->
    <nav>
        <a href="#basicTags">Basic Tags </a> |
        <a href="#listTags">List Tags</a> |
        <a href="#imageTag">Image Tag</a> |
        <a href="#videoTag">Video Tag</a> |
        <a href="#audioTag">Audio Tag</a> |
        <a href="#iframeTag">Iframe Tag</a>
    </nav>
        <hr>
    <section id="basicTags">
        <h1>Basic Tags :</h1>

        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
        <p> This is a paragraph that could go on and on and on and on and on and on and... </p>
        <b>Making something bold</b>
        <!--  &lt;b> replace Bold  -->
        <p>Use <b>Bold</b> tag inside of paragraph tag </p>
        <br>
        <p>Adding extra line break ^</p>
        <i>Italic Text </i>
        <br>
        <br>
        <u>Underline Text</u>
    </section>
    <hr>
    <section id="listTags">
        <h1>List Tags :</h1>
        <h3>Order List: </h3>
        <ol>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>

        <h3>Unordered List: </h3>
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>

        <h3>Nested List: </h3>
        <ul>
            <li>List item 1
                <ol>
                    <li>Sub list item 1</li>
                    <li>Sub list item 2</li>
                    <li>Sub list item 3</li>
                </ol>
            </li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </section>
    <hr>
    <section id="imageTag">
            <h1>Image Tag : </h1>
            <img src="./resource/cards.png" width="250" height="250">
    </section>
    <hr>
    <section id="videoTag">
            <h1>Video Tag : </h1>
            <video width="500" height="540" controls src="./resource/IMG_0477.mov"></video>
    </section>
    <hr>
    <section id="audioTag">
        <h1>Audio Tag : </h1>
        <h4>J Cole KOD</h4>
        <audio src="../../J. Cole/KOD (Explicit)/J. Cole - 05. ATM (Explicit).mp3"  controls></audio>
    </section>
    <hr>
    <section id="iframeTag">
        <h3>IFrame: </h3>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/Wfoy_OvNDvw"></iframe>
    </section>
</body>

</html>