codeup-web-exercises/zPracticeHTML.html at main · PeterLe0349/codeup-web-exercises · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Review</title>
    <!-- Comment one -->
    <!--
        multi
        line
        comment
    -->
</head>
<body>
<!-- Basic elements -->
    <h1 id="top">Top of the Page</h1>
    Hello World.
    <h1>Bigger Hello World!</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <div>Div is a block level element<span>Span is an inline element</span></div>
    <br>BR is a void element
    <hr>HR creates a line in the break
    <p>When I use <em>EM is an inline for emphasis</em><strong> and there's Strong</strong></p>
    <h2><em><strong>We can nest inside</strong></em></h2>
    <ul>
        <li>This list</li>
        <li>is bulleted</li>
    </ul>
    <ol>
        <li>This list</li>
        <li>is numbered</li>
    </ol>
    <a href="http://google.com">Go to google!</a><br>
    <a href="http://bing.com">Go to bing!</a><br>
    <a href="http://yahoo.com">Go to yahoo!</a><br>
    <a href="http://google.com">Go to google!</a><br>
    <a href="http://bing.com">Go to bing!</a><br>
    <a href="http://yahoo.com">Go to yahoo!</a><br>
    <a href="http://google.com">Go to google!</a><br>
    <a href="http://bing.com">Go to bing!</a><br>
    <a href="http://yahoo.com">Go to yahoo!</a><br>
    <img src="img/codeuplogo.png" alt="Codeup logo">Don't Hotlink images from sites<br>
    <table>
        <tr>
            <th>First Row</th>
            <th>Second column of first row</th>
        </tr>
        <tr>
            <td>Second row</td>
            <td>Second of second</td>
        </tr>

    </table>
<!-- HTML FORMS -->
    <form method="post" action="https://request-inspector.glitch.me/">
        <label for="username">User</label>
        <input id="username" name="username" type="text" placeholder="Enter your username">
        <br>

        <label for="password">Pass</label>
        <input id="password" name="password" type="password"  placeholder="Enter your password">
        <br>
        <textarea name="comment" placeholder="How's the weather?"></textarea>
        <br>

<!-- BUTTTONS and checkboxes -->
        <input name="newsletter_signup" value="true" type="checkbox" checked>Sign up for the news
        <br>
        <input name="junk spam" value="true" type="checkbox" >Enroll for spam mail <br>
        <input type="radio" name="question1" value="a">Apples<br>
        <input type="radio" name="question1" value="b">Peaches<br>
        <input type="radio" name="question1" value="c">Guava<br>

        <br>
        <!-- SELECT DROP DOWNS -->

        <select name="Favorite Superhero">
            <option value="Superman">Superman</option>
            <option value="Wonder Woman">Wonder Woman</option>
            <option value="Jeanne Gray">Phoenix</option>
        </select>
        <br>

        <input type="text" name="username" value="Coders" disabled>
        <select name="news sign">
            <option disabled value="n">No</option>
            <option selected value="y">Yes</option>
        </select><br>

        <h2>What kind of phone do you own?</h2>
        <label for="android">
            Android <input id="android" type="checkbox" name="phones" value="android">
        </label>
        <label for="ios">
            iOS <input id="ios" type="checkbox" name="phones" value="ios">
        </label>
        <label for="windows">
            Windows <input id="windows" type="checkbox" name="phones" value="windows">
        </label>
        <label for="other">
            Other <input id="other" type="checkbox" name="phones" value="other">
        </label>


        <!-- hidden data for back end -->
        <br>
        <input type="hidden" name="user_id" value="432">
        <!-- SUBMIT FORM DATA -->
        <button type="submit">Sub</button>
    </form>


    <!-- END POINT
    @@@@@@@@@@@@@@@@@@
    @@@@@@@@@@@@@
    @@@@@@@@@@
    -->
    <a href="#top">Go to the top</a><br>
</body>
</html>