FH-Hof HTML - Einführung Richard Göbel

FH-Hof Komponenten des World Wide Webs WWW Browser HyperText Transfer Protocol (HTTP) via Internet WWW Server Dokumente: HyperText Markup Language HTML Adresse: Uniform Resource Locator URL

FH-Hof Uniform Resource Locator Absolute URL Dokument Verzeichnis Rechner Protokoll Relative URL isodp.html

FH-Hof schließenden Tag öffnenden Tag HyperText Markup Language HTML Ein HTML-Dokument besteht aus so genannten Elementen Einführung Dieses Dokument gibt eine kurze Einführung in HTML. Verschiedene Elemente werden unterschiedlich dargestellt Inhalt Elemente bestehen aus dem:

FH-Hof Struktur einer HTML-Datei... Element HTML: Klammer für den HTML-Code Dokument besteht aus : Kopf: Element HEAD Rumpf: Element BODY Kopf enthält mindestens den den Titel des Dokuments

FH-Hof Beispiel: Erstellen der ersten HTML-Seite Voraussetzung: Texteditor (zum Beispiel Windows Editor) WWW Browser (z.B. Netscape Navigator, Microsoft Internet Explorer,... ) Text mit Markierungen in den Editor eingeben Datei mit Endung.html (alternativ.htm) abspeichern Datei mit WWW Browser laden

FH-Hof Darstellung eines HTML-Dokuments Darstellung von Leer- und Zeilenendezeichen: Leerzeichen am Anfang und Ende eines Texts werden unterdrückt Leerzeichen innerhalb eines Texts werden bis auf ein Zeichen nicht dargestellt Zeilenendezeichen werden ignoriert Zentraler Punkt: HTML definiert in der Regel nur die Bedeutung einzelner Textstellen aber nicht ihre Darstellung Die Darstellung erfolgt entsprechend der Möglichkeiten des Browsers und des Rechners

FH-Hof Beispiele für unterschiedliche Darstellungen Test Test Test Test Test Darstellung 1Darstellung 2

FH-Hof Hyperlinks: Konzept Beispiel1 Dies ist ein HTML-Dokument mit zwei Verweisen: Dies ist der erste Verweis Dies ist der zweite Verweis Beispiel3 Dies ist ein weiteres HTML- Dokument, das keine weiteren Verweise enthält. Dies ist der zweite Absatz für dieses Beispieldokument Beispiel2: Venedig WWW Browser WWW Dokumente Beispiel1 Dies ist ein HTML-Dokument mit zwei Verweisen: Dies ist der erste Verweis Dies ist der zweite Verweis Beispiel2: Venedig URL Internet

FH-Hof Dieser Text verweist auf unsere erste HTML-Datei und auf die Startseite der FH Hof Hyperlinks: Verwendung in HTML Der Ausgangspunkt eines Hyperlinks wird mit dem Tag markiert Die URL wird als Wert des Attributs href angegeben - eigene Dateien werden mit relativen URLs identifiziert - fremde Dateien werden mit absoluten URLs identifiziert

FH-Hof Beispiel: HTML-Seite mit Hyperlinks Link auf eigenes HTML-Dokument eintragen mit relativer URL:... Link auf fremdes HTML-Dokument eintragen mit absoluter URL:...

FH-Hof src="Venedig.jpg" Einbinden von Bildern in HTML Dokumente <img alt= "Venedig"> Bilder werden mit dem IMG-Element eingebunden Verweis auf die Bilddatei mit Attribut src Kurzbeschreibung des Bildes (Attribut alt) Kein Ende-Tag!

FH-Hof Typen von Bilddaten: Bilddatenformate JPEGGIF Endungen:.jpg,.jpegEndung:.gif

FH-Hof Wichtige Kenndaten weiterer Elemente Name des Elements Start- und/oder Ende-Tag verpflichtend? Kurzbeschreibung des Elements Kurzbeschreibung aller Attribute Inhalt des Elements

FH-Hof HTML-Formulare Formulare werden mit dem Element FORM in ein Dokument eingebunden. Formularelemente mit dem Element INPUT: Text, Password, Checkbox, Radio Buttons: Submit, Reset, Client Script Versteckte Felder Dateinamen zur Übertragung von Dateien Weitere Formularelemente Auswahlmenüs: SELECT, OPTION und OPTGROUP Mehrzeilige Eingabefelder: TEXTAREA Weitere Buttons: BUTTON

FH-Hof Typischer Aufbau eines Formulars HTML-Code :... Die URL verweist auf ein Programm auf dem Server Die Methode gibt mit get oder post die verwendete HTTP-Methode an (post verpflichtend ab HTML 4) Das Formular enthält genau ein Input-Element mit Typ submit zur Übertragung der Eingaben

FH-Hof Beispiele für Eingabeelemente Einzeiliges Feld für die Texteingabe Mehrzeiliges Feld für die Texteingabe Defaulttext Checkbox Die Eingabe wird als Wert für den Namen (Attribut name) dem Server übergeben