Little Boxes – die HTML-Basics

Jeder Browser besitzt ein eingebautes Stylesheet

Testen Sie unsere 1985 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Browser gestalten HTML-Elemente, sofern nichts anderes definiert wurde, mit ihrem eingebauten Stylesheet. Wie sich dies in verschiedenen Browsern darstellt bzw. unterscheidet, macht Peter Müller in diesem Film deutlich.

Transkript

Ich betone regelmäßig, dass HTML-Elemente kein Aussehen haben, sondern einfach nur den Text strukturieren. Auf der anderen Seite, wenn man sich diese Seite hier so anguckt im Browserfenster, dann kann man nicht leugnen, dass da bereits Formatierungen vorhanden sind. Überschriften sind fett und groß, strong wird fett, em wird kursiv, Listenelemente bekommen Aufzählungspunkte und Einrückungen. Wir haben im Quelltext darüber nichts gesagt. Wir haben das nur strukturiert und die Einrückungen haben nichts mit diesen Einrückungen zu tun. Die Einrückungen sind auch darin, dass alles in einer Zeile stehen würde hier. Woher kommt das? Und die Antwort ist das Browser-Stylesheet. Jeder Brower hat fest eingebaute Gestaltungsanweisung. Wenn er zum Beispiel eine h1 Überschrift sieht, dann denkt er: "Mm, h1, eine wichtige Überschrift! Hier steht nirgendwo, wie das Ding aussehen soll, also mache ich den Text mal groß und fett." Diese Gestaltungsanweisungen heißen Formatvorlagen oder auf Englisch style. Eine Sammlung von solchen Styles heißt stylesheet. Das ist das SS von CSS, das Cascading ist etwas komplizierter, das kommt ein anderes Mal. In jedem Browser ist ein solches Stylesheet fest eingebaut. Im Firefox heißt das Stylesheet HTML CSS und das können Sie sich sogar angucken. Ich öffne mal ein neues Tab und gebe die Adresse ein, das heißt resource://gre-resouces/html.css resource://gre-resouces/html.css Eine etwas seltsame Adresse, aber es funktioniert. resource://gre-resouces/html.css Das ist das Stylesheet, das der Mozilla- Firefox benutzt, um HTML-Elemente zu formatieren, wenn sonst nichts gesagt wird. Das müssen Sie im Augenblick noch nicht verstehen, aber Sie sehen hier zum Beispiel schon h1 display block font-size: 2em font-weight: bold, also fett gedruckt. Und'n bisschen margin, bisschen Außenabstand soll auch dabei sein. Das ist dieses Stylesheet des Mozilla-Firefox. Und jeder Browser hat, wie gesagt, ein solches Stylesheet. Ohne dieses Stylesheet würde das Ganze etwas seltsamer aussehen. Auch das können Sie sich anschauen. Ich rufe hier noch mal die Web Developer- Symbolleiste auf und gehe hier ins Menü CSS. Gleich der erste Punkt heißt Stile deaktivieren, also Styles deaktivieren. Da kann man alle Styles deaktivieren oder nur das Standart-Stylesheet des Browsers hier deaktivieren, also die Standartstile des Browsers. Da klicke ich einmal drauf und dann ist das wirklich komplett ungestaltet. Das heißt also hier, so würde das aussehen, wenn es das Browser-Stylesheet gar nicht geben würde. Dann würde das völlig unformatiert untereinander stehen. Das Aussehen kommt also momentan vom Browser-Stylesheet, das benutzt wird, solange es keine eigenen, vom Autoren der Webseite geschriebenen, Stylesheets gibt.

Little Boxes – die HTML-Basics

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

3 Std. 3 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:11.03.2015
Aktualisiert am:28.09.2016

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!