Embed Size (px)
Citation preview
FH-Hof
HTML - Einführung
Richard Göbel
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
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)
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
FH-Hof
Uniform Resource Locator URL
Absolute URL
Relative URL
http://www.chemie.fu-berlin.de /outerspace/www-german.html
Protokoll
Rechner
Dokument
http://www.chemie.fu-berlin.de /outerspace/www-german.htmlhttp://www.chemie.fu-berlin.de /outerspace/www-german.html
www-german.html
FH-Hof
• schließenden Tag
• öffnenden Tag
HyperText Markup Language HTML
Ein HTML-Dokument besteht aus sogenannten Elementen Einführung<h1> </h1>
Dieses Dokument gibt eine kurze Einführung in HTML.
<p>
</p>
Verschiedene Elemente werden unterschiedlich dargestellt
• Inhalt Elemente bestehen aus dem:
FH-Hof
Struktur einer HTML-Datei
<html>
</html>
<head>
</head>
<body>
</body>
...
<title> ... </title>...
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
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
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
FH-Hof
Beispiele für unterschiedliche Darstellungen
<em>Test</em>
<strong>Test</strong>
Test
<p>
</p>
Test
Test
Test
Test
Test
Test
Darstellung 1 Darstellung 2
FH-Hof
Zeichensätze für HTML
American Standard Code for Information Interchange ASCII
(128 Zeichen)
ISO-Latin 1(256 Zeichen)
Unicode(ca. 40.000 Zeichen)
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)
ä: äÄ: Äö: öÖ: Öü: üÜ: Üß: ß
FH-Hof
Beispiel2: Überarbeiten der HTML-Seite
Deutsche Umlaute, zum Beispiel Ü
Hervorhebungen von Text
<em>, <strong>
Unterschiedliche Überschriften
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
FH-Hof
Hyperlinks: Konzept
Beispiel1
Dies ist ein HTML-Dokument mitzwei 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 mitzwei Verweisen:• Dies ist der erste Verweis• Dies ist der zweite Verweis
Beispiel2: Venedig
URLURL
Internet
FH-Hof
<a><a href=” ”><a href=”Beisp1.html”>
<a><a href=” ”><a href=”http://www.fh-hof.de”>
Dieser Text verweist auf unsere
erste HTML-Datei
und auf die
Startseite der FH Hof
Hyperlinks: Verwendung in HTML
</a>
</a>
Der Ausgangspunkt eines Hyperlinks wird mit dem Tag <a> markiert
Die URL wird als Wert des Attributs “href” angegeben
- eigene Dateien werden mit relativen URL’s identifiziert
- fremde Dateien werden mit absoluten URL’s identifiziert
FH-Hof
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>
FH-Hof
src="Venedig.jpg"
Einbinden von Bildern in HTML Dokumente
<img
alt= "Venedig">
</img>
Bilder werden mit dem IMG-Element eingebunden
Verweis auf die Bilddatei mit Attribut ‘src’
Kurzbeschreibung des Bildes (Attribut “alt”)
Kein Ende-Tag!
FH-Hof
Typen von Bilddaten: Bilddatenformate
JPEG GIF
Endungen: .jpg, .jpeg Endung: .gif
FH-Hof
Beispiel4: Bilder
Fotografie einfügen:
<img src="Venedig.jpg" alt= "Venedig">
Grafik einfügen:
<img src=”Richtung.gif"
alt= ”Richtungen">
FH-Hof
HTML-Elemente
weitere Elemente?
. . . im Begleitmaterial!
allgemeine Form eines Elements
FH-Hof
<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”>
Aufbau eines Elements am Beispiel der Hyperlinks
</a>
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
FH-Hof
Beschreibung von Elementen
Name des Elements
Start- und/oder Ende-Tag verpflichtend?
Kurzbeschreibung des Elements
Kurzbeschreibung aller Attribute
Inhalt des Elements
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.
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
FH-Hof
Zusammenfassung
URL
HTML-Dokumente:
einige wichtige Elemente
Hyperlinks
Bilder
weitere Elemente: Begleitmaterial
Einsatz eines HTML-Editors am Beispiel von
Microsoft FrontPage
