\n"; wiederhole: $fp = fopen("telefonbuch.txt" ,"r"); suche Namen while (!feof($fp)) { schicke Eintrag $line = fgets($fp, 64); if (preg_match("/$wunsch/i", $line)) { Fusstext echo "\t$line"; } } fclose($fp); }?>

\n"; $line = fgets ($fp, 64); $fp = fopen("telefonbuch.txt" ,"r"); while (!feof($fp)) { $line = fgets($fp, 64); if (preg_match("/$wunsch/i", $line)) { Das Programm wird vom Web- echo "\t$line"; Server ausgeführt. Die Ausgabe } } fclose($fp); wird auf dem Browser des Client } angezeigt. (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 207 Ziele: Programmkonstrukte im Beispiel wiedererkennen in der Vorlesung: Die Programmkonstrukte werden am Beispiel informell erklärt. -------------------------------------------------------------------------------- S EWS-2.8 Integration von PHP-Programm und HTML-Text Uni Telefonbuch Paderborn

Das Uni-Telefonbuch

PHP-Programm in HTML- Wen suchen Sie? ...

FORMULARANZEIGE; } HTML-Text wird vom PHP- else { $wunsch = $_REQUEST[quotesingle wunschquotesingle ]; Programm ausgegeben, echo "

Ihre Suchergebnisse

\n";      durch echo-Anweisung:
$fp = fopen("telefonbuch.txt" ,"r");
while (!feof($fp)) {          echo "...";
$line = fgets($fp, 64);
if (preg_match("/$wunsch/i", $line)) {
echo "\t$line";
}  }
fclose($fp);
}?>

