HTML

Transkript

1 Übungen Informatik I HTML Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 1

2 Inhalt 1. Einführung 2. Grundgerüst 3. Links / Verweise 4. Attribute 5. Farben 6. Bilder 7. Formatierung 8. Tabellen 9. Frames 10. CSS 11. Metainformationen 12. Formulare Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 2

3 Einführung HTML (= Hypertext Markup Language) ist eine plattformunabhängige Auszeichnungssprache Es gibt folgende Standards: HTML 1.0: Heute nicht mehr erwähnenswert HTML 2.0: Off. Standard im November 1995 HTML 3.2: Off. Standard am 14. Januar 1997 ( Tabellen) HTML 4.0: Off. Standard am 18. Februar 1998 ( Frames, CSS, Scriptsprachen) Anwendungsbereiche: Online- Dokumente im WWW Lokale Dokumentationen CD- ROM Oberflächen Readme- Dateien, Zukünftige Basistechnologie für Windows (Windows XP) Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 3

4 Einführung Weiterentwicklung: XML (= Extensible Markup Language) VRML (= Virtual Reality Markup Language) Allgemeines zu HTML: HTML- Dateien sind reine Textdateien ( können mit einem Texteditor geschrieben und gelesen werden) HTML- Befehle stehen in so genannten Tags (= Etiketten, Marken) WICHTIG: Ein HTML- Dokument sollte mit mehreren Browsern getestet werden! Schritte, um eine HTML- Seite zu erstellen: 1. HTML- Quelltext in einem Editor schreiben und unter name.html abspeichern 2. Dokument mit einem Browser öffnen und anschauen Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 4

5 Einführung - Tags Tags werden durch spitze Klammern markiert: <Tag> Die meisten HTML- Befehle bestehen aus: Starttag: <Starttag> Endtag: </Endtag> Der Text zwischen dem Start- und Endtag gibt den Gültigkeitsbereich für das betreffende Tag an: <B> Dies ist ein fetter Text </B> Tags können: ineinander verschachtelt werden: <H1><B> text </B></H1> zusätzliche Attribute enthalten: <H1 ALIGN= center > text </H1> Universalattribute enthalten: <P ID= Einleitung > text </P> Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 5

6 Einführung HTML- Systemumgebung Tools für die Textgestaltung: ASCII- Editor: Textpad, Notepad, Wordpad, vi, Netscape Composer, HTML- Editor von Uli Meybohm (zu finden unter: ), Tools für Grafik: Grafikprogramme für Pixelbilder (.gif,.jpg, ): Micrografx Designer,Picture Publisher, Microsoft PhotoDraw, Paintshop Pro (Freeware), Adobe Photoshop (teuer), Corel Draw, Tools für Ton: - Programm zum Bearbeiten und Aufnehmen von Audiodaten: Macromedia SoundEdit Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 6

8 Grundgerüst Regeln beim Editieren Bei jeder neuen HTML- Datei sollte zuerst das HTML- Grundgerüst notiert werden Maskierungsvorschriften für Umlaute, Sonderzeichen und HTML eigene Zeichen müssen beachtet werden Der Quelltext sollte übersichtlich gestaltet werden, durch: Einrücken von Zeilen Zeileneinbrüche Leerzeilen Browser ignorieren Zeilenumbrüche, Absatzschaltungen, Leerzeilen, mehrere Leerzeichen werden vom Browser zu einem einziges Leerzeichen zusammengefasst! Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 8

9 Grundgerüst Umlaute und Sonderzeichen Umlaute und Sonderzeichen sollten als Codes eingegeben werden Beispiel: In München steht ein Hofbräuhaus. Dort gibt es Bier aus Maßkrügen. Umlaute werden so dargestellt: Ä Ä ä ä ß ß Ö Ö ö ö Ü Ü ü ü HTML- Zeichen werden so dargestellt: < < & & > > " Sonderzeichen werden so dargestellt: Leerzeichen der Breite n Bindestrich der Breite n &endash; Leerzeichen ohne Umbruchmöglichkeit dahinter Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 9

10 Grundgerüst einer HTML- Datei Grundsätzlich besteht eine HTML- Datei aus zwei Teilen: Header (Kopf): Kopfdaten werden nicht dargestellt können vom Browser ausgewertet werden hier stehen: JavaScript- Programme, StyleSheet- Definitionen, Meta- Angaben Body (Körper): Teil des Dokuments, der im Browser dargestellt wird (Überschriften, Verweise, Grafiken, Hintergrund, etc ) vom Browser formatiert werden: Einrückungen, Tabulatoren, Zeilenumschaltungen Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 10

11 Grundgerüst einer HTML- Datei Und so sieht das Grundgerüst einer HTML- Datei also aus: <HTML> Start des HTML- Dokuments <HEAD> Start des Header <TITLE> Start des Titels Titeltext erscheint in der Fensterleiste des Browsers </TITLE> Ende des Titels </HEAD> Ende des Headers <BODY> Start des Body Das ist noch eine Baustelle. <br>  </BODY> Ende des Body </HTML> Ende des HTML- Dokuments Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 11

12 Grundgerüst - Titel Das <TITLE>- Tag im Header legt den gewünschten Titel der Website fest: <TITLE> Text des Titels</TITLE> Das Titel- Tag: Wird vom Browser als Dokumentenname benutzt (wird im Anzeigefenster des Browsers angezeigt) Sollte aussagekräftig das Thema des Dokuments beschreiben Sollte nicht zu lang sein Erscheint als Name des Lesezeichens / in der Favoritenleiste, wenn die Seite in die Bookmarks / Favoriten aufgenommen wurde Erscheint in der History- Listen (bereits besuchte Seiten) Dient als Eintrag in Suchprogrammen Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 12

13 Grundgerüst Screenshots (1) Wird im Header festgelegt Pfad des Dokuments Wird im Body beschrieben So sieht ein HTML- Dokument im Microsoft Internet Explorer aus Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 13

14 Grundgerüst - Screenshots will man sich den Quelltext einer Website anschauen, dann klickt man mit der rechten Maustaste auf das Dokument und geht auf Quelltext anzeigen (beim IE), und so sieht der Quelltext des Dokuments test.html aus Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 14

16 Links / Verweise Eine der wichtigsten Eigenschaften von HTML ist die Fähigkeit, Verknüpfungen (= Links) zu anderen Dokumenten herzustellen surfen durchs Internet per Mausklick Links bestehen aus: Einer Absprungstelle Einer Stelle für die Landeposition Die Farbdarstellung der Links wird in HTML durch die Attribute LINK, VLINK und ALINK im Body- Tag festgelegt: LINK Farbe für nicht aufgerufene Verweise VLINK (= visited link) Farbe für schon besuchten Verweis ALINK (= activated link) Farbe für aktiven Verweis Bsp.: <BODY LINK = green VLINK = red ALINK = blue > Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 16

17 Links / Verweise Links in HTML- Dokumenten werden folgendermaßen angegeben: <A HREF = Verweisziel > Verweistext </A> A= anchor HREF= hyper reference = Hypertext- Referenz Das Verweisziel kann sein: Eine Stelle innerhalb der gleichen Datei Eine andere HTML- Datei Eine WWW- Adresse Eine - Adresse FTP- Telnet- Newsgroup- Adresse Eine Datei im Internet (auch Download- Datei) Eine lokale Datei Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 17

18 Links / Verweise - Beispiele Es folgen einige Beispiele: <A HREF = kapitel1.html > Kapitel 1 </A> Kapitel 1 ist ein Verweis auf ein Dokument auf dem gleichen Rechner und im gleichen Verzeichnis <A HREF = > Google </A> Google ist ein Verweis auf ein Dokument auf einem anderen Rechner <A HREF = verzeichnis/datei.html > Datei </A> Datei ist ein Verweis auf ein Dokument im Verzeichnis unterhalb des Verzeichnisses, indem man sich gerade befindet <A HREF =../datei1.html > Datei1 </A> Datei1 ist ein Verweis zu einer Datei ein Verzeichnis höher <A HREF =../../../datei2.html > Datei2 </A> Datei2 ist ein Verweis zu einer Datei drei Verzeichnisse höher <A HREF =../woanders/datei3.html > Datei3 </A> Datei3 ist ein Verweis in das Verzeichnis unterhalb des nächst höheren Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 18

19 Links / Verweise Lokale Verknüpfungen Lokale Verknüpfungen sind Verknüpfungen innerhalb eines Dokuments also ein Link zu einer Stelle in der gleichen Datei Und so wird ein lokaler Verweis angelegt: Ziel für den Verweis auf einen Anker definieren: <A HREF = #Zieldef > Ziel für Verweis </A> Anker für den Verweis definieren: <A NAME = Zieldef > Verweisziel </A> Beispiel aus unserem Online- Tutorium: Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 19

20 Links / Verweise Lokale Verknüpfungen Das ist ein Ausschnitt des Quelltextes für das Beispiel auf der Folie davor: <p> <b><a HREF="#KAP1">Kapitel 1</A></b><br> Hier steht ein Text. </p>  <p> <b><a NAME="KAP1">Kapitel 1</A></b><br> Zu diesem Text springt man mit einem lokalen Verweis. </p> Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 20

21 Links / Verweise - Adresse einfügen Die Angabe der - Adresse in einem HTML- Dokument ist browserabhängig Eine - Adresse wird in HTML folgendermaßen eingebunden: <A HREF= mailto:scst0051@fh-karlsruhe.de >Tutorin</A> Wenn eine Referenz mit mailto beginnt: Dann wird ein Browserdialog zum Verfassen von Nachrichten aufgerufen Voraussetzung hierfür: Ein Mail- Client muß vorhanden sein (z. B. könnte Outlook installiert und eingerichtet sein) Es gibt auch noch einige Optionen bei einer Referenz mit mailto, mehr dazu auf: Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 21

22 Links / Verweise Links zu anderen Seiten Links zu Dokumenten auf anderen Computersystemen (über eine URL) haben den folgenden Aufbau: dienst://host:port/pfad/datei Beispiele: (wenn die Dateiangabe fehlt wird mit / die Standarddatei, z. B. index.html o.ä. aufgerufen (/ kann auch weggelassen werden)) ftp://home-up.t-online.de news://news.rz.uni-karlsruhe.de/comp.lang.javascript mailto:gahe0001@fh-karlsruhe.de telnet://papa0011:password@login.fh-karlsruhe.de Als Dienste sind u. a. möglich: http: Hypertext Transfer Protocol ftp: File Transfer Protocol Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 22

24 Attribute Attribute in Tags Attribute in Tags haben feste Namen die Groß-/ Kleinschreibung ist irrelevant können in Starttags stehen ihre Werte sollten in stehen Es gibt folgende Attribute: Alleinstehende Attribute (<HR NOSHADE> Trennlinie ohne Schatten) Attribute mit Wertzuweisung (<H1 ALGIN= center > center, left, right, justify) Attribute mit numerischer Wertzuweisung (<HR WIDTH= 200 > Trennlinie 200 Pixel breit) Attribute mit prozentualer Wertzuweisung (<HR WIDTH= 10% > Trennlinie 10% der Breite des Anzeigefensters) Attribute mir variablen Namen (<IMG SRC= bild.gif > Grafikreferenz) Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 24

25 Attribute Universalattribute Universalattribute sind Attribute, die in (fast) allen Tags erlaubt sind Aufgaben von Universalattributen: Attribute um einer bestimmten HTML- Auszeichnung einen Namen zu geben Angabe zur Verwendung der Landessprache Attribute zur Verbindung von HTML und Scriptsprachen ( Event- Handler) Beispiel: <P LANG= de TITLE= Deutschsprachiger Absatz > Text </P> lang: definiert die Landessprache title: definiert einen Text, der in einem kleinen Fenster angezeigt wird, wenn mit der Maus über das Element gefahren wird Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 25

26 Inhalt Einführung Grundgerüst Links / Verweise Attribute Farben Bilder Formatierung Tabellen Frames CSS Metainformationen Formulare Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 26

