Html-learning-stage/Easyscreenreader.html at main · RaySpot1/Html-learning-stage · 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
<!DOCTYPE html>
<html>
    <style>
        .img {
            height: 50vh;
            width: 40vw;
        }
    </style>
    <head>
        <meta>
        <title>Normal Page Layout</title>
    </head>
    <body>
        <header>
            <h1>Weapons of Mass Destruction</h1>
        </header>
        <main>
            <article>
                <h1>Chapter 1</h1>
                <p>Welcome to our new page, this page contains the contents and introduction to the title of this page.</p>
            </article>
        </main>
        <footer></footer>

        <audio id="meowClip" controls>
            <source src="audio/meow.mp3" type="audio/mpeg">
            <source src="audio/meow.mp3" type="audio/0gg">
        </audio> <br>
        <video id="mp3" controls>
            <source src="youtube.com" type="mp3">
        </video>
        <br>

        <form action="">
            <fieldset>
                <legend>Choose one of these three items:</legend>
                <input id="one" type="radio" name="items" value="one">
                <label for="one">Choice One</label><br>
                <input id="two" type="radio" name="items" value="two">
                <label for="two">Choice Two</label><br>
                <input id="three" type="radio" name="items" value="three">
                <label for="three">Choice Three</label>
            </fieldset>
        </form>

        <form action="">
            <input type="date" id="pickdate" name="date">
        </form>
        <br>
        <footer>&copyfootwear copywrite</footer>

        <img src="painting.jpg" alt="flower" class="img">

    </body>
</html>
<!--This is how a normal page layout should be!
Article: It is used when the contents are samantically related.
DIV: It is used then the contents are not related
Nav: Is used when navigating between different links
Footer: Is used at the bottom of the page
Audio: is used for elements wraped around audio streaming contents
video: //
Figure: Used for self contained content. i.e illustrations, Quotes etc. Also has the <figcaption> tag innit.
Date: Tag Is used to add current date to a content.
Sup: Tag is used like a "raised to power."
tabindex: can be set to "0" or "-0". Sets the pace of navigation through content using the Tab button on the keyboard.
@media: media query is a css rule used to apply conditional styles to a document.
VW/VH: VH stands for VIEWPORT HEIGHT and VW stands for VIEWPORT WIDTH. They can be used instead of Height/Width in
sizing images in css. "3vh means 3% viewport height" while "3vw means 3% viewport width"

-->