Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Hinweis

Diese Website ist von 2009 und inhaltlich zum Teil nicht mehr aktuell.

Aktuell (2020)

Einstieg in HTML und CSS (Cover)

WordPress

Einstieg in WordPress (Cover)

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.