27 Farben Farben in HTML: Hinter- und Vordergrundfarben Schriftfarben für Textabschnitte Style- Sheet Angaben Farben in Tabellen Farbige Trennlinien Farbige Rahmen für Frames Hintergrundfarben für Layer Farben in HTML können folgendermaßen definiert werden: Sie können mit RGB- Werten angegeben werden Sie können über ihren Farbnamen angegeben werden Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 27

28 Farben Angabe mit RGB- Werten In HTML können Farben über ihre RGB (= RotGrünBlau)- Werte angegeben werden Eine Farbe wird durch die Anteile der drei Grundfarben rot, grün und blau nach dem Schema #xxxxxx (1. Stelle: #; 2-7. Stelle: Farbdefinition) definiert browserunabhängig Dabei wird jede Grundfarbe durch eine Zahl zwischen 0 und 255 definiert, die hexadezimal dargestellt wird: Wert 0 : keinen Farbanteil Wert 255 (FF): maximalen Farbanteil der Grundfarbe Beispiel: dunkles Blau: #00 00 FF #00 00 FF Rotanteil Grünanteil Blauanteil Mehr Informationen und eine Farbtabelle sind im Online- Tutorium unter dem Thema HTML/Farben zu finden Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 28

29 Farben Angabe über Farbnamen In HTML können Farben auch über einen Farbnamen angegeben werden Diese Angabe ist browserunabhängig Die Angabe ist sehr einfach, aber offiziell sind nur 16 Farben standardisiert (vs. 16,7 Mio. Farben bei Angabe mit RGB- Werten), weitere Farbnamen sind dann browserabhängig Definiert werden die Farben nach folgendem Schema: englischer Farbname Beispiel: white Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 29

30 Farben Dateiweite Farben Dateiweite Farben, das sind Farben, die für das ganze Dokument gültig sind, werden im <BODY>- Tag angegeben BEACHTE: Farbkontraste Hintergrund - Text Die Hintergrundfarbe für das ganze Dokument wird folgendermaßen angegeben: <BODY BGCOLOR = # > oder <BODY BGCOLOR = black > Farbe für Texte und Verweise für das ganze Dokument: <BODY BGCOLOR= # Hintergrundfarbe TEXT= #FFCC99 Textfarbe LINK = #FF9966 Farbe für nicht aufgerufene Verweise VLINK = #FF6699 Farbe für besuchte Verweise ALINK = #FFFFFF > Farbe für aktivierte Verweise Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 30

31 Inhalt 1. Einführung 2. Grundgerüst 3. Links / Verweise 4. Attribute 5. Farben 6. Bilder 7. Formatierung 8. Tabellen 9. Frames 10. Formulare 11. CSS 12. Metainformationen 13. Formulare Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 31

32 Bilder In HTML können Bilder in das Dokument eingefügt werden, dazu muß das Bild als eigenständige Datei vorliegen Bilder können wie folgt erstellt werden: mit einem Grafikprogramm selber malen: Paint, Designer,... scannen und mit Grafikprogramm bearbeiten Geschäftsgrafiken aus tabellarischen Daten erzeugen (z. B. Excel) Bildbibliothek auf CD kaufen Bilder aus dem Internet laden und speichern Urheberrechte!! Bei Bildern ist vor allem auf den Speicherplatz für die Informationen des Bildes zu achten Grafiken/ Bilder können sehr groß sein! Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 32

33 Bilder Bilder einfügen Ein Bild wird in ein HTML- Dokument wie folgt eingefügt: <IMG SRC= bild.gif ALT= Bild > Das <IMG>- Tag steht alleine, es hat kein Endtag Das Attribut SRC gibt den Pfad und den Dateinamen an Das Attribut ALT (Alternative, Tooltipp) ist eine Information, für den Fall, dass ein Bild nicht geladen werden kann Wenn eine Bilddatei nicht im gleichen Verzeichnis, wie das HTML- Dokument liegt, dann muß der Pfad dorthin, wo das Bild liegt, angegeben werden: <IMG SRC= /images/bild.gif ALT= baustelle > Bilder können auch von fremden Servern geladen werden (ACHTUNG: Urheberrechte!) <IMG SRC= ALT= baustelle > Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 33

34 Bilder Bilder einfügen Die Seitenformatierung funktioniert schneller, wenn man mit Attributen die Größe des Bildes angibt: WIDTH: Bildweite (Bildbreite) HEIGHT: Bildhöhe <IMG SRC= bild.gif WIDTH= 200 HEIGHT= 150 ALT= baustelle > Die Angabe der Größe erfolgt in Pixel, diese Information kann man meistens aus den Grafikprogrammen bekommen im Beispiel: Bildgröße = 200 Pixel x 150 Pixel Macht man die Angaben falsch, so kommt es zu Verzerrungen Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 34

35 Bilder Speicherplatz Schwarzweißzeichnungen brauchen 1 Bit pro Pixel Bild mit der viertel Größe eines Standardbildschirms (640x480 Bildpunkten) = (640 x 480 / 4) x 1 Bit = Bit = 9,6KB Farbbilder / Bilder mit Graustufen brauchen 32 Bits (Fotografien) pro Pixel Bild mit viertel Größe eines Standardbildschirms (640x480 Bildpunkten) = (640 x 480 / 4) x 32 Bit = Bit = 307,2 KB Durchschnittliche Übertragungsrate (Modem) : Bits / sec (= 5 KB/sec) Download eines Farbbildes: (300 KB / 5 KB / 60) ~ 1 Minute in gleicher Zeit können ~ 75 DIN-A4-Seiten (2000 Zeichen a 2 Bytes) übertragen werden: (300KB / (2000*2) B = 300KB / 4KB = 75 Seiten) keine Bilder im Bitmap-Format (*.BMP) verwenden (speichert ein Bild Punkt für Punkt) Besser geeignet sind komprimierte Formate: GIF und JPG Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 35

