Informatik und Programmiersprachen

Größe: px

Ab Seite anzeigen:

Download "Informatik und Programmiersprachen"

Jacob Feld
vor 10 Jahren
Abrufe

1 Informatik und Programmiersprachen Einschub: HTML Wintersemester 2004/2005 Prof. Dr. Thomas Wieland

2 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: 2

<body>,<p>,<i>). Dokumententeile werden durch Einschließung mit Tags ausgezeichnet (z.b. <p>html ist <i>spitze</i></p>)

3 Grundgerüst einer HTML-Seite <html> <head> <title>... </title> </head> <body> </body> </html> 3

4 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

5 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:  5

Mehre Leerzeichen werden stets zu einem zusammen gefasst.

6 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

..</tag> Absatzausrichtungen werden mit Hilfe des Attributs "align" definiert.

7 Ü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

..</h6> Die Überschriftstypen verstehen das align-attribut Beispiel: <body> <h3

8 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

fett / bold: <b></b> kursiv / italic: <i></i> unterstrichen /underline: <u></u> teletyper:

9 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

Breite in Pixel oder Prozent border: Dicke der Umrandung; Default = 0 align: top, middle, bottom (einzeilig), left, right

10 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: 10

Locator Gibt Protokoll, Rechner, Pfad und Dateiname an Meist abhängig von Groß-/Kleinschreibung

11 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

Kombination aus beiden Kann auch nur ein Pfad sein, dann wird Default-Dokument zurückgeliefert (z.b. index.

12 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

(Listeneintrag) Startwert: Attribut start Art der Nummerierung: Attribut type ("1", "a", "A",

13 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 enctype: Codierung der Zeichen 13

14 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

type="password" Mehrzeilige Eingabefelder: <textarea> Schaltflächen: <input type="submit"

15 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

Paare "Wert von name"="wert von value" Paare werden durch das Zeichen "&" getrennt Leerzeichen innerhalb des "Wert von

16 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 senden <input type="reset"> Reset der Formulardaten Versteckte Datenübermittlung möglich mit <input type="hidden" name="x" value="versteckte Daten"> 16

HTTP-Request schicken oder Email senden <input type="reset"> Reset der Formulardaten

Ähnliche Dokumente

Schiller-Gymnasium Hof 20.12.2004

Schiller-Gymnasium Hof 20.12.2004 Erstellen eines HTML-Dokumentes Zum Erstellen einer Homepage benötigen wir lediglich einen Editor. Zum Ansehen der fertigen Site benötigen wir wir natürlich auch einen Browser, z.b. Firefox oder Netscape