Kurs Tag 3 - HTML & CSS - weitere Strukturierungselemente

Mitschrift 8.04.2014

TAG 3

Grundgerüst einhalten!
Dem html-Text Struktur geben! -> bestimmt die Qualität!

weiter zu Strukturierungelemente:

=>Aufzählungen und Listen:

Listen (geordnet & ungeordnet) und Aufzählungen (unordered List) - Listen mit HTML

Aufzählungen (unordered list)
<ul>...</ul> - Bereichs-Rahmen
und dann die Listen seperat aufführen, indem die listitems in den Rahmen eingefügt werden:

<ul> <!-- Rahmen für die Liste -->
        <li>Äpfel</li> <!-- listitem -->
        <li>Birnen</li>
        <li>Bananen</li>
</ul>

-------------------------------------------------------------------------------------------------------------

Exkurs: Sonderzeichentabelle.de
&frac14 = 1/4
&frac12 = 1/2
&copy;2014 - P.Kalke = Copy-Zeichen

--------------------------------------------------------------------------------------------------------------

=> Listen (ordered list)
<ol> 
       <li> Listitem</li>...
</ol>



=>Bild einfügen:
<img /> - benötigt kein schließendes Tag
wird ausschließlich durch Attribute gesteuert!
src= Quelle
Das Bild muss im gleichen Ordner/gleiche Quelle, wie html-Datei liegen!!!
relative Angaben: bspw. width=50% (-> in Relation zum Originalbild/Ausgabeseite)
Reguliert sich proportional zum Ausgabefenster. 
Wenn wir das nicht wollen, dann geben wir feste Größen ein:
width="400"
height="" - > wenn ich die Höhe nicht angebe, dann berechnet sich der Browser die Bildgröße automatisch

Frage: Wie kann ich 3 Bilder nebeneinander stellen? 
Antwort: die Bildbreite bei jedem Bild in relativen Angaben auf width = "33%" (ggfs auch 32%) stellen.

=> Div-Container
DAS Strukturierungselement in HTML, mit dem ich ganz viel strukturieren kann, weil es ein Blockelement ist.
<div>...</div>
Der Div-Container kann weitere divs in sich schachteln, um dann den Text wieder ander zu formatieren.
Die wahre Stärke des div-Containers kommt erst zum Tragen, wenn ich mit CSS arbeite.

Einen Rahmen um den div-container setzen und mehrere div Container ineinander machen, um dann auch verschiedene Farben zu erhalten

Neues Attribut: style!
Ein Container kontinuiert - hält zusammen.
; = Abschluss einer Formatierungseinheit aus Attribut und Value
      BSP.:      <div align="right" style="width: 200px; background-color: silver;">
            Das ist ein Test
            </div>
unterschiedliche Schreibweise der Werte:
HTML pure Attribute: {attrib}="{value}" <-> div-Container: style="{attrib}:{value};"
       
Aufgabe für heute Nachmittag:
auf Basis dieser Datei - ein Rezept raussuchen mit Bildern, etc.