36 Bilder Farbtiefen, Grafikformate im WWW Bei Pixelformaten gibt es heute folgende typische Farbtiefen: 2 Farben (schwarz/weiß) 1 Bit 16 Farben 4 Bit 256 Farben 8 Bit 16,7 Mio. Farben. 24 Bit (3 x 8 Bit - je 8 Bit für RGB) GIF (Grafic Interchange Format): unterstützt 2, 16 und 256 Farben Gut geeignet für: Buttons, Dots, Bars, Symbole und Cliparts JPG (Joint Photographics Expert Group): unterstützt: 16,7 Mio. und 23,7 Mio. Farben Gut geeignet für: Fotos / Grafiken mit sehr feinen Farbverläufen Bilder für Web-Seiten sollten als GIF- oder JPEG-Format vorliegen und nur so groß wie nötig sein, um Ladezeiten zu reduzieren. Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 36

37 Bilder als Hintergrund / Hyperlink Will man ein Bild als Hintergrund für das gesamte Dokument, so muß das im <BODY>- Tag festgelegt werden: <BODY BACKGROUND= bild.gif > Das Bild wird solange waagrecht und senkrecht wiederholt, bis das Browserfenster gefüllt ist (es entstehen Hintergrundkacheln) Will man ein Bild als Hyperlink (grafischer Link) darstellen, so muß das zwischen den <A>- Tags festgelegt werden: <A HREF = mailto:gahe0001@fh-karlsruhe.de > <IMG SRC= mail.gif ALT= Mail an Tutorin BORDER= 0 > </A> Das Attribut BORDER gibt an, ob das Bild mit einem Rand dargestellt wird, oder nicht Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 37

38 Bilder Ausrichtung Mit dem Attribut ALIGN kann man ein Bild zum umgebenden Text ausrichten: <IMG SRC= bild.gif ALIGN= TOP > Folgende Werte hinter dem Attribut sind möglich: TOP MIDDLE BOTTOM RIGHT LEFT Der Abstand des Bildes zum umgebenden Text wird über die Attribute HSPACE und VSPACE festgelegt Mit dem Attribut BORDER kann festgelegt werden, ob das Bild einen Rand bekommen soll, oder nicht: <IMG SRC= bild.gif BORDER= 1 > Bild mit Rand Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 38

39 Bilder Sensitiver Bilder Sensitive Bilder sind eine besondere Form von Bildern mit empfindlichen Bereichen In sensitiven Bildern können einzelne Bildbereiche als Link dienen, das muß dann mit dem Attribut USEMAP angegeben werden Die einzelnen Bereiche werden dann mit Hilfe des <AREA>- Tags zwischen den <MAP>- Tags beschrieben. Das <MAP>- Tag definiert dabei einen Anker, der mit dem Wert des USEMAP- Attributs übereinstimmen muß Die Bereiche können folgende Formen haben: Kreis Rechteck Vieleck Ein Beispiel findet man im Online- Tutorium unter dem Thema HTML/ Bilder/ Sensitive Bilder Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 39

41 Formatierung Überschriften Überschriften werden von den <H>- Tags eingeschlossen <H1> Überschift1 </H1> Sie stehen im <BODY>- Tag und ermöglichen eine Gliederung von H1 H6: <H1> Überschrift 1. Ordnung </H1> <H2> Überschrift 2. Ordnung </H2> <H3> Überschrift 3. Ordnung </H3> <H4> Überschrift 4. Ordnung </H4> <H5> Überschrift 5. Ordnung </H5> <H6> Überschrift 6. Ordnung </H6> Mit dem Attribut ALIGN kann die Ausrichtung festgelegt werden: <H1 ALIGN= center > Überschrift1 </H1> Folgende Werte hinter dem Attribut sind möglich: LEFT: Überschrift links CENTER: Überschrift zentriert RIGHT: Überschrift rechts Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 41

42 Formatierung Absätze und Zeilenumbrüche Es gibt folgende Absatztypen: <P></P>: neuer Absatz <DIV></DIV>: Ausrichtung für einen neuen Bereich <PRE></PRE>: Vorformatierter Text <ADDRESS></ADDRESS>: kennzeichnet den Text als Adresse <BLOCKQUOTE></BLOCKQUOTE>: kennzeichnet den Text als Zitat Diese Absätze können mit dem Attribut ALIGN ausgerichtet werden, es sind folgende Werte hinter dem Attribut möglich: LEFT CENTER RIGHT Folgendes Tag beschreibt einen Zeilenumbruch: <BR>: Zeilenumbruch Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 42

43 Formatierung Einfache Listen Mit dem <UL>- Tag wird eine einfache Liste definiert (UL = Unnumbered List) Mit dem <LI>- Tag wird in einer solchen Liste ein Listenelement definiert (LI = List Item) <UL> <LI>1. Bullettpunkt </LI> <LI>2. Bullettpunkt </LI> </UL> Das Attribut TYPE im <UL>- Tag legt die Art des Aufzählungssymbols fest: <UL TYPE= square >: Aufzählungssymbol: geschlossenes Quadrat <UL TYPE= circle >: Aufzählungssymbol: offener Kreis <UL TYPE= disc >: Aufzählungssymbol: geschlossener Kreis (default) Die Art des Symbols hängt vom Zeichensatz des Browsers ab, deshalb kann die Darstellung unterschiedlich ausfallen Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 43

44 Formatierung Nummerierte Listen Mit dem <OL>- Tag wird eine nummerierte Liste definiert (OL = Ordered List) Mit dem <LI>- Tag wird in einer solchen Liste ein Listenelement definiert (LI = List Item) <OL> <LI>1. Bullettpunkt </LI> <LI>2. Bullettpunkt </LI> </OL> Das Attribut TYPE im <OL>- Tag legt die Art der Nummerierung fest: <OL TYPE= A >: erzeugt alphabetische Liste mit Großbuchstaben <OL TYPE= a >: erzeugt alphabetische Liste mit Kleinbuchstaben <OL TYPE= I >: erzeugt römische Folge (I, II, III, ) <OL TYPE= i >: erzeugt römische Folge (i, ii, iii, ) Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 44

45 Formatierung Nummerierte Listen Das Attribut START im <OL>- Tag legt den Startwert einer nummerierten Liste fest: <OL START= Zahl )>: nummerierte Liste mit Startwert Mit dem Attribut VALUE im <LI>- Tag kann jedem Listenelement ein spezieller Wert zugewiesen werden <LI VALUE=Zahl>: Listenelement mit einem bestimmten Wert Beispiele zu Listen sind auch im Online- Tutorium zu finden unter dem Thema HTML/ Formatierung/ Absätze Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 45

