Gestalten-web
Start Zurück Weiter Ende Index

[ Start | Zurück | Weiter | Ende | Index ]

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

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

  • Angaben im Dokument-HEAD
  • (Angaben im BODY: später)
  • Abspeichern als Datei muster.html

Start Zurück Weiter Ende Index

[ Start | Zurück | Weiter | Ende | Index ]

TUCaktuell