Little Boxes – der HTML-Crashkurs

Die Elemente address, br und span

Testen Sie unsere 1865 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Fußbereich ist ideal geeignet, um Informationen über die Site wie beispielsweise eine Kontaktadresse anzugeben. Außerdem lernen Sie in diesem Video den Zeilenumbruch mit dem Element br und das neutrale Inline-Element span kennen.

Transkript

Im Fußbereich ist bis jetzt noch nichts. Alle anderen Bereiche haben zumindest ein bisschen Inhalt, der Fußbereich ist noch leer. Das soll sich jetzt ändern und hier soll eine Kontaktadresse eingetragen werden und dazu gibt es das Element address mit doppel d und doppel s. It's English. So, address und /address das schreibe ich gleich mal ein klein bisschen tiefer. Das ist für Kontaktadressen, also nicht für jede Adresse auf einer Seite, sondern nur für Adressen, die auch zum Kontktaufnehmen bezüglich dieser Webseiten dienen. Dann trage ich einmal die effektive Kontaktadresse hier rein. Das geht los mit Little Boxes. Dann hätte ich gerne als Trennzeichen einen Punkt in der Mitte der Zeile. Punkt heißt dot und Mitte heißt mid. Also heißt das Ding hier als Sonderzeichen middot. Sonderzeichen beginnen mit einem Kaufmannsund und enden mit einem Semikolon. Dadurch weiß der Browser, wenn ein Kaufmannsund kommt, weiß er "Aha, jetzt kommt ein Sonderzeichen." Und middot ist das Kürzel, das ist registriert, da weiß er, was er damit machen soll. Und bei Semikolon weiß der Browser, hier hört das Sonderzeichen auf. Little Boxes wohnt im Kästchenweg, wo auch sonst, Kästchenweg, sagen wir mal, 12. Und wieder ein middot, das ist in 01234 Boxberg. So, und jetzt hätte ich gerne ganz bewusst eine neue Zeile. Dazu gibt es das Element br. Das setzt man sehr sparsam ein, weil hier im Fließtext wird der Zeilenumbruch durch die Breite des Browserfensters geregelt. Das sollte man gar nicht erst versuchen, wie im Printberiech hier genau den Zeilenumbruch zu kontrollieren. Da haben Sie keinen Einfluss darauf, aber an dieser Stelle soll tatsächlich eine neue Zeile begonnen werden. br (Englisch) brake, Zeilenumbruch Und darunter schreibe ich gleich weiter Tel:01234 und 567890 middot als Trennzeichen Fax:01234 So was gibt's tatsächlich noch. 567891 So. Das ist eine fiktive Adresse, die eingetragen ist. Ein Zeilenumbruch erfolgt mit br, mit b-r, ein leeres Element, es gibt kein /br. address und /address sind drin. Gespeichert ist, rüber in den Browser, Seite neu laden und Sie sehen, hier unten ist die Adresse mit einem middot, einem Zeilenumbruch. Egal wie breit das wird, hier wird immer ein Zeilenumbruch gemacht. Und Sie sehen, das Element address wird vom Browser-Stylesheet kursiv dargestellt. Das kann man aber später per CSS natürlich ändern. Von Haus aus ist das hier kursiv zumindest in diesem Browser. So, ein weiteres Element. Sie haben das Element div kennen gelernt. Das ist ein neutrales Element als Blockelement. Das ist also ein eigener Block. Es gibt auch neutrale Elemente, die, also semantisch neutrale, die haben keinen Sinn, wie header zum Beispiel, er heißt ja Kopfbereich, h1 heißt Überschrift, p heißt Absatz, ul-ungeordnete Listen. Da kann man am Namen schon sehen, was die machen und div ist neutral. Das hat keine Bedeutung, das nimmt man immer dann, wenn man andere Elemente gruppieren möchte. Und es gibt ein Inline-Element, das neutral ist. Wenn ich zum Beispiel später hier das Wort Grundlagen anders gestalten möchte als den Rest der Zeile. Rot hervorheben oder so was, dann muss das in einem eigenen Kästchen liegen. Dieses neutrale Kästchen als Inline-Element heißt span. Umspanne. Und hier wird jetzt nach dem Punkt hier das /span wieder eingefügt. Davon werden Sie im Browser nichts sehen. Es ist ein neutrales Inline-Element. Der Text schließt einfach weiter. Aber im CSS kann man dann später sagen: "Nimm im Slogan das span, was darin ist, und dieses Kästchen gestalte ein bisschen anders!" Im Browser, wie gesagt, sieht man davon nichts. So, ich klicke hier noch einmal mit Rechts darauf, sage Seitenquelltext formatiert anzeigen, dann sehen Sie die Kästchen im Bild. span ist jetzt ein eigenes Kästchen, und kann dan später getrennt gestaltet werden. Und ganz unten haben wir address hier als Kästchen im Fußbereich.

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...
 
Software:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:11.03.2015
Aktualisiert am:28.09.2016
Laufzeit:3 Std. 5 min (41 Videos)

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!