46 Formatierung Textauszeichnung In HTML kann man einzelne Textabschnitte und Zeichen hervorheben, dafür gibt es folgende Tags: <B> Text </B>: Fetter Text <I> Text </I>: Kursiver Text <U> Text </U>: Unterstrichener Text <BLINK> Text </BLINK>: Blinkender Text <S> Text </S>: Durchgestrichener Text <BIG> Text </BIG>: Text mit großer Schrift <SMALL> Text </SMALL>: Text mit kleiner Schrift <SUB> Text </SUB>: Tiefgestellter Text <SUP> Text </SUP>: Hochgestellter Text <TT> Text </TT>: Diktengleicher Test Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 46

47 Formatierung Schriftformatierung Mit dem <FONT>- Tag kann man Schriften formatieren, es gibt folgende Attribute: <FONT FACE= Verdana, Arial > Text </FONT>: legt die Schriftart fest, hier: Der Text wird in Verdana dargestellt, ist Verdana nicht darstellbar, wird der Text in Arial dargestellt ACHTUNG: Es ist auf die genaue Schriftbezeichnung zu achten <FONT SIZE=[1-7] +/- (Zahl)> Text </FONT>: legt die Schriftgröße fest, es gibt zwei Arten der Angabe: Absolut: Zahl zwischen 1 und 7 Relativ: Zahl im Verhältnis zur Normalschrift: +Zahl (größer als die vom Benutzer eingestellte Schrift) oder Zahl (kleiner als die vom Benutzer eingestellte Schrift) <FONT COLOR= #FFFFFF white > Text </FONT>: legt die Schriftfarbe fest, es gibt zwei Arten der Angabe: Farbangabe mit RGB Farbangabe mit Namen Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 47

48 Formatierung Trennlinien Mit dem <HR>- Tag werden horizontale Trennlinien erzeugt (HR = Horizontal Rule) Es gibt folgende Attribute zu diesem Tag: WIDTH: legt die Breite der Linie fest SIZE: legt die Dicke der Linie fest COLOR: legt die Farbe der Linie fest NOSHADE: legt fest, dass die Linie nicht schattiert ist ALIGN: legt die Ausrichtung der Linie fest Beispiel: <HR COLOR= #FFFFFF NOSHADE ALIGN= center > schwarze, zentrierte Trennlinie ohne Schatten Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 48

50 Tabellen Aufbau Mit dem <TABLE>- Tag wird in HTML eine Tabelle eingeleitet Mit dem <TR>- Tag wird innerhalb der Tabelle eine Zeile definiert Mit dem <TD>- Tag wird innerhalb der Tabelle eine Spalte definiert Beispiel: <TABLE> <TR> <TH> Kopfzelle 1 </TH> <TH> Kopfzelle 2 </TH> </TR> <TR> <TD> Datenzelle 1 </TD> <TD> Datenzelle 2 </TD> </TR> </TABLE> Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 50

51 Tabellen Attribute des <TABLE>- Tags Zum <TABLE>- Tag gibt es folgende Attribute: <TABLE BORDER= 1 > </TABLE> : gibt die Breite des Außenrahmens der Tabelle an (hier: Rahmen der Breite 1 Pixel) <TABLE CELLPADDING= 5 > </TABLE> : gibt Abstand des Zellinhalts zu den angrenzenden Gitterlinien an (hier: Innenabstand von 5 Pixel) <TABLE CELLSPACING= 5 > </TABLE> : gibt die Breite der Innenlinien an, also den Abstand zwischen den Zellen (hier: Außenabstand von 5 Pixel) <TABLE WIDTH= % > </TABLE> : gibt die Breite der Tabelle an, entweder erfolgt die Angabe als Pixelwert (wie hier: 480) oder prozentual (%- Anteil der sichtbaren Browserfläche, hier: 10%) <TABLE HEIGHT= 800 5% > </TABLE> : gibt die Höhe der Tabelle an, entweder erfolgt die Angabe als Pixelwert (wie hier: 800) oder prozentual (%- Anteil der sichtbaren Browserfläche, hier: 5%) Beispiele hierzu sind im Online- Tutorium zu finden unter dem Thema HTML/ Tabellen/ Rahmen + Abstände Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 51

52 Tabellen Spaltenbreiten und -höhen Die Angabe erfolgt wie im <TABLE>- Tag auch Mit dem Attribut WIDHT wird also die Breite festgelegt Mit dem Attribut HEIGHT wird die Höhe festgelegt Beispiele: <TD WIDTH= 100 HEIGHT= 60 > </TD> <TD WIDTH= 10% HEIGHT= 5% > </TD> Näheres ist im Online- Tutorium zu finden unter dem Thema HTML/ Tabellen / Spaltenbreiten + Spaltenhöhen Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 52

53 Tabellen Inhalte ausrichten Mit dem Attribut ALIGN kann die horizontale Ausrichtung festgelegt werden, es gibt folgende Werte: LEFT CENTER RIGHT Mit dem Attribut VALIGN kann die vertikale Ausrichtung festgelegt werden, es gibt folgende Werte: TOP MIDDLE BOTTOM Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 53

54 Tabellen Zellen verbinden / Hintergrundfarbe Mit dem Attribut COLSPAN werden Spalten verbunden Mit dem Attribut ROWSPAN werden Zeilen verbunden Beispiele: <TD COLSPAN= [Anzahl der Spalten] > </TD> <TD ROWSPAN= [Anzahl der Zeilen] > </TD> Mit dem Attribut BGCOLOR wird die Hintergrundfarbe festgelegt Beispiele: <TABLE BGCOLOR= #[Farbe] > </TABLE> <TR BGCOLOR= #[Farbe] > </TR> <TH BGCOLOR= #[Farbe] > </TH> <TD BGCOLOR= #[Farbe] > </TD> Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 54

