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-Tag

  H1: Ü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> <HEAD> <TITLE> . . . </TITLE> </HEAD> <BODY> . . . </BODY> </HTML>

  HTML: Beginn/Ende eines Web-Dokumentes
  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

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

• 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

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