Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- htmlcss:html_css_lektion_06 [30.08.2014 14:37] – 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>
-   <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>
+  * Speichere die Datei entsprechend ab, so dass du sie in der nächsten Lektion weiter verwenden kannst.
 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:html_css_lektion_05|=> Ü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.
-{{  :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]]