Hinweis

Aufgrund technischer Probleme ist unser Forum im Moment nicht erreichbar. Wir bitten um Verständnis und hoffen auf Beseitigung der Schwierigkeiten bis spätestens Montag, 25.6. Unser Blog und unser Wiki sind nach wie vor auch im Moment verfügbar.

HTML/Tutorials/Einstieg/Kapitel7

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Jetzt machen wir endlich mal was, damit unsere HTML-Seiten ein bisschen ansehnlicher werden. Allerdings ist dafür nicht HTML zuständig, sondern eine andere Technik namens Cascading Style Sheets, kurz CSS. Auch dazu finden Sie hier bei SELFHTML eine enorme Menge an Informationen; als Einstieg bietet sich z.B. Warum Layouts mit CSS? im Einstieg in CSS-Tutorial an.

Gestaltung mit CSS

Unser erster Versuch: Schriftgestaltung

Zur Einstimmung können wir ja ein wenig mit der Schrift herumspielen. Nehmen wir nochmal die Startseite unserer Schreinerei:

Beispiel: für die Startseite der Schreinerei Meier (zur Erinnerung)
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Schreinerei Meier, Dingenskirchen</title>
  </head>
  <body>
    <nav>
    <ul>
      <li>Startseite</li>
      <li><a href="html/preise.html">Unsere Preise</a></li>
      <li><a href="html/bilder.html">Bilder von unseren Produkten</a></li>
    </ul>
    </nav>
    <h1>Willkommen bei der Schreinerei Meier im Internet!</h1>
    <p>Ma illo vostre instruction sed, sed appellate secundarimente o, …</p>
    <h2>Unsere Leistungen:</h2>
    <ul>
      <li>Möbel nach Ihren Wünschen
        <ul>
          <li>Küchenmöbel</li>
          <li>Regale und Schrankwände</li>
          <li>Badezimmermöbel</li>
        </ul>
      </li>
      <li>Haustüren</li>
      <li>Gartenzäune</li>
      <li>Reparaturen</li>
    </ul>
     <p>Web de major tentation primarimente, …</p>
     <p>Libro anglese denomination duo e …</p>
  </body>
</html>

CSS: Das Grundprinzip

Wenn wir etwas am Aussehen einer Seite verändern wollen, muss der Browser wissen:

  • Welches HTML-Element wollen wir aussehensmäßig verändern?
  • Was an diesem Element (welche Eigenschaft) wollen wir verändern? (Position, Farbe, Hintergrundfarbe, Textgröße...?)
  • Wie konkret soll es letztendlich aussehen (welchen Wert weisen wir der Eigenschaft zu)?

z.B.

  • Position: 2 cm weiter links;
  • Farbe: rot;
  • Hintergrundfarbe: schwarz;
  • Textgröße: doppelt so groß wie normal

usw.

Jetzt wird's hart: Wir nehmen eine CSS-Anweisung auseinander

Und mit CSS geht das z.B. so:

Beispiel: für eine einfache CSS-Datei
p { font-size: 1.5em; }

Das p ganz am Anfang steht einfach für das p-Element aus HTML. Die geschweiften Klammern dahinter sind eine CSS-typische Sache. Und da drin steht dann, was wir wie dargestellt haben wollen.

font-size heißt „Schriftgröße“. 1.5 steht für „1,5“ (Eins Komma Fünf). An diese Zahlenschreibweise müssen Sie sich bei CSS gewöhnen. Wie so viele Computersachen stammt auch CSS aus den USA, und dort verwendet man den Punkt als Dezimaltrennzeichen, und nicht das Komma wie bei uns.

Das em bezeichnet eine Einheit, die häufig bei der Angabe von Schriftgrößen verwendet wird. Unser Schreinermeister kennt bestimmt so Einheiten wie Zentimeter oder vielleicht auch Zoll, aber em orientiert sich etwas abstrakter an der „Standard-Schriftgröße“ im Browser. In jedem Browser ist eine Standard-Schriftgröße entweder voreingestellt oder vom Benutzer an seine persönlichen Vorlieben angepasst. Und mit 1.5em sagen wir, die Schrift soll eineinhalb mal so groß wie diese Standard-Schriftgröße sein.

