html-crash-course/index.html at master · GokulRG/html-crash-course · 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
125
126
127
<!DOCTYPE html>
<html>
    <head>
        <title>HTML Cheat Sheet</title>
    </head>

    <a href="blog.html">Go to Blog!</a>
    <!-- This is an HTML comment -->
    <body>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>

        <!-- Paragraph -->
        <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet malesuada feugiat. Curabitur fermentum bibendum nulla, non dictum ipsum tincidunt non. Quisque convallis pharetra tempor. Donec id pretium leo. Pellentesque luctus massa non elit viverra pellentesque. Cras vitae neque molestie, rhoncus ipsum sit amet, lobortis dui. Fusce in urna sem. Vivamus vehicula dignissim augue et scelerisque. Etiam quam nisi, molestie ac dolor in, tincidunt tincidunt arcu. Praesent sed justo finibus, fringilla velit quis, porta erat. Donec blandit metus ut arcu iaculis iaculis. Cras nec dolor fringilla justo ullamcorper auctor. Aliquam eget pretium velit. Morbi urna justo, pulvinar id lobortis in, aliquet placerat orci.
        </p>

        <!-- Lists -->
        <!-- Two kinds Ordered and Unordered -->
        <ul>
            <li>Unordered List Item 1</li>
            <li>Unordered List Item 2</li>
            <li>Unordered List Item 3</li>
        </ul>

        <ol>
            <li>Ordered List Item 1</li>
            <li>Ordered List Item 2</li>
            <li>Ordered List Item 3</li>
        </ol>

        <!-- Tables -->
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Gokul</td>
                    <td>benstokes@mailinator.com</td>
                    <td>28</td>
                </tr>
            </tbody>
        </table>

        <!-- Line break -->
        <br/>

        <!-- Horizontal Rule -->
        <hr/>

        <br/>

        <!-- Forms -->
        <form action="process.php" method="POST">
            <div>
                <label>First Name</label>
                <input type="text" name="firstname" placeholder="Enter First Name"/>
            </div>
            <br/>
            <div>
                <label>Last Name</label>
                <input type="text" name="lastname" placeholder="Enter Last Name"/>
            </div>
            <br/>
            <div>
                <label>Email</label>
                <input type="email" name="email" placeholder="Enter email address"/>
            </div>
            <br/>
            <div>
                <label>Message</label>
                <textarea name="message"></textarea>
            </div>
            <br/>
            <div>
                <label>Gender</label>
                <select name="gender">
                    <option value="M">Male</option>
                    <option value="F">Female</option>
                    <option value="O">Other</option>
                </select>
            </div>
            <br/>
            <div>
                <label>Age</label>
                <input type="number" name="age" placeholder="Enter your Age"/>
            </div>
            <br/>
            <div>
                <label>Birthday</label>
                <input type="date" name="birthday"/>
            </div>
            <br/>
            <input type="submit" value="Submit" name="save"/>
        </form>
        <br/>
        <button>Click Me!</button>
        <br/>
        <a href="./assets/images/tenAkuma.png">
            <img alt="Akuma Image" src="./assets/images/tenAkuma.png" width="500px"/>
        </a>

        <!-- Quotations -->

        <blockquote cite="http://traversymedia.com">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet malesuada feugiat. Curabitur fermentum bibendum nulla, non dictum ipsum tincidunt non. Quisque convallis pharetra tempor. Donec id pretium leo. Pellentesque luctus massa non elit viverra pellentesque. Cras vitae neque molestie, rhoncus ipsum sit amet, lobortis dui. Fusce in urna sem. Vivamus vehicula dignissim augue et scelerisque. Etiam quam nisi, molestie ac dolor in, tincidunt tincidunt arcu. Praesent sed justo finibus, fringilla velit quis, porta erat. Donec blandit metus ut arcu iaculis iaculis. Cras nec dolor fringilla justo ullamcorper auctor. Aliquam eget pretium velit. Morbi urna justo, pulvinar id lobortis in, aliquet placerat orci.
        </blockquote>
        <h2><abbr title="Light Amplification By Stimulated Emissions of Radiation">LASERs</abbr> are awesome!!</h2>
        <br/>
        <p> These are the <cite>semantic tags</cite> for HTML5.


        <!-- HTML5 Semantic Tags -->
        <a href="./assets/images/html5.png">
            <img alt="Akuma Image" src="./assets/images/html5.png" width="500px"/>
        </a>
    </body>
</html>