55 Tabellen Tabellen teilen Ab der HTML- Version 4.0 ist eine logische Einteilung einer Tabelle in Kopf <THEAD> </THEAD> Körper <TBODY> </TBODY> Fuß <TFOOT> </TFOOT> möglich und ist dient der besseren Lesbarkeit von Tabellen in HTML- Quellcode Beispiel: <TABLE> <THEAD> </THEAD> <TBODY>  </TBODY> <TFOOT> </TFOOT> </TABLE> Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 55

56 Tabellen Erweiterung Es gibt noch einige weitere Tags zur Darstellung von Tabellen: <CAPTION> </CAPTION>: Für die Tabellenbeschriftung außerhalb er Gitternetzlinien <COLGROUP> </COLGROUP>: Für Spaltengruppen Attribute: WIDTH: Breite in Pixel oder prozentueller Angabe SPAN: Anzahl der Spalten <COL>: Für Spaltenuntergruppen Attribute: SPAN: Anzahl der Unterspalten und noch einige Attribute: FRAME: Für die Art des Außenrahmens RULE: Für die Art der Innenlinien Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 56

58 Frames Um mehrere Seiten gleichzeitig darzustellen, muß das Browserfenster in separate Bereiche eingeteilt werden, dazu dient ein Frameset Ein Frame ist dann ein einzelner Bereich in einem Frameset Ein Frameset wird in einem extra Dokument angelegt, das einen anderen Aufbau hat als normale Seiten: <HTML> <HEAD> </HEAD> <FRAMESET> <FRAME> <NOFRAMES> <BODY> </BODY> </NOFRAMES> </FRAMESET> </HTML> Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 58

59 Frames - Fenstereinteilung Mit dem <FRAMESET>- Tag wird die eigentliche Fenstereinteilung festgelegt und der <BODY>- Tag ersetzt Die beiden wichtigsten Attribute für das <FRAMESET>- Tag sind: COLS: bestimmt, dass das Fenster in Spalten aufgeteilt werden soll ROWS: bestimmt, dass das Fenster in Zeilen aufgeteilt werden soll Mit diesen Attributen wird also festgelegt, wie das Fenster aufgeteilt werden soll (ob horizontal oder vertikal oder beides) Für jede Spalte / Zeile wird von links nach rechts (je durch Komma getrennt) die gewünschte Breite angegeben: Als absoluter Wert in Pixel: 100,*,150 3 Frames: 100 Pixel, Rest, 150 Pixel Als Prozentsatz der Fensterbreite: 30%, 30%, * 3 Frames: 30%, 30%, 60% In Portionen: 3*, 5*, * 3 Frames: 3/9, 5/9, 1/9 (3+5+1=9) * bedeutet: Rest oder 1 Portion Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 59

60 Frames Dokumente darstellen Innerhalb der <FRAMESET>- Tags müssen die in den Teilfenstern darzustellenden Dokumente angegeben werden Hierfür wird das <FRAME>- Tag benutzt <FRAME SRC=<contact.html > Mit dem Attribut SRC wird die HTML- Datei als URL angegeben Frames werden von links nach rechts und von oben nach unten gefüllt Man sollte im Frameset einen <NOFRAMES>- Bereich definieren, der dann angezeigt wird, wenn der Browser keine Frames darstellen kann Weitere Informationen und jede Menge Beispiele sind auf dem Online- Tutorium unter dem Thema HTML/ Frames zu finden Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 60

61 Frames Attribute Im <FRAME>- Tag gibt es folgende Attribute: FRAMEBORDER: stellt die Breite der Trennlinien ein (bei 0 ist die Trennlinie unsichtbar) MARGINWIDTH/- HEIGHT: Abstand zu den Rahmenlinien (beide 0 linke obere Ecke) SCROLLING: gibt an, ob eventuelle Bildlaufleisten unterdrückt werden (= no ) oder nicht (= yes ) NORSIZE: schaltet die Möglichkeit ab, die angrenzenden Rahmenlinien zu verschieben Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 61

62 Frames Hyperlinks zu Frames lenken Wie schon beschrieben, werden darzustellende Dokumente immer in dem nächst möglichen Frame angezeigt Man kann aber auch beeinflussen, in welchem Frame welches Dokument angezeigt werden soll, das geschieht in zwei Schritten: Den einzelnen Frames einen eindeutigen Namen geben (darf nur aus Buchstaben, Ziffern und dem Unterstrich bestehen) Zu den Links ein Ziel angeben (im <A>- Tag das Attribut TARGET angeben) Ein Beispiel kann man im Online- Tutorium unter dem Thema HTML/ Frames/ Hyperlinks zu Frames lenken finden Es gibt bereits vordefinierte Ziele: _blank: neues, unbenanntes Browserfenster _self: der Bereich, aus dem der Link erfolgt _top: aktuelles, vollständiges Browserfenster _parent: bei verschachtelten Framesets der Frameset - Bereich, der den aktuellen Frame enthält Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 62

63 Frames Inline Frames Anstatt das Browserfenster in mehrere Bereiche aufzuteilen, kann man auch Fenster in den laufenden Text (also im HTML- Dokument selbst) definieren Mit dem <IFRAME>- Tag kann man solche Löcher in der aktuellen Datei, durch die man auf eine andere sieht, definieren VORSICHT: Netscape unterstützt solche IFRAMES nicht, der IE schon Folgende Attribute sind beim <IFRAME>- Tag möglich: SRC: definiert die anzuzeigende Datei als URL NAME: legt einen eindeutigen Namen für den Inline Frame fest WIDTH, HEIGHT: beschreiben die Dimensionen des Fensters ALIGN: legt die horizontale Ausrichtung fest MARGINWIDTH/ -HEIGHT: bestimmen horizontale und vertikale Abstände zu den Rändern SCROLLING FRAMEBORDER Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 63

65 CSS 1. CSS (= Cascading Style Sheets = geschachtelte Formatvorlagen) ist eine Beschreibungssprache für Formatierungen 2. CSS erlaubt es, die Gestaltung einzelner Web- Dokumente oder einer ganzen Web- Site zentral zu definieren Idee: Formatierungen werden vom Dokumentinhalt getrennt Mit CSS kann man Einzelne Textbereiche oder HTML- Tags formatieren Vorlagen für eine einzelne Datei definieren Externe CSS- Dateien erzeugen Die Notation für CSS- Formate sind so aus: formatbezeichner:formatwert Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 65

