Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

FH-Hof HTML - Einführung Richard Göbel. FH-Hof Inhalt Grundlagen Inhalt und Darstellung von Dokumenten Verweise auf Dokumente (Hyperlinks) Einbinden von.

Ähnliche Präsentationen


Präsentation zum Thema: "FH-Hof HTML - Einführung Richard Göbel. FH-Hof Inhalt Grundlagen Inhalt und Darstellung von Dokumenten Verweise auf Dokumente (Hyperlinks) Einbinden von."—  Präsentation transkript:

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

2 FH-Hof Inhalt Grundlagen Inhalt und Darstellung von Dokumenten Verweise auf Dokumente (Hyperlinks) Einbinden von Bildern Weitere Elemente für Dokumente Einsatz von HTML-Editoren am Beispiel von Microsoft FrontPage

3 FH-Hof Voraussetzung Verfügbarkeit von Programmen Texteditor (zum Beispiel Windows Editor) WWW Browser (z.B. Netscape Navigator, Microsoft Internet Explorer,... ) Microsoft FrontPage Kenntnisse Aufruf der genannten Programme Elementare Bedienung wie Laden und Speichern von Dateien Bedienung des Editors (Eingabe, Ändern und Löschen von Texten)

4 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

5 FH-Hof Uniform Resource Locator URL Absolute URL Relative URL Protokoll Rechner Dokument www-german.html

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

7 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

8 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

9 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 durch den Browser entsprechend der Möglichkeiten des Browsers und des Rechners

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

11 FH-Hof Zeichensätze für HTML American Standard Code for Information Interchange ASCII (128 Zeichen) ISO-Latin 1 (256 Zeichen) Unicode (ca Zeichen)

12 FH-Hof Diskussion: Welchen Zeichensatz verwenden? Nur der ASCII- Zeichensatz wird von praktisch allen Browsern unterstützt Der ASCII-Zeichensatz enthält zum Beispiel keine deutschen Umlaute (ä, ö, ü) Sonderzeichen lassen sich mit Hilfe von ASCII- Zeichen umschreiben (Character Entities) ä:ä Ä:Ä ö:ö Ö:Ö ü:ü Ü:Ü ß:ß

13 FH-Hof Beispiel2: Überarbeiten der HTML-Seite Deutsche Umlaute, zum Beispiel Ü Hervorhebungen von Text, Unterschiedliche Überschriften,,,,,

14 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

15 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

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

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

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

19 FH-Hof Beispiel4: Bilder Fotografie einfügen: Grafik einfügen:

20 FH-Hof HTML-Elemente weitere Elemente?... im Begleitmaterial! allgemeine Form eines Elements

21 FH-Hof Aufbau eines Elements am Beispiel der Hyperlinks Name des Elements im öffnenden Tag Schließendes Tag mit Elementname (häufig optional) Inhalt: Text Elemente Attributwerte getrennt durch Leerzeichen: Name des Attributs Gleichheitszeichen Wert des Attributs in Anführungsstriche

22 FH-Hof Beschreibung von Elementen Name des Elements Start- und/oder Ende-Tag verpflichtend? Kurzbeschreibung des Elements Kurzbeschreibung aller Attribute Inhalt des Elements

23 FH-Hof Einsatz von HTML-Editoren HTML-Editoren beschleunigen die Erstellung von HTML-Seiten wesentlich. Kein Editor unterstützt alle Möglichkeiten von HTML. Für die Ausschöpfung aller Möglichkeiten von HTML muß ein Autor die Sprachkonstrukte von HTML kennen und ggf. auch selbst eingeben oder modifizieren können.

24 FH-Hof Typen von HTML-Editoren Editoren ohne weitere spezifische Unterstützung von HTML Struktureditoren Editoren mit Browser-Darstellung. Transformatoren zum Beispiel für Microsoft Word

25 FH-Hof Zusammenfassung URL HTML-Dokumente: einige wichtige Elemente Hyperlinks Bilder weitere Elemente: Begleitmaterial Einsatz eines HTML-Editors am Beispiel von Microsoft FrontPage


Herunterladen ppt "FH-Hof HTML - Einführung Richard Göbel. FH-Hof Inhalt Grundlagen Inhalt und Darstellung von Dokumenten Verweise auf Dokumente (Hyperlinks) Einbinden von."

Ähnliche Präsentationen


Google-Anzeigen