Informatikwiki

Albert Einstein Gymnasium Reutlingen

Benutzer-Werkzeuge

Webseiten-Werkzeuge

htmlcss:html_css_lektion_06
    Sie befinden sich hier: start » htmlcss » html_css_lektion_06

    Unterschiede

    Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

    Link zu dieser Vergleichsansicht

    Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
    Nächste Überarbeitung    		Vorhergehende Überarbeitung
    htmlcss:html_css_lektion_06 [31.08.2014 11:19] – Stefan Gaumhtmlcss:html_css_lektion_06 [24.10.2014 13:24] (aktuell) – Stefan Gaum
    Zeile 4: Zeile 4:
     ====== Lektion 6: DIVs als gruppierende Elemente  ====== ====== 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** **Beispiel: Block-Element DIV**
    - 
    - 
        <div style="background-color:lightgrey;">    <div style="background-color:lightgrey;">
          <h1> Überschrift </h1>      <h1> Überschrift </h1>
    Zeile 19: Zeile 20:
      
     **Beispiel: Inline-Element SPAN** **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> <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. Im Folgenden werden wir ''style'' nicht weiter verwenden und mit den nun vorgestellten Attributen ''id'' und ''class'' arbeiten.
    - 
    - 
      
     ---- ----
     [[htmlcss:html_css_lektion_07|=> Lektion 7: Attribute in HTML sprechen Selektoren im CSS an]]\\  [[htmlcss:html_css_lektion_07|=> Lektion 7: Attribute in HTML sprechen Selektoren im CSS an]]\\ 
     [[htmlcss:start|=> Übersicht: HTML und CSS]] [[htmlcss:start|=> Übersicht: HTML und CSS]]
    Zuletzt angesehen: • html_css_lektion_06
    htmlcss/html_css_lektion_06.1409483956.txt.gz · Zuletzt geändert: 31.08.2014 11:19 von Stefan Gaum
    Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki