Informatik und Programmiersprachen Einschub: HTML Wintersemester 2004/2005 Prof. Dr. Thomas Wieland
HTML HTML = Hypertext Markup Language HTML beschreibt Inhalt, Struktur und Darstellung eines Dokumentes. HTML-Befehle sind die Tags (z.b. <body>,<p>,<i>). Dokumententeile werden durch Einschließung mit Tags ausgezeichnet (z.b. <p>html ist <i>spitze</i></p>) Das Einschließen mit Tags heißt "Markup" HTML-Dokumente sind ASCII-Dokumente HTML ist nicht case-sensitiv HTML ist plattformunabhängige Dokumentenbeschreibungssprache Tipp zum Nachschlagen: Stefan Münz: http://selfhtml.teamone.de 2
Grundgerüst einer HTML-Seite <html> <head> <title>... </title> </head> <body>...... </body> </html> 3
Textabsatz und Zeilenumbruch Der Browser ignoriert Zeilenumbrüche im Quelltext Tag für Zeilenumbruch ist <br> Tag für Absatz ist <p> Starttag <p> und Endetag </p> schließen den Inhalt des Absatzes ein. Das Tag <p> muss nicht mit </p> geschlossen werden (sollte aber der Übersichtlichkeit wegen). Das Tag <p> wirkt solange bis ein nächstes <p> gefunden wird. 4
Leerzeichen und Kommentare Der Browser ignoriert vorlaufende und nachlaufende Leerzeichen einer Zeile im Quelltext. Mehre Leerzeichen werden stets zu einem zusammen gefasst. Kodierung für erzwungenes Leerzeichen: Kommentare lassen sich mit folgender Syntax einbringen: <!-- Dies ist ein Kommentar --> 5
Attribute und Absatzausrichtung Attribute: Zusätzliche Angaben zur Formatierung von Elementen besitzen in Tags Syntax: <tag attributname=wert... >...</tag> Absatzausrichtungen werden mit Hilfe des Attributs "align" definiert. Möglichkeiten: left, right, center, justify (Blocksatz) Beispiel: <p align="center">zentrierter Text </p> 6
Überschriften HTML kennt sechs Gliederungsebenen Jeder Gliederungsebene ist ein eigener Überschriftstyp zugeordnet Die Überschriftstypen sind: <h1>...</h1> bis <h6>...</h6> Die Überschriftstypen verstehen das align-attribut Beispiel: <body> <h3 align="center"> Eine Überschrift </h3> <p>ich bin ein Absatz mit viel Text</p> </body> 7
Zeichenformatierung Physische Formatierung Tags zur physischen Formatierung können geschachtelt werden. fett / bold: <b></b> kursiv / italic: <i></i> unterstrichen /underline: <u></u> teletyper: <tt></tt> durchgestrichen: <strike></strike> oder <s></s> vergrößerter/verkleinerter Text: <big></big> bzw. <small></small> hochgestellter Text: <sup></sup> tiefergesteller Text: <sub></sub> 8
Grafiken Tag: <img>zur Einbindung von Graphiken/Bildern Attribute: src: absoluter oder relativer Pfad zu einer Datei alt: alternativer Text, wenn Grafik nicht angezeigt werden kann; auch Hilfetext height: Höhe in Pixel oder Prozent width: Breite in Pixel oder Prozent border: Dicke der Umrandung; Default = 0 align: top, middle, bottom (einzeilig), left, right (für umfließenden Text) hspace: Abstand zwischen Grafik und Text horizontal vspace: Abstand zwischen Grafik und Text vertikal 9
Hyperlinks Verweise auf andere Informationen Verweis auf andere Datei Verweis auf bestimmtes Ziel in einer anderen Datei Verweis auf Ziel innerhalb der eigenen Datei Angegeben durch URL: Uniform Resource Locator Gibt Protokoll, Rechner, Pfad und Dateiname an Meist abhängig von Groß-/Kleinschreibung Verzeichnisse werden durch Schrägstrich / getrennt Bsp: http://de.selfhtml.org/navigation/html.htm#kopfdaten 10
Hyperlinks Verweisziel definieren (Anker) <a name="bezeichnung">... </a> Querverweis setzen <a href="ziel-url">hyperlink-text</a> Wert von href: Anker oder Datei oder Kombination aus beiden Kann auch nur ein Pfad sein, dann wird Default-Dokument zurückgeliefert (z.b. index.html) Ist das Ziel eine Datei, so kann ein absoluter oder relativer Pfad oder URL angegeben werden. Ein Anker wird mit # eingeleitet 11
Listen Aufzählungen <ul> (unordered list) das Tag für die Liste selbst <li> (Listeneintrag) Auch verschachtelt möglich Nummerierte Listen <ol> (ordered list) für die Liste <li> (Listeneintrag) Startwert: Attribut start Art der Nummerierung: Attribut type ("1", "a", "A", "I", "i") Definitionslisten <dl> (definition list) <dt> (Listeneintrag 1.Spalte) <dd> (Listeneintrag 2.Spalte) 12
Formulare Für die Eingabe von Daten durch den Benutzer Übermittlung dieser Daten an den Server Verarbeitung durch den Server Tag <form> definiert Formular zu Aufnahme von Eingabefeldern, Auswahllisten, Schaltflächen etc. <form> hat als Attribute method: POST oder GET action: Aufruf eines Handlers auf dem Server, z.b. CGISkript, einfache HTML-Seite, oder Versenden einer Email enctype: Codierung der Zeichen 13
Formularobjekte Neben üblichem HTML-Inhalt können im Inneren eines <form> folgende spezielle Formobjekte enthalten sein: Einzeilige Eingabefelder: <input type="text" Passwortfelder: <input type="password" Mehrzeilige Eingabefelder: <textarea> Schaltflächen: <input type="submit" Auswahllisten: <input type="radio" Kontrollkästchen: <input type="checkbox" Optionsfelder: <select><option>... </option></select> 14
Attribute der Formularobjekte Die zugehörigen Tags besitzen i.d.r. die Attribute typ: festgelegt, z.b. radio, checkbox, text, submit, reset name: frei wählbar, darüber auf dem Server anzusprechen, z.b. KommentarCtrl, NameCtrl value: Vorgabewert für zu übermittelnden Wert Übermittelt in HTTP-Nachricht werden die Paare "Wert von name"="wert von value" Paare werden durch das Zeichen "&" getrennt Leerzeichen innerhalb des "Wert von value" werden mit dem Zeichen "+" codiert 15
Codeausführung Mit Formularen keine "Codeausführung" im Browser möglich (dazu ist Java-Script da) Aktionen werden lediglich ausgeführt bei <input type="submit"> HTTP-Request schicken oder Email senden <input type="reset"> Reset der Formulardaten Versteckte Datenübermittlung möglich mit <input type="hidden" name="x" value="versteckte Daten"> 16