Little Boxes – der HTML-Crashkurs

HTML-Elemente sichtbar machen

Testen Sie unsere 1893 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Um HTML-Elemente im Browserfenster sichtbar zu machen, können Sie das Add-on Web Developer für Firefox nutzen. Hier erfahren Sie, wo Sie dieses Add-on herunterladen können und wie Sie es installieren.

Transkript

Webseiten bestehen aus rechteckigen Kästchen, die im Browserfenster übereinander, nebeneinander und ineinander gestapelt werden. Das sind lauter little boxes, kleine rechteckige Kästchen. Und im Browser kann man sich diese rechteckigen Kästchen mit einem Add-on sichtbar machen, das ich Ihnen jetzt zeigen möchte. Also das Add-on hier im Firefox, es gibt's auch für den Chrome. Und hier im Firefox, im Menü klicke ich auf Add-ons und tippe dann oben im durchsuchen Feld den Begriff Web Developer ein. Web Developer, jetzt wird gesucht und hier wird er schon gefunden. Web Developer, momentan Version 1.2.5. Und dann klicke ich rechts auf Installieren. Das geht relativ flott. Den Firefox einmal neu starten. Und da ist er schon wieder. Jetzt ist Web Developer Toolbar installiert. Ich kann dieses Tab wieder schließen. Klicke ich hier oben einfach mit Rechts auf diesen Bereich und sehe jetzt hier eine neue Symbolleiste, die Web Developer Symbolleiste, hier ist sie. Und dort gibt es verschiedene Menüs, alles zu seiner Zeit, die werden wir noch öfter einetzen, im Moment geht es mir um das Menü mit dem schönen Namen Kontur. Wenn man das herausklappt, dann kann man hier Blockelemente mit Kontur versehen. Also Hervorhebung, so hieß das früher mal. Und hier sehen Sie schon, sobald ich diesen Befehl angeklickt habe, können Sie ganz deutlich sehen, hier sind rechteckige Kästchen um die Elemente. h1 steht hier schon, weil ganz unten Elementnamen zeigen, das ist angekreuzt und Blockelemente ist auch angekreuzt. Hier sehen Sie also die beiden Elemente, die im Quelltext stehen, h1 und p. Hauptüberschrift, erste Gliederungsebene und p für paragraph, das ist der Absatz. Wie hier jetzt die Zwischenräume entstehen, das kommt alles später, aber Sie sehen ganz deutlich das rechteckige Kästchen, die little box um die Überschrift Little Boxes. Diese Kästchen, HTML-Kästchen sind von Haus aus sehr flexibel. Wenn ich jetzt das Browserfenster verkleinere, dann sehen Sie, wie hier das Rechteck auch verkleinert wird und wenn der Text nicht mehr reinpasst, so klein kann ich's gar nicht machen, dann würde der umbrochen werden. Sie sehen, dass es also wirklich eigentlich perfekt, sehr flexible, kleine Kästchen, die hier eingebaut werden. So, das ist der Quelltext. Den zeige ich noch mal. Einmal hier Seitenquelltext anzeigen. So, da sehen Sie ihn und dieser Quelltext sieht im Browser so aus. head und /head verschwindet. h1 wird ein riesiges Kästchen hier und p wird auch ein rechteckiges Kästchen von ganz links bis ganz rechts.

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!