HTML - TU Dresden

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 (michael.kluge@tu-dresden.de)
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
Grundlagen HTML
– Baumstruktur
– Aufbau von Elementen
– Beispiel-Dokument
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=“nobody@tu-dresden.de“ />
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
Grundlagen HTML
– Formular und Formularelemente
–
Übertragungsmethoden
– Übertragungskodierung
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&param2=wert2>Linktext</a>“
Michael Kluge / 14
Grundlagen HTML
– 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=“ihr.name@domain.de“ />
Michael Kluge / 16
HTML – Formulare (<textarea>...</textarea>)
mehrzeiliges Texteingabefeld
Wert steht zwischen öffnendem und schließendem Tag
wichtige Attribute
– rows / cols – Anzahl von Zeilen und Spalten
<textarea name=”eintext”>
hier steht der default text
</textarea>
Michael Kluge / 17
HTML – Formulare (<input type=“password“ />)
einzeiliges Textfeld, Zeichen erscheinen als *
wichtige Attribute
– maxlength – maximale Anzahl von Zeichen
<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
<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
– 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
– 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
– 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
– size – Anzahl der Zeilen (1=DropDown)
– multiple – Mehrfachauswahl erlauben

<select name=”liste”> ... </select>

<select name=”liste” size=”3”> ... </select>

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

HTML - TU Dresden

Transcription

Similar documents

EinladungLebensqulitätimQuartier _2

Lexware vor Ort

broadcast portfolio

20 Jahre Friedliche Revolution

Referenzhandbuch für den 54 MBit/s Wireless Router

25 Tipps zu Photoshop

Kurzeinstieg in die Aufnahme in DivX

PDF-Handbuch - star