Css-codes/first.html at master · Lordazekage/Css-codes · 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>

<head>
    <title>the first of many</title>
</head>

<body>

    <header>
        <nav>

            <a href="#CHICKENS">BREEDS OF CHICKENS</a>
            <a href="#LINKS">LINKS TO OTHER PAGES</a>
            <a href="#POEM">POEM</a>

        </nav>

        <h1>FIRST</h1>

        <p>This would be used to illustrate what a header semantic markup element could be like or look like. it could also
            contain other markup elements like the nav, section and so on. Also note that it itself could be contined within
            another markup element, meaning you can have more than one header on a page. you could have a section which has
            both a header and a footer.
        </p>


    </header>

    <p>Joe Bowser, Brian LeRoux, Sara Czyzewicz, and the swarm of folks who generously posted comments and questions on the
        OFPS site for this book. Your feedback was very helpful and much appreciated.
    </p>

    <section>

        <h2>Terminology</h2>

        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad iure tempore quibusdam aperiam at. Ipsum, laboriosam!
            Vero quibusdam ullam corrupti consectetur similique sint pariatur voluptatem reiciendis nisi excepturi. Eius,
            nisi? Et rem veniam inventore quisquam ea doloremque laborum asperiores voluptatem cupiditate. Repudiandae nulla
            beatae nostrum a eveniet nisi cupiditate voluptatem facilis mollitia, quos sint debitis esse saepe corporis soluta
            illum! Impedit beatae esse ullam minus sed repellendus quam quos quo eos iste totam nam facere a nesciunt earum
            unde, repudiandae iusto ipsum. Laborum in similique modi tempora delectus labore quod. Earum saepe tempore nemo
            cupiditate non, voluptates, enim rerum labore assumenda provident delectus? Sequi ullam quod, perferendis odit
            eligendi exercitationem libero totam id non accusamus praesentium perspiciatis quia aspernatur. Non. Similique
            tempora quae minus maiores dignissimos delectus consequuntur, fuga, aspernatur ab ipsam inventore labore qui
            magnam! Corporis in odit, dolores ut quidem suscipit, eum optio quam quis quae magni illo.
        </p>

    </section>

    <h2>General</h2>

    <h3>subsecction</h3>

    <h4>smaller section</h4>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam dolorem fugit repudiandae reiciendis, id voluptatum
        quae quod quaerat dolore libero officia cupiditate consequuntur placeat distinctio natus quis qui alias voluptas?
        Maxime officia eius, obcaecati totam voluptatum reiciendis dolorem tempora ipsam facilis commodi? Amet, in debitis
        eum quas porro quos aspernatur corrupti quibusdam iure voluptas magnam a, blanditiis, et nisi odio? Dicta debitis
        ducimus aspernatur magnam natus, incidunt officiis quas ipsam, aliquam sunt sapiente. Est aliquam alias ut quod,
        perferendis inventore neque, sunt voluptas optio dolore sit. Illo dolor sapiente natus!
    </p>


    <a name="CHICKENS"></a>

    <h2>breeds of chickens</h2>

    <ul>

        <li>Bantom
            <ol>
                <li>silkie</li>
                <li>polish</li>
            </ol>
        </li>

        <li>standard
            <ul>
                <li>easr</li>
                <li>islish</li>
            </ul>
        </li>

    </ul>

    <!-- shortcut for comments in html is ctrl forward slash -->
    <!--Alt artibutes will be read by screen reader-->
    <!-- A div is a block element while a span is an inline element,
     both have similar functions -->

    <div>
        <a name="LINKS"></a>
        <a href="emmets.html">emmets</a>
        <a href="tables.html">tables</a>
        <a href="forms.html">forms</a>
        <a href="">down page</a>

    </div>

    <img src="pictures/one.jpg" alt="an image having a joke innit">

    <hr>

    <a name="POEM"></a>
    <h2>A QUICK POEM BY YOURS TRULY</h2>

    Cupid,
    <br> With thy childish innocence_
    <br> And thy mischief, thou cause_
    <br> A stranger to adore another,
    <br> His heart bleeding; from a spell_
    <br> Shot from thy bowstring.
    <br> Thou made antonyms into synonyms,
    <br> Black becomes white and white is black.
    <br> Two is one, fayed together eternally.
    <br> Valiant; thou hath yoked hatred's spawn.
    <br> Clothed not, but with thy piety for Venus,
    <br> Thou art a true patron of her domain.
    <br> A knight of honour, our prayers ye desert
    <br> For thou art, that which makes love remain.
    <br> By: Badmus Aze Leon
    <br> P.S:
    <sup>1</sup>/
    <sub>2</sub> Of Me Is Made Of You
    <sup>2</sup>.

    <hr>

    <!-- to bring in special characters into html you dont just write them,
    rather google their entity codes to bring them in,
    they usually start with "&" and end with ";" The following are examples: -->

    1 &lt; 6 &gt; 5 &spades; &hearts;

    <!--Semantic markup work exactly like divs just that they provid more information
as to what they contain like <nav> which contains the navigations,
<time>, <date>, <main>, <section>, <header>, <footer>, <article>, <aside>, <summary>, <details> etc.
rather than just having divs everywhere these sementic elements helps makes things more understandable and cleaner. -->

</body>


</html>