|
|
(2 dazwischenliegende Versionen des gleichen Benutzers werden nicht angezeigt) |
Zeile 14: |
Zeile 14: |
| <pre> | | <pre> |
| <html> | | <html> |
− | <header> | + | <head> |
| .... | | .... |
− | </header> | + | </head> |
| <body> | | <body> |
| .... | | .... |
Zeile 27: |
Zeile 27: |
| | | |
| <pre> | | <pre> |
− | <header> | + | <head> |
| <meta charset="UTF-8"> | | <meta charset="UTF-8"> |
| <title>Markise Info</title> | | <title>Markise Info</title> |
− | </header> | + | </head> |
| </pre> | | </pre> |
| | | |
Zeile 78: |
Zeile 78: |
| !Buchstabe!! Name!! HTML Maskierungs-Code | | !Buchstabe!! Name!! HTML Maskierungs-Code |
| |- | | |- |
− | |Ä|| A Umlaut|| &Ä | + | |Ä|| A Umlaut|| &Auml; |
| |- | | |- |
− | |Ö|| O Umlaut|| &Ö | + | |Ö|| O Umlaut|| &Ouml; |
| |- | | |- |
− | |Ü|| U Umlaut|| &Ü | + | |Ü|| U Umlaut|| &Uuml; |
| |- | | |- |
− | |ä|| a Umlaut|| &ä | + | |ä|| a Umlaut|| &auml; |
| |- | | |- |
− | |ö|| o Umlaut|| &ö | + | |ö|| o Umlaut|| &ouml; |
| |- | | |- |
− | |ü|| u Umlaut|| &ü | + | |ü|| u Umlaut|| &uuml; |
| |- | | |- |
− | |ß|| scharfes S|| &ß | + | |ß|| scharfes S|| &szlig; |
| |} | | |} |
| === Links:=== | | === Links:=== |
Aktuelle Version vom 13. Februar 2024, 18:12 Uhr
HTML-Übersicht
HTML steht für Hypertext Markup Language. Hier werden nur wichtigsten Eigenschaften der Sprache dargestellt. Es handelt sich hier nicht um eine Einführung in HTML! Diese Lektion soll nur einen kleinen Einblick vermitteln.
Der Text auf der Seite wird durch Tags ausgezeichnet. Die Tags bestimmen wie der Text dargestellt wird.
HTML-Tags
Die meisten HTML tags bestehen aus einem öffnenden und einem schließenden Tag. Z.B. <h1> Überschrift 1 </h1>.
Es gibt aber auch einzelne Tags wie z.B. <br> für eine neue Zeile. HTML beachtet keine Zeilenschaltung im Text. Er wird einfach fortlaufend bis zum Rand dargestellt und dann erst umgebrochen. So passt sich die Darstellung der Fenstergröße an in der der Text angezeigt wird.
Andere Tags können Parameter enthalten.
Grundstruktur einer HTML Seite
<html>
<head>
....
</head>
<body>
....
</body>
</html>
Der Header enthält Informationen zur Webseite, aber keinen Inhalt der dargestellt wird. Wohl aber Informationen dazu wie etwas dargestellt werden soll. Z.B. CSS-Dateien.
<head>
<meta charset="UTF-8">
<title>Markise Info</title>
</head>
Body
In Body steht der darzustellende Text und die Formatierungsauszeichnungen.
So steht z.B. <h3>Überschrift</h3> für eine Überschrift dritthöchster Kategorie.
Das sieht dann so aus:
Überschrift
Absätze werden so ausgezeichnet: <p>Hier beginnt ein neuer Absatz, und hier ist er zu Ende.</p>
Eine neue Zeile kann auch mit <br> eingefügt werden.
Text im Body wird einfach fortlaufend ohne Berücksichtigung von Zeilenumbrüchen (\n) dargestellt.
Deshalb kann man für Testzwecke auch einfach nur einen Text, z.B. Hier ist dein neuer Webserver, ohne das HTML-Gerüst ausgeben. Der Text wird dann vom Browser dargestellt.
Hier ein Beispiel für eine komplette HTML-Seite:
@mws.MicroWebSrv.route('/wetter')
def _httpHandlerTestGet(httpClient, httpResponse):
global label2, label3 # ist erforderlich
content = """\
<!DOCTYPE html>
<html lang=de>
<head>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="60">
<title>Markiese Wetter</title>
</head>
<body>
<h1>Wetterdaten von der Markiese:</h1>
<h2>Temperatur: {}</h2>
<h2>Luftdruck: {}</h2>
<h2>Luftfeuchte: {}</h2>
</body>
</html>
""" .format(aussen_temp, "fehlerhaft", aussen_feuchte)
httpResponse.WriteResponseOk( headers = None,
contentType = "text/html",
contentCharset = "UTF-8",
content = content)
Im Browser sieht das dann so aus:
Umlaute und Sonderzeichen
Buchstabe |
Name |
HTML Maskierungs-Code
|
Ä |
A Umlaut |
Ä
|
Ö |
O Umlaut |
Ö
|
Ü |
U Umlaut |
Ü
|
ä |
a Umlaut |
ä
|
ö |
o Umlaut |
ö
|
ü |
u Umlaut |
ü
|
ß |
scharfes S |
ß
|
Links:
https://www-user.tu-chemnitz.de/~lfe/selfhtml61/tcad.htm
Tabellen
Links
Navigation
Zurück zur "Micropython Kurs 2023 Teil 2" Startseite
Zurück zur "Micropython Kurs 2023" Startseite
Zurück zur Programmieren Startseite
Zurück zur Wiki Startseite