Little Boxes – der HTML-Crashkurs

Block- und Inline-Elemente kennenlernen und nutzen

29,95
Es gibt zwei Arten von rechteckigen Kästchen, die sich unterschiedlich verhalten: Block- und Inline-Elemente. Dieses Video erläutert den Unterschied zwischen diesen beiden Elementen näher.

Es gibt bei den HTML-Elementen zwei verschiedene Arten, die sich sehr unterschiedlich verhalten. Es gibt noch ein paar mehr, aber die beiden wichtigsten Arten von HTML-Elementen, das sind die Block-und die Inline-Elemente. Block-Elemente ähneln Absatzformaten in Word, das Kästchen wird automatisch so breit, wie es geht. Die kennen Sie bereits, die haben Sie gesehen. Ich rufe hier noch mal die Web Developer- Symbolleiste auf und sage ihr Blockelemente mit Kontur versehen. Dann haben Sie hier ein div drum rum und hier die h1, p, h2, pp. Er nimmt nicht alle, die werden's neuen header und so weiter, die kennt er nocht nicht, die lässt er hier weg. Aber man bekommt den Eindruck, Blockelemente gehen über die ganze Seite. Wenn ich das kleiner machen würde, würden die sich anpassen, die werden so breit, wie es geht, und nachfolgende Blockelemente stehen unterhalb des Kastens in der nächsten Zeile. Die enthalten normalen Text, Inline-Elemente und manchmal auch andere Blockelemente. Beispiele sind Überschriften, Fließtext, Absätze wie p und Listenelemente, die später noch kommen. Innerhalb dieser Blockelemente können auch Inline-Elemente stehen, wie hier strong und em. Um die sichtbar zu machen, nehme ich hier wieder eigene Elemente mit Kontur versehen und schreibe mal rein strong und der soll hier in orange kommen. Und em, und der soll hier in grün kommen. So dunkelgrün, nicht hübsch, aber deutlich. OK, so und hier sehen Sie jetzt in orange umrandet das strong-Element und hier in grün umrandet das em-Element. Das sind Inline-Elemente und die werden nur so breit, wie der Inhalt, der darin liegt. Der nachfolgende Text fließt einfach weiter. Also Blockelemente blocken die Zeile. Das nächste Element beginnt in der nächsten Zeile und Blockelemente nehmen so viel Platz, wie da ist. Wenn ich das jetzt verkleinere, Sie sehen, die sind flexibel, die werden auch kleiner. Das ist damit gemeint, indem soviel Platz, wie möglich ist. Die werden so breit wie möglich. Inline-Elemente sind fließend und fließen im Text mit, machen keinen automatischen Zeilenumbruch, die blocken nichts und nachfolgender Text fließt einfach weiter.

Little Boxes – der HTML-Crashkurs

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 5 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!