Hauptmenü

Untermenü

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-Monsterviele Betrunkeneirgendein dummer
  Saurier blubb blubber.
</p>
<h3>Geschichte</h3>
<ul>
  <li>1230 -
      Alan Durward wird Lord von Urquhart</li>
  <li>1275 -
      König Edward Ivon 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 Ivon England erobert dann
      wieder von Robert the Bruce (der aus Braveheart).</li>
  <li>14. Jhdt 16. Jhdt. -
      Die Burg wechselt häufig den Besitzerda
      verschiedene Clans darum kämpfeninsbesondere
      die MacDonalds</li>
  <li>1692 -
      Die letzte Besatzung sucht das Weitenachdem die Burg
      nahezu vollständig zerstört worden ist</li>
</ul>
<p>
  Hach die schöne Landschaftund die vielen Schafeständig hat
  man eins am Kühlergrill kleben.
</p>
<p>
  Der SonnenscheinHab mir im September(!) dort den schlimmsten
  Sonnenbrand seit  Jahren zugezogenWer denkt auch daranum
  diese Jahreszeit Sonnencreme mitzunehmennach 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-size14px;
  margin-top0px;
  margin-bottom5px;
  color#002274;
}

h2
{
  font-size13px;
  margin-top0px;
  margin-bottom5px;
  color#002274;
}

h3
{
  font-size12px;
  margin-top0px;
  margin-bottom5px;
}

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-top0px;
  margin-bottom0px;
}

.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-top5px;
  margin-bottom5px;
}

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
{
  displayblock;
}

Mann könnte jetzt noch den Abstand zueinander ändern:


.inhalt img
{
  displayblock;
  margin-bottom5px;
}

Und dem Absatz eine zusätzliche Klasse verordnen mit besonderer Schriftfarbe und weiteren Abstandsdefinitionen.


.bild
{
  color#555;
  margin-bottom10px;
}
...
<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