36. Lektion: HTML Briefing: Difference between revisions
No edit summary |
|||
| (9 intermediate revisions by the same user not shown) | |||
| Line 14: | Line 14: | ||
<pre> | <pre> | ||
<html> | <html> | ||
< | <head> | ||
.... | .... | ||
</ | </head> | ||
<body> | <body> | ||
.... | .... | ||
| Line 24: | Line 24: | ||
== Header== | == Header== | ||
Der Header enthält Informationen zur Webseite, aber keinen Inhalt der dargestellt wird. Wohl aber Informationen dazu wie | 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. | ||
<pre> | <pre> | ||
< | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<title>Markise Info</title> | <title>Markise Info</title> | ||
</ | </head> | ||
</pre> | </pre> | ||
| Line 45: | Line 45: | ||
Hier ein Beispiel für eine komplette HTML-Seite: | Hier ein Beispiel für eine komplette HTML-Seite: | ||
<pre> | <pre> | ||
<!DOCTYPE html> | @mws.MicroWebSrv.route('/wetter') | ||
<html lang=de> | 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> | |||
</html> | <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) | |||
</pre> | </pre> | ||
Im Browser sieht das dann so aus:<br> | Im Browser sieht das dann so aus:<br> | ||
[[file:Markiese_Wetter_Darstellung.png|400px|Markiese_Wetter_Darstellung]] | [[file:Markiese_Wetter_Darstellung.png|400px|Markiese_Wetter_Darstellung]] | ||
== Umlaute und Sonderzeichen== | |||
{| class="wikitable" style="margin:auto" | |||
|+ | |||
!Buchstabe!! Name!! HTML Maskierungs-Code | |||
|- | |||
|Ä|| A Umlaut|| &Auml; | |||
|- | |||
|Ö|| O Umlaut|| &Ouml; | |||
|- | |||
|Ü|| U Umlaut|| &Uuml; | |||
|- | |||
|ä|| a Umlaut|| &auml; | |||
|- | |||
|ö|| o Umlaut|| &ouml; | |||
|- | |||
|ü|| u Umlaut|| &uuml; | |||
|- | |||
|ß|| scharfes S|| &szlig; | |||
|} | |||
=== Links:=== | |||
https://www-user.tu-chemnitz.de/~lfe/selfhtml61/tcad.htm | |||
== Tabellen== | |||
== Links== | == Links== | ||
* https://wiki.selfhtml.org/ | * https://wiki.selfhtml.org/ | ||
==Navigation== | |||
[[Micropython_Kurs_2023_-_Teil_2|Zurück zur "Micropython Kurs 2023 Teil 2" Startseite]]<br> | |||
[[Micropython Kurs 2023|Zurück zur "Micropython Kurs 2023" Startseite]]<br> | |||
[[Programmieren|Zurück zur Programmieren Startseite]]<br> | |||
[[Attraktor_Wiki|Zurück zur Wiki Startseite]]<br> | |||
Latest revision as of 19:12, 13 February 2024
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>
Header
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
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