Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
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=” <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=“ </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=” <a href=” <a href=” <a href=” <a href=” <a href=” <a href=” 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
Ähnliche Präsentationen
