HTML/Tutorials/HTML & CSS mit dem Seiteninspektor untersuchen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Tutorial lernen Sie, wie Sie mit dem Seiteninspektor des Browsers HTML-Elemente und ihre CSS-Eigenschaften untersuchen können. Dies hilft Ihnen unerwarteten oder fehlerhaften Formatierungen auf den Grund zu gehen und diese zu beseitigen.

Seiteninspektor aktivieren[Bearbeiten]

In jedem Browser können Sie durch einen Rechtsklick mit der Maus ein Kontextmenü öffnen, das eine Ansicht des Quelltexts (des HTML-Dokuments), bzw. eine Untersuchung des betreffenden Elements erlaubt. Screenshot

Anwendungsbeispiele[Bearbeiten]

falsch geschlossener br-Tag[Bearbeiten]

Dieses Beispiel wurde als Frage im SelfHTML-Forum gestellt, da der Zeilenumbruch größer als gewohnt war.[1]

Beispiel
<p> 
  Dies ist ein Text <br></br> 
  mit einem Zeilenumbruch.
</p>

br ist ein inhaltsleeres Element, das normalerweise nicht geschlossen werden muss. Ein Blick in den Seiteninspektor zeigt, dass der schließende br-Tag als zweites br-Element geparst wurde.

Screenshot

Blockelemente in p[Bearbeiten]

Ein weiterer typischer Fehler ist das Einfügen von Blockelementen wie div innerhalb von Textabsätzen.

Beispiel
p {
  color: green;
}
div {
  color: red;
}
Der Absatz p soll grüne, ein mit div gekennzeichneter Bereich jedoch rote Textfarbe erhalten.
<p> 
  Dies ist ein Text 
  <div> mit einem div</div>
  und noch etwas Text.
</p>

Der Textabsatz wird unerklärlicherwiese in 3 Blöcken dargestellt. Die Farbzuweisung für p wird nur im ersten Teil ausgeführt, aber nicht im letzten.

Ein Blick in den Seiteninspektor zeigt, dass das p-Element vor dem neuen div geschlossen wird, da es keine Blockelemente als Kinder enthalten darf. Unterhalb des div wird plain text ohne Formatierung ausgegeben, da es kein Start-Tag gibt. Das schließende p-Tag wird als weiterer, jedoch leerer Absatz geparst.

Screenshot

Empfehlung: Verwenden Sie zur Hervorhebung von Text inline-Elemente wie span oder em.

Parsen fehlender Elemente[Bearbeiten]

Dieser Beitrag aus dem SelfHTML-Forum beschreibt Probleme, die durch das Weglassen nicht notwendiger Elemente entstehen können.[2]

Wenn Sie die head- und body-Tags weglassen, werden die Elemente implizit trotzdem erstellt. Im Traversieren im DOM-Baum bei DOM-Manipulationen kann es hier zu Problemen führen, wenn Elemente entgegen der Notation im Markup keine Kindelemente sind.

Mit dem Seiteninspektor arbeiten[Bearbeiten]

Die Älteren unter uns werden sich noch erinnern. Zuerst wird die Webseite in einem Code-Editor bearbeitet, dann gespeichert; nun wird ein Browser geöffnet und das Zwischenergebnis betrachtet. Ausgehend von diesem Zwischenergebnis wird nun wieder der Code-Editor geöffnet - etwas geändert und der Kreislauf des Speichern, Testens und erneuten Änderns beginnt von vorn. Mit dem Seiteninspektor können Sie dies nun bequem und komfortabel im Browser erledigen.

HTML bearbeiten[Bearbeiten]

Durch einen Rechtsklick auf das geparste Markup öffnet sich ein Kontextmenü, mit dem Sie das Markup ändern und neue HTML-Elemente sowie Inhalte hinzufügen können.

Screenshot

CSS bearbeiten[Bearbeiten]

Das Layouten von Webseiten geht sogar noch einfacher. Durch einen Klick in das rechte, untere Feld können Sie

  • CSS-Werte verändern
  • neue CSS-Eigenschaften hinzufügen

und die Änderungen gleich sehen. Wenn das Layout passt, können Sie die ermittelten Eigenschaften und Werte in den Code-Editor kopieren und speichern.

Fazit[Bearbeiten]

Durch browsereigene Tools wie den Seiteninspektor können sie große Teile des Entwickelns und Debuggens direkt im Browser erledigen und benötigen keine externen Programme mehr. Dies ist eine große Vereinfachung und Zeitersparnis.

Quellen[Bearbeiten]

  1. SelfHTML-Forum: "<br>" Tag schliessen != Tag offen lassen?
  2. selfHTML-Forum: HTML5 Struktur richtig?

Weblinks[Bearbeiten]

Siehe auch[Bearbeiten]