HTML - die "Sprache" des Web
HTML-Sprachkomponenten
- Markup: spezielle Vorschrift für die Auszeichnung eines konkreten Textteils, Absatzes o.ä. in einem Web-Dokument
- Aufbau eines Markup:
- Start-Tag: aktiviert die Vorschrift, kann Attribut enthalten
- eigentlicher Inhalt, auf den sich Vorschrift bezieht
- End-Tag: optional, deaktiviert Vorschrift, "passt" zu Start-Tag
- Zusammenfassung:
<ELEMENT-NAME [attribut="wert"]> [inhalt] [</ELEMENT-NAME>] \______________________________/ \_____________/ Start-Tag Ende-Tag
- Beispiele:
EM: dient der Hervorhebung einer Textstelle; kein Attribut benötigt
Ein <EM>megacooler</EM> Film war das gestern abend. \__/ | \___/ Start-Tag Inhalt Ende-TagH1: Überschrift; Attribut align definiert Ausrichtung (links (=Standard), zentriert, rechts oder "Blocksatz")
<H1 align=center>Einladung</H1> \_______________/ | \___/ Start-Tag Inhalt Ende-Tag
- Verständnis des Grundprinzips und Kenntnis wichtiger Markups hilfreich
- Gestaltungseffekte in anderen Dokumenten sind so besser nachvollziehbar!
- "HTML-Quelle" eines Dokumentes anschauen:
z.B. im Web-Browser Firefox: über Web-Entwickler -> Seitenquelltext . . .
Das HTML-Grundgerüst
- grundsätzlicher Aufbau eines jeden Web-Dokumentes
- wichtig, damit Dokument vom Web-Browser korrekt angezeigt wird
- wird von den meisten Web-Editoren, CMS usw. automatisch erzeugt
HTML: Beginn/Ende eines Web-Dokumentes<HTML>
<HEAD>
<TITLE> . . . </TITLE>
</HEAD>
<BODY>
. . .
</BODY>
</HTML>
HEAD: Dokument-Header: allgemeine Informationen über das Dokument
TITLE: Dokumenttitel
BODY: eigentliches Dokument
Dokument-Header
- Informationen über das Dokument (=Metainformationen) festlegbar
- Beispiele: Autor, Titel, Schlüsselwörter
- nicht im Web-Browser angezeigt!
Dokument-Titel
| <TITLE> Dokument-Kurzbeschreibung </TITLE> |
Der Dokumenttitel soll das Dokument (kurz) charakterisieren; er wird
- in der Titelleiste des Web-Browsers angezeigt
- beim Setzen von Lesezeichen (Bookmarks) für deren Bezeichnung verwendet
- in der Liste bereits besuchter Web-Seiten im Browser aufgeführt
- i.a. beim Drucken der Web-Seite in die Kopf- und Fußzeile gesetzt
- von Suchmaschinen gelesen und in der Ergebnisübersicht angezeigt.
Meta-Informationen
-
Angaben zum Dokument bzw. Anweisungen zur Handhabung des Dokumentes
| <META name="description|author|keywords" content="Inhalt"> bzw. <META http_equiv="equiv_name" content="Inhalt"> |
- Kurzbeschreibung (description)
- Autor (author)
- Schlüsselwörter (keywords)
- http_equiv-Attribut: sehr vielfältige Möglichkeiten
Hinweis: Korrekte Meta-Angaben vor allem für keywords und description verbessern die Trefferquote bei Suchmaschinen!
Beispiel
| <HEAD> <TITLE>Rezept Nr. 1: Sächsische Quarkkeulchen</TITLE> <META name="author" content="Steffen Brose"> <META name="keywords" content="Rezept, Sachsen, Kochen, Ernährung"> </HEAD> |
 |
M: Format: Seitentitel und -einstellungen... |
 |
M: Datei: Eigenschaften -> Beschreibung |
Dokument-Body
- eigentliches Dokument, wie es im Web-Browser angezeigt wird
- dokumentweite Einstellungen per Style Sheets festlegen -> weitaus mehr Möglichkeiten!
- umfasst z.B. Hintergrundbild, -farbe, Farbe der Hyperlinks eines Dokumentes
|
Übung Erstellen des ersten Dokumentes als Musterdatei:
|
