• • • • • Grundstruktur von HTML Form und Darstellung von Informationen

(1)

Einführung in die Informatik für Hörer aller Fakultäten 1. Puppe: Form & Darstellung von Informationen47

Form und Darstellung von Informationen

1. Computermetaphern

2. Beschreibungssprachen für Texte

3. Grammatiken zur Beschreibung syntaktischer Strukturen 4. Beispiel einer Textbeschreibungssprache: HTML 5. Übersicht über Textsysteme

6. Schablonen und Generierung von Texten (z.B. Serienbriefe) 7. Nützliche Hilfsmittel in Textsystemen

8. Das World Wide Web als Hyperdokument 9. Funktionsweise von Suchmaschinen 10. XML

Grundstruktur von HTML

•

Die Auszeichnungen heißen Tags(HTML-Elemente)

•

Zu einem Tag kann es verschiedene Variantengeben, die durch Tag-Attributegekennzeichnet sind (vermindert die Anzahl ähnlicher Tags!)

•

Tags dürfen grundsätzlich geschachtelt werden.

•

Beispiele für Tags (Groß-/Kleinschreibung egal):

– zentrierter Abschnitt: <p align = "center"> Erster Beispieltext </p>

– normaler Abschnitt: <p> Zweiter Beispieltext </p>

– Zeilenumbruch (leeres Tag): <br>

– geschachtelte Tags:<p> Dritter Beispieltext <b> mit Fettdruck </b> </p>

•

Grundstruktur von HTML-Dokumenten

<html>

</html>

(2)

Typen von Tags

•

allgemeine Informationen (Bezug auf ganzes Dokument):

–Metadaten (z.B. Titel, Autor, Stichwörter; im head) –Dateiweite Einstellungen (z.B. Farben für Schrift, Links,

Hintergrund; Attribute zum body)

•

Textstrukturierung:

–logische Tags (z.B. Überschriften, Aufzählungen, Abschnitte)

–Formatierungstags (z.B. fett, kursiv)

•

Verweise (Links)

•

Grafiken (Bilder)

•

Tabellen

•

Formulare

•

Frames

•

dynamische Elemente (DHTML)

Metadaten im Kopf

•

TITLE (Dokumententitel): im HTML-Standard notwendig

•

META (Meta-Information): wird mit Attributen gekennzeichnet –author: Autor

–content: Kurzbeschreibung –keywords: Schlüsselwörter

•

LINK (Verweis): z.B. für Angabe von Stylesheets Beispiel:

<head>

<title>Lehrstuhl für Informatik VI, Uni Würzburg</title>

(3)

Dokument-Attribute im Body

•

Zur Angabe von Farben für Text, Hintergrund und Verweise

•

Attribute: bgcolor(Hintergrund),text, link, vlink^(besucht),alink(aktiviert)

•

Farben: Hexadezimalcode, für wichtige Farben auch Text (s.u.)

•

Beispiel: <body bgcolor="aqua" text="black"> ... </body>

Schriftformatierung

•

Angaben zur Schriftformatierung (z.B. Schrifttyp, -größe usw.) können zu jedem Tag gemacht werden, das Schrift enthält.

•

Wenn Sie beim Body gemacht werden, gelten Sie dokumentweit

•

Beispiel:

(4)

Tags zur logischen Textstrukturierung

Bedeutung Element Attribute ^(Auswahl)

Überschriften H1-H6 align*

Textblock (mit/ohne Absatz) P / DIV align*

vorformatierter Text PRE width

(eingerücktes) Zitat BLOCKQUOTE -

horizontale Trennlinie HR align*, noshade width, size

Definitionsliste DL compact

Definitionsbegriff / Definitionstext DT / DD -

unnummerierte Liste UL compact, type

nummerierte Liste OL compact, type, start

Listeneintrag LI type, value (nur OL)

* align = left (linksbündig), center, right, justify (Blocksatz)

Tags zur layout- bzw. inhaltsbezogenen Textformatierung Bedeutung Element

Kursiv-, Fett-, unterstriche Schrift I / B / U

Durchgestrichener Text Strike

Vergrößerte / verkleinerte Schrift Big / Small Tiefergesetzter / höhergesetzter Text SUB / SUP

Einfache / starke Hervorhebung EM / STRONG

Definitionsbegriff DFN

Programmcode / Programmausgabe CODE / SAMPLE

Benutzereingabe KBD

Variablenbezeichner VAR

Zitat / Referenz CITE

(5)

Beispiel für logische und formatierende Tags

<H1>Hauptüberschrift</H1>

<P>Ein normaler Textabschnitt</P>

<H2>Eine Unterüberschrift</H2>

<DD>Hypertext Markup Language </DD>

<DD>Extensible Markup Language </DD>

</DL>

<UL>

<LI>unnummerierte Zeile</LI>

<LI>unnummerierte Zeile (mit Teilliste) </LI>

</UL>

<OL>

<LI>erster Punkt<sup><b>1</b></sup></LI>

<LI>zweiter Punkt<sup><b>2</b></sup></LI>

</OL>

</BODY>

Tags zum Einbetten von Links

Bedeutung Tag Attribute

Anker für Hyperlink A href, name, target

<A href = "URI" target = "Zielfenster"> Verweistext </a>

<A name = "Ankername"> [Inhalt] </a>

href="URI"ist die Adresse, wohin gesprungen werden soll, z.B.:

–WWW-Adresse (http://...)

–Andere Datei im gleichen Verzeichnis (z.B. datei.htm) –Andere Datei mit absoluter Adresse (file://...)

–Anker in der gleichen Datei (z.B. #Ankername), der mit dem Attribut Name<A name = "Ankername"> vorher definiert ist.

Targetgibt an, ob dasselbe bzw. ein neues Fenster (_self, _blank) ein neues Framefenster (Name des Framefenster) eine Email-Adresse ("mailto::name@domain.xy?subject=Thema...", usw. geöffnet wird

(6)

Tags zum Einbetten von Bildern

Bedeutung Tag Attribute ^(Auswahl) Bilder IMG src, alt, width, height

src ="URI":Verweis auf Datei (absolut oder relativ; vgl. Links).

alt ="Text", der angezeigt wird, falls das Bild nicht darstellbar ist.

height, width= (verzerrte) Größe des Bildes: in Pixel oder in % Wichtige Dateiformate:

•

.gif(graphics interchange format): verlustfreie Kompression bei nur 256 Farben; ermöglicht schichtweisen Aufbau, Animationen und transparente Farben.

•

.jpg(jpeg; joint photographic expert group): verlustbehaftete Kompression mit beliebig vielen Farben

•

.png(portable network graphics): verlustfreie Kompression mit beliebig vielen Farben (relativ neu; Verbesserung zu .gif)

Beispiel

für Links

und Bilder

(7)

Beispiel für Links und Bilder

<h2> Einige wichtige Adressen: </h2>

<a href = "http://www.uni-wuerzburg.de"> Univ. Würzburg </a> <br>

<a href = "http://www.informatik.uni-wuerzburg.de"> Informatik </a> <br>

<h2> <a name="logos">... und darin enthaltenen Logos: </a> </h2>

Das Universitäts-Logo in .png (139 K): <br>

Das Universitäts-Logo in .gif (132 K): <br>

Das Lehrstuhl-VI (KI) Logo in .png (34 K): <br>

Das D3-Logo in .jpg (14 K): <br>

<a href="#logos"> zurück zum Logo-Anfang </a>

</body>

Tabellen

•

Ziel:Strukturierte Darstellung von Texten, Formularen, usw.

(ersetzt in gewissem Sinne das Fehlen von Tabulatoren in HTML)

•

Methode:Definition der Zeilen & Spalten mit/ohne Umrandung

•

Typisches Anwendungsbeispiel:Homepage des Lehrstuhls VI

(8)

Tags für Tabellen

Bedeutung Element Attribute ^(Auswahl)

Tabelle TABLE width, border, align

Tabellenzeile TR align, valign

Spaltenkopf/Tabellenzelle TH / TD align, valign, rowspan colspan

•

width: Breite der Tabelle absolut (in Pixeln) oder relativ (in %)

•

border:Dicke der Umrandung (0 = keine Umrandung)

•

align:horizontale Ausrichtung (left, center, right)

•

valign:vertikale Ausrichtung (top, middle, bottom)

•

colspan:Ausdehnung einer Zelle auf mehrere Spalten

•

rowspan:Ausdehnung einer Zelle auf mehrere Zeilen

Beispiele für Tabellen

<TR><TH> Spalte 1 </TH> <TH> Spalte 2 </TH> </TR>

<TR><TD> Element 1 </TD> <TD> Element 2 </TD> </TR>

<TR><TD align="center" colspan="2"> Element 3 </TD> </TR>

</table> </body>

<TR><TD> Uni-Logo </TD><TD> <img src="unisiegel.png"

alt="Uni-Siegel" height="100" weight="100"> </TD></TR>

<TR><TD> Uni-Logo </TD><TD> <img src="unilogo_h.gif"

alt="Uni-Siegel" height="100" weight="100"> </TD></TR>

<TR><TD> LS6-Logo </TD><TD> <img src="logo-neu.png"

alt="LS-VI-Logo" height = "50" weight="100"> </TD></TR>

<TR> <TD> D3-Logo </TD> <TD> <img src="d3web_2.jpg"

(9)

Formulare

•

Ziel:Erfassung von Eingabedaten des Benutzers (mit Weiter- verarbeitung durch vordefiniertes Anwendungsprogramm)

•

Methode:Bereitstellung von vielen grafischen Primitiven

•

Typisches Anwendungsbeispiel:Hotelreservierung

Tags für Formulare

Inhalt

</FORM>

•

Methoden:

– "GET"hängt die Eingabedaten an die URL an (Längen- beschränkung; nur praktikabel bei wenigen Eingaben), –"POST"erzeugt einen eigenen Datenstrom.

•

Action:Die URL ist die Adresse eines ausführbarem Pro- gramms (z.B. cgi-script, JSP - Java Server Pages) auf dem Server, der die Daten weiterverarbeitet.

•

Inhalt:Eingabe-Tags innerhalb eines Formulars (FORM):

INPUT, SELECT, OPTION und TEXTAREA.

(10)

HTML-Elemente für Formulare

Bedeutung Element Attribute (Auswahl)

Formular FORM action, method

Textfenster TEXTAREA name, rows, cols Auswahlliste SELECT name, multiple, size Auswahlelement OPTION value, selected

Eingabefeld INPUT name, type

<form>

Name: <br>

Fach:

<option value="1"> Informatik </option>

<option value="2" selected> Biologie </option>

<option value="3"> Physik </option>

</select>

</form> </body>

Attribute von Input-Tag

Das Input-Tag

kann abhängig vom Wert des

Feldtyps (Attribut: Type)

verschiedene Arten von

Eingabe- elementen repräsentieren.

Die Attribute Nameund Valuewerden

(11)

Beispiel für Hotelanfrage-Formular

<body bgcolor = "aqua"> <h1 align="center"> Hotelanfrage </h1>

<p>Ihre Adresse: <textarea rows="2" name="adresse" cols="20"></textarea></p>

<p>Gewünschte Lage: <select size="1" name="gebiet">

<option value="city">Citylage </option>

<option value="stadt">Stadtgebiet</option>

<option value="aussen">Außenbezirk</option> </select></p>

<p>Kategorie

<input type="radio" value="1stern" name="kat">*

<input type="radio" value="2stern" name="kat" checked>**

<input type="radio" value="3stern" name="kat">***

<p>Ausstattung:

<input type="checkbox" name="AS" value="WC" checked>WC

<input type="checkbox" name="AS" value="Dusche">Dusche

<input type="checkbox" name="AS" value="Bad">Bad

Preislage (Euro): <select size="1" name="preis">

</p> </form> </body>

Java Server Pages (JSP) Seite zur Auswertung der Hotelanfrage

"http://d3web-2.informatik.uni-wuerzburg.de:9190/haf/run" name="example.jsp"

<%@ page contentType="text/html; charset=ISO-8859-1" %>

<html>

<head> <title> Hotelanfrage - Entgegennahme Ihrer Daten

</title> <meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1"> </head>

<h1>Bestätigung Ihrer Anfrage</h1>

<p>Wir haben Ihre Anfrage entgegengenommen. Zur Überprüfung listen wir hier nochmals ihre Anfragedaten auf:</p>

<ul>

<li>Ihre Adresse: <%= request.getParameter("adresse") == null ? "" : request.getParameter("adresse")%> </li>

<li>Gewünschte Lage: <%= request.getParameter("gebiet") == null ? "" : request.getParameter("gebiet")%> </li>

<li>Kategorie: <%= request.getParameter("kat") == null ? "" : request.getParameter("kat")%> </li>

<li>Ausstattung: <% if (request.getParameterValues("AS").length == 0) out.print("");

else {int length = request.getParameterValues("AS").length;

for (int i = 0; i < length; i++) {out.print(request.getParameterValues("AS")[i]);

if (i < length - 1) out.print(", "); } }%> </li>

<li>Preislage:<%=request.getParameter("preis")==null ? "" : request.getParameter("preis")%></li>

</ul> </body>

(12)

Tags für Frames

•

Ziel:mehrere HTML-Dokumente im gleichen Fenster anzeigen.

•

Methode:Aufteilung eines Fenster in verschiedene rechteckige Bereiche (Frames).

•

Typische Anwendung:Trennung von Navigationsmenüs und eigentlichem Dokumenteninhalt.

Tags für Frames

Bedeutung Element Attribute ^(Auswahl) Anordnung von Frames FRAMESET cols, rows, border

Einzelner Frame FRAME src, name,

Darstellungsattribute Alternativ-Darstellung NOFRAME -

Beispiel:

</frameset> </frameset>

• Frameset ersetzt bodyim Dokument

• Frameset enthält Liste von Frames oder andere Framesets

• Deren Anordnung mit colsand rows (absolut in Pixel, relativ in %, * nimmt restlichen verfügbaren Platz)

– jeweils eine Angabe pro Frame

(13)

Beispiel für Frames

<frame src=

"form-beispiel.htm">

<frame src=

"bsp-table2.htm ">

<frame src=

"logischeTags.html">

</frameset>

Menüframes und Navigation

•

Typische Nutzung:

–festes Menüframe mit Menüpunkten zur Navigation und Textframe zur Darstellung der Inhalte.

–Menüframe soll konstante Größe haben (kein Resize, kein Scrollen)

–Aufrufe vom Menüframe werden im Textframe dargestellt

•

Beispiel:

</frameset>

– Falls nach Menüaufruf ein Inhalt im Textframe dargestellt werden soll:

– Falls Framedarstellung verlassen werden soll:

(14)

Dynamische Elemente in HTML (DHTML)

•

Problem:HTML-Dokumente, die ohne Kommunikation mit Server dynamisch auf Benutzereingaben (Maus, Tastatur) reagieren können

•

Lösung:Script-Elemente, d.h. ausführbare Anweisungen, die der Browser interpretieren kann.

•

Häufigste Script-Sprache: Javascript

•

Sicherheit:Da Script-Sprachen auf dem Client ausgeführt werden, können sie dort auch Unheil anrichten!

→Schutzvorrichtungenim Browser notwendig oder

→Deaktivierungaller Script-Sprachen