-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
651 lines (549 loc) · 25.3 KB
/
index.html
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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML Elements - Visual Reference</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="element-group">
<h2>Content sectioning</h2>
<p>Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements
to create a broad outline for your page content, including header and footer navigation, and heading elements to identify
sections of content.</p>
<section class="weo3-element">
<code class="weo3-element-name"><address></code>
<address>
Content line with a link: <a href="http://www.somedomain.com/">www.somedomain.com</a>.
<br> Line of content separated by <br> tags
<br> Line of content separated by <br> tags
<br> Line of content separated by <br> tags
<br> Line of content
<br>
</address>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><article></code>
<article>
<header>
<h2>h2 level section header</h2>
</header>
<section class="weo3-element">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat sed voluptatem dolores, inventore aspernatur dolore enim similique rem consequuntur quaerat ut distinctio ipsam, porro odit nemo, in veritatis aliquid necessitatibus.</p>
</section>
</article>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><aside></code>
<article>
<p>Main line of thought comment, discussion, prose, poetry, thesis, etc.</p>
<aside>
<p>A less-important idea related to the main thought, being expressed in the flow of the main thought.</p>
</aside>
<p>Continuing back on the original line of thought.</p>
</article>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><footer></code>
<footer>
Some copyright info or perhaps some author info for an article, links to privacy policy, usage, etc.
</footer>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><header></code>
<header>
<h1>h1 page title</h1>
<p>navigation links often exist inside a header</p>
</header>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><h1>, <h2>, <h3>, <h4>, <h5>, <h6></code>
<h1>H1 level section heading</h1>
<h2>H2 level section heading</h2>
<h3>H3 level section heading</h3>
<h4>H4 level section heading</h4>
<h5>H5 level section heading</h5>
<h6>H6 level section heading</h6>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><nav></code>
<nav class="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">work</a></li>
<li><a href="#">experience</a></li>
</ul>
</nav>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><section></code>
<section>
<h2>example heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem qui repellendus a sed similique odio porro aperiam, aliquid dignissimos amet quas, neque modi voluptas nulla dolorum earum ipsa odit laboriosam?</p>
</section>
</section>
</div>
<div class="element-group">
<h2>Text content</h2>
<p>Use HTML text content elements to organize blocks or sections of content placed between the opening <body> and
closing </body> tags. Important for accessibility and SEO, these elements identify the purpose or structure of
that content.</p>
<section class="weo3-element">
<code class="weo3-element-name"><blockquote></code>
<blockquote>The most difficult thing is the decision to act, the rest is merely tenacity. The fears are paper tigers. You can do anything you decide to do. You can act to change and control your life; and the procedure, the process is its own reward.</blockquote>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><dd></code>
<dl>
<dt>Firefox</dt>
<dd>
A free, open source, cross-platform,
graphical web browser developed by the
Mozilla Corporation and hundreds of
volunteers.
</dd>
<dd>
The Red Panda also known as the Lesser
Panda, Wah, Bear Cat or Firefox, is a
mostly herbivorous mammal, slightly larger
than a domestic cat (60 cm long).
</dd>
<!-- Other terms and descriptions -->
</dl>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><div></code>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam iste similique minus pariatur natus! Minima aliquam iusto, ea suscipit ut repellat animi hic! Quae id expedita, obcaecati accusamus iste aut.</p>
</div>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><dl></code>
<dl>
<dt>Firefox</dt>
<dd>
A free, open source, cross-platform,
graphical web browser developed by the
Mozilla Corporation and hundreds of
volunteers.
</dd>
<dd>
The Red Panda also known as the Lesser
Panda, Wah, Bear Cat or Firefox, is a
mostly herbivorous mammal, slightly larger
than a domestic cat (60 cm long).
</dd>
<!-- Other terms and descriptions -->
</dl>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><dt></code>
<dl>
<dt>Firefox</dt>
<dd>
A free, open source, cross-platform,
graphical web browser developed by the
Mozilla Corporation and hundreds of
volunteers.
</dd>
<dd>
The Red Panda also known as the Lesser
Panda, Wah, Bear Cat or Firefox, is a
mostly herbivorous mammal, slightly larger
than a domestic cat (60 cm long).
</dd>
<!-- Other terms and descriptions -->
</dl>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><figcaption></code>
<figure>
<img
src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="An awesome picture">
</figure>
<p></p>
<!-- Figure with figcaption -->
<figure>
<img
src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="An awesome picture">
<figcaption>MDN Logo</figcaption>
</figure>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><figure></code>
<figure>
<img
src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="An awesome picture">
</figure>
<p></p>
<!-- Figure with figcaption -->
<figure>
<img
src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="An awesome picture">
<figcaption>MDN Logo</figcaption>
</figure>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><hr></code>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio laudantium ex facere nihil at perspiciatis, placeat omnis et aut numquam rerum unde accusamus dolorum hic repellat enim inventore. Dolore, ut?</p>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque similique sapiente vitae quam temporibus assumenda magni sint. Ea ullam delectus hic praesentium odio, sint aliquid harum iure corporis recusandae eveniet.</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><li></code>
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
<ol type="I">
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><ol></code>
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><p></code>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eaque placeat rem obcaecati perspiciatis sed quasi aliquid non? Eum, doloremque in dolorem reiciendis perferendis earum at ea? Ullam, vero hic.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, autem. Veniam dolor facere obcaecati commodi voluptatum quae provident tenetur, architecto cum eum, ipsum totam accusantium placeat perspiciatis saepe. In, inventore!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci aperiam atque deleniti quidem molestias nostrum nulla nihil maxime, officia, repudiandae quod praesentium quisquam! Autem voluptatibus quidem at laudantium nobis corrupti?</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><pre></code>
<pre>After a moment, a black loafer steps down from the cab of the garbage truck.
Agent Smith inspect the wreckage. There is no body. Trinity is gone.
His jaw sets as he grinds his molars in frustration.
Agent Jones and Brown walk up behind him.
AGENT JONES
She got out.
AGENT SMITH
It doesn't matter.
AGENT BROWN
The informant is real.
Agent Smith almost smiles.
AGENT SMITH
Yes.
AGENT JONES
We have the name of their next target.
AGENT BROWN
The name is Neo.
The handset of the pay phone lays on the ground, separated
in the crash like a severed limb.
AGENT SMITH
We'll need a search running.
AGENT JONES
It's already begun.</pre>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><ul></code>
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</section>
</div>
<div class="element-group">
<h2>Inline text semantics</h2>
<p>Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece
of text.</p>
<section class="weo3-element">
<code class="weo3-element-name"><a></code>
<p>The anchor tag doesn’t always have to contain a url, but it often does. <a href="#">This one does not.</a></p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><abbr></code>
<p>Abbreviations are fun, until they’re misused. For instance, if you tell me to use my <abbr title="Personal Identification Number">PIN</abbr> number as I am using an <abbr title="Automatic Teller Machine">ATM</abbr> machine, I might get a wee bit upset.</p>
<p>After all these years, it seems to be that the winning combination is still, without a doubt, <abbr title="HyperText Markup Language">HTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr> and JavaScript.</p>
<p>Without making an <abbr title="Répondez S’il Vous Plaît">RSVP</abbr> <abbr title="As Soon As Possible">ASAP</abbr>, you will probably miss out on visiting the facilities of <abbr title="Jet Propulsion Labratories">JPL</abbr>. </p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><b></code>
<p>Here is a sample of <b>text that draws your attention </b> within a section of text.</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><bdo></code>
<p>BDO overrides default text direction. Special characters, at least in UTC-8, seem to not be affected.</p>
<p><bdo dir="rtl">This text will go right to left, and honestly, I am pretty sure only e.e. cummings and Lewis Carroll would have found an honest use for it. However, check the special characters: # ? & % $ @ , , ; </bdo></p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><br></code>
<p>You can't see it<br/>but it's there<br/>and should probably be used less<br/>than an average bear.</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><cite></code>
<p>Do not use the cite <em>tag</em> with <blockquote> or <q>. For citations connected to quotes, use the cite <em>attribute</em>.</p>
<h3>Bibliography</h3>
<p>Stephenson, Neal (2015) <cite>Seveneves</cite>. Harper Collins.</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><code></code>
<p><code>We like to code. Code is king. Old King Code was a merry old soul and then ERR! unable to compile.</code></p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><data></code>
<ul>
<li><data value="398">Mini Ketchup</data></li>
<li><data value="399">Jumbo Ketchup</data></li>
<li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><dfn></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><em></code>
<p>Emphasis is used when a certain type of voice is desired for the reader to understand. For example: Oh hey Billy, you should <em>probably</em> stop hand-writing all the examples and just scam them from somewhere else, otherwise you'll be doing this <em>forever</em>.</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><i></code>
<p>Italics is used to set apart text from its surrounding text, like foreign language phrases, <i>ciao, bella</i>, or <i>carpe diem</i>, and can also be used for a fictional character's thoughts or for technical terms. Italics is not to be used simply to italicize text. For that, use CSS font-style property.</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><kbd></code>
<p>Use the command <kbd>help me, please</kbd> to view help pages on your life.</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><mark></code>
<blockquote>First of all, keep him out of the light, he hates bright light, especially sunlight, it'll kill him. Second, don't give him any water, not even to drink. But the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs, <mark>never feed him after midnight</mark>.</blockquote>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><q></code>
<p><q>Like</q>, <q>omg</q>, <q>gag me with a spoon</q>, and <q>tonarrrr, man!</q>, are phrases that refuse to extricate themselves from my brain. Oh well.</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><rp></code>
<p>not a repeat</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><rt></code>
<p>not a retweet</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><ruby></code>
<p>not what you think it is</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><s></code>
<p><s>Strike!</s> You're out! And with that, I learned to hate baseball.</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><samp></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><small></code>
<p>Here is some <small>small text among</small> other, regular, (taller) text.</p>
<p>Obligatory: you’re killin’ me, <small>Smalls</small>!</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><span></code>
<span>SPAN SPAN SPAN SPAN, EGGS AND SPAN, BACON AND SPAN, SPAN HAM AND BACON, BACON BACON HAM AND SPAN. SPAN SPAN SPAN!</span>
<span>Another span.</span>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><strong></code>
<p>There is of course, the average, does a good, decent, job, text. And then there is <strong>strong text. Bigger, better, faster, stronger!</strong></p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><sub></code>
<p>Poor Willie worked in chem lab.<br/>
Poor Willie is no more.<br/>
For what he thought was H<sub>2</sub>O was actually H<sub>2</sub>SO<sub>4</sub>!
</section>
<section class="weo3-element">
<code class="weo3-element-name"><sup></code>
<p>10<sup>7</sup> is what I would like to be making next year, in USD.</p>
<p>My English teacher often wrote<sup>citation<sup>needed<sup>on<sup>my<sup>papers</sup></sup></sup></sup></sup> because it seemed like I just made things up. I have no idea why she thought that<sup>1</sup>.</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><time></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><var></code>
</section>
</div>
<div class="element-group">
<h2>Image and multimedia</h2>
<p>HTML supports various multimedia resources such as images, audio, and video.</p>
<section class="weo3-element">
<code class="weo3-element-name"><img></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><video></code>
</section>
</div>
<div class="element-group">
<h2>Embedded content</h2>
<p>In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.</p>
<section class="weo3-element">
<code class="weo3-element-name"><picture></code>
</section>
</div>
<div class="element-group">
<h2>Demarcating edits</h2>
<p>These elements let you provide indications that specific parts of the text have been altered.</p>
<section class="weo3-element">
<code class="weo3-element-name"><del></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><ins></code>
</section>
</div>
<div class="element-group">
<h2>Table content</h2>
<p>The elements here are used to create and handle tabular data.</p>
<section class="weo3-element">
<code class="weo3-element-name"><caption></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><col></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><colgroup></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><table></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><tbody></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><td></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><tfoot></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><th></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><thead></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><tr></code>
</section>
</div>
<div class="element-group">
<h2>Forms</h2>
<p>HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to a website or application.</p>
<section class="weo3-element">
<code class="weo3-element-name"><button></code>
<blockquote cite="The Gingerbread Man">Not my gumdrop buttons!</blockquote>
<button>this is a button</button>
<button type="submit">a submit button</button>
<button type="reset">a reset button</button>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><datalist></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><fieldset></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><form></code>
<p>The <form> element must be used for any input wanted from the user.</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><input></code>
<p>Inputs are awesome, when they are constructive.</p>
<p>There are several types of input available that are widely accepted. It would be a good thing to learn them, as they have inherit value checks for each type of input.</p>
<p>Types of input with broad support: number, color, checkbox, radio, date, file, month, password, range, time.</p>
<p>This is a standard text input.<br/>
<input type="text" value="standard text input"></p>
<p>This is an email address input. Notice red outline when incorrect format.<br/>
<input type="email" name="" id="" value="[email protected]">
</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><label></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><legend></code>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><meter></code>
<p>Meter is used to show a value within a range of values.</p>
<p>He got a <meter low="69" high="80" max="100"
value="84">B</meter> on the exam.</p>
<p>As you can see above, the actual value is not being shown, merely the relational amount in visual form.</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><optgroup></code>
<p>Everyone should know their alignment. It helps immensely. For instance, when I randomly set fire to various objects, I know that it's simply because I am chaotic evil. Simple!</p>
<select>
<option selected="selected">Choose Your Path Wisely</option>
<optgroup label="Good">
<option>Lawful Good - "Crusader"</option>
<option>Neutral Good - "Benefactor"</option>
<option>Chaotic Good - "Rebel"</option>
</optgroup>
<optgroup label="Neutral">
<option>Lawful Neutral - "Judge"</option>
<option>True Neutral - "Undecided"</option>
<option>Chaotic Neutral - "Free Spirit"</option>
</optgroup>
<optgroup label="Evil">
<option>Lawful Evil - "Dominator"</option>
<option>Neutral Evil - "Malefactor"</option>
<option>Chaotic Evil - "Destroyer"</option>
</optgroup>
</select>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><option></code>
<p>See <select> below for html example.</p>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><output></code>
<p>Many people probably do not know about this one, since we use some form of JavaScript to do it.</p>
<p>But it exists in the HTML specification! Use it when you can - it's awesome!</p>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
<output name="result">60</output>
</form>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><progress></code>
<p>The current completion status of this document is:</p>
<progress value="70" max="100">70%</progress>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><select></code>
<p>Please select one:</p>
<select name="thereIsNoName" id="noName">
<option value="0">I think this is fun</option>
<option value="1">This is great</option>
<option value="2">This if fine. :: flames ::</option>
<option value="3">Complete and utter bunk.</option>
</select>
</section>
<section class="weo3-element">
<code class="weo3-element-name"><textarea></code>
<p>This is a textarea. Neat.</p>
<textarea name="theName" id="" cols="30" rows="10">Write all the comments you want. I won't get them since there is no form and no submit. By default, textareas are resizable.</textarea>
</section>
</div>
<p><sup>1</sup> - Yes I do. Because I did.</p>
</body>
</html>