Elemente

Aufgabe:

  1. Jedes Element wird getestet und eine kurze Notiz im Heft gemacht, was das Element
    bewirkt.
  2. Worin liegt der Unterschied zwischen Block- und Inline-Elementen?

Block-Elemente: (beinhalten einen Zeilenumbruch)

Element Hinweis Bemerkung (Strict) Beispiel
address Markiert eine Adresse darf nur Inline Elemente enthalten (stimmt doch!)
M. Mustermann
blockquote Markiert ein Zitat darf keine Inline-Elemente enthalten. Diese müssen in Block-Elementen stehen.

Ein Zitat

dl Eine Definitionsliste enthält dt und dd
Ich bin dt1
Ich bin dd1
Ich bin dd2
div Markiert einen Bereich
Bei <div> merkt man nur den Zeilenumbruch
h1 (-h6) Überschrift 1 bis 6 nur Inline-Elemente innen erlaubt

Ich bin h4

ol Nummerierte Liste enthält li
  1. li 1
  2. li 2
p Absatz nur Inline-Elemente innen erlaubt

Ein Absatz.

Und noch einer.

pre Hervorhebung von Text nur Inline-Elemente innen erlaubt
 pre sieht so aus
                      
Und so ohne
table erstellt eine Tabelle
Attribute: border, cellpadding, cellspacing, width

Attribute tr und td: align, valign
Attribute td: clospan, rowspan,

align: left, center,right, justify
valign: top, middle, bottom, baseline
colspan und rowspan: 'zahl'
enthält tr als Spalten- und dieses td als Zellen-Definition
Zelle1 Zelle2
Zelle3 Zelle4
ul unnummerierte Aufzählung enthält li
  • li 1
  • li 2
  • form*
  • fieldset*



Inline-Elemente:  (beinhalten keinen Zeilenumbruch)

Element Hinweis Bemerkung (Strict) Beispiel
a benötigt ein Attribut
Attribute: href, name
darf nur Inline-Elemente enthalten nachlesen
b Text wir fett angezeigt darf nur Inline-Elemente enthalten Dieser Text istfett
bdo Ändern der Textrichtung mit dem Attribut dir
Attribut: dir   (ltr  left to right | rtl right to left)
darf nur Inline-Elemente enthalten Wer weiss was das heisst
big Text wird größer dargestellt darf nur Inline-Elemente enthalten Dieser Text istbig
br Zeilenumbruch hat kein Endtag Eine neue Zeile
muss man angeben.
button Eine Schaltfläche wird angezeigt kann img enthalten
em Text ist wichtig darf nur Inline-Elemente enthalten Dies istwichtig
i Text kursiv darf nur Inline-Elemente enthalten Dieser Text istkursiv
img ein Bild wird eingebunden mit dem Attribut src.
Attribute:src, alt, height, width, name
hat kein Endtag Test
small Text wird kleiner dargestellt darf nur Inline-Elemente enthalten Hier wird eskleiner
span Markiert einen Inline-Bereich darf nur Inline-Elemente enthalten span sieht nachnichts aus
strong Text wird fett angezeigt darf nur Inline-Elemente enthalten strong machtfett
sub Text wird tiefer gestellt darf nur Inline-Elemente enthalten H2O
sup Text wird hoch gestellt darf nur Inline-Elemente enthalten m3

  • input*
  • label*
  • select*
  • textarea*

Alle Block- und Inline-Elemente können folgende Arrtibute enthalten:class, id, style, title

 

zurück