Mitschrift 8.04.2014
TAG 3Grundgerü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 HTMLAufzä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
¼ = 1/4
½ = 1/2
©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.
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.
Keine Kommentare:
Kommentar veröffentlichen