Erste Schritte

< 1 >  < 2 >

Wie soll die Seite farblich aussehen?

Eine weiße Seite ist meist langweilig ;) - also sollte ein farbiger Hintergrund her,
aber bitte so, daß alles noch lesbar ist. Am besten legt man auch gleich die Farben für
den Text, die Links und die besuchten Links (VLINK=visited link) fest.
Dazu wird der einfache <body>-Tag erweitert:
z.B. <BODY BGCOLOR="#FFFAF0" TEXT="#000000" LINK="#0000ff" VLINK="#551a8b">

Alternativ kann man auch noch ein Hintergrundbild angeben. Dazu fügt man
in den Body-Tag noch den Zusatz background="beispiel.jpg" ein. Dieses Bild
wird dann als Hintergrund gekachelt.

Statt der Farbcodes kann man auch einige Farben ausgeschrieben angeben:

  • #ffffff oder white ist weiƟ
  • #000000 oder black ist schwarz
  • #ff0000 oder red ist rot
  • #c0c0c0 oder silver ist hellgrau
  • #800040 ist dunkles bordeaux - ?
  • #0099ff oder aqua ist hellblau
  • #0000a0 oder navy ist dunkelblau
  • weitere: blue (leuchtend blau), yellow, maroon (dunkelbrunlich), lime (hellgrn), teal (graugrn), fuchsia (pink)

    Eine schöne Farb-Tabelle findet Ihr übrigens auf der Seite von Birgit Bachmann.

    Die Tags

    Ein Tag kommt selten alleine :)
    Fast jeder Tag hat auch einen End-Tag, der mit einem Schrägstrich beginnt.

  • Einzel-Tags sind z.B. <p> für einen Absatz und <br> für eine Zeilenschaltung.
  • Fett hervorgehobenes wird von <b> und </b> eingeschlossen, Kursives von <i> und </i>.
  • Eine Überschrift kann man mit den Tags <h1></h1> bis <h6></h6> größenmäßig formatieren.
  • Ein Link zu einer anderen Seite hat immer den Aufbau <a href="Seitenadresse">Beschreibung</a>.
  • Ein Bild wird eingefügt mit <img src="Bildadresse" ALT=Bildbeschreibung>.
  • Soll in jedem Browser und nicht nur im IE die Bildbeschreibung als "Bubble-Help" beim Zeigen auf das Bild erscheinen,
    muß nach dem ALT (das eigentlich dafür da ist, wenn das Bild nicht geladen ist) noch TITLE=Bildbeschreibung
    hinzugefügt werden.
  • Damit ein Bild schneller geladen wird, sollte außerdem noch WIDTH="Bildbreite in Pixeln" und HEIGHT="Bildhöhe" angegeben werden.
  • Soll ein Bild mit einem Link unterlegt werden, erstellt man einen normalen Link und gibt statt der Beschreibung den Bild-Tag ein.
  • Die Schrift

    Daß man Schrift fett oder kursiv darstellen und Überschriftengrößen benutzen kann, ist natürlich nicht die
    einzige Schrift-Formatierungsmöglichkeit :)

    Es gibt noch den <font>-Tag, mit dem man Größe, Farbe und Schriftfamilie festlegen kann:
    z.B. <font face=verdana size=+2 color=red> so :) </font>

    Der Font-Tag ist allerdings veraltet, zur neuen HTML4-Spezifikation gehören sog. Style Sheets.

    Wenn wir Schrift nach dem alten Prinzip mit dem Font-Tag formatieren, müssen wir bei jedem neu zu formatierenden
    Wort/Satz/Absatz den ganzen Bandwurm wieder eingeben, auch wenn es sich um die gleiche Formatierung handelt.
    Mit Style Sheets legt man einmal im Seitenkopf die Definitionen fest und benutzt dann nur noch verkürzte Tags.
    Außerdem können mit dem Font-Tag Schriftgrößen nur relativ angegeben werden und werden je nach Browserinterpretation
    anders dargestellt. Style Sheets ermöglichen die exakte Schriftgrößenangabe.

    Wenn folgende Definition im Head eingegeben wird, wird alles, was danach in <H1></H1> eingeschlossen ist, in dieser
    Schriftart, -farbe, -größe, -stärke und Ausrichtung dargestellt.

    <STYLE type="text/css">
    <!--
    H1 {
    font-size: 16pt;
    font-family: "comic", "arial", "verdana", "helvetica";
    color: maroon;
    font-weight: bold;

    (möglich sind bold oder normal)

    text-align: left;

    (möglich sind left, right, center, justify)

    }
    -->
    </STYLE>

    Alternativ kann man die Style-Definitionen auch in eine externe Datei style.css eingeben und im Head
    der einzelnen Webseiten nur darauf verweisen: <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css">
    Im style.css läßt man einfach <STYLE> und </STYLE> sowie die Kommentarzeichen weg.
    Das ist noch weniger Arbeit :)

    Anmerkung: Die Seite kann vom Seitenbesucher nur in der angegebenen Schriftart gesehen werden,
    wenn er die Schrift selbst auf dem Rechner hat. Gibt man bei font-family mehrere Schriftarten an, verwendet
    der Browser die 1. Schriftart davon, die er auf dem Rechner des Besuchers findet.

    < 1 >  < 2 >


    <Startpage>  <Basics>  <Tips>  <Links>  <Hintergründe>  <sonstige Elemente>  <Button-Sets>  <Buchstaben-Sets>