110lab2webpage/index.html at main · MuhammadCF/110lab2webpage · 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lab2CSE110</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <a href="/index.html">Click here to go nowhere</a>
            <a href="/index.html"><b>also go nowhere</b></a>
            <a href="/index.html"><i>also go nowhere ,but in italic</i></a>
        </nav>
        <h1>Muhammad Fajar</h1>
    </header>

    <main>
        <h2>January 2021</h2>

        <section>
            <h3>Short Introduction:</h3>
            <div>
                <hr>
                <br>
                <p>
                    My name is Muhammad Fajar, and I have furnished herewith
                    a collection of useful tags for later purpose once I developed
                    enough intent and structure to make my own polished
                    information page.
                    I am a CSE student from UCSD and I will be graduating in
                    June 2021.

                    Things that often keep me up at night is the thought experiment
                    regarding atlantic cod.
                    A rudimentary and yet simple life form, have they ever
                    come to the point where, existential questions
                    not unlike the ones brought Fourth by the brightest
                    and the most speculative among us, started
                    to surface from the depth of their aquatic psyche
                    and make its way into their cognitive faculty?
                    "Why am I a cod? Why atlantic in particular?
                    And more importantly, why?"


                </p>
                <br>
                <p>
                    Mayhaps indeed they have engineered
                    their own brand of skepticism,
                    rendering all of their atlantic problem
                    a question of authenticity. Not really a farfetched
                    notion, after all, it is a general aquatic consensus
                    that living in the ocean is suffering, hence
                    a robust frame of thinking must be developed as
                    a mean onto their survival.
                </p>
                <aside>
                    As the cod equivalent of Descartes once said: <code>I swim therefore I am</code>
                </aside>
            </div>
        </section>

        <section>
            <h3>More about myself</h3>
            <br>
            <p>my favorite <span>philosophers: </span></p>
            <ul>
                <li>Immanuel Kant</li>
                <li>Brian Kernighan</li>
            </ul>
            <p>my rank for my favorite classes <strong>In UCSD</strong></p>

            <ol>
                <li>CSE 110</li>
                <li>CSE 110</li>
                <li>CSE 110</li>
                <li><em>CSE 110 (but in emphasis)</em></li>
            </ol>
        </section>

        <section>
            <h3>Miscellaneous </h3>
            <p>My Favorite Site:</p>
            <iframe width="420" height="315"
            src="https://www.sciencedirect.com/">
            </iframe>
            <p>My Favorite Sea Creature:</p>
            <picture>
                <img src="https://cdn.britannica.com/91/129291-050-FB3D9C12/Atlantic-cod.jpg" alt="data:image/jpeg;base64,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">
            </picture>
            <p>turned out that it is really hard to find a free sound effect:</p>
            <p>need some fixings:</p>
            <audio controls>
                <source src="https://freesound.org/s/554396/" type="audio/wav">
                your browser
            </audio>

            <br>

            <p>But I succeeded in attaching a video though, and it was super convenient to find and download</p>
            <video width="310" height="230" controls>
                <source src="SampleVideo_1280x720_1mb.mp4" type="video/mp4">
                video example
            </video>

            <br>

            <canvas id="canvas" width="200" height="200"></canvas>
            <br>

            <p>This geometry is what keeps me going despite
                all the hurdles
            </p>
            <svg width="100" height="100">
                <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
            </svg>


        </section>

        <section><h3>No use for this now, but it might come in handy for later:</h3></section>

        <form>
            <fieldset>

                <legend>input samples : </legend>

                <label for="tbutton">A button:</label><br>
                <input type="button" id="tbutton" name="tbutton" value="Button Value">here<br>
                <br>
                <input type="text">
                <br>
                <input type="email">
                <br>
                <input type="password">
            <br>
            <input type="search">
            <br>
            <input type="image" src="instalogo.jpg" alt="5120.png">
            <br>
            <input type="checkbox">
            <br>
            <input type="time" >
            <br>
            <input type="url">
            <br>
            <label for="oss">Choose your browser from the list:</label>
            <input list="os" name="os" id="oss">

            <datalist id="os">
                <option value="windows x">
                    <option value="mac os">
                        <option value="ubuntu">
                        </datalist>
                        <br>
                        <input type="submit">
                        <br>
            <textarea name="textsample" id="textsa" cols="40" rows="20">
                Through a collaborative, evidence-based program focused on viral protection, detection and intervention, we are helping more Tritons safely return to campus.
            </textarea>
                    </fieldset>
        </form>

        <select name="countries" id="countries">
            <optgroup label="balkan">
                <option value="Romania">Romania</option>
                <option value="Croatia">Croatia</option>
            </optgroup>
            <optgroup label="baltic">
                <option value="latvia">Latvia</option>
                <option value="lithuania">Lithuania</option>
            </optgroup>
        </select>


        <section>
            <h3>The Fifth Section</h3>

            <details>
                <summary>ucsd edu</summary>
                <p>Through a collaborative, evidence-based program focused on viral protection, detection and intervention, we are helping more Tritons safely return to campus.</p>
              </details>
        </section>

        <button type="button">Test button</button>


        <template>
            <h2>bear</h2>
            <img src="5120.jpg" width="214" height="204">
        </template>


    </main>

    <footer>
        <h2>the footer</h2>
        <div>
            <pre> __         __
                /  \.-"""-./  \
                \    -   -    /
                 |   o   o   |
                 \  .-'''-.  /
                  '-\__Y__/-'
                     `---`
                    </pre>
        </div>

        <div>

            <figure>
                <img src="5120.jpg" alt="">
                <figcaption>Figure of a bear</figcaption>
            </figure>
        </div>


    </footer>
</body>
</html>