(c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 208 Ziele: Integration verstehen in der Vorlesung: Das Zusammenwirken wird an diesem Beispiel erklärt. Verständnisfragen: Beschreiben Sie das Zusammenwirken! -------------------------------------------------------------------------------- E EWS-2.9 E1. Einführung zu Eigenschaften von Sprachen Sprachen in der Informatik werden * für bestimmte Zwecke geschaffen hier: Auszeichnungssprachen (HTML) und Skriptsprachen (PHP, Javascript) weitere Aufgabengebiete für Sprachen in dieser Einführung; * je nach Zweck und Niveau mit einfachen oder komplexen, wenigen oder zahlreichen Sprachkonstrukten ausgestattet; * durch Regeln formal oder informell definiert; sie legen fest: Notation der Symbole (Lexeme), Struktur der Sätze (Syntax), Bedeutung der Konstrukte (Semantik); * durch Software-Werkzeuge übersetzt oder interpretiert Alle diese Aspekte beeinflussen die Eigenschaften der Sprachen. Die Verbreitung der Sprachen wird auch beeinflusst durch * Erlernbarkeit und Handhabbarkeit, * Verfügbarkeit von Werkzeugen, * Marktmechanismen (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 209 Ziele: Allgemeine Aspekte zu Sprachen in der Vorlesung: Die einzelnen Aspekte werden in dieser Einleitung weiter ausgeführt und im Vorlesungsstrang E vertieft. -------------------------------------------------------------------------------- E EWS-2.10 4 Ebenen der Spracheigenschaften Ein Satz einer textuellen* Sprache ist eine Folge von Zeichen eines zu Grunde liegenden Alphabetes Beispiel: ein PHP-Programm ist ein Satz der Sprache PHP; hier ein Ausschnitt daraus: $line = fgets ($fp, 64); Die Struktur eines Satzes wird in 2 Ebenen definiert: 1. Notation von Grundsymbolen (Lexemen, token) 2. Syntaktische Struktur Die Bedeutung eines Satzes wird in 2 weiteren Ebenen an Hand der Struktur für jedes Sprachkonstrukt definiert: 3. statische Semantik Eigenschaften, die vor der Ausführung bestimmbar sind. 4. dynamische Semantik Eigenschaften, die erst während der Ausführung bestimmbar sind. Auf jeder der 4 Ebenen gibt es auch Regeln, die korrekte Sätze erfüllen müssen. *) Es gibt auch visuelle Sprachen. Ihre Sätze werden aus graphischen Symbolen zusammengesetzt. (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 210 Ziele: Übersicht über die 4 Ebenen in der Vorlesung: Die 4 Ebenen werden an dem Beispiel kurz erklärt. Visuelle Sprachen werden hier nicht weiter vertieft. -------------------------------------------------------------------------------- E EWS-2.11 Ebene 1: Notation von Grundsymbolen Ein Grundsymbol wird aus einer Folge von Zeichen des Alphabetes gebildet. Die Regeln zur Notation von Grundsymbolen werden z. B. durch reguläre Ausdrücke formal definiert (siehe E2). $line = fgets ($fp, 64); Typische Grundsymbole in Programmiersprachen 4 Symbolklassen: Beispiele aus PHP Bezeichner (identifier) $line fgets Namen für Variable, Funktionen, ... Literale (literals) 64 "telefonbuch.txt" Zahlwerte, Zeichenreihen Wortsymbole (keywords) while if kennzeichnen Sprachkonstrukte Spezialzeichen <= = ; { } Operatoren, Separatoren Zwischenräume, Tabulatoren, Zeilenwechsel und Kommentare zwischen den Grundsymbolen dienen der Lesbarkeit und sind sonst bedeutungslos Kommentar /* Kommentar in C-Notation */ (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 211 Ziele: Grundsymbole verstehen in der Vorlesung: Es wird an Beispielen erklärt: * Eingabe als Folge von Grundsymbolen, * Klassen von Grundsymbolen, * informelle Regeln zur Notation, * Kommentare, * Trennung aufeinanderfolgender Grundsymbole. -------------------------------------------------------------------------------- E EWS-2.12 Ebene 2: Syntaktische Struktur Ein Satz einer Sprache wird in seine Sprachkonstrukte gegliedert. Sie sind meist ineinander geschachtelt. Diese syntaktische Struktur wird durch einen Strukturbaum dargestellt. Die Grundsymbole sind Blätter in diesem Baum. Die Syntax einer Sprache wird durch eine kontextfreie Grammatik präzise definiert. Die Grundsymbole sind die Terminalsymbole der Grammatik (siehe E2). Teil des Strukturbaumes: Zuweisung Variable Ausdruck Aufruf Funktionsname Parameter Parameter Ausdruck Ausdruck Variable Literal $line = fgets ( $fp , 64 ) ; (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 212 Ziele: Syntaktische Struktur am Beispiel vestehen in der Vorlesung: Am Beispiel wird erklärt: * Baum repräsentiert die Struktur, * innere Knoten repräsentieren Sprachkonstrukte, * Grundsymbole sind Blattknoten, * Sprachkonstrukte sind nach Strukturregeln aufgebaut, * sie sind in der kontextfreien Grammatik definiert. -------------------------------------------------------------------------------- E EWS-2.13 Ebene 3: Statische Semantik Eigenschaften von Sprachkonstrukten, die ihre Bedeutung (Semantik) beschreiben, soweit sie an der Programmstruktur festgestellt werden können (statisch), ohne das Programm auszuführen. Typische Eigenschaften der statischen Semantik (für übersetzte Sprachen): * Bindung von Namen: Regeln, die einer Anwendung eines Namens seine Definition zuordnen. z. B. "Zu dem Funktionsnamen in einem Aufruf muss es eine Funktionsdefinition mit gleichem Namen geben." * Typregeln: Sprachkonstrukte wie Ausdrücke und Variable liefern bei ihrer Auswertung einen Wert eines bestimmten Typs. Er muss im Kontext zulässig sein und kann die Bedeutung von Operationen näher bestimmen. z. B. "Die Operanden des + Operators müssen Zahlwerte sein." 5 + "Text" ist in vielen Sprachen ein Typfehler In der Sprache PHP gehören die Bindungsregeln zur statischen Semantik, die Typregeln aber zur dynamischen Semantik, da sie erst bei der Ausführung des Programms angewandt werden können. (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 213 Ziele: Statische Semantik verstehen in der Vorlesung: An Beispielen wird erklärt: * Begriff: statisch, * Bindung von Namen, * Typregeln, * nur für übersetzte Sprachen -------------------------------------------------------------------------------- E EWS-2.14 Ebene 4: Dynamische Semantik Eigenschaften von Sprachkonstrukten, die ihre Wirkung beschreiben und erst bei der Ausführung (dynamisch) bestimmt oder geprüft werden können. Typische Regeln der dynamischen Semantik beschreiben * welche Voraussetzungen für eine korrekte Ausführung eines Sprachkonstruktes erfüllt sein müssen, z. B. "Ein numerischer Index einer Array-Indizierung, wie in $var[$i], darf nicht kleiner als 0 sein." * welchen Effekt die Ausführung eines Sprachkonstruktes verursacht, z. B. "Eine Zuweisung der Form Variable = Ausdruck wird wie folgt ausgewertet: Die Speicherstelle der Variablen auf der linken Seite wird bestimmt. Der Ausdruck auf der rechten Seite wird ausgewertet. Das Ergebnis ersetzt dann den Wert an der Stelle der Variablen." In der Sprache PHP gehören auch die Typregeln zur dynamischen Semantik. (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 214 Ziele: Wirkung und Prüng bei der Ausführung verstehen in der Vorlesung: Die typischen Regeln werden an Beispielen erklärt. -------------------------------------------------------------------------------- E EWS-2.15 Übersetzung von Sprachen Ein Übersetzer transformiert jeden korrekten Satz Übersetzer und (Programm) der Quellsprache in einen seine Phasen gleichbedeutenden Satz der Zielsprache. Satz der Quellsprache * Die meisten Programmiersprachen zur Software- Entwicklung werden übersetzt, lexikalische Analyse z. B. C, C++, Java, Ada, Modula * Zielsprache ist dabei meist eine Maschinensprache Symbolfolge eines realen Prozessors oder einer abstrakten syntaktische Analyse Maschine. * Übersetzte Sprachen haben eine stark ausgeprägte Strukturbaum statische Semantik. semantische Analyse * Der Übersetzer prüft die Regeln der statischen Semantik, wie Bindungs- und Typregeln; attributierter Str.baum er findet viele Arten von Fehlern vor der Ausführung. Transformation Optimierung Code-Erzeugung Es gibt auch Übersetzer für andere Sprachen: Textformatierung: LaTeX -> PostScript Spezifikationssprachen: UML -> Java Satz der Zielsprache (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 215 Ziele: Die Aufgaben von Übersetzern verstehen in der Vorlesung: Es werden erklärt: * die Begriffe, * die Übersetzungsschritte, * der Zusammenhang zu den Ebenen der Spracheigenschaften. -------------------------------------------------------------------------------- E EWS-2.16 Interpretation von Sprachen Ein Interpretierer liest einen Satz (Programm) einer Sprache und führt ihn aus. Programm Sprachen, die so strikt interpretiert werden: * haben einfache Struktur und keine statische Semantik, Interpretierer * Bindungs- und Typregeln werden erst bei der Ausführung geprüft, * nicht ausgeführte Programmteile bleiben ungeprüft, Eingabe Ausgabe z. B. Lisp, Prolog Manche Interpretierer erzeugen vor der Ausführung eine interne Repräsentation des Satzes; dann können auch Struktur und Regeln der statischen Semantik vor der Ausführung geprüft werden, z. B. Skriptsprachen PHP, JavaScript, Perl Interpretierer können auf jedem Rechner verfügbar gemacht werden und in andere Software (Browser) integriert werden. Interpretation kann 10-100 mal zeitaufwändiger sein als die Ausführung von übersetztem Maschinencode. (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 216 Ziele: Das Prinzip Interpretation verstehen in der Vorlesung: Es wird erklärt * wie strikt interpretiert wird, * wie Interpretation mit Übersetzungsphasen kombiniert wird, * welche Konsequenzen sich für Spracheigenschaften ergeben. -------------------------------------------------------------------------------- E EWS-2.17 Zwecke von Sprachen: allgemeine Software-Entwicklung Anforderungen: * Algorithmen klar und effizient formulieren * komplexe Datenstrukturen klar und effizient formulieren * prüfbare Regeln (statische Semantik) einhalten, dadurch Fehler reduzieren * modulare Gliederung großer Programme mit expliziten Schnittstellen * Schnittstellenprüfung beim Zusammensetzen von Bibliothekskomponenten Konsequenzen: * umfangreiche, komplexe Sprachen: viele Konstrukte, viele Regeln * relativ hoher Schreibaufwand, durch explizite, redundante Angaben Nutzen hoch bei großen Software-Systemen recht umständlich für kleine, einfache Aufgaben Sprachstile: imperativ, objektorientiert, (funktional) Sprachen: Modula-2, Ada, C++, Eiffel, Java, (SML) (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 217 Ziele: Sprachklasse charakterisieren in der Vorlesung: Anforderungen und Konsequenzen begründen -------------------------------------------------------------------------------- E EWS-2.18 Zwecke von Sprachen: Skriptsprachen Scripting: Zusammensetzen von Kommandos zu einem wiederverwendbaren "Drehbuch" Anforderungen: * kleine, einfache Aufgaben lösen ohne komplexe Algorithmen und Datenstrukturen * existierende Funktionen nutzen und verknüpfen * Verzicht auf Sicherheit durch prüfbare Regeln zugunsten kürzerer Programme * Textverarbeitung und Ein- und Ausgabe sind wichtig * gute Verfügbarkeit und Handhabbarkeit Konsequenzen: * einfache Sprachen: wenige Konstrukte, wenige Regeln, kurze Programme * dynamische Typprüfung * interpretiert, d. h. ohne Übersetzung ausführbar Herkunft: Kommandosprachen von Betriebssystemen, JCL, Unix Shell Sprachstile: imperativ, objektorientiert Sprachen: PHP, Perl, JavaScript, Python (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 218 Ziele: Sprachklasse charakterisieren in der Vorlesung: Anforderungen und Konsequenzen begründen -------------------------------------------------------------------------------- E EWS-2.19 Zwecke von Sprachen: Auszeichnungssprachen Auszeichnungssprache: Markup language Anforderungen: * Struktur von Dokumenten beschreiben: Überschriften, Absätze, Listen, Tabellen * hierarchische Gliederung, auch Hypertext-Verweise * Darstellung der Strukturen beschreiben - aber abtrennbar * von Menschen schreib- und lesbar * keine Programmierung - aber integrierbar Konsequenzen: * Strukturelemente werden mit lesbaren Markierungen gekennzeichnet (markup) * geklammerte, geschachtelte Strukturen * Menge und Bedeutung der Markierungen festlegbar (SGML, XML) * Darstellung getrennt beschreibbar (HTML + CSS) Sprachen: SGML, HTML, XML (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 219 Ziele: Sprachklasse charakterisieren in der Vorlesung: Anforderungen und Konsequenzen begründen. * Das Darstellen einer HTML-Datei in der spezifizierten Form kann man auch als Interpretation auffassen. * In HTML eingebettete Programme werden vom Interpretierer deren Sprache ausgeführt. -------------------------------------------------------------------------------- E EWS-2.20 Sprachen für weitere Zwecke Zugriff auf Datenbanken SQL Selektionen aus Relationen, Verknüpfungen übersetzt in Datenbankzugriffe Spezifikation von Hardware-Bausteinen VHDL Spezifikation von Software-Komponenten UML allgemeine Spezifikation SETL, Z Spezifikation von Grammatiken EBNF Textsatz TeX, LaTeX, PostScript (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 220 Ziele: Eindruck von Sprachen für andere Zwecke in der Vorlesung: Bedeutung allgemeiner und spezieller Spezifikationssprachen hervorheben. -------------------------------------------------------------------------------- E EWS-2.21 Entstehungszeit und Verwandtschaft wichtiger Sprachen imperative Sprachen objektorientierte funktionale Auszeichnungs- 1950 Sprachen Sprachen sprachen logische Fortran Sprache Skriptsprachen 1960 Cobol Algol 60 Lisp PL/1 Algol 68 Simula 1970 Pascal Prolog Unix sh Smalltalk C awk SGML 1980 Ada ML C++ Self Eiffel Miranda Perl Tcl 1990 Python HTML-1 Java Haskell JavaScript PHP XML HTML-4 2000 nach [D. A. Watt: Programmiersprachen, Hanser, 1996; Seite 5] und [Computer Language History http://www.levenez.com/lang] (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 221 Ziele: Sprachen zeitlich einordnen und klassifizieren in der Vorlesung: Kommentare zur zeitlichen Entwicklung. Verwandschaft zwischen Sprachen: * Notation: C, C++, Java; * gleiche zentrale Konzepte, wie Datentypen, Objektorientierung; * Teilsprache: Algol 60 ist Teilsprache von Simula, C von C++; * gleiches Anwendungsgebiet: z. B. Fortran und Algol 60 für numerische Berechnungen in wissenschaftlich-technischen Anwendungen nachlesen: Text dazu im Buch von D. A. Watt Übungsaufgaben: Verständnisfragen: In welcher Weise können Programmiersprachen miteinander verwandt sein? -------------------------------------------------------------------------------- S EWS-2.22 S2 HTML HTML steht für Hypertext Markup Language: eine Auszeichnungssprache, in der man Dokumente durch Hyperlinks (Verweise) miteinander verknüpfen kann. Auszeichnungen (Markups) sind typografische Anweisungen für * die Strukturierung von Texten in Abschnitte, Absätze, Listen, Tabellen, usw. * die Gestaltung von Zeichen: Schrifttyp, Schriftgrad, Schriftstil, Schriftfarbe * die Bildmontage: Platzierung und Größe * das Layout des Dokumentes: Tabellen und Frames * die Verknüpfung von Dokumenten: Anker, Links, sensitive Bildbereiche * die Dialoggestaltung: Formulare, Schaltelemente HTML-Markups oder Tags haben die Form ...

Sie treten meist als Klammern von Anfangs- und Ende-Tag auf. Tags können zusätzlich Attribute haben, HTML wurde ursprünglich aus der Meta-Sprache SGML abgeleitet. HTML wird nun auch aus der Meta-Sprache XML abgeleitet: XHTML. (c) 2006 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 222 Ziele: Charakterisierung von HTML in der Vorlesung: Die genannten Eigenschaften werden kurz erklärt. -------------------------------------------------------------------------------- S EWS-2.23 S2.1 Auszeichnung von Strukturen und Texten HTML-Datei: : Kommentar mit Hallo Welt optionaler Angabe der HTML Definition

Hello World!

: äußere Klammer : Angaben über das Dokument : Inhalt des Dokumentes (c) 2006 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 223 Ziele: Grundstruktur kennenlernen in der Vorlesung: * Die Bedeutung der Tags, * die Schreibweise von Kommentaren, * der Verweis auf die HTML-Definition werden erklärt. -------------------------------------------------------------------------------- S EWS-2.24 Schreibweise von Tags und Attributen Tags haben die Form Anfangs-Tag Ende-Tag Zwischen < und TagName dürfen keine Zwischenräume stehen. Tags, die Strukturen kennzeichen, sollen immer klammernd geschrieben werden, auch wenn das Ende-Tag optional ist. Tags können Attribute haben. Sie ordnen dem gekennzeichneten Bereich bestimmte Eigenschaften zu. Jedes Attribut hat die Form Name="Wert" z. B. border="4" Das Anfangs-Tag kann zwischen dem Tag-Namen und dem > eine Folge von Attributen enthalten

Verwenden Sie nur notwendige Attribute. Viele Attribute sind veraltet oder werden von verschiedenen Browsern unterschiedlich behandelt. Detaillierte Angaben zur Darstellung werden besser mit anderen Mitteln (z. B. Style Sheets, siehe Folie 2.32) gemacht als mit Attributen. (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 224 Ziele: Attribute kennenlernen in der Vorlesung: Die Schreibweisen werden erklärt. -------------------------------------------------------------------------------- S EWS-2.25 Überschriften und Absätze

,

, ...,

: Überschriften Überschriften fallenden Ranges

1. Kapitel

In diesem Kapitel beschreiben wir Jeder Absatz wird explizit die Tags von HTML. ausgezeichnet.
Jeder Abschnitt ist einer Klasse
: von Tags gewidmet. erzwingt Zeilenwechsel.

1.1 Struktur-Tags

Struktur-Tags gliedern ein Dokument hierarchisch in Abschnitte und Unterabschnitte.

Absatz-Tag

Attribute des Absatz-Tag

(c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 225 Ziele: HTML-Tags an Beispielen in der Vorlesung: Am Beispiel wird erklärt: * die Rolle der Überschrift-Tags, * Zeilenumbruch und Absätze. -------------------------------------------------------------------------------- S EWS-2.26 Aufzählungen

Aufzählungen

Spracheigenschaften ordnen wir folgenden Ebenen zu:

Notation von Grundsymbolen
syntaktische Struktur
statische Semantik
dynamische Semantik
:

Bezeichner
Literale
Wortsymbole
Spezialzeichen

: Definitionslisten eine Liste mit Paaren von Begriffen und

Wir definieren folgende Begriffe: Erklärungen dazu

Client/Server-Prinzip
:: Einige Rechner (Server) bieten markiert den Begriff eine Dienstleistung an, andere Rechner (Clients) nutzen den; : Dienst.
Gateway: Rechner, der ein Netz mit anderen Netzen verbindet.
W3C: World Wide Web Consortium

(c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 227 Ziele: HTML-Tags an Beispielen in der Vorlesung: Am Beispiel wird erklärt: * Liste von Paaren und * ihre Formatierung. -------------------------------------------------------------------------------- S EWS-2.28 Tabellen

: Tabellen eine Tabelle

Attribut border: Breites des Randes um die Zellen : Tabellenzeile

eins

zwei

drei

Attribut frame: äußerer Rahmen; Werte: void, box, above, below, hsides, vsides, lhs, rhs

vier.1	vier.2
vier.3	vier.4

: Tabellenzelle, kann selbst eine Tabelle enthalten (c) 2006 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 228 Ziele: HTML-Tags an Beispielen in der Vorlesung: Am Beispiel wird erklärt: * Zeilen- und Spaltenstruktur, * geschachtelte Tabellen, * Rand- und Rahmenattribute. -------------------------------------------------------------------------------- S EWS-2.29 Anker Anker : platziert den Anker XYZ; wird adressiert mit #XYZ

Es folgt eine Liste wichtiger Links:

Text

: Skript zu EWS setzt einen Link zu Adr
Text Skript zu GdP

Hier kommen Sie wieder zum Anfang der Seite

(c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 229 Ziele: Anker einsetzen können in der Vorlesung: Am Beispiel wird erklärt: * 2 Arten von Ankern: * Link, der in dieses oder ein anderes Dokument verweist (href-Attribut); * Position einer Stelle, auf die man verweisen kann (name-Attribut). -------------------------------------------------------------------------------- S EWS-2.30 Repräsentation spezieller Zeichen Zeichen, die in der Notation von HTML eine spezielle Bedeutung haben, müssen umschrieben werden, wenn sie in normalem Text nicht als HTML-Zeichen gemeint sind < <

Das Tag <p> kennzeichnet einen Absatz

> > & & für jedes Zeichen gibt es auch einen numerischen Code: & " " non-breaking space, Leerzeichen, das nicht durch Zeilenumbruch ersetzt werden darf Allgemeine Form: &Zeichenname; oder &#Zahl; wobei die Zahl das Zeichen codiert HTML-Beschreibungen enthalten Listen mit solchen Zeichendefinitionen (entities), z. B. ä ä Ä Ä ß ß

Maßkrüge

ntilde ñ

El niño

(c) 2006 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 230 Ziele: Schreibweise von Sonderzeichen lernen in der Vorlesung: An den Beispielen wird erklärt: * Notwendigkeit der Notation, * allgemeine Schreibweise, * Hinweis auf Referenzlisten -------------------------------------------------------------------------------- S EWS-2.31 Zweck-bezogene Hervorhebungen von Text Textstücke können gekennzeichnet werden, damit sie durch besonderen Schriftsatz hervorgehoben werden. Dafür sollte man den Zweck der Hervorhebung kennzeichnen und nicht die Darstellung festlegen, z. B.

Vor Verlassen des Raumes das Licht ausschalten, aber nicht den Notausschalter benutzen! Hier ist der Zweck, Betonung und starke Betonung, angegeben. Die Darstellung im Schriftsatz kann man unabhängig davon festlegen. Das ist in folgendem Beispiel nicht mehr möglich und daher nicht empfohlen:

Vor Verlassen des Raumes das Licht ausschalten, aber nicht den Notausschalter benutzen! Weitere Beispiele für Zweck-bezogene Hervorhebungen: Zitat Zweck wird durch das class-Attribut Beispiel individuell bestimmt Definition Quell-Code Tastatureingabe für elementaren Fließtext Variablenname

für Textblöcke mit Unterstrukturen (c) 2006 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 231 Ziele: Unterscheidung: Formatierung und ihr Zweck in der Vorlesung: An den Beispielen wird erklärt: * mehr Möglichkeiten, wenn nicht explizit formatiert wird. * Bedeutung der Tags, * Hinweis auf Style Sheets. -------------------------------------------------------------------------------- S EWS-2.32 S2.2 Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) ist eine Sprache zur Definition von Formateigenschaften für HTML-Auszeichnungen. CSS wird verwendet, um Formatierungsangaben von den Auszeichnungen der Struktur und der Zweck-bezogenen Hervorhebungen zu trennen: HTML-Datei: Struktur und Rolle der Elemente im CSS-Datei: Dokument Formatierung dermarkierten benutzt zur Formatierung Elemente Unsere Uni Eine der 5 Fakultäten ist h1 {font-size:24;} die Fakultät EIM. .eim {color:blue} ... ... Ergebnisse: * konsistente Formatierung im ganzen Dokument * konsistente Formatierung in vielen Dokumenten (Corporate Identity) * einfache Änderung der Formatierung in der CSS-Datei - HTML-Dateien bleiben unverändert (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 232 Ziele: Motivation zur Verwendung von CSS in der Vorlesung: * Trennung zwischen HTML- und CSS-Datei, * Wiederverwendung von Formatierungen, * explizit formatierte HTML-Dateien sind schlecht wartbar. -------------------------------------------------------------------------------- S EWS-2.33 Notationen von Formatangaben in CSS Im -Abschnitt der HTML-Datei wird ein Link auf die CSS-Datei eingetragen mit dem relativen Dateinamen oder der vollen URL: CSS-Angaben können auch in die HTML-Datei eingebettet werden - sind dann aber nicht wiederverwendbar: Formatangaben in CSS für bestimmte Arten von HTML-Tags: h1, h2 {text-align:center;color:red;} em {font-weight:bold;} strong {font-weight:bold;color:red;} allgemeine Form: HTML-Tags{ Folge von Formatangaben } Formatangabe: Name:Wert; keine Leerzeichen; nur mehrteilige Werte in " Beispiele: font-family:Times; font-style:italic; text-decoration:underline; list-style-type:disc; list-style-type:lower-alpha; (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 233 Ziele: Zuordnung von Formatangaben verstehen in der Vorlesung: An den Beispielen wird erklärt: * Zuordnung der CSS-Datei, * Schreibweise von Formatangaben und * Zuordnung zu HTML-Tags, * Hinweis auf Listen von Namen und Werten für Formateigenschaften, z. B. CSS2 Reference in einer Sammlung von Tutorials. -------------------------------------------------------------------------------- S EWS-2.34 Freie Klassifikation von HTML-Tags Bestimmte Zwecke der Hervorhebung kann man durch frei erfundene Namen klassifizieren, z. B. Die Idee, der Entwurf und die .. Entwurf Das Software-System besteht aus ... ... In einem CSS Style Sheet kann man solchen Klassen Formatierangaben zuordnen: .meinAnteil {font-weight:bold;color:blue;} oder in einer anderen CSS-Datei bescheidener auf die Hervorhebung verzichten: .meinAnteil {} Auch den Struktur-Tags mit festgelegter Bedeutung können über das Klassenattribut Formateigenschaften zugeordnet werden: Der Entwurf des Systems ist ... Allerdings wäre eine Klammerung mit konsequenter. (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 234 Ziele: Umgang mit freien Klassifikationen lernen in der Vorlesung: An Beispielen wird erklärt: * Zweck benennen, * Klassenattribut benutzen, * span- und div-Tags einsetzen, * Formateigenschaften den Klassen zuordnen. -------------------------------------------------------------------------------- S EWS-2.35 Beispiel: 2 verschiedene Formatierungen CSS Beispiel Das Fantasie-System In diesem Kapitel beschreiben wir die Aufgabe, den Entwurf und die Implementierung des Fantasie-Systems. Aufgabe Zu den Aufgaben gehören blah und blah h1, h2, h3 {text-align:left;} dfn {font-style:italic;font-weight:bold;} .ukas {font-weight:bold;color:blue;} Entwurf Der Entwurf des Systems ist gut gelungen blah blah Detail-Entwurf Der Detail-Entwurf ist auch ganz toll. Implementierung h1, h2, h3 {text-align:center;} dfn {font-style:italic;} .ukas {} (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 235 Ziele: Zuordnung von CSS-Definitionen im Zusammenhang sehen in der Vorlesung: Der Inhalt der Folie wird an Beispielen erklärt. -------------------------------------------------------------------------------- S EWS-2.36 S2.3 Formulare mit Eingabeelementen Graphische Elemente für interaktive Eingaben: z. B. Textfelder, Auswahllisten, Schaltelemente, usw. * strukturiert und gestaltet mit allgemeinen Dokument-Tags * zu Formularen zusammengefasst Eingabedaten werden * zum Web-Server gesandt und dort verarbeitet, siehe Beispiel Telefonbuch; siehe Abschnitt W4 Interaktive, dynamische Web-Seiten * im Browser geprüft und/oder verarbeitet siehe Abschnitt S4 JavaScript (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 236 Ziele: Einführung zu Eingabeelementen in der Vorlesung: * Interaktion mit Web-Seiten, * Beispiele werden gezeigt, * Notwendigkeit der Elemente. -------------------------------------------------------------------------------- S EWS-2.37 Ein einfaches Formular Ihr Zuname: fasst Eingabeelemente () und weitere Elemente zu einem Formular zusammen. Alle Eingabedaten eines Formulars werden gemeinsam verarbeitet. action-Attribut Ziel, an das die Eingabe geschickt wird; Web-Adresse; Web-Seite enthält ggf. ein Programm, das die Eingabe verarbeitet method-Attribut charakterisiert die Art der Übertragung zum Ziel; hier get: als Parameter der URL (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 237 Ziele: form-Klammer verstehen in der Vorlesung: Am Beispiel wird erklärt: * Zusammenfassung, * Attribute, * Name-Wert-Paar als Parameter der Ziel-URL. * Hier kann man das Beispiel benutzen: Formular-Beispiel -------------------------------------------------------------------------------- S EWS-2.38 Schaltflächen (Knöpfe) size (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 239 Ziele: Textzeile einsetzen können in der Vorlesung: Am Beispiel wird erklärt: * Attribute, * Ergebnis als Parameterpaar -------------------------------------------------------------------------------- S EWS-2.40 Mehrzeiliges Textfeld Eintrag ins Gästebuch: Hier schreiben! charakterisiert mehrzeiliges Textfeld; zwischen den Tags kann Initialisierung stehen name-Attribut identifiziert das Eingabeelement im verarbeitenden Programm rows-Attribut Anzahl der angezeigten Zeilen cols-Attribut Anzahl der angezeigten Spalten (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 240 Ziele: Textblöcke einsetzen können in der Vorlesung: Am Beispiel wird erklärt: * Größe und * Initialisierung. -------------------------------------------------------------------------------- S EWS-2.41 Auswahlliste <p>Wochentag:<br> <select name="tag" size="3"> <option value="fr">Freitag <option value="sa">Samstag <option value="so">Sonntag <option value="mo">Montag </select> </p> <select> Klammert eine Liste von Einträgen, aus der einer ausgewählt werden kann name-Attribut identifiziert das Eingabeelement im verarbeitenden Programm size-Attribut Anzahl der angezeigten Einträge value-Attribut für das gewählte Element wird das Paar (name, value) übertragen (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 241 Ziele: Auswahlliste einsetzen können in der Vorlesung: Am Beispiel wird erklärt: * Struktur, * Attribute, * weiteres Attribut multiple: Selektion mehrerer Einträge, * Ergebnis als Parameterpaar -------------------------------------------------------------------------------- S EWS-2.42 Checkbox <p>Nehmen Sie zum Kaffee<br> <input type="checkbox" name="milch" value="ja">Milch<br> <input type="checkbox" name="zucker" value="ja">Zucker<br> </p> <input type="checkbox" ein Element, dass man auswählen kann name-Attribut identifiziert das Eingabeelement im verarbeitenden Programm value-Attribut wenn das Element gewählt ist, wird das Paar (name, value) übertragen (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 242 Ziele: Checkbox einsetzen können in der Vorlesung: Am Beispiel wird erklärt: * Attribute, * weiteres Attribut checked: initiale Markierung, * Ergebnis als Parameterpaar -------------------------------------------------------------------------------- S EWS-2.43 Auswahlknöpfe <p>Zahlungsart:<br> <input type="radio" name="pay" value="cash">Bar<br> <input type="radio" name="pay" value="card">Kreditkarte<br> <input type="radio" name="pay" value="order">Überweisung </p> <input type="radio" eine Gruppe von Knöpfen, von denen man genau einen auswählen kann (radio buttons) name-Attribut identifiziert das Eingabeelement im verarbeitenden Programm; alle Elemente der Gruppe haben den gleichen Namen value-Attribut wenn der Knopf gewählt ist, wird das Paar (name, value) übertragen (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 243 Ziele: Auswahlknöpfe einsetzen können in der Vorlesung: Am Beispiel wird erklärt: * Attribute, * Ergebnis als Parameterpaar -------------------------------------------------------------------------------- S EWS-2.44 Datei zum Web-Server senden <form action="http://www.upb.de" method="get" enctype="multipart/form-data"> <p>Dateiname: <input type="file" name="Datei"> </p> <input type="file" Datei versenden; Name direkt angeben oder im Dateiselektor auswählen name-Attribut identifiziert das Eingabeelement enctype="multipart/form-data" weiteres Attribut im form-Tag nötig (c) 2005 bei Prof. Dr. Uwe Kastens -------------------------------------------------------------------------------- Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 244 Ziele: Dateiauswahl einsetzen können in der Vorlesung: Am Beispiel wird erklärt: * Attribute, * weiteres Attribut accept="MIME-Typ": schränkt Dateityp ein, z. B. accept="image/jpeg" * Ergebnis als Parameterpaar --------------------------------------------------------------------------------