Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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.

Ähnliche Präsentationen


Präsentation zum Thema: "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."—  Präsentation transkript:

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

2 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

3 FH-Hof Uniform Resource Locator Absolute URL http://mis.fh-hof.de/projekte/isodp.html Dokument Verzeichnis Rechner Protokoll Relative URL isodp.html

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

5 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

6 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

7 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

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

9 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

10 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

11 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:...

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

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

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

15 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

16 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

17 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


Herunterladen ppt "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."

Ähnliche Präsentationen


Google-Anzeigen