HTML - Einführung Richard Göbel
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
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)
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
Uniform Resource Locator URL Absolute URL Relative URL http:// http:// http:// www.chemie.fu-berlin.de www.chemie.fu-berlin.de www.chemie.fu-berlin.de /outerspace/www-german.html /outerspace/www-german.html /outerspace/www-german.html Dokument Rechner Protokoll www-german.html
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
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>
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
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
Beispiele für unterschiedliche Darstellungen Test Test Test <em>Test</em> Test Test <strong>Test</strong> Test Test </p>
American Standard Code for Information Interchange ASCII Zeichensätze für HTML Unicode (ca. 40.000 Zeichen) American Standard Code for Information Interchange ASCII (128 Zeichen) ISO-Latin 1 (256 Zeichen)
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) ä: ä Ä: Ä ö: ö Ö: Ö ü: ü Ü: Ü ß: ß
Beispiel2: Überarbeiten der HTML-Seite Deutsche Umlaute, zum Beispiel Ü Hervorhebungen von Text <em>, <strong> Unterschiedliche Überschriften <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
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
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>
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>
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>
Typen von Bilddaten: Bilddatenformate JPEG GIF Endungen: .jpg, .jpeg Endung: .gif
Beispiel4: Bilder Fotografie einfügen: <img src="Venedig.jpg" alt= "Venedig"> Grafik einfügen: <img src=”Richtung.gif" alt= ”Richtungen">
HTML-Elemente weitere Elemente? . . . im Begleitmaterial! allgemeine Form eines Elements
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)
Beschreibung von Elementen Name des Elements Start- und/oder Ende-Tag verpflichtend? Kurzbeschreibung des Elements Kurzbeschreibung aller Attribute Inhalt des Elements
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.
Typen von HTML-Editoren Editoren ohne weitere spezifische Unterstützung von HTML Struktureditoren Editoren mit Browser-Darstellung. Transformatoren zum Beispiel für Microsoft Word
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