Internetkurse Köln

Heutzutage mag das gar nicht mehr so klar sein wie zu den Zeiten, als ich mich erstmals mit HTML beschäftigte: Hinter jeder Website steht Seitenquelltext, den jeder anschauen und studieren kann. Dieser Quellcode macht deutlich, was so eine einzelne Webseite tatsächlich ist, nämlich ein reines Textdokument. Da spielt es auch keine Rolle, ob sie mit WordPress oder einem Programm mit hübscher grafischer Oberfläche entstanden ist. Am Ende steht Text, der neben dem offensichtlichen Inhalt auch noch eine Menge mehr Information bereithält. Diese Informationen sind vor allem dann hilfreich, wenn es Probleme gibt, deren Grund aber nicht so ohne Weiteres erkennbar ist. Die Hilfe lautet da oft: Seitenquelltext anzeigen! Doch wie kommt man an den heran? Und was genau sagt der einem?

Jeder Browser bietet die Option Seitenquelltext anzeigen

Der Weg zum Seitenquelltext ist bei den gängigen Browsern sehr kurz: Klicken Sie irgendwo auf einer beliebigen Webseite mit der rechten Mousetaste. Augenblicklich erscheint das Kontextmenü, das unter anderem die Option Seitenquelltext anzeigen bereithält. Der Klick darauf, nun mit der linken Mousetaste, sorgt dafür, dass sich der Quellcode in einem neuen Tab oder Fenster öffnet. Alternativ können Sie an einem Windows-Rechner auch die Tastenkombination Strg+U nutzen. Beide Vorgehen gelten zumindest für Google Chrome, Firefox und den Internet Explorer.

Was zeigt der Seitenquelltext?

Grundsätzlich entspricht der Seitenquelltext der Browseransicht mit all seinen Texten, Bildern und Graphiken. Nur stellt er überdies auch alle HTML-Auszeichnungen dar. Das bedeutet nicht nur, dass es eine Menge Buchstaben und Zeichen in spitzen Klammern gibt. Es bedeutet auch, dass zum Beispiel Bilder und Graphiken nicht also solche erscheinen. Statt des tatsächlichen Bildes sehen Sie das passende HTML-Element mit seiner anklickbaren Pfadangabe zu dem Speicherort der Bilddatei. Darüber hinaus zeigt der Quelltext aber auch alle Elemente, die in der Browsersansicht nicht ersichtlich sind. Dazu gehören vor allem alle Angaben, die sich im sogenannten head-Bereich befinden.

Wozu sollte man sich das antun?

Zum Lernen!

In der Tat gibt es gute Gründe, sich immer wieder Quellcode anzuschauen. Als ich vor einer gefühlten Ewigkeit damit begann, mich mit HTML zu beschäftigen, ging es vor allem darum dazuzulernen. Wie haben die das gemacht?, wollte ich wissen. Also habe ich mir den Code angeschaut und versucht zu verstehen. Wie bei allen anderen Sprachen hilft auch hier beim Erlernen nur beständiges Üben und Anwenden. Ein wunderbares Angebot hierfür ist auch die Browserfunktion Untersuchen (oder Element untersuchen oder Prüfen oder wie auch immer sie aktuell heißt), auf die ich hier schon eingegangen bin. Im Gegensatz zu Seitenquelltext anzeigen bietet das Untersuchen aber nicht nur einfach den kompletten Quellcode, sondern stellt die einzelnen Elemente deutlich dar. Auf diese Weise können Sie zum Beispiel herausfinden, wie ein einzelnes Element genau heißt und wie es formatiert ist.

Welches Theme benutzt diese Website?

Es ist Ihnen vielleicht auch schon mal untergekommen, dass Sie wissen wollten, ob eine Website mit WordPress gemacht ist. Oder welches Theme sie benutzt. Dafür braucht es keine besonderen Tools. Wählen Sie Seitenquelltext anzeigen und suchen Sie dann mittels Strg+F die Seite nach theme ab. Wenn es sich um eine WordPress Website handelt, finden Sie den oder die link-Einbindungen des/der Stylesheet(s) mitsamt Pfadangabe, aus der der Themename hervorgeht. Da Themes immer im Verzeichnis wp-content/themes/ abgelegt sind, können Sie seinen Namen an der dann folgenden Ordnerbezeichnung ablesen. Im Fall dieser Website wäre es: wp-content/themes/radiate.

Fehler finden

Der zweite wichtige Grund ist das Auffinden von Fehlern, wenn es Probleme gibt, Sie den Grund dafür aber nicht erkennen. Manchmal liefert da allein die Komplettansicht die wesentlichen Erkenntnisse. Dabei ist nicht nur der umfangreiche head-Bereich ein potentieller Lieferant für Fehler. Auch im body-Bereich steht eine Menge mehr, als ihr einzelner Beitrag herzugeben scheint. All diese Angaben haben Sie auf Ihren einzelnen (Beitrags)-Seiten nicht hinterlegt. Wo kommen diese Angaben also her?

Die Antwort lautet: Sie haben verschiedene Quellen. Eine ist zum Beispiel die Vorlage header.php, die vor allem anderen Wichtigen erst einmal mit dem nötigen html-tag aufmacht. style-Angaben kommen wahrscheinlich aus dem Zusätzlichen CSS Ihres Themes. Per link sind alle Stylesheets und wahrscheinlich auch schon diverse Scripte eingebunden. Ganz wichtig sind aber auch die sogenannten meta-tags, die von Suchmaschinen ausgelesen werden. Die sollten zum Beispiel nicht doppelt erscheinen; vor allem dann nicht, wenn es sich um die sogenannten Open Graph tags handelt, die der Darstellung eines Beitrags bei Facebook dienen.

Im body finden Sie dann Angaben zum Kopfbereich und dem Menü der Website. Der eigentliche Content erscheint erst im Bereich content, zu dem dann auch meist ein primary-Bereich gehört. Und wenn es einen primary-Bereich gibt, gibt es auch einen secondary-Bereich. Der ist dann für die Sidebar mit all ihren Widgets verantwortlich. Und schließlich gibt es noch den footer, also den Fußbereich, in dem wahrscheinlich auch noch eine ganze Menge Scripte stehen. Viel zu durchforsten also auf der Suche nach dem Fehler… Aber die Mühe kann sich lohnen!

Beitragsbild: Britta Kretschmer