Auf einem kleinen Smartphone-Display ist sicherlich eine andere Schriftgröße sinnvoll als auf einem PC mit einem 19-Zoll-Monitor. Deswegen wird auf einem Smartphone bestimmt auch eine andere Standard-Schriftgröße eingestellt sein als auf einem normalen PC. Und ein Benutzer, der schlecht sehen kann, stellt sich die Standard-Schriftgröße auf einen ihm angenehmen Wert ein. Daher gilt es im Webdesign allgemein als guter Stil, sich nicht mit Pixel- oder gar Zentimeter-Angaben oder so darüber hinwegzusetzen, sondern Schriftgrößen mit em festzulegen und sich somit an der Standard-Schriftgröße zu orientieren. Siehe dazu auch relative Längenmaße.

Zusammenfassung: So baut man eine CSS-Anweisung zusammen

Also: Erst kommt das Element, das wir irgendwie aussehensmäßig festlegen wollen (in der Fachsprache: Selektor). Dann eine öffnende geschweifte Klammer, dann die Eigenschaft, die wir ändern wollen (im Beispiel die Schriftgröße), dann ein Doppelpunkt, dann das eigentlich Entscheidende: Wie soll's denn nun dargestellt werden? (In unserem Fall: eineinhalb mal so groß wie die Standard-Schriftgröße). Fachsprachlich heißt das dann Wert. Danach schreiben wir noch ein Semikolon, und mit der schließenden geschweiften Klammer endet es dann. Das Ganze kann nach Wunsch noch variiert werden; die Details finden Sie bei Bedarf unter im Einstieg in CSS-Tutorial. Das Schema ist jedenfalls grundsätzlich:

Selektor { Eigenschaft: Wert; }

Falls Sie sich schon jetzt auf Entdeckungsreise begeben wollen, was man mit CSS alles anstellen kann (und glauben Sie uns: das ist unglaublich viel), können Sie ja mal einen kurzen Blick auf CSS/Eigenschaften wagen – kommen Sie danach aber bitte wieder zurück, um hier weiterzulesen.

Genug Theorie: Schreiten wir zur Tat!

Erstellen Sie also bitte eine neue Datei, schreiben Sie die folgende Zeile da rein und speichern Sie sie unter dem Namen formate.css im gleichen Verzeichnis wie unsere Datei index.html ab.

Beispiel: für eine einfache CSS-Datei
p { font-size: 1.5em; }

Wie man HTML und CSS miteinander verbindet

Nun müssen wir dem Browser wiederum sagen – wenn er die HTML-Datei index.html anzeigt – dass er doch bitte auch die Datei formate.css berücksichtigen soll (wir finden es vielleicht naheliegend, dass die beiden Dateien irgendwie zusammengehören, aber der Browser nicht).

Dafür müssen wir nun wieder einmal die Startseite der Schreinerei Meier, die Datei index.html, ein klein wenig anpassen:

Beispiel: für die Startseite der Schreinerei Meier mit einer CSS-Datei ansehen …
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Schreinerei Meier, Dingenskirchen</title>
    <link rel="stylesheet" href="formate.css">
  </head>
  <body>
    <nav>
    <ul>
      <li>Startseite</li>
      <li><a href="html/preise.html">Unsere Preise</a></li>
      <li><a href="html/bilder.html">Bilder von unseren Produkten</a></li>
    </ul>
    </nav>
    <h1>Willkommen bei der Schreinerei Meier im Internet!</h1>
    <p>Ma illo vostre instruction sed, …</p>
    <h2>Unsere Leistungen:</h2>
    <ul>
      <li>Möbel nach Ihren Wünschen
        <ul>
          <li>Küchenmöbel</li>
          <li>Regale und Schrankwände</li>
          <li>Badezimmermöbel</li>
        </ul>
      </li>
      <li>Haustüren</li>
      <li>Gartenzäune</li>
      <li>Reparaturen</li>
    </ul>
     <p>Web de major tentation primarimente, …</p>
     <p>Libro anglese denomination duo e …</p>
  </body>
</html>

Direkt unter dem Titel findet sich jetzt die Zeile:

Beispiel: für die Einbindung einer CSS-Datei in eine HTML-Datei
<link rel="stylesheet" href="formate.css">

Endlich alles vorbereitet! Probieren wir's aus!

Diese Zeile sagt halt dem Browser, dass er in dieser HTML-Datei die CSS-Anweisungen aus der Datei formate.css auf unsere HTML-Datei anwenden soll. Genauere Informationen dazu finden Sie unter CSS/Einstieg_in_CSS#Stylesheets_einbinden. Für unsere Zwecke reicht die obige Zeile allerdings erstmal vollkommen aus.

Abgesehen von dieser einen Zeile ist die Startseite der Schreinerei Meier absolut unverändert geblieben!

Wenn Sie sich einmal ansehen, wie unsere HTML-Seite jetzt im Browser dargestellt wird, dann sehen Sie, dass bei allen p-Elementen (Absätzen), die in der HTML-Datei vorkommen, die Schrift größer ist. Zugegeben, noch sieht die Seite nicht allzu berauschend aus, aber es ist auch nur ein erster Versuch!

Eine CSS-Datei für alle HTML-Dateien benutzen? Klar doch, das ist möglich (und sinnvoll)!

Bevor wir uns daran machen, das Design auszufeilen, sollten wir an unsere anderen beiden HTML-Seiten denken, die wir bereits erstellt haben. Wenn wir die Schrift auf der Startseite vergrößert haben, sollte dies auch auf den anderen Webseiten der Schreinerei der Fall sein, finden Sie nicht auch?

Das geht ganz einfach, indem wir die oben gezeigte Zeile pfadmäßig (zur Erinnerung: Kapitel 6 - Pfadangaben) ein klein wenig anpassen:

Beispiel: für die Einbindung einer CSS-Datei in eine HTML-Datei mit angepasster Pfadangabe
<link rel="stylesheet" href="../formate.css">

und dann in die beiden HTML-Dateien einbauen (und in jede folgende, die Sie vielleicht noch hinzufügen mögen). Dieses Stylesheet legt nun das Aussehen zentral für alle Webseiten fest.

Unsere Beispielseiten mit eingebundener CSS-Datei

Die Produktseite mit den Bildern

Beispiel: für die Bilderseite mit eingebundener CSS-Datei ansehen …
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Schreinerei Meier, Produkte</title>
    <link rel="stylesheet" href="../formate.css">
  </head>
  <body>
    <nav>
    <ul>
      <li><a href="../index.html">Startseite</a></li>
      <li><a href="preise.html">Unsere Preise</a></li>
      <li>Bilder von unseren Produkten</li>
    </ul>
    </nav>
    <h1>Unsere Produkte</h1>
    <p>Lorem ipsum dolor sit amet, …</p>
    <p>
      <img src="../img/bett.jpg" alt="Bett">
      <img src="../img/kiefer.jpg" alt="Kiefer">
      <img src="../img/schaukelstuhl.jpg" alt="Schaukelstuhl">
      <img src="../img/schreibtisch.jpg" alt="Schreibtisch">
    </p>
  </body>
</html>

Die Preistabelle

Beispiel: für die Preistabelle mit eingebundener CSS-Datei ansehen …
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Schreinerei Meier, Preistabelle</title>
    <link rel="stylesheet" href="../formate.css">
  </head>
  <body>
    <nav>
    <ul>
      <li><a href="../index.html">Startseite</a></li>
      <li>Unsere Preise</li>
      <li><a href="bilder.html">Bilder von unseren Produkten</a></li>
    </ul>
    </nav>
    <h1>Unsere nur zu Beispielzwecken erdachten Phantasie-Preise</h1>
    <table>
      <tr>
        <th>Produkt</th>
        <th>Preis</th>
      </tr>
      <tr>
        <td>Tisch</td>
        <td>50 €</td>
      </tr>
      <tr>
        <td>Schrank</td>
        <td>70 €</td>
      </tr>
      <tr>
        <td>Bett</td>
        <td>100 €</td>
      </tr>
    </table>
  </body>
</html>

Bitte wundern Sie sich nicht, dass die HTML-Seite mit der Preistabelle bislang noch nicht anders aussieht als bisher: Das liegt einfach daran, dass darin überhaupt kein p-Element enthalten ist!

Nun sollten wir also schleunigst was machen, damit auch die Seite mit der Preistabelle bald verschönert wird. Blättern Sie bitte um, wir haben viel zu tun!