Little Boxes – die HTML-Basics

HTML und CSS im Browser analysieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Jeder Browser verfügt über hilfreiche Tools, mit denen Sie den Quelltext einer Webseite hervorragend analysieren können. Welche das sind und wie Sie diese für die Webentwicklung nutzen, erfahren Sie in diesem Film.

Transkript

Jetzt möchte ich Ihnen kurz zeigen, wie Sie mit den Entwicklertools, mit den Entwicklerwerkzeugen im Browser quasi unter die Motorhaube schauen können. Diese Tools gibt es in jedem modernen Browser und dann können Sie genau sehen, welches CSS der Browser für bestimmte HTML-Elemente verwendet. So, es geht hier um so'n erstes Kennenlernen. Die verstecken sich hier im Menü unter im Firefox Entwicklerwerkzeuge. Hier ist eine Übersicht und hier kann man dann die Werkzeuge ein- und ausblenden. Dann geht hier unten so ein kleines Fenster auf. Hier links das HTML und rechts das CSS, die Regeln. Und schließen kann man das wieder über das Menü, Entwicklerwerkzeuge und hier über denselben Befehl. Schneller und effektiver ist es, wenn Sie irgendwo auf der Seite entweder auf ein bestimmtes Element oder ganz allgemein auf den body mit der rechten Maustaste klicken, dann einfach sagen Element untersuchen. Dann passiert so ziemlich genau dasselbe. Sie sehen hier unten öffnet sich der Inspektor und jetzt kann man hier links in dem HTML-Baum ein bestimmtes Element auswählen. Sie sehen oben auch schon die Konturen da, mit den gestrichelten Linien wird genau gezeigt, welches Element das ist. h1 wird jetzt oben hervorgehoben und p und body. Wenn ich jetzt auf body klicke, dann erscheint rechts hier bei Regeln die CSS-Regeln, die wir für dieses Element benutzen. Hier steht body { background-color und der Farbwert. Unten drunter h1, wenn ich das anklicke, wird es oben hervorgehoben und rechts daneben sehen Sie das CSS, das der Browser dafür verwendet. Die Fenster können wir natürlich ein bisschen ändern. Hier sehen Sie, dass das darkred, haben wir im Quelltext geschrieben, das wird hier geändert in 8B0000. So, Sie können jetzt aber auch heir reinklicken und einen anderen Wert hinschreiben. Ich nehme einen englischen Farbwert, nehmen wir mal lightblue und oben sehen Sie schon, wie sich das live und in Farbe ändert. Das ist nicht gespeichert. Der Quelltext bleibt und nach dem Neuladen der Seite ist alles wieder so, wie es vorher war. Aber zum Spielen, zum Experimentieren gibt es eigentlich nichts Besseres als hier unten ein paar Sachen auszuprobieren. Dann muss man nicht immer im Editor speichern, rüber, neu laden, sondern kann einfach eben gucken, wie ist es ja eigentlich, wie sieht das aus, funktioniert das so. Einmal neu laden und alles ist wieder so, wie es war. Man macht also nichts kaputt dabei. Dann macht das Experimentieren noch doppelt soviel Spaß. Hier nehmen wir jetzt mal 80 Pixel. Und dann sehen Sie, wie sich das auswirkt. Als padding drum rum, das ist definitiv zu viel. Entweder Sie machen das wieder weg, oder Sie laden neu und dann stimmt das alles soweit. So, Sie sehen also hier HTML-Elemente, oben sieht man wieder das rechteckige Kästchen. Hier wird dieses Kästchen gestaltet mit den Regeln. Und dann markiere ich jetzt den Absatz. Der hat keine CSS-Regeln, der ist, was uns angeht, völlig ungestaltet. Und wenn ich body vorhebe, ist bis jetzt nur die background-color gemacht. Schließen können Sie das wieder, indem Sie hier auf das x klicken. Ops! Und schon ist die Seite wieder so, wie sie normalerweise zu sehen ist.

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...

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!