Weitere Infos
Sie lesen:
LB1 (2009)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
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
- Kopieren Sie die Grafiken landschaft01.jpg und landschaft02.jpg in den Übungsordner.
- Kopieren Sie die Datei galerie_basis.html aus dem Basisordner für diesen Abschnitt in den Übungsordner.
- 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> - 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> - Speichern Sie die Webseite und betrachten Sie sie im Browser.
Und so sieht die Übungsseite momentan im Browser aus:
Jetzt müssen »nur noch« die Überschrift und der Text neben die Grafik.