Lektion 6: DIVs als gruppierende Elemente

Gruppierende Elemente in HTML

Um Bereiche in HTML zu begrenzen, bzw. mehrere Elemente zusammen zu fassen, werden die beiden Tags DIV und SPAN verwendet. Zusammen mit css-Elementen wird ihr Einsatz klar.

Teste folgende Beispiele selbst aus, um zu erkennen, wie div und span funktionieren. Dir wird dann sicher auch bewusst, was mit Block-Element bzw. mit Inline-Element gemeint ist.

Beispiel: Block-Element DIV

 <div style="background-color:lightgrey;">
   <h1> Überschrift </h1>
   <p> Textabsatz </p>
 </div>

Beispiel: Inline-Element SPAN

 <p> ein Text mit <span style="background-color:yellow;">Textmarker</span> markiert.</p>

Es ist allerdings unschön, die style-Attribute in HTML zu verwenden, da es dem Prinzip der Trennung von Inhalt und Layout widerspricht. Vgl. => Übung in Lektion 5

Im Folgenden werden wir style nicht weiter verwenden und mit den nun vorgestellten Attributen id und class arbeiten.

Wichtige Attribute in HTML ...

…zur Layoutgestaltung mit CSS:

id
- identifiziert ein Element eindeutig und darf deswegen nur einmal pro Seite verwendet werden
- Bsp.: id=„header“ oder id=„foot“
class
- klassifiziert Elemente, es darf mehrfach verwendet werden
- ein Element kann durch mehrere Klassen ausgezeichnet werden
- Bsp.: class=„anmerkung“ oder class=„topmenue“ oder beide class=„topmenue anmerkung“
style → siehe Übung in => Übung in Lektion 5

Selektoren im CSS

Mit Selektoren werden css-Angaben zugeordnet. Die Deklarationen eines Selektors stehen in einer geschweiften Klammer.

 p {
   background-color:lightred;
   text-align:center;
   font-size:80%;   
 }

→ alle Abschnitte werden mit hellrotem Hintergrund, zentrierter Ausrichtung und Textgröße 80% dargestellt:

Man kann auch neue Selektoren definieren:

ein id-Selektor wird mit einer Raute # eingeleitet:

 #topmenue {
   color: darkred;
   text-align:center;
   font-size:150%;
 }

ein class-Selektor wird einem Punkt . eingeleitet:

 .textmarkergelb {
   background-color:yellow;
 }

Mögliche Anwendung (externes CSS):

 <p> ein Text mit <span class="textmarkergelb">Textmarker</span> markiert.</p>

gleichbedeutend mit der unschönen Variante

 <p> ein Text mit <span style="background-color:yellow;">Textmarker</span> markiert.</p>

welches in HTML definiert wird und das Layout vom Inhalt nicht trennt.

Übung

Nimm den Quellcode aus dem Textbeispiel bearbeite folgende Aufgaben:

Betrachte den Quelltext (rechte Maustaste „Seitenquelltext anzeigen“) der Beispielseite in deinem Browser und speichere den Inhalt in einer neuen HTML-Datei.
Ersetze die style-Anweisung im head durch einen Link auf eine von dir erstellte CSS-Datei, übernehme den vorgegebenen Deklarationsblock zum Seitenbereich.
Ersetze auch die style-Anweisungen im body mit eigens erstellten Selektoren.
Erstelle weitere Selektoren inklusive Deklarationsblock, so dass du die Textabschnitte hellgrün(lightgreen) und orangerot(orangered) einfärben kannst → beachte, dass du die Abschnitte ggf. neu gruppieren musst und die Farben im Hexacode schreibst.
Verwende nun auch den SPAN-Tag und markiere wichtige Textpassagen mit Textmarker (andere Farbe als die Hintergrundfarbe des Textes).

=> Abschlussübung HTML
=> Übersicht: HTML und CSS