Gestalten-web
Start Zurück Weiter Ende Index

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

Ausgewählte HTML-Sprachelemente

Aus der Vielzahl der Möglichkeiten, mit HTML Dokumente zu erstellen, sollen hier einige exemplarisch vorgestellt werden.

Überschriften

<H1> Mein erstes Web-Dokument! </H1> Mein erstes Web-Dokument!
<H4> Eine mittelgrosse Überschrift </H4> Eine mittelgroße Überschrift
<H6> Etwas Klitzekleines zum Schluss. </H6> Etwas Klitzekleines zum Schluss.

Erläuterung:
  • 6 verschiedene Skalierungen
  • <H1> wird mit der höchsten, <H6> mit der niedrigsten verfügbaren Dicke und Größe dargestellt
uS: Absatzformat wählen -> Überschrift n

uS: Vorlage anwenden -> Überschrift bzw. Überschrift 1

Hypertextlinks
  • Synonyme: Hyperlinks, Links, Verweise, Referenzen, . . .
  • Anzahl und Plazierung der Links hat großen Einfluss auf Lesbarkeit des Dokumentes
<A href="http://www.eplus.de" title="zur E-Plus-Homepage"> Homepage von E-Plus</A> Homepage von E-Plus                 
<A href="mailto:support@hrz.tu-chemnitz.de" title="E-Mail an URZ-Support schreiben">Email</A> Email                 

  • Hinweis: Bei mailto bitte keine persönliche E-Mail-Adresse angeben! - Spam-Gefahr!
    Ausweg: "Verschleiern" der E-Mail-Adresse - siehe Spam-Schutz für E-Mail-Adressen
Syntax allgemein:

<A href="url" title="kurzinfo"> Verweistext im Dokument </A>

Erläuterung:
  • URL enthält die Adresse der referenzierten Information
  • title-Attribut (optional) enthält eine beim Überstreichen mit der Maus eingeblendete Kurzinfo
Allgemeiner Aufbau eines URL:

protokoll:[//]ressource

Einbindung und Darstellung im Web-Browser:
  • der Verweistext enthält den Hyperlink
  • Darstellung: meist in blauer Schrift (änderbar)
  • Klick auf diese Stelle lädt als Nächstes die referenzierte Information in den Browser
  • auch Sound, Video u.a.m. werden auf diese Weise ins Dokument eingebunden!
  • Protokoll: meist http (für Web-Dokumente) oder mailto (für eine E-Mail-Adresse)
oS: Neuen Link einfügen, oder
M: Einfügen -> Link

oS: Hyperlink-Dialog, oder
M: Einfügen -> Hyperlink

(Animierte) Grafiken

  • Grafiken dienen z.B. der Illustration von Text, als Hyperlink (anstelle Verweistext), als Hintergrundbild
  • allgemeiner Hinweis: Grafiken anderer Web-Dokumente nicht kopieren, wenn Autor das verbietet - Copyright beachten!
  • empfohlene Grafikformate: GIF, JPEG oder PNG (Vorteil: "komprimierte" Speicherformate - sparen Platz und Ladezeit
<IMG src="http://www.tu-chemnitz.de/tu/logo/deutsch_home.gif" width=128 height=65 alt="Logo der TU Chemnitz"> Logo der TU Chemnitz

<IMG src="cup.gif" width=40 height=37 alt="A cup of coffee, please!"> A cup of coffee, please!

Syntax:
<IMG src="URL_der_Grafikdatei"> [width="x"] [height="y"] [alt="Textinformation"]>

Erläuterung:
  • src: Speicherort (URL) der Grafik
  • Angabe von Breite und Höhe der Grafik verkürzt deren Ladezeit
  • alt: verbaler Text, der bei nicht ladbarem Bild (alternativ) angezeigt wird
  • es gibt viele weitere Attribute!

Grafiken und Farben
  • farbliche Abstimmung der (Hintergrund-) Grafiken mit der Farbe der Schrift und vor allem der Hyperlinks!
  • Farben auch passend zum "Thema" der Website wählen
  • mehr zu Einsatz, Harmonie und Wirkung von Farben: siehe zum Beispiel www.metacolor.de
  • Farbtöne bestimmen bzw. herausfinden:
    Farbton eines Pixels auf Desktop bestimmen: z.B. mit RGB-Farbwert
    die meisten Web-Editoren oder CMS bieten eine Farbauswahl für Schrift
    → Farbton aussuchen; Hexcode einer Farbe dort einfach ablesbar!
Erstellen des ersten Dokumentes mit einigen der gezeigten Features zeigt:
HTML hat noch etliche "Grenzen", vor allem bezüglich Design!

Nützliche Links:

Start Zurück Weiter Ende Index

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

TUCaktuell