Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- htmlcss:html4 [04.10.2010 14:15] – Frank Schiebel
+++ htmlcss:html4 [30.08.2014 14:26] (aktuell) – gelöscht Stefan Gaum
@@ Zeile 1: / Zeile 1: @@
-~~SLIDESHOW~~
-[[htmlcss:html3|HTML/CSS Lektion 3]]
-====== HTML/CSS Lektion 4 ======
-Um weitere Tags und Attribute in HTML verstehen zu können, ist es nun notwendig, einen ersten kleinen Einblick in CSS zu bekommen.
-Für die Internetseite http://www.csszengarden.com/tr/deutsch/ wurden mit CSS verschiedene Layouts geschaffen, dabei bleibt der Inhalt immer derselbe.
-===== Was ist CSS ? =====
-**C**ascading **S**tyle **S**heets
-Während man in HTML nur die Bedeutung einzelner Abschnitte mit ihren Inhalten auszeichnet, wird mit CSS das Layout einer Seite verwirklicht. Es handelt sich allerdings nur um einen Layoutwunsch bzw. Layoutvorschlag. Wie der jeweilige Browser das Ergebnis anzeigt, hängt ganz von der verwendeten Software des Benutzers ab.
-Man kann CSS-Befehle entweder in die HTML-Datei einbinden oder, was üblich ist, in eine gesonderte CSS-Datei auslagern, auf die in der HTML-Datei verwiesen wird.
-  <h1>
-===== 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 unten
-===== Übung =====
-{{:htmlcss:work_64.png  |}}
-Gehe auf http://fwpf-webdesign.de/css und lies dir die //Grundlagen// zu CSS durch. Bearbeite dabei folgende Fragen/Aufgabe((Cut'n'Paste ist verboten!)):
-  - Erkläre den Aufbau des ''style''-Attributs?
-  - Wo und wie können ''style''-Elemente definiert werden?
-  - Was ist eine Deklaration?
-  - Beschreibe den Aufbau eines Deklarationsblocks in CSS.
-  - Wie lautet der Befehl, der eine externe css-Datei in eine html-Datei einbindet?
-  - Lege eine layout.css-Datei an, in der nur für die h1-Überschrift eine hellblaue (lightblue) Hintergrundfarbe vorgesehen wird.
-  - Binde die css-Datei in deine Startseite ein und überprüfe dein Ergebnis.
-===== gruppierende Elemente =====
-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>
-===== Selektoren -1- =====
-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:
-   <p> ein Text mit <span class="textmarkergelb">Textmarker</span> markiert.</p>
-gleichbedeutend mit
-   <p> ein Text mit <span style="background-color:yellow;">Textmarker</span> markiert.</p>
-===== Übung =====
-{{:htmlcss:work_64.png  |}}
-Nimm den Quellcode aus dem [[http://ernest.aeg-reutlingen.de/~gaum/bsptextds3.html|Textbeispiel]] bearbeite folgende Aufgaben:
-  - Ersetze die ''style''-Anweisung im ''head'' durch einen Link auf eine von dir erstellte   css-Datei, übernehme den vorgegebenen Deklarationsblock zum Seitenbereich.
-  - Erstelle selbst einige Selektoren inklusive Deklarationsblock, so dass du die Textabschnitte hellgrün(lightgreen) und hellrot(lightred) einfärben kannst -> beachte, dass du die Abschnitte ggf. neu gruppieren musst.
-  - Verwende nun auch den SPAN-Tag und markiere wichtige Textpassagen mit Textmarker (andere Farbe als die Hintergrundfarbe des Textes).