HTML, Strings

deutsch english français Drucken

Forum

6.1 HTML, STRINGS

EINFÜHRUNG

HTML (Hyper Text Markup Language) ist eine Dokumentbeschreibungssprache für Webseiten. Eine im Browser dargestellte Webseite, die dir noch so kompliziert erscheint, wird aus einer gewöhnlichen Textdatei erzeugt, die für das Layout neben dem sichtbaren Text zusätzlich Auszeichnungen (Markups) enthält, die das Erscheinungsbild festlegen. Diese bestehen aus einem Tag-Paar mit einem Start- und Endtag. Das Starttag beginnt mit der Spitzklammer < und wird mit der Spitzklammer > geschlossen; das Endtag beginnt mit </ und wird ebenfalls mit > geschlossen.

Das Grundgerüst einer HTML-Textdatei besteht aus den Tags <html> und <body> sowie den entsprechenden Endtags.

<html>
   <body>
      TigerJython Web-Site
   </body>
</html>

Die Gross-Kleinschreibung von Tags, sowie Zeilenumbrüche und Einrückungen spielen für das Layout des Dokuments keine Rolle.

PROGRAMMIERKONZEPTE: HTML, Hyperlink, String, Unveränderlicher Datentyp

WAS SIND STRINGS?

In vielen Programmen, so auch im Zusammenhang mit dem Web, benötigst du einen Datentyp, der Text abspeichern kann. Darunter versteht man eine Aneinanderreihung von Buchstaben (eine Zeichenkette), so wie du sie mit der Tastatur eingeben kannst. Zusätzlich brauchst du einige Steuerzeichen, beispielsweise um einen Zeilenumbruch oder Tabulatoren zu kennzeichnen. In Python verwendest du für Zeichenketten (Strings) den Datentyp str.

Der Text eines Strings wird zwischen doppelten oder einfachen Anführungszeichen gesetzt. Du kannst Strings wie eine Liste auffassen, deren Elemente einzelne Zeichen sind. Die meisten dir bekannten Operationen für Listen sind daher auch für Strings anwendbar, mit einem wichtigen Unterschied: Ein einzelnes Zeichen kannst du mit einem Index aus dem String herausholen (eckiges Klammerpaar), du kannst das Zeichen aber nicht mit einer Zuweisung verändern, da der String ein unveränderlicher Datentyp ist. Willst du einen String verändern, so musst du einen neuen String erstellen [mehr... In Python werden Strings intern mit 8-bit ASCII-Zeichen dargestellt. Setzt man
ein u vor den String, so erfolgt die Darstellung im 16-bit Unicode. Einzelne Zeichen
werden allerdings in Python nicht als spezieller Character-Datentyp aufgefasst,
sondern als String der Länge 1].

Dein Programm definiert HTML-formatierten Text als String html und schreibt ihn auf der Konsole aus.

html = "<html><body>TigerJython Web Site</body></html>"
print(html)

Um einen String zeichenweise zu durchlaufen, verwendest du eine for-Schleife mit einem Index:

html = "<html><body>TigerJython Web Site</body></html>"

for i in range(len(html)):
   print(html[i])

Eleganter ist es aber, eine for-Schleife mit dem Schlüsselwort in zu verwenden:

html = "<html><body>TigerJython Web Site</body></html>"
for c in html:
   print(c)

Ein String kann auch spezielle Steuerzeichen enthalten. Diese Escape-Character werden mit einem Rückwärtsbruchstrich (Backslash) eingeleitet, beispielsweise lautet das Zeichen für eine neue Zeile \n (newline , auch Linefeed <lf> genannt). Du erstellst beispielsweise die ganz am Anfang des Kapitels gezeigte Formatierung mit:

html = "<html>\n   <body>\n      TigerJython Web Site\n   </body>\n</html>"
print(html)

Texte kannst du auch aus einer Textdatei einlesen. Erstelle dazu mit irgend einem Texteditor im gleichen Verzeichnis, in dem sich dein Programm befindet, die Datei welcome.html mit folgendem Inhalt:

<html>
   <body>
      <h1>TigerJython Web-Site</h1>
      Guten Tag
   </body>
</html>

Mit dem Tag <h1> zeichnest du eine Überschrift aus. Dein Programm liest diese Textdatei in den String html und schreibt ihn wieder in die Konsole aus.

html = open("welcome.html").read()
print(html)

MEMO

Ein String ist ein unveränderliches Objekt bestehend aus einzelnen Zeichen. Du kannst einzelne Zeichen mit einem Index lesen. Wenn du aber mit einer Zuweisung versuchst, ein Zeichen zu ersetzen, ergibt sich eine Fehlermeldung. In Python gibt es keinen Datentyp char, denn einzelne Zeichen werden ebenfallse als Strings aufgefasst.

Textdateien werden mit open() geöffnet. Dabei übergibst du den Pfad zur Datei. Dieser kann relativ zum Verzeichnis sein, in dem sich dein Programm befindet, aber auch absolut, wenn du einen Bruchstrich (unter Windows eventuell auch noch einen Laufwerkbuchstaben) vorstellst, also beispielsweise

open("test/welcome.html")	welcome.txt im Unterverzeichnis test des Verzeichnisses, in dem sich dein Programm befindet
open("/myweb/test/welcome.html")	welcome.txt im Verzeichnis /myweb/test des Laufwerks, in dem sich dein Programm befindet
open("d:/myweb/test/welcome.html")	(nur für Windows) welcome.txt im Verzeichnis \myweb\test des Laufwerks d:

Man kann zwei Strings mit dem Additionsoperator + aneinander fügen (konkatenieren). Wichtig ist aber, dass beide Operanden wirklich Strings sind. Beispielsweise führt "pi = " + 3.1459 zu einer Fehlermeldung. Du musst dafür "pi = " + str(3.14159) schreiben, also die Zahl zuerst mit str() in einen String konvertieren.

Die wichtigsten Operationen mit Strings

s = "Python"

s[i]

s[start:end]

s[start:]

s[:end]

s.index(x)

s.find(x)

s.find(x, start)

s.find(x, start, end)

s.count(x)

x in s

x not in s

s1 + s2

s1 += s2

s * 4

len(s)

String definieren (oder auch s = 'Python')

Auf Stringzeichen mit Index i zugreifen

Neuer Teilstring mit Zeichen start bis end, aber ohne end

Neuer Teilstring mit Zeichen von start an

Neuer Teilstring von ersten Zeichen bis end, aber ohne end

Index des ersten Vorkommens von x (-1: nicht gefunden)

Index des ersten Vorkommens von x von start

Index des ersten Vorkommens von x von start bis end

Gibt die Anzahl der Auftreten von x zuück

Gibt True zurück, falls x in s enthalten ist

Gibt True zurück, falls x nicht in s enthalten ist

Konkatenation von s1 und s2 als neuer String

Ersetzt s1 durch die Konkatenation von s1 und s2

Neuer String mit Zeichen von s viermal wiederholt

Gibt die Anzahl Zeichen zurück

WEB-BROWSER

Die wichtigste Aufgabe eines Web-Browsers ist es, die HTML-Tags zu interpretieren und die Seite gemäss den Layoutangaben in einem Bildschirmfenster darzustellen. Du kannst die Datei welcome.html mit einem auf deinem PC installierten Web-Browser (Firefox, Explorer, Chrome, Safari, Opera, usw.) anzeigen.

TigerJython stellt dir ein einfaches Browser-Fenster als Instanz der Klasse HtmlPane zur Verfügung. Die Methode insertText() bewirkt, dass der übergebene String als Webseite im Fenster erscheint.

from ch.aplu.util import HtmlPane

html = open("welcome.html").read()
pane = HtmlPane()
pane.insertText(html)

Programmcode markieren (Ctrl+C kopieren, Ctrl+V einfügen)

MEMO

Ein Web-Browser interpretiert die HTML-Markups und stellt das Dokument gemäss den Layoutangaben dar.

HtmlPane kennt nur die grundlegenden HTML-Tags. Die Anzeige von komplexen HTML-Seiten wird nicht unterstützt. Du kannst ein HtmlPane auch dazu gebrauchen, deine Programmausgaben in einem eigenen Fenster mit einem gefälligen Layout anzuzeigen, statt in der Konsole auszuschreiben.

HYPERLINKS

Die explosionsartige Verbreitung des Web ist im Wesentlichen darauf zurück zu führen, dass eine Webseite Elemente enthalten kann, die bei einem Mausklick zu einer Webseite führt, die auf irgendeinem anderen, sogar weit entfernten Webserver liegen kann. Elemente dieser Art werden Hyperlinks genannt. Mit Hyperlinks lässt sich eine vernetzte Informationsstruktur, ähnlich einem Spinnennetz, aufbauen.

Du erstellst wieder mit einem Texteditor die Datei welcomex.html, die ein Link-Tag <a> enthält. Neu ist auch noch das Paragraph-Tag <p> enthalten, das standardmässig neue Abschnitte mit einem Zeilenumbruch definiert.

<html>
   <body>
      <h1>TigerJython Web-Site</h1>
      <p>Guten Tag!</p>
      <a href="http://www.tigerjython.ch/">TigerJython Home</a>
   </body></html>

Du musst in deinem Programm die Hyperlinks aktivieren, indem du eine Funktion linkCallback() definierst und sie mit dem benannten Parameter linkListener registrierst. Klickst du auf den Link, so führt dieser Event zum Aufruf des Callbacks, wobei die im Link-Tag enthaltene URL übergeben wird.

from ch.aplu.util import HtmlPane

def linkCallback(url):
    pane.insertUrl(url)

html = open("welcomex.html").read()
pane = HtmlPane(linkListener = linkCallback)
pane.insertText(html)

Programmcode markieren (Ctrl+C kopieren, Ctrl+V einfügen)

MEMO

Hyperlinks sind Querverweise in einem Dokument, mit dem zu anderen Dokumenten gesprungen werden kann. Verlinkte Dokumente sind ein charakteristisches Merkmal des World Wide Web.

Die Darstellung von Webseiten mit HtmlPane ist leider unvollständig. Du kannst aber mit HtmlPane.browse() den Standard-Browser verwenden [mehr... Den programmgesteuerten Aufruf eines anderen Programms oder Prozesses nennt man auch "spawnen"].

from ch.aplu.util import HtmlPane
HtmlPane.browse("www.tigerjython.com")

AUFGABEN

Mit dem Tag

<img src="gifs/tigerlogo.png" width="120" height="116"></img>

kannst du ein Bild einbinden, das sich im Unterverzeichnis gifs des Verzeichnisses befindet, in dem dein Programm gespeichert ist.

Erstelle eine Datei showlogo.html und ein Programm, das in einer HtmlPane Folgendes zeigt:

Das Bild tigerlogo.png kannst du von hier herunterladen.

Definiere die Strings name, vorname, strasse und ort, sowie die Zahlen hausnummer und postleitzahl z. B. mit deinen persönlichen Angaben. Konkateniere mit dem + Zeichen diese Strings in einen einzigen String anschrift derart, dass print(anschrift) die Angaben formatiert ausschreibt:

Vorname Name
Strasse Hausnummer
Postleitzahl Ort