docHTML - TU Dresden
download 
Report Transcription
HTML - TU Dresden
Zentrum für Informationsdienste und Hochleistungsrechnen (ZIH) PHP & HTML Kurzeinstieg HTML Zellescher Weg 12 Willers-Bau A109 Tel. +49 351 - 463 - 32424 Michael Kluge ([email protected]) HTML – Themenübersicht Client Server Konzept Grundlagen HTML Aufbau von Formularen Formularelemente im Detail Michael Kluge / 2 HTML – Client Server Konzept Webbrowser stellt eine Anfrage an den Server Server bearbeitet die Anfrage und liefert die angeforderte statische Webseite aus Webbrowser Benutzeroberfläche Interaktion ist nur im Rahmen von Links auf andere statische Dokumente möglich HTTPAnfrage HTMLDaten Webserver Datenspeicher Server-System Michael Kluge / 3 HTML – Themenübersicht Client Server Konzept Grundlagen HTML – Baumstruktur – Aufbau von Elementen – Beispiel-Dokument Aufbau von Formularen Formularelemente im Detail Michael Kluge / 4 HTML – Dokumentaufbau html body head meta title link h1 p p Michael Kluge / 5 p HTML – Elemente Elemente sind durch spitze Klammern (< >) eingeschlossen Jedes Element besteht aus einem öffnenden und einem schließenden Tag Das schließende Tag beginnt mit einem Schrägstrich (/) Attribute beschrieben Elemente näher <h1>Eine Überschrift</h1> <input type=“text“ name=“email“ value=“[email protected]“ /> Michael Kluge / 6 HTML – Wichtige Elemente für den Anfang <html></html> – umschließt gesamtes HTML-Dokument <head></head> – umschließt Kopfbereich des Dokuments <title></title> – Titel der Seite in der Kopfzeile d. Browsers <body></body> – Körper des Dokumentes – Wird im Browserfenster angezeigt Michael Kluge / 7 HTML – Wichtige Elemente für den Anfang <h1></h1> .. <h6></h6> – Überschriften im Text <p></p> – Absätze im Text <br /> – HTML – Zeilenumbruch (\n wird ignoriert) Michael Kluge / 8 HTML – Beispieldokument <html> <head> <title>Titel der Webseite</title> </head> <body> <h1>Dies ist eine Überschrift ersten Grades</h1> <p>Ich bin nur ein kleiner Blindtext. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.</p> </body> html </html> head body title h1 Michael Kluge / 9 p HTML – Themenübersicht Client Server Konzept Grundlagen HTML Aufbau von Formularen – Formular und Formularelemente – Übertragungsmethoden – Übertragungskodierung Formularelemente im Detail Michael Kluge / 10 HTML – Aufbau eines Formulars Beginnt mit <form> und endet mit </form> enthält verschiedene Formularelemente Wichtige Attribute – action -> wohin mit den Daten – method -> wie wird übermittels – enctype -> mit welcher kodierung <form action=”script.php” method=”post”> <input type=“text“ name=“text1“ /> <input type=“submit“ value=”Abschicken”> </form> Michael Kluge / 11 HTML – Übertragungsmethoden (method) Steuert die Art in der Datenübertragung METHOD=GET (Standard) – Datenversand über URL-Parameter – wird benötigt wenn Daten mit JavaScript verarbeitet werden sollen METHOD=POST – Datenversand an die Standardeingabe eines Webservers – muss in jedem Fall verwendet werden wenn Dateien übertragen werden Michael Kluge / 12 HTML – Übertragungskodierung (enctype) Steuert die Art in der Datenkodierung application/x-www-form-urlencoded – Standard wenn nichts angegeben ist – Geeignet zur Übertragung von Texten – Automatische Zeichenkodierung multipart/form-data – Voraussetzung für die Dateiübertragung – Automatische Zeichenkodierung text/plain – Keine Zeichenkodierung – Geeignet nur zur Übertragung von Sonderzeichen freien Texten Michael Kluge / 13 HTML – Daten mit Links übermitteln Beginnt mit <a> und endet mit </a> Übertragung von Einzelinformationen Daten werden immer per GET übertragen Wichtige Attribute – href Æ Ziel-URL <a href=“index.php?param1=wert¶m2=wert2>Linktext</a>“ Michael Kluge / 14 HTML – Themenübersicht Client Server Konzept Grundlagen HTML Aufbau von Formularen Formularelemente im Detail – Texteingabe (Text, Passwörter) – Mehrfachauswahlen (Dropdowns, Listen) – Auswahlen (Radio- und Checkboxen) – Dateien – Buttons (Submit, Reset, Image, Button) Michael Kluge / 15 HTML – Formulare (<input type=“text“ />) einzeiliges Texteingabefeld wichtige Attribute – name – eindeutiger Name des Elementes – value – default-Wert im Element – maxlength – maximale Anzahl von Zeichen – readonly – Elementwert nicht änderbar Formatierung über CSS möglich <input type=“text“ name=“email“ value=“[email protected]“ /> Michael Kluge / 16 HTML – Formulare (<textarea>...</textarea>) mehrzeiliges Texteingabefeld Wert steht zwischen öffnendem und schließendem Tag wichtige Attribute – name – eindeutiger Name des Elementes – rows / cols – Anzahl von Zeilen und Spalten – readonly – Elementwert nicht änderbar Formatierung über CSS möglich <textarea name=”eintext”> hier steht der default text </textarea> Michael Kluge / 17 HTML – Formulare (<input type=“password“ />) einzeiliges Textfeld, Zeichen erscheinen als * wichtige Attribute – name – eindeutiger Name des Elementes – value – default-Wert im Element – maxlength – maximale Anzahl von Zeichen – readonly – Elementwert nicht änderbar Formatierung über CSS möglich <input type=“password“ name=“pwd“ value=“geheim“ /> Michael Kluge / 18 HTML – Formulare (<input type=“hidden“ />) nicht sichtbares Textfeld verwendbar für versteckte Daten wichtige Attribute – name – eindeutiger Name des Elementes – value – default-Wert im Element Formatierung über CSS möglich <input type=“hidden“ name=“versteckt“ value=“12345“ /> Michael Kluge / 19 HTML – Formulare (<input type=“file“ />) Auswahl von lokalen Datein für den Upload Aussehen vom Browser abhängig Dialogfelder nicht formatierbar wichtige Attribute – name – eindeutiger Name des Elementes – maxlength – maximale Dateigröße in Byte Formatierung über CSS NICHT möglich <form method=“post“ enctype=“multipart/form-data“> <input type=“file“ name=“datei“ maxlength=”10000” /> </form> Michael Kluge / 20 HTML – Formulare (<input type=“submit“ />) Button zum Absenden eines Formulars Verwendung des Buttons übermittels Daten an den die FormAction Wichtige Attribute – name – eindeutiger Name des Elements – value – Wert und Beschriftung des Elements Formatierung mit CSS möglich <input type=“submit“ value=“abschicken“ /> Michael Kluge / 21 HTML – Formulare (<input type=“img“ src=”” />) Button zum Absenden eines Formulars Als Button wird eine Grafik angezeigt Wichtige Attribute – name – eindeutiger Name des Elements – src – Pfad zur anzuzeigenden Grafik Werte aus einem "Value" Attribut werden nur vom Firefox korrekt übermittelt <input type=“image“ name=“abschicken“ src=”img/absend.jpg” /> Michael Kluge / 22 HTML – Formulare (<input type=“reset“ />) Zurücksetzen des Formulars Alle Werte im Formular werden auf den default-Wert gesetzt Wichtige Attribute – name – eindeutiger Name des Elements – value – Wert und Beschriftung des Elements Formatierung mit CSS möglich <input type=“reset“ value=”Abbrechen” /> Michael Kluge / 23 HTML – Formulare (<select>...</select>) Auswahl bzw. Drop-Down Liste Wichtige Attribute – name – eindeutiger Name des Elements – size – Anzahl der Zeilen (1=DropDown) – multiple – Mehrfachauswahl erlauben Formatierung über CSS NICHT möglich <!-- dropdown Liste --> <select name=”liste”> ... </select> <!-- dreizeilige Liste --> <select name=”liste” size=”3”> ... </select> <!-- liste zur Mehrfachauswahl --> <select name=“liste“ size=“3“ multiple=“multiple“> ... </select> Michael Kluge / 24 HTML – Formulare (<option>...</option>) Elemente innerhalb einer Liste Wichtige Attribute – select – Vorauswahl des Elementes – value – übermittelter Wert Formatierung mit CSS NICHT möglich <select name=“liste“ size=“3“ multiple=“multiple“> <option value=”1”>Pizza Napoli</option> <option value=”2” selected=”selected”>Pizza Salami</option> </select> Michael Kluge / 25 HTML – Formulare (<optgroup>...</optgroup>) dient zum Gruppieren von Listen dabei ist maximal eine Ebene möglich Wichtige Attribute: – label – Die Beschriftung der Gruppe <optgroup label=“Pizza“> <option value=”p1”>Pizza Napoli</option> <option value=”p2”>Pizza Salami</option> </optgroup> <optgroup label=“Schnitzel“> <option value=”s1”>Wiener Schnitzel</option> <option value=”s2”>Schnitzel Hawaii</option> </optgroup> Michael Kluge / 26 HTML – Formulare (<input type=“radio“ />) boolsches Auswahl Element es kann immer nur ein Element gewählt sein Wichtige Attribute: – name – ordnet Elemente einer Gruppe zu – value – legt den übermittelten Wert fest – checked – Vorauswahl von Elementen – Formatierung über CSS NICHT möglich Visa <input type=“radio“ name=”radio1” value=”Visa” /> Master <input type=“radio“ name=”radio1” value=”Mastercard” /> Amex <input type=“radio“ name=”radio1” value=”American Express” /> Michael Kluge / 27 HTML – Formulare (<input type=“checkbox“ />) Auswahl von Optionen über Checkboxen Wichtige Attribute: – name – ordnet Elemente einer Gruppe zu – value – legt den übermittelten Wert fest – checked – Vorauswahl von Elementen Formatierung über CSS NICHT möglich Visa <input type=“checkbox“ name=”radio1” value=”Visa” /> Master <input type=“checkbox“ name=”radio1” value=”Mastercard” /> Amex <input type=”checkbox“ name=”radio1” value=”American Express” /> Michael Kluge / 28
