learning-webdev/basic-elements.html at main · ciiphersiren/learning-webdev · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>basic HTML</title>
</head>
<body>
    <!-- We can create headings using h1 through h6 as tags. -->
    <h1>A Large Heading</h1>
    <h2>A Smaller Heading</h2>
    <h6>The Smallest Heading</h6>

    <!-- The strong and i tags give us bold and italics respectively. -->
    A <strong>bold</strong> word and an <i>italicized</i> word!

    <!-- We can link to another page using a. -->
    <a href="https://google.com">Google It!</a>

    <!-- We used ul for an unordered list and ol for an ordered one. both ordered and unordered lists contain li, or list items. -->
    An unordered list:
    <ul>
        <li>Thriller</li>
        <li>Suspense</li>
        <li>Horror</li>
    </ul>
    An ordered list:
    <ol>
        <li>Primary</li>
        <li>Secondary</li>
        <li>Tertiary</li>
    </ol>

    <!-- Images will use an src attribute => either the path to a file on your computer or the link to an image online. It should also include an alt attribute, which gives a description if the image can't be loaded. -->
    <img src="Handmaiden.jpeg" alt="Handmaiden">

    <!-- We use a br tag to add white space to the page. -->
    <br/> <br/>

    <!-- A few different tags are necessary to create a table. -->
    <table>
        <thead>
            <th>Name</th>
            <th>Genre</th>
            <th>Release Year</th>
        </thead>
        <tbody>
            <tr>
                <td>Incantation</td>
                <td>Horror</td>
                <td>2019</td>
            </tr>
            <tr>
                <td>Mean Girls</td>
                <td>Teen Comedy</td>
                <td>2004</td>
            </tr>
        </tbody>
    </table>
</body>
</html>