-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomp.html.html
executable file
·610 lines (558 loc) · 21.3 KB
/
comp.html.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
<div id="content" class="starter-template">
<a id="html">
<h1>HTML</h1>
</a>
<p>
Bei <abbr title="Hypertext Markup Language">HTML</abbr> handelt es sich um eine Auszeichnungssprache.
Teile eines Textes werden mit Hifle sogenannter <em>Tags</em> ausgezeichnet. Zwischen
Starttag <code class="html"><TAGNAME></code> und Endtag <code class="html"></TAGNAME></code>
steht der auszuzeichnende Text. Das Starttag kann zusätzlich
Attribute <code class="html"><TAG ATTRIBUT="WERT"></code> enthalten, - den meisten Attributen
muss ein Wert zugeordnet werden. Das <code class="html">class</code>-Attribut verweist auf eine oder mehrere dem aktuellen Tag
zugeordnete CSS-Klassen.
</p>
<p>HTML-Kommentare <code class="html"><!-- Kommentar --></code> werden vom Browser nicht für die Darstellung herangezogen.</p>
<p>
Die verschiedenartigen Elemente eines Hypertextes, wie bspw. Überschriften,
Absätze, Listen, Tabellen, usw., können mit Hilfe dieser Tags ausgezeichnet werden.
Im Folgenden wird ein einführender Überblick gegeben.
</p>
<p>Ein html5-konformes Grundgerüst, - die erste Zeile <code class="html"><!DOCTYPE html></code> weist den Browser dabei auf html5 hin:</p>
<pre><code class="html"><!DOCTYPE html>
<html>
<head>
<!-- Metainformationen -->
</head>
<body>
<!-- Darzustellender Inhalt -->
</body>
</html></code></pre>
<p>
Im <code class="html">head</code> werden Metainformationen zum aktuellen Dokument untergebracht, während im
<code class="html">body</code> der darzustellende Inhalt steht.
</p>
<a id="html_head">
<h2>Metainformationen im <code class="html"><head></code></h2>
</a>
<p>
Der "head" einer html-Datei kann Metainformationen zum Dokument beinhalten. Diese Metainformationen können den Titel,
Autor, Beschreibung und Stichworte beinhalten, genauso wie die Angabe zur verwendeten Kodierung, einzubindenden Stylesheets
oder Scriptdateien. Diese Aufzählung erhebt keinen Anspruch auf Vollständigkeit. Es folgt eine Beispiel für Metainformationen im Head einer HTML-Datei:
<pre class="html">
<head>
<meta charset="UTF-8">
<title>TITEL</title>
<meta name="author" content="AUTOR">
<meta name="date" content="ZEITANGABE NACH ISO 8601">
<meta name="description" content="BESCHREIBUNG">
<meta name="keywords" content="LISTE, VON, STICHWORTEN">
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet type="text/css" href="STYLESHEET.css">
<meta http-equiv="refresh" content="SECONDS; URL=http://TARGETURL">
<meta http-equiv="expires" content="0">
</head>
</pre>
</p>
<a id="htmlentities">
<h2>Sonderzeichen</h2>
</a>
<p>
HTML bietet verschiedene Möglichkeiten, Sonderzeichen darzustellen:
</p>
<table class="table table-striped table-bordered">
<tr>
<th>html</th>
<th>Anzeige</th>
<th>Beschreibung</th>
</tr>
<tr>
<td><code class="html">&amp;</code></td>
<td>&</td>
<td></td>
</tr>
<tr>
<td><code class="html">&lt;</code></td>
<td><</td>
<td></td>
</tr>
<tr>
<td><code class="html">&gt;</code></td>
<td>></td>
<td></td>
</tr>
<tr>
<td><code class="html">&nbsp;</code></td>
<td>kein Zeilenumbruch erlaubt</td>
<td>
Leerzeichen das keinen Zeilenumbruch erlaubt.
<br>
Zum Testen die Breite des Anzeigefensters anpassen.
</td>
</tr>
<tr>
<td><code class="html">&shy;</code></td>
<td>Donau­dampf­schiff­fahrts­gesellschaft</td>
<td>
An derartig markierten Stellen darf ein Wort bei Bedarf getrennt werden.
<br>
Zum Testen die Breite des Anzeigefensters anpassen.
</td>
</tr>
<tr>
<td><code class="html">&auml;</code></td>
<td>ä</td>
<td></td>
</tr>
<tr>
<td><code class="html">&Auml;</code></td>
<td>Ä</td>
<td></td>
</tr>
<tr>
<td><code class="html">&ouml;</code></td>
<td>ö</td>
<td></td>
</tr>
<tr>
<td><code class="html">&Ouml;</code></td>
<td>Ö</td>
<td></td>
</tr>
<tr>
<td><code class="html">&uuml;</code></td>
<td>ü</td>
<td></td>
</tr>
<tr>
<td><code class="html">&Uuml;</code></td>
<td>Ü</td>
<td></td>
</tr>
<tr>
<td><code class="html">&szlig;</code></td>
<td>ß</td>
<td></td>
</tr>
</table>
<h3>Ligaturen</h3>
<p>
Eine Spezialität aus dem Schriftsatz sind sogenannte Ligaturen (mittellat. <em>ligatura</em> "Verbindung").
Dabei handelt es sich um spezielle Schnitte um benachbarte Buchstaben zu verbinden. Durch den Einsatz von Ligaturen
soll ein harmonisches Schriftbild und eine gute Lesbarkeit erreicht werden.
An dieser Stelle kann nicht
vertiefend auf dieses Thema eingegangen werden, deshalb sei auf den
<a href="https://de.wikipedia.org/wiki/Ligatur_(Typografie)">Wikipedia-Artikel: "Ligatur (Typografie)"</a>
verwiesen.
</p>
<p>
Durch den Einsatz von <code class="html">&zwj;</code> ("<em>zero width joiner</em>")
bzw. <code class="html">&zwnj;</code> ("<em>zero width non joiner</em>")
kann eine Ligatur erlaubt bzw. verhindert werden. Das folgende Beispiel setzt voraus, dass
die Schriftart "Palatino Linotype" installiert ist. Für eigene Experimente könnte die
Suche innerhalb der Gruppe der sogenannten "gebrochenen" Schriften hilfreich sein.
</p>
<style>
div.ligatur {
font-family: "Palatino Linotype", gothic;
font-size: 400%;
font-variant-ligatures: common-ligatures;
-moz-font-feature-settings: "liga", "clig";
-webkit-font-feature-settings: "liga", "clig";
font-feature-settings: "liga", "clig";
}
</style>
<div class="well ligatur">
tt t‍t t‌t
<br>
ff f‍f f‌f
<br>
fi f‍i f‌i
</div>
<a id="links">
<h2>Verweise</h2>
</a>
<p>
Wesentlich für HTML sind Verbindungen (engl. <em>link</em>). Ein Link-Ziel kann eine beliebige
<abbr title="in der Regel">i. d. R.</abbr> über <abbr title="hypertext transfer protocol">http</abbr>
erreichbare Resource sein, - https im Falle der verschlüsselten Variante.
Das <strong><a href="https://www.ietf.org/rfc/rfc2616.txt">Hypertext Transfer Protocol -- HTTP/1.1</a></strong>
(Roy Fielding, et al.; RFC 2616; IETF; 1999) ist im RFC 2616 definiert. Vertiefende Einblicke liefert in diesem Kontext die Dissertation
des Hauptautors
<a href="http://www.ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf">
"Architectural Styles and the Design of Network-based Software Architectures"
(Diss.; Roy Thomas Fielding; 2000)</a>.
</p>
Es gibt verschiedene Typen von Links.
<dl>
<dt>absolut</dt>
<dd>
<a href="http://www.hs-anhalt.de/index.html">HS-Anhalt</a>
<code class="html"><a href="http://www.hs-anhalt.de/index.html">HS-Anhalt</a></code>
<br>
<a href="/project/content/index.html">lokales Projekt</a>
<code class="html"><a href="/project/content/index.html">lokales Projekt;/a></code>
</dd>
<dt>relativ</dt>
<dd><a href="../../hello_world.txt">hello world</a> <code class="html"><a href="./hello_world.txt"></a></code></dd>
</dl>
<p>
Um etwaige Umzüge der Webseiten zu erleichtern, sind relative Links in der Regel am zweckmäßigsten.
</p>
<a id="headlines">
<h2>Überschriften</h2>
</a>
<div class="well">
<h1>Headline 1<code class="html"><h1></code></h1>
<h2>Headline 2<code class="html"><h2></code></h2>
<h3>Headline 3<code class="html"><h3></code></h3>
<h4>Headline 4<code class="html"><h4></code></h4>
<h5>Headline 5<code class="html"><h5></code></h5>
<h6>Headline 6<code class="html"><h6></code></h6>
</div>
<a id="markups">
<h2>Hervorhebungen</h2>
</a>
<p>
Um Teile des Textes hervorzuheben wird für <strong>starke</strong> (engl. <em>strong</em>) Hervorhebungen
<code class="html"><strong></code> genutzt, für <em>schwächere</em> <code class="html"><em></code> (von (von <abbr title="englisch">engl.</abbr> <em>emphasize</em>).
Abkürzungen können mit <code class="html"><abbr></code> (von <abbr title="englisch">engl.</abbr> <em>abbreviation</em>)
ausgezeichnet werden.
</p>
<a id="paragraph"><h2>Absätze</h2></a>
<p>
Der Tag <code class="html"><p></code> (von <abbr title="englisch">engl.</abbr> <em>paragraph</em>) kennzeichnet Absätze.
Die folgenden typographischen Satzarten sind nicht auf <code class="html"><p></code>-Tags beschränkt,
werden aber häufig dort eingesetzt.
</p>
<a id="blockquote">
<h2>Blockquote</h2>
</a>
<p>
<code class="html"><blockquote></code> dient dazu ein größeres Zitat aufzunehmen.
</p>
<div class="well">
<blockquote><caption><h3>"Herbstbild" von Friedrich Hebbel</h3></caption>
<p> Dies ist ein Herbsttag, wie ich keinen sah.<br>
Die Luft ist still, als atmete man kaum,<br>
und dennoch fallen raschelnd fern und nah, <br>
die schönsten Früchte ab von jedem Baum.
</p>
<p> O stört sie nicht, die Feier der Natur,<br>
dies ist die Lese, die sie selber hält,<br>
denn heute löst sich von den Zweigen nur,<br>
was von dem milden Strahl der Sonne fällt.
</p>
</blockquote>
</div>
<a id="pre">
<h2>Preformatted Text</h2>
</a>
<p>
Weißraum (engl. <em>whitespace</em>) innerhalb des <code class="html"><code></code>-Tags wird wie im Quelltext stehend ausgegeben.
</p>
<pre>
Dieser Text
wird eins zu eins
ausgegeben.
oder? - Tatsache.
</pre>
<a id="code">
<h2>Code</h2>
</a>
<p>Der Inline-Tag <code class="html"><code></code> kennzeichnet Quelltext.</p>
<p>Für längere Code-Stücke eignen sich <code class="html"><pre></code>-Tags:</p>
<pre class="shell">#!/usr/bin/env perl
while (<>) {
print;
}</pre>
<div class="well">
<caption>Randnotiz</caption>
<h3>Top 10 Worte einer HTML-Datei</h3>
<code class="shell">$> perl -np -e 's/<.*?>//g; s/^\s*//; s/\s+/\n/;' | sort | uniq -c | sort -nr | head</code>
<h4>Beschreibung</h4>
<p>Das Problem wurde mit Hilfe einer Verkettung von Filtern gelöst.</p>
<ol>
<li>Der erste Filter "perl" arbeitet zeilenweise und besteht aus drei Unterfiltern:
<ol>
<li>Entfernen aller Tags (<code class="html"><.*?></code>)</li>
<li>jeder "whitespace" (" ", \t, \n) am Anfang einer Zeile wird entfernt (<code class="html">^\s*</code>)</li>
<li>ein oder mehrere "whitespace" werden zu einem Zeilenumbruch (<code class="html">\s+/\n</code>)
</li>
</ol>
Ausgabe: Ein Wort pro Zeile
</li>
<li>Sortieren (<code class="html">sort</code>)</li>
<li>
Identische aufeinanderfolgende Zeilen werden zusammengefasst
und mit deren vorangestellter Anzahl ausgegeben (<code class="html">uniq -c</code>).
</li>
<li>Numerisches Sortieren in absteigender Reihenfolge (<code class="html">sort -nr</code>)</li>
<li>Ausgabe der ersten zehn Zeilen (<code class="html">head</code>)</li>
</ol>
<h4>Diskussion</h4>
<p>
Alternativ zum "perl"-Filter hätten auch mehrere "sed" verwendet werden können.
</p>
<p>
Der Ansatz HTML-Tags auszufiltern ist vergleichsweise naiv, bspw. funktioniert er nicht bei
auf mehrere Zeilen verteilten oder auskommentierten Tags. Ein in dieser Hinsicht robusterer,
wenn auch langsamerer, Ansatz wäre der Einsatz eines Parsers.
</p>
</div>
<a id="lists">
<h1>Lists</h1>
</a>
<p>
Es gibt drei Arten von Listen, ungeordnete (engl. <em>unordered</em>) <code class="html"><ul></code>,
geordneted (engl. <em>ordered</em>) <code class="html"><ol></code> und Definitions-Listen <code class="html"><dl></code>.
Definitions-Listen beinhalten zu definierende Begriffe (engl. <em>definition term</em>) <code class="html"><dt></code> und
deren jeweilige Definition <code class="html"><dd></code>. Die anderen Listen beinhalten
Listenpunkte (engl. <em>list item</em>) <code class="html"><li></code>.
</p>
<h2>Unordered List <code class="html"><ul></code></h2>
<ul>
<li>rot <code class="html"><li></code></li>
<li>orange</li>
<li>gelb</li>
<li>grün</li>
<li>blau</li>
<ul>
<li>hellblau</li>
<li>dunkelblau</li>
</ul>
<li>violett</li>
</ul>
<h2>Ordered List <code class="html"><ol></code></h2>
<ol>
<li>rot <code class="html"><li></code></li>
<li>orange</li>
<li>gelb</li>
<li>grün</li>
<li>blau
<ol>
<li>hellblau</li>
<li>dunkelblau</li>
</ol>
</li>
<li>violett</li>
</ol>
<h2>Definition List <code class="html"><dl></code></h2>
<dl>
<dt><em>definition term</em> <code class="html"><dt></code></dt>
<dd><em>definition</em> <code class="html"><dd></code></dd>
<dt>Staat</dt>
<dd>Deutschland</dd>
<dt>Hauptstadt</dt>
<dd>Berlin</dd>
</dl>
<a id="tables">
<h1>Tabellen <code class="html"><table></code></h1>
</a>
<p>
Tabellen <code class="html"><table></code> beinhalten Tabellen-Reihen (engl. <em>table row</em>) <code class="html"><tr></code>
und diese Tabellen-Felder (engl. <em>table data</em>) <code class="html"><td></code>.
</p>
<p>
Tabellen-Felder können sich über mehrere Felder erstrecken, um dies zu
erreichen werden die Attribute <code class="html">colspan</code> für horizontal und
<code class="html">rowspan</code> für vertikale Zusammenfassung angegeben.
</p>
<caption>Code für eine Tabelle mit zwei Zeilen und zwei Spalten, die Tabelle nutzt in "Bootstrap" definierte CSS-Klassen.</caption>
<pre><code class="html"><table class="table table-bordered">
<tr>
<td>
Feld 1/1
</td>
<td>
Feld 1/2
</td>
</tr>
<tr>
<td colspan="2">
Feld 2/1
</td>
<td>
Feld 2/2
</td>
</tr>
</table>
</code></pre>
<table class="table table-bordered">
<caption>Darstellung zum vorangegangenen Code:</caption>
<tr>
<td>Feld 1/1</td>
<td>Feld 1/2</td>
</tr>
<tr>
<td>Feld 2/1</td>
<td>Feld 2/2</td>
</tr>
</table>
<table id="colored_table" border="1">
<caption><nobr>Ein weiteres Beispiel:</nobr></caption>
<tbody>
<tr>
<td style="background-color: red">1</td>
<td rowspan="2" style="background-color: lightblue">1x2</td>
<td style="background-color: grey">1</td>
</tr>
<tr>
<td style="background-color: orange">1</td>
<td style="background-color: yellow">1</td>
</tr>
<tr>
<td style="background-color: yellow">1</td>
<td colspan="2" rowspan="2" style="background-color: red; text-align: center;">2x2</td>
</tr>
<tr>
<td style="background-color: green">1</td>
</tr>
<tr>
<td colspan="3" style="background-color: lightblue; text-align: center;">3x1</code></td>
</tr>
</tbody>
</table>
<a id="forms">
<h1>Formulare <code class="html"><form></code></h1>
</a>
<p>
Formulare <code class="html"><form></code> bestehen aus verschiedenen Eingabeelementen,
diese können gruppiert werden <code class="html"><fieldset></code>. Eine solche Gruppe
kann eine Bezeichnung <code class="html"><label></code> tragen.
</p>
<form action=""> <!-- table -->
<fieldset> <!-- table-row-group -->
<legend>Nutzer</legend>
<div> <!-- table-row -->
<label for="input_text">Label <code class="html"><label></code></label><!-- table-cell -->
<input id="input_text" type="text" size="20" onchange="increaseProgress(event)" value="<input type="text">"><!-- table-cell -->
</div>
<div>
<label for="surname">Vorname</label><!-- table-cell -->
<input id="surname" type="text" size="10" onchange="increaseProgress(event)"><!-- table-cell -->
</div>
<div>
<label for="lastname">Nachname</label>
<input id="lastname" type="text" size="10" onchange="increaseProgress(event)">
</div>
<div>
<label for="email">E-Mail</label>
<input id="email" type="text" size="20" onchange="increaseProgress(event)">
</div>
<div>
<label for="password">Passwort</label>
<input id="password" type="password" size="16" onchange="increaseProgress(event)">
</div>
<div>
<label for="gender">Geschlecht</label>
<div onchange="increaseProgress(event)">
<label for="gender_m"><input id="gender_m" name="gender" type="radio">m</label>
<label for="gender_f"><input id="gender_f" name="gender" type="radio">f</label>
</div>
</div>
<div>
<label for="interests">Interessen</label>
<div onchange="increaseProgress(event)">
<label for="interest_A"><input id="interest_A" name="interest" type="checkbox">A</label>
<label for="interest_B"><input id="interest_B" name="interest" type="checkbox">B</label>
<label for="interest_C"><input id="interest_C" name="interest" type="checkbox">C</label>
<label for="interest_D"><input id="interest_D" name="interest" type="checkbox">D</label>
<label for="interest_E"><input id="interest_E" name="interest" type="checkbox">E</label>
<br>
<label for="interest_F"><input id="interest_F" name="interest" type="checkbox">F</label>
<label for="interest_G"><input id="interest_G" name="interest" type="checkbox">G</label>
<label for="interest_H"><input id="interest_H" name="interest" type="checkbox">H</label>
<label for="interest_I"><input id="interest_I" name="interest" type="checkbox">I</label>
<label for="interest_J"><input id="interest_J" name="interest" type="checkbox">J</label>
</div>
</div>
<div>
<label for="comment">Kommentar</label>
<textarea name="comment" id="comment" cols="30" rows="5"></textarea>
</div>
</fieldset> <!-- /table-row-group -->
<fieldset>
<legend>Auswahlboxen</legend>
<div>
<label for="music_style">Musikrichtungen</label>
<select name="music_style" id="music_style" size="5" multiple onchange="increaseProgress(event)">
<option value="">Alternative</option>
<option value="">Jazz</option>
<option value="">Klassik</option>
<option value="">Hard Rock</option>
<option value="">Metal</option>
<option value="">Pop</option>
</select>
</div>
<div>
<label for="Bundesland">Bundesland</label>
<select name="" id="Bundesland" onchange="increaseProgress(event)">
<option value="">Baden-Württemberg</option>
<option value="">Bayern</option>
<option value="">Berlin</option>
<option value="">Brandenburg</option>
<option value="">Bremen</option>
<option value="">Hamburg</option>
<option value="">Hessen</option>
<option value="">Mecklenburg-Vorpommern</option>
<option value="">Niedersachsen</option>
<option value="">Nordrhein-Westfalen</option>
<option value="">Rheinland-Pfalz</option>
<option value="">Saarland</option>
<option value="">Sachsen</option>
<option value="">Sachsen-Anhalt</option>
<option value="">Schleswig-Holstein</option>
<option value="">Thüringen</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Progressbar</legend>
<div>
<label for="progress">Fortschritt</label>
<progress id="progress" value="0" max="8"></progress>
</div>
</fieldset>
<fieldset> <!-- last-of-type => table-row -->
<div>
<button type="reset" class="btn btn-primary">Reset</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</fieldset>
</form>
<style>
form.mixer {
width: 25em;
padding: 1em;
border: 1px solid gainsboro;
text-align: left;
}
form.mixer output {
position: relative;
text-align: right;
width: 3.5em;
height: 3em;
color: white;
background-image: linear-gradient(160deg, white, lightgrey 10%, grey);
border-radius: 1em;
padding: 0.75em 0.5em 1em;
/*display: inline-block;
margin-left: -1%;*/
}
form.mixer output:after {
content: "%";
}
</style>
<div class="well">
<form class="mixer" oninput="v=parseInt(fader.value); x.value=v; meter.value=v;">
<caption for"fader">Slider</caption>
<input type="range" id="fader" value="50">
<output name="x" for="fader">50</output>
<br>
<caption for="meter">Meter</caption>
<meter style="display: block; margin-top: 0.5em; vertical-align: bottom; width: 100%; /*transform: rotate(-90deg) translate(2em, -1em);*/"
id="meter" min="0" max="100" optimum="50" low="66" high="90"
></meter>
</form>
</div>
</div>