66 CSS Es gibt drei Möglichkeiten, CSS in das HTML- Dokument einzubinden: Als direkte Erweiterung zu HTML- Formatierungen: Einzelne Tags können um Formate erweitert oder ganze Bereiche einer Datei speziell formatiert werden Als dateiinterne Formatvorlagen: Formatvorlage für eine HTML- Datei werden im Kopfbereich definiert ( geeignet dafür, wenn mehrere Dokumente unterschiedliche formatiert werden sollen) Als externe Formatvorlagen: Separate Dateien mit CSS- Anweisungen, die mit jeder Web-Seite verknüpft werden ( geeignet dafür, wenn mehrere Dokumente mit dem gleichen Stil formatiert werden sollen) Sonderformate benutzen: Ermöglicht es, Formatunterklassen zu bilden, geschachtelte Formate zu definieren, Pseudoformate festzulegen oder von Marken unabhängige Formate zu beschreiben Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 66

67 CSS Direkte Erweiterung Zu vielen Tags kann man das Attribut STYLE hinzufügen Diesem Attribut wird eine Zeichenkette zugewiesen, die eine CSS- Formatierung beschreibt Beispiele: <H1 STYLE= color:red > rote Überschrift </H1> <P STYLE= text-decoration:uppercase > großgeschriebener Text </P> Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 67

68 CSS Dateiinterne Formatvorlagen Werden im Kopfbereich mit dem <STYLE>- Tag definiert Es enthält das Attribut TYPE, das festlegt, dass es sich um CSS- Formate handelt Der Bereich zwischen den <STYLE>- Tags wird als HTML- Kommentar dargestellt (für Browser, die kein CSS unterstützen) Notation der Formatbeschreibungen: bereich {formatbezeichner:formatwert; } Beispiel: <STYLE TYPE= text/css >  </STYLE> Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 68

69 CSS Externe Formatvorlagen Dabei handelt es sich um eine separate Datei, die CSS- Anweisungen enthält Sie muß mit jedem HTML- Dokument, auf welches die festgelegten Formatierungen anzuwenden sind, verknüpft werden Die Datei sollte die Endung.css haben und enthält Formatbeschreibungen, wie bei den dateiinternen Formatvorlagen auch: body {font-family:verdana; font-size=18} h1 {color:red; font-family:arial} Im HTML- Dokument muß sie dann im Kopfbereich eingebunden werden: <LINK REL= stylesheet TYPE= text/css HREF= beispiel.css > oder: <STYLE TYPE= text/css url(beispiel.css); </STYLE> Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 69

70 CSS Sonderformate benutzen Das ist eine fortgeschrittene Technik, um CSS- Formate zu verwenden Es können u. A.: Formatunterklassen gebildet werden h2 {color:red} h2.einfach {color:black} <H2 CLASS= einfach > Text </H2> Pseudoformate festgelegt werden p:first-letter {font-weight=bold} Nähere Informationen gibt es hier: Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 70

71 CSS Attribute Es folgt eine Auflistung einiger Attribute, die innerhalb der <STYLE>- Tags verwendet werden können: Zeichenattribute: font-family: Schriftart font-size: Schriftgröße font-variant: Schriftvariante (kursiv, etc.) font-weight: Schriftdicke Textattribute: letter-spacing: Zeichenabstand text-align: Textausrichtung text-decoration: Textdekoration ( blink für blinkend, underline ) line-height: Linienhöhe text-ident: Textidentifikation text-transform: Texttransformation ( uppercase für Großbuchstaben) vertical-align: Vertikale Ausrichtung Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 71

73 Metainformationen Metainformationen sind Informationen über Informationen für WWW- Server, WWW- Browser, Suchmaschinen, etc Sie werden im Kopfbereich festgelegt Folgenden Informationen sind möglich: Angaben zum Autor Inhaltsbeschreibung Angabe des HTML- Editors Festlegen eines Verfallsdatums Originaldaten laden Automatische Aktualisierung und Weiterleitung Angabe des Dokumententyps Suchbegriffe Suchmaschinen steuern Aktualisierung steuern Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 73

74 Metainformationen - Beispiele 1. Angaben zum Autor: <META NAME= author CONTENT= H. Gabler > 1. Inhaltsbeschreibung: <META NAME= description CONTENT= HTML- Tutorial > 1. Angabe HTML- Editor (werden von SW automatisch eingesetzt): <META NAME= generator CONTENT= Microsoft Frontpage Express 2.0 > 1. Verfallsdatum festlegen (nachdem die Seite wieder vom Server geladen werden muß): <META HTTP-EQUIV= Expires CONTENT= True, 01 Jul :00:00 GMT > 1. Originaldaten laden (Daten werden immer vom Server geladen): <META HTTP-EQUIV= Pragma CONTENT= no-cache > Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 74

75 Metainformationen - Beispiele Automatische Aktualisierung und Weiterleitung (nach 15 sec wird automatisch beispiel.html aufgerufen): <META HTTP-EQUIV= refresh CONTENT= 15; URL=beispiel.html > Angabe des Dokumententyps: <DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2//EN > Suchbegriffe: <META NAME= keywords LANG= de CONTENT= HTML,CSS, Homepageerstellung, Grundkurs > Suchmaschinen steuern: <META NAME= robots CONTENT= INDEX,FOLLOW > Aktualisierung steuern: <META NAME= revisit-after CONTENT=20 days > Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 75

76 Metainformationen - Steuerungsdateien Wenn man eine eigene Domain hat, dann kann man ganze Verzeichnisse für Suchmaschinen sperren Dazu wird im Hauptverzeichnis der Domain die Datei robots.txt angelegt Der Inhalt einer solchen Datei sind dann z. B. so aus: User-agent: * (* = alle Suchprogramme) Disallow: /cgi-bin/ Disallow: /images/ Disallow: /privat/ User-agent: XYZMaschine Disallow: /special/ Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 76

78 Formulare Formulare (engl.: forms) können mit JavaScript bearbeitet werden Formulardaten können an ein CGI- Programm übergeben werden werden mit dem <FORM>- Tag eingeleitet bestehen aus mehreren Kontrollelementen (grafische Objekte auf der Webseite, die mit der Maus oder Tastatur verändert werden können) Es folgt ein Screenshot eines einfachen Formulars: Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 78

79 Formulare - Beispiel Und das ist der Quelltext zum Formular auf der Folie davor: <FORM ACTION="mailto:test@fh-karlsruhe.de" METHOD="post" ENCTYPE="text/plain"> <TEXTAREA NAME="adresse" COLS="60" ROWS="4"> 1. gahe000@fh-karlsruhe.de 2. scst0051@fh-karlsruhe.de </TEXTAREA> <p> Ihre Meinung bitte! <br> <INPUT NAME="userInfo" SIZE="40" MAXLENGTH="20"> <p> <INPUT TYPE="submit" VALUE="Anfrage senden"> <INPUT TYPE="reset VALUE="Zurücksetzen"> <P> Bitte teilen Sie uns Ihre Meinung mit und senden sie mit der Sendetaste ab. </P> </FORM> Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 79

80 Formulare Beispiel: Erklärung Ein Formular wird also mit dem <FORM>- Tag eingeleitet, dieses enthält folgende Attribute: ACTION: gibt den Empfänger der Formulardaten an (es handelt sich hierbei entweder um ein Programm, das auf dem Server läuft, oder um einen Mail- Client (= mailto: )) METHOD: gibt die Übertragungsmethode an ENCTYPE: legt die Form der Codierung fest Mit dem <TEXTAREA>- Tag wird ein mehrzeiliges Eingabefeld erzeugt, es enthält folgendes Attribut: NAME: legt eine eindeutige Bezeichnung fest Mit dem <INPUT>- Tag können Kontrollelemente erzeugt werden, dazu wird folgendes Attribut benötigt: TYPE: es legt die Art des Kontrollelements fest submit : Schaltfläche, die den Sendevorgang auslöst reset : Schaltfläche, die das Formular wieder in den Ursprungszustand setzt VALUE: legt die Beschriftung der Buttons fest Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 80

81 Formulare Übertragungsmethoden Wie schon erklärt, wird mit dem Attribut METHOD im <FORM>- Tag die Übertragungsmethode festgelegt, d. h. wie die Kommunikation mit dem Empfängerprogramm erfolgt Es gibt zwei Möglichkeiten: GET: Bedeutet für CGI- Programme, dass sie die Daten in einer Umgebungsvariable über das System des Servers geliefert bekommen POST: Bedeutet für CGI- Programme, dass eine Tastatureingabe simuliert wird, d. h. sie erhalten die Daten so, wie wenn sie jemand vor Ort eintippt. Für s werden mit der POST- Methode vollständig angelegt und abgeschickt Für s also immer POST für das Attribut METHOD anzugeben! Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 81

82 Formulare Formularelemente 1. Ein Formular kann mehrere Elemente haben, diese werden je nach Informationstyp ausgesucht, z. B. muß der User einen Text eintippen, oder einfach nur bejahen, bzw. verneinen 2. In HTML stehen spezielle Kontrollelemente zur Verfügung: 1. INPUT- Typen 2. Beschriftungen 3. Notizfelder 3. Beispiel: 4. <FORM METHOD="post" ENCTYPE="text/plain"> <TEXTAREA NAME= name > Notizfeld </TEXTAREA> <LABEL FOR= inpname > Beschriftung </LABEL> <INPUT ID= inpname VALUE= senden TYPE= submit >  1. </FORM> Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 82

83 Formulare INPUT- Typen Sie werden mit dem <INPUT>- Tag erzeugt Das Attribut TYPE legt fest, welches Element erzeugt wird: PASSWORD: <INPUT TYPE="password NAME="kennwort size= 8 maxlength="12"> für die Eingabe nicht erkennbarer Daten (z. B. Passworteingabe: *****) CHECKBOX: <input type="checkbox" name="zutat" value="salami">salami<br> kleines quadr. Kästchen, das per Mausklick angekr. werden kann RADIO: <input type="radio" name="zahlen" value="visa"> Visa<br> kleiner runder Kreis, der per Mausklick ausgefüllt werden kann TEXT: Eingabe num. und alphanum. Daten. rechteckiges Eingabefeld SUBMIT: Schaltfläche zum Absenden der Formulardaten RESET: Schaltfläche, die das Formular in seinen Ursprungszustand zurücksetzt Mehr Informationen und Beispiele sind im Online- Tutorium unter dem Thema HTML/ Formulare zu finden Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 83

84 Formulare Auswahllisten Mit dem <SELECT>- Tag werden Auswahllisten definiert, es gibt folgende Attribute zu diesem Tag: NAME: Beschriftung SIZE: Anzahl sichtbarer Zeilen MULTIPLE: steuert ob eine Mehrfachauswahl möglich ist Mit dem <OPTION>- Tag werden innerhalb der <SELECT>- Tags Optionen aufgelistet, hier gibt es folgende Attribute: SELECTED: zeigt eine Vorauswahl an VALUE: wenn statt des angezeigten Wertes eine andere Information übertragen werden soll <SELECT NAME= Auto SIZE= 2 MULTIPLE> <OPTION SELECTED> Opel </OPTION> <OPTION> Ford </OPTION> <OPTION> VW </OPTION> </SELECT> Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 84

85 Interessante Links zum Thema Gute Informationen gibt es auf dem Online- Tutorium: Ein sehr gutes Online- Tutorium von Stefan Münz mit sehr vielen Informationen und Beispielen findet man hier: Ein guter HTML- Editor von Ulli Meybohm ist hier zu finden: Eine HTML- Einführung von Hubert Partl: Die Goldenen Regeln für schlechtes HTML : Ein sehr gutes Buch für den Einstieg ist: HTML- Von der Baustelle bis JavaScript von Helmut Erlenkötter erschienen im Juni 2000 im Rowohlt Taschenbuch Verlag (ISBN: ) Helga Gabler, Stefanie Schwall, H. Herbstreith Übungen Informatik 1 85