Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

14.2 HTML und eine kleine Prise CSS

Es gibt wie immer viele HTML-Wege zum Ziel, aber das folgende Beispiel ist einfach und stabil.

ToDo: HTML und Basis-CSS für die Galerie erstellen
  1. Kopieren Sie die Grafiken landschaft01.jpg und landschaft02.jpg in den Übungsordner.
  2. Kopieren Sie die Datei galerie_basis.html aus dem Basisordner für diesen Abschnitt in den Übungsordner.
  3. Fügen Sie in den Body der Webseite folgendes HTML ein:
    <h2>Die Galerie</h2>
    <div class="galerie">
    <img src="landschaft01.jpg" width="203" height="180" alt="Von Bäumen umstandener See, in dem sich Wolken spiegeln" />
    <h3>Landschaftsbild 01</h3>
    <p>Lorem ipsum dolor sit amet, ...</p>
    </div> <!-- Ende .galerie 01 -->
    <div class="galerie">
    <img src="landschaft02.jpg" width="203" height="180" alt="Weite Grasfläche mit Wolken und Halmen im Vordergrund" />
    <h3>Landschaftsbild 02</h3>
    <p>Lorem ipsum dolor sit amet, ...</p>
    </div> <!-- Ende .galerie 02 -->
    <p>Alle Fotos von <a href="http://pixelio.de/">pixelio.de</a></p>
  4. Erstellen Sie im Head von galerie_basis.html einen Style-Block und fügen Sie dort das folgende CSS ein:
    <style type="text/css">
    body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: small;
    }
    h2 { font-size: 130%; }
    h3 {
      font-size: 110%;
      margin: 0 0 1em 0;
    }
    div.galerie {
      background-color: #eee;
      width: 500px;
      padding: 10px;
      padding-top: 25px;
      border: 1px solid black;
      margin: 0 3px 3px 0;
    }
    </style>
  5. Speichern Sie die Webseite und betrachten Sie sie im Browser.

Und so sieht die Übungsseite momentan im Browser aus:

Abbildung 14.2: HTML und Basis- CSS für die Bildergalerie
Abbildung 14.2: HTML und Basis- CSS für die Bildergalerie

Jetzt müssen »nur noch« die Überschrift und der Text neben die Grafik.