Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

HTML - Einführung Richard Göbel.

Ähnliche Präsentationen


Präsentation zum Thema: "HTML - Einführung Richard Göbel."—  Präsentation transkript:

1 HTML - Einführung Richard Göbel

2 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 Verfügbarkeit von Programmen
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 Komponenten des World Wide Webs
Dokumente: HyperText Markup Language HTML WWW Server HyperText Transfer Protocol (HTTP) via Internet WWW Browser Adresse: Uniform Resource Locator URL

5 Uniform Resource Locator URL
Absolute URL Relative URL /outerspace/www-german.html /outerspace/www-german.html /outerspace/www-german.html Dokument Rechner Protokoll www-german.html

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

7 Struktur einer HTML-Datei
 Element HTML: Klammer für den HTML-Code <head> <title> ... </title> ...  Dokument besteht aus: </head> - Kopf: Element HEAD <body> - Rumpf: Element BODY ... </body>  Kopf enthält mindestens den den Titel des Dokuments </html>

8 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 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 Beispiele für unterschiedliche Darstellungen
Test Test Test <em>Test</em> Test Test <strong>Test</strong> Test Test </p>

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

12 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 Beispiel2: Überarbeiten der HTML-Seite
Deutsche Umlaute, zum Beispiel Ü Hervorhebungen von Text <em>, <strong> Unterschiedliche Überschriften <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

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

15 Hyperlinks: Verwendung in HTML
 Der Ausgangspunkt eines Hyperlinks wird mit dem Tag <a> markiert Dieser Text verweist auf unsere erste HTML-Datei und auf die Startseite der FH Hof  Die URL wird als Wert des Attributs “href” angegeben <a href=”Beisp1.html”> <a> <a href=” ”> - eigene Dateien werden mit relativen URL’s identifiziert </a> - fremde Dateien werden mit absoluten URL’s identifiziert <a href=” ”> <a href=”http://www.fh-hof.de”> <a> </a>

16 Beispiel: HTML-Seite mit Hyperlinks
Link auf eigenes HTML-Dokument eintragen mit relativer URL: <a href=“Beisp1.html“> </a> Link auf fremdes HTML-Dokument eintragen mit absoluter URL: <a href=“http://www.fh-hof.de/“> </a>

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

18 Typen von Bilddaten: Bilddatenformate
JPEG GIF Endungen: .jpg, .jpeg Endung: .gif

19 Beispiel4: Bilder Fotografie einfügen: <img src="Venedig.jpg" alt= "Venedig"> Grafik einfügen: <img src=”Richtung.gif" alt= ”Richtungen">

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

21 Aufbau eines Elements am Beispiel der Hyperlinks
Name des Elements im öffnenden Tag Attributwerte getrennt durch Leerzeichen: Name des Attributs Gleichheitszeichen Wert des Attributs in Anführungsstriche <a href=”http://www.fh-hof.de”> <a href=”http://www.fh-hof.de”> <a href=”http://www.fh-hof.de”> <a href=”http://www.fh-hof.de”> <a href=”http://www.fh-hof.de”> <a href=”http://www.fh-hof.de”> <a href=”http://www.fh-hof.de”> Inhalt: Text Elemente </a> Schließendes Tag mit Elementname (häufig optional)

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

23 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 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 Einsatz eines HTML-Editors am Beispiel von Microsoft FrontPage
Zusammenfassung URL HTML-Dokumente: einige wichtige Elemente Hyperlinks Bilder weitere Elemente: Begleitmaterial Einsatz eines HTML-Editors am Beispiel von Microsoft FrontPage


Herunterladen ppt "HTML - Einführung Richard Göbel."

Ähnliche Präsentationen


Google-Anzeigen