Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- htmlcss:html_css_lektion_06 [30.08.2014 14:33] – Stefan Gaum
+++ htmlcss:html_css_lektion_06 [24.10.2014 13:24] (aktuell) – Stefan Gaum
@@ Zeile 1: / Zeile 1: @@
 ~~NOTOC~~
-[[htmlcss:html_css_lektion_05|=> Lektion 5: CSS Teil 1]]
+[[htmlcss:html_css_lektion_05|=> Lektion 5: Einführung in CSS]]
-====== Lektion 6: CSS Teil 2  ======
+====== Lektion 6: DIVs als gruppierende Elemente  ======
-===== Gruppierende Elemente in HTML =====
+Mit Hilfe von DIVs ist es möglich, mehrere Elemente zu einem Bereich zusammenzufügen. Es wird lediglich in einer neuen Zeile des Fließtextes begonnen. So ist der div-Container nicht nur zur Formatierung mit Hilfe von CSS gedacht.
-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.
+DIVs begrenzen also HTML-Bereiche. Die Kleine-Bruder-Version eines DIVs ist der SPAN. 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.
+{{  :work.png|}}
+===== Übung 8 =====
+  * 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>
@@ Zeile 19: / Zeile 20: @@
 **Beispiel: Inline-Element SPAN**
+   <p> ein Text mit <span style="background-color:yellow;">Textmarker</span> markiert.</p>
+<note important>Es ist allerdings unschön, die ''style''-Attribute in HTML zu verwenden, da es dem Prinzip der Trennung von Inhalt und Layout widerspricht. Vgl. [[htmlcss:html_css_lektion_05|=> Übung in Lektion 5]]</note>
-   <p> ein Text mit <span style="background-color:yellow;">Textmarker</span> markiert.</p>
+  * Speichere die Datei entsprechend ab, so dass du sie in der nächsten Lektion weiter verwenden kannst.
-<note important>Es ist allerdings unschön, die ''style''-Attribute in HTML zu verwenden, da es dem Prinzip der Trennung von Inhalt und Layout widerspricht. Vgl. [[htmlcss:html4|=> Übung in Lektion 4]]</note>
 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 [[htmlcss:html4|=> Lektion 4]]
-===== 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.
-{{  :htmlcss:work_64.png|}}
-===== Übung =====
-Nimm den Quellcode aus dem {{:htmlcss:bsptextds3.html|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 [[http://html-color-codes.info/webfarben_hexcodes/|Hexacode]] schreibst.
-  - Verwende nun auch den SPAN-Tag und markiere wichtige Textpassagen mit Textmarker (andere Farbe als die Hintergrundfarbe des Textes).
 ----
-[[htmlcss:html_css_lektion_z1|=> Abschlussübung HTML]]\\
+[[htmlcss:html_css_lektion_07|=> Lektion 7: Attribute in HTML sprechen Selektoren im CSS an]]\\
 [[htmlcss:start|=> Übersicht: HTML und CSS]]