Quellcode

Der Quellcode ist der Text eines Computerprogramms oder Webseite, der von Menschen gelesen und in einer Programmiersprache geschrieben wird. In der Informatik wird er Fuzzy-Programmcode genannt. Abstrakt kann man den Quellcode eines Programms genauso als Programmdokument bezeichnen. Dieses Dokument beschreibt ein Programm so genau und vollständig, dass ein Computer dies automatisch in Maschinensprache übersetzen kann.

Der Quelltext kann (teilweise oder vollständig) nicht-textuelle Form haben. Dies sehen wir beispielsweise in Form einer grafischen Verbindung zwischen logischen Funktionsblöcken (wie in Simulink oder als UML-Diagramm).

Der Quellcode wird normalerweise manuell mit einer IDE oder einem Texteditor erstellt.

Zugleich gibt es Codegeneratoren, die aus strukturierten Designdokumenten einen Code generieren, um beispielsweise automatisch Strukturdiagramme oder UML-Entwürfe zu entwerfen.

Der Quellcode eines Programms kann genauso aus mehreren Teilen bestehen. Er kann zum Beispiel in mehrere Dateien mit unterschiedlichen Formaten oder teils grafisch, teils textuell aufgeteilt sein.

Mit sprachspezifischen Editoren lassen sich bestimmte Schritte vereinfachen: Syntax-Highlighting ermöglicht es, Teile des Quelltextes entsprechend ihrer Funktionalität farblich hervorzuheben, was die Lesbarkeit verbessert. Außerdem halten sich Programmierer zur besseren Lesbarkeit an gewisse Formatierungen des Quelltextes (wie Einrückung von Unterabschnitten, Groß-/Kleinschreibung ...). Manche Sprachen geben bestimmte Formatierungen des Quelltextes vor (Python, Fortran-77,), einige IDEs können den Quelltext automatisch formatieren (sogenannte Beautifier).

Bei größeren Programmen, die aus vielen separaten Quelldateien bestehen, werden Informationen verarbeitet, die die Abhängigkeiten der Quelltextdateien beschreiben. Damit können User beim Übersetzen alle Schritte zur Erstellung eines kompletten Programms mit einem einzigen Aufruf durchführen.

Quellcode-Struktur

Beim Schreiben von Programmen müssen je nach verwendeter Programmiersprache bestimmte Konventionen eingehalten werden. Die wenigsten Programmiersprachen sind absolut neu, die meisten bauen jedoch aufeinander auf. Deshalb tauchen bestimmte Elemente in verschiedenen Programmiercodes immer wieder auf:

Befehle

Anweisungen sind die Grundlage aller Anwendungen. Damit macht der Coder seinem zukünftigen Computerprogramm klar, was es tun soll. Solche Befehle können bestimmte Rechenschritte ausführen oder Text anzeigen.

Variablen

Variablen sind Leerzeichen, die mit Informationen gefüllt werden. Dies wird im Quelltext immer wieder mit einem zuweisbaren Namen erwähnt.

Vergleiche

Wenn-dann-Abfragen sind nach dem Prinzip der Aussagelogik, für die meisten Programme Struktur-kritisch. Wenn ein bestimmter Wahrheitswert auftritt, wird ein Prozess ausgelöst, ansonsten ein anderes Ereignis.

Schleifen

Die Abfragen können auch die Grundlage von Schleifen im Quellcode sein. Der Befehl wird wiederholt, bis ein gewisser Wert erreicht ist. Erst dann verlässt das Computerprogramm die Schleife und führt den Rest des Codes aus.

Kommentare

In allen gängigen Programmiersprachen können Zeilen im Code auskommentiert werden. Dadurch können Entwickler eigenen Text in den Quellcode schreiben, der vom Programm nicht berücksichtigt werden soll. Programmierer tragen Kommentare in die Quelle ein, damit ein anderer Entwickler in Zukunft den Code verstehen kann.

Bei der Quellcodeerstellung steht immer ein Problem im Mittelpunkt: Entwickler schreiben Computerprogramme, um Lösungen zu finden.

Was ist der Quellcode einer Website?

Der Quellcode einer Webseite ist der von Menschen lesbare Text einer Programmiersprache. Mithilfe eines Editors gibt der Website-Entwickler im Quelltext Anweisungen, die eine Software oder Maschine (Computer) implementieren und ausführen kann. Eine besonders bekannte und häufig verwendete Programmiersprache zum Erstellen von Websites ist HTML.

Warum benötigen wir den Quellcode?

Heute gibt es mehrere Gründe, warum Nutzer den Quelltext einer Seite sehen möchten. Webentwickler möchten einen bestimmten Stil oder die Implementierung von einem anderen Programmierer sehen. Vielleicht pflegen Entwickler eine Website und versuchen herauszufinden, warum ein bestimmter Teil einer Webseite nicht angezeigt wird oder sich nicht so verhält, wie er sollte.

Du könntest auch ein Anfänger sein, der das Codieren einer eigenen Seite erlernt. Hierfür könntest Du nach Beispielen aus dem wirklichen virtuellen Leben suchen. Natürlich ist es ebenso möglich, dass Du in keine dieser Kategorien fällst und einfach nur aus reiner Neugier im Quellcode stöberst.

Je nach verwendeter Programmiersprache sieht der Quelltext des Programms unterschiedlich aus. Der Quelltext kann insbesondere bei großen Programmen aus mehreren Dateien bestehen. Grafische Darstellungen von Programmteilen können Teil des Quelltextes sein und in Maschinensprache übersetzt werden.

Auch bei kleinen Webseiten oder Programmen wird dieser Code schnell sehr groß. Der Quelltext für eine durchschnittliche Homepage ist fast 3.000 Zeilen lang. Wenn Du den Quelltext sehen möchtest, lese weiter und erfahre wie Du den Quelltext einer Website sichtbar machst. Da gut strukturierter, sauberer Quellcode Rankingvorteile hat, ist die Quellcodeoptimierung ein Bereich der Suchmaschinenoptimierung.

SEO und Quellcodes

Für Programmierer stellt der Quelltext die Grundstruktur eines Computerprogramms dar. Der Quelltext ist für Internet-Vermarkter ein wichtiger Bereich, der für den durchschnittlichen Benutzer nicht sichtbar ist. Denn im Quellcode lassen sich nicht nur SEO-Fehler erkennen und bearbeiten, sondern auch bedeutende Zusatzinformationen einer Website auslesen.

Durch die Analyse des Quelltextes einer Seite können Vermarkter versteckte Links finden. Darüber hinaus enthält der Quellcode wichtige Informationen zum verwendeten Markup, CMS oder Metainformationen wie Meta-Description und Meta-Title. Website-Inhalte und Canonical Tags sind im Quellcode ebenso sichtbar. Außerdem sind dort die Tracking-Codes für das Marketing einer Seite zu finden.

Zum Quellcode lesen können spezielle Webanalyseprogramme und Compiler sowie Browser verwendet werden. Browser wie Firefox, Google Chrome oder Edge verfügen über eine einfache Funktion, die den Originaltext einer Seite aufzeigen kann.

Warum ist Quelltext wichtig für SEO?

Google stuft gut geschriebenen Quelltext als Indikator für die Zuverlässigkeit einer Website ein. Dadurch wird der Quellcode zu einem Rankingfaktor bei der Indexierung einer Internetseite. Somit ist er für die Berechnung des PageRanks wichtig und fließt in das Kalkül mit ein.

Damit können Vermarkter ihr Ergebnis in den Search Engine Result Pages (SERPs) mit dem richtigen Quellcode verbessern. Dazu gehört auch, dass der Quellcode-Crawler eine raschere Website-Analyse und eine bessere Ausnutzung des Crawl-Budgets ermöglicht.

Ein gut codierter Quelltext ist auch für die Benutzerfreundlichkeit der Website wichtig, da Websites dadurch schneller geladen werden. Website-Ladezeiten sind nicht nur ein weiterer Rankingfaktor, sondern auch der Grund für hohe Absprungraten. Niemand möchte lange auf das Laden einer Seite warten.

Im Allgemeinen bleibt festzuhalten, dass je einfacher der Quellcode geschrieben ist, desto schneller können die Crawler die Seite analysieren. Der Seitenrang steigt und die Website ist für das Publikum angenehmer zu lesen.

• W3C-Validator - Aufdeckung von Quellcode-Fehlern

Wie Quellcode anzeigen?

Der Quellcode einer Seite kann in verschiedenen Browsern geöffnet werden und steht allen Benutzern zur Ansicht zur Verfügung. Um den Code in einem separaten Fenster zu öffnen, verwende die Tastenkombination Strg+Shift+I oder wähle das entsprechende Element in den Browseroptionen aus.

Der Seitencode besteht aus HTML-Elementen, CSS- und JavaScript-Stilbeschreibungen. Anhand dieser Daten können Entwickler das Markup der Seite untersuchen und viele andere Informationen über die Seite und ihren Inhalt herausfinden.

Fast jeder Browser ermöglicht, den Quellcode einer Website anzeigen zu lassen. Nur der Weg dorthin ist von Browser zu Browser unterschiedlich. Natürlich können die Nutzer auch ein HTML-Bearbeitungsprogramm verwenden, um dem Code einer Webseite anzuzeigen.

• Quellcode anzeigen Chrome: Entweder Du klickst mit der rechten Maustaste in einen freien Bereich Deiner Website und wählst dann Quelle anzeigen, oder Du verwendest die Tastenkombination [Ctrl+[Shift]+[i].
• Quellcode Website anzeigen: Versuche es mit der F12-Taste, dann erscheint die Entwicklerkonsole.
• Quelltext in Firefox anzeigen: In Firefox können Anwender die Tastenkombination STRG + U verwenden.
• Quelltext in Safari anzeigen: Verwende die Tastenkombination [cmd] + [alt] + [U] oder wähle in den Safari-Einstellungen den Entwicklermodus aus.
• Quellcode anzeigen IPhone: Standardmäßig zeigt Mobile Safari den ursprünglichen HTML-Code einer Domain nicht an. Hierfür gibt es verschiedene Bookmarks, die diese Funktionalität in Form eines Bookmarklets zur Verfügung stellen. Bookmarklets sind kleine Javascript-Programme, die direkt im Browser aufgerufen werden. (ravelrumba.com)
• Quellcode anzeigen Mac: Öffne Safari und gehe zu den Einstellungen. Wähle den Reiter „Erweitert“ und aktiviere ganz unten Entwicklermenü „Anzeigen" in der Menüleiste. Rufe nun das Entwicklermenü in der Browser-Menüleiste auf und wähle Seitenquelle anzeigen.

Mit diesen Methoden kannst Du nicht nur den Code der gesamten Seite sehen, sondern auch die Codes einzelner Elemente. Dazu bestimmst Du den Ort des erforderlichen Fragments manuell, was ziemlich lange dauern kann.

Erfahrene Entwickler verwenden ein spezielles Tool, das in allen aufgeführten Browsern verfügbar ist. Schauen wir uns an, wie es in Google Chrome funktioniert.

Um die Konsole zu öffnen, halte die Tasten Strg + Umschalt + I gedrückt und rufe das Kontextmenü auf. Jetzt öffnet sich das Panel auf der Seite, seine Position kann je nach Monitorgröße oder persönlicher Vorliebe geändert werden. Öffne dazu das Menü und wähle im Bereich „Dockseite“ den Standort des Panels aus oder öffne es in einem separaten Fenster.

Generierung des Quellcodes

Entwickler haben mehrere Möglichkeiten, ein Quellcode zu erstellen. Wenn sie schnell ein paar Codezeilen ändern müssen, verwenden sie einen einfachen Texteditor wie TextEdit oder Notepad ++. In diesem Fall wird der Quelltext als Klartext mit einer für die Programmiersprache zutreffenden Dateinamenerweiterung gespeichert.

Neben den standardmäßig mit Betriebssystemen gelieferten Texteditoren gibt es auch leistungsstarke Code-Editoren. Integrierte Entwicklungsumgebungen (IDEs) mit erweiterten Funktionen, vereinfachen die Code-Erfahrung erheblich und bieten viele Vorteile:

• Syntax-Highlighting: Jede Programmier- oder Skriptsprache hat ihre eigene Syntax. Gute Texteditoren ermöglichen es Entwicklern, die Sprache auszuwählen, in der sie ihren Quelltext erstellen möchten. Der Editor hebt dann automatisch alle wichtigen Elemente des Quelltextes hervor.
• Autocomplete: Die meisten Entwickler-Texteditoren kennen die entsprechende Programmiersprachensyntax. Dadurch können die User alle Befehle automatisch ausführen und offene Klammern selbst schließen.
• Debugger: Die Verwendung eines Debuggers ist für eine professionelle Programmierung unerlässlich. Daher ist dieses Tool ein Standardbestandteil vieler IDEs. Das Debugger-Tool ermöglicht Programmierern, den Quellcode auf Fehler zu überprüfen. So kannst Du die laufenden Prozesse im Detail analysieren.

Ein Quellcode Beispiel ist der lesbare Text dieser Website. Er wird von einer Programmiersprache von einem Computer in eine Maschinensprache übersetzt. Ein sogenannter Compiler übernimmt die Übersetzung. Der Text kann dann in Maschinensprache als komplettes Programm oder Webseite ausgegeben werden.

Fazit

Der Quellcode ist die Programmierung einer Website und wird für die korrekte Anzeige benötigt. Hier können sich Funktionsfehler einschleichen, die die Darstellung der Seite stören. Gleichzeitig können Fehler mit Vorkenntnissen schnell korrigiert werden. Der Quelltext ist SEO-relevant, da Suchmaschinen ihn und seine Architektur als Rankingfaktor verwenden. Folglich führt guter Quelltext nicht nur zu besseren Suchergebnissen, sondern verbessert durch kürzere Ladezeiten auch die Usability der Website.