HTML / CSS - Praxistutorial 1 - Inhalt
1. Die Abschnitte
So, was nun kommt, stellt keine große Herausforderung dar, und wird deshalb auch ziemlich schnell abgehakt. Wir
benötigen eine Überschrift, einen Untertitel, ein bisschen Text mit Aufzählung sowie zwei Bilder inkl. Beschreibung.
Kopiert euch folgenden Code in der urquhart.htm
zwischen das inhalt
-Div.
<h1>Urquhart Castle</h1>
<h2>Ruine am Loch Ness</h2>
<p>
Malerische Trümmerlandschaft an den Ufern des Loch Ness bla bla.
Das dumme Nessie-Monster, viele Betrunkene, irgendein dummer
Saurier blubb blubber.
</p>
<h3>Geschichte</h3>
<ul>
<li>1230 -
Alan Durward wird Lord von Urquhart</li>
<li>1275 -
König Edward I. von England nimmt die Burg in Besitz</li>
<li>1297 -
Die Burg wird von den Schotten zurückgewonnen.</li>
<li>1303 -
Die Burg wird von König Edward I. von England erobert dann
wieder von Robert the Bruce (der aus Braveheart).</li>
<li>14. Jhdt - 16. Jhdt. -
Die Burg wechselt häufig den Besitzer, da
verschiedene Clans darum kämpfen, insbesondere
die MacDonalds</li>
<li>1692 -
Die letzte Besatzung sucht das Weite, nachdem die Burg
nahezu vollständig zerstört worden ist</li>
</ul>
<p>
Hach die schöne Landschaft, und die vielen Schafe, ständig hat
man eins am Kühlergrill kleben.
</p>
<p>
Der Sonnenschein. Hab mir im September(!) dort den schlimmsten
Sonnenbrand seit Jahren zugezogen. Wer denkt auch daran, um
diese Jahreszeit Sonnencreme mitzunehmen, nach Schottland!
</p>
2. Die Überschriften
Wenn ihr euch nun die Seite anseht, werdet ihr feststellen, dass es wieder mal browserabhängige Darstellungsunterschiede gibt. Also nehmen wir uns mal die Schriftgrößen, -farben und den Außenabstand vor.
h1
{
font-size: 14px;
margin-top: 0px;
margin-bottom: 5px;
color: #002274;
}
h2
{
font-size: 13px;
margin-top: 0px;
margin-bottom: 5px;
color: #002274;
}
h3
{
font-size: 12px;
margin-top: 0px;
margin-bottom: 5px;
}
3. Die Liste
Könnt ihr euch noch an das erinnern, was ihr im Punkt "Untermenü" zum Thema Listen gelernt habt? Ich hoffe schon, denn einiges werden wir jetzt auch hier anwenden.
.inhalt ul
{
margin-top: 0px;
margin-bottom: 0px;
}
.inhalt li
{
margin-left: -25px;
}
4. Die Absätze
Auch hier interessieren wir uns nur für den Außenabstand. Diesmal reicht eine Definition über den Typen-Selektor.
p
{
margin-top: 5px;
margin-bottom: 5px;
}
5. Die Bilder
Jetzt bauen wir unser erstes Bild ein. Kopiert den folgenden Code oberhalb des <h3>...</h3>
in die
urquhart.htm
.
<p>
<img src="../../pics/schloesser/loch_ness.jpg"
width="250" height="250" alt="Loch Ness">
Loch Ness mit Urquhart Castle vom Boot aus gesehen
</p>
Warum steht der Text jetzt so komisch neben dem Bild und bricht dann irgendwann um? Ganz einfach, beide Elemente dieses Absatzes sind vom Typ Inline, das heißt, das das Bild und der Text in einer Zeile stehen, ausgerichtet an der Unterkante des Bildes. Reicht der Platz in der Breite nicht aus, erfolgt der übliche Zeilenumbruch. So, und wie bekommen wir jetzt den Text unter das Bild? Genau, indem wir aus dem Inline-Element Bild ein Block-Element machen.
.inhalt img
{
display: block;
}
Mann könnte jetzt noch den Abstand zueinander ändern:
.inhalt img
{
display: block;
margin-bottom: 5px;
}
Und dem Absatz eine zusätzliche Klasse verordnen mit besonderer Schriftfarbe und weiteren Abstandsdefinitionen.
.bild
{
color: #555;
margin-bottom: 10px;
}
...
<p class="bild">
Und genau das macht ihr jetzt mal mit dem Bild urquhart.jpg
und dem Text "Urquart Castle vom Turm aus gesehen".
Dabei werde ich euch nicht helfen!
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt