PS-Trainer
Quellcode anzeigen @ PS-Trainer
Wie kann man den Quellcode (source-code) von Webseiten anzeigen ?
Homepage von PS-Trainer - Web-Entwicklung - an PS-Trainer
PS-Trainer

Wenn sie selbst Webseiten erstellen, dann wollen sie gelegentlich gerne einmal im Detail ansehen, wie fremde Webseiten aufgebaut sind. Hier finden sie einige Tips, wie man "fremden" HTML-Quellcode anzeigen kann. Wenn sie den BesucherInnen ihrer eigenen Webseiten deren Quelltext komfortabel zeigen wollen, dann finden sie hier Tips dazu.

Inhalt: Quelltext mit dem Browser anzeigen
Webseite (HTML-Datei) speichern
Rahmen (frames) knacken
Quelltext-Service auf der eigenen Webseite
BookMarklet zur Quelltext-Anzeige

Quelltext (source):
Mit jedem Browser können sie den HTML-Programmtext (Quelltext, source-code) einer Webseite anzusehen. Sie öffnen dazu eine Webseite und wählen im Menü Ansicht (View) ihres Browsers den Befehl Quelltext (page source).

Versuchen sie es bei dieser Webseite !

Sie sehen die typische Ansicht einer HTML-Seite, bestehend aus "Tags", das sind Befehle in <>, und Text, der auf der Seite angezeigt wird.

Zur leichteren Orientierung sind die einzelnen Kapitel dieser Seite mit Kommentaren versehen:
<!-- Das ist ein HTML-Kommentar-->
Kommentare erzeugen keinerlei "Wirkung" auf einer Webseite, sie dienen lediglich zur leichteren Lesbarkeit des Quelltextes.
Ein Kommentar beginnt mit <!-- und endet mit -->. Der gesamte Text zwischen diesen Marken (tags), allenfalls auch mehrere Zeilen, wird als Kommentar betrachtet.

Webseite speichern (download):
Alle Browser bieten die Möglichkeit, die gerade angezeigte Seite zu speichern (wählen sie im Zweifel die Option "als HTML-Seite" ) - sie erhalten dabei je nach Programm und Version nur die eigentliche Webseite oder auch deren Bestandteile (z.B. Grafiken).

Bilder: befinden sich nicht "innerhalb" einer Webseite, sondern in eigenen Dateien. Auf der Webseite befindet sich an der betreffenden Stelle lediglich ein Hinweis ( <img ... > ), wo die Bild-Datei zu suchen ist.
Wenn ihr Browser die Bilder ebenfalls (an der gesuchten Stelle) gespeichert hat, können sie diese auch auf ihrer Kopie sehen, wenn nicht, sehen sie dort Platzhalter (links ein "broken image").

Links: bewirken beim Anklicken meist das Öffnen anderer Webseiten. Manchmal funktionieren sie auf Kopien nicht mehr:

Links können "absolut" adressiert sein, d.h. unabhängig von der Lage der Webseite, auf der sie sich befinden. Diese Links funktionieren auch auf der lokalen Kopie einer Webseite. Beispiel: Link zur Stadt Wien.

Verwandte Webseiten (des gleichen Webs) werden "relativ" adressiert, d.h. der Browser sucht sie ausgehend von jener Webseite, auf der sie sich befinden - meist ist das im gleichen Verzeichnis (Ordner). Diese Links funktionieren auf lokalen Kopien nur dann, wenn sie auch die betreffenden Webseiten kopiert haben. Beispiel: Webseite hier nicht vorhanden.

Sonstige Bestandteile: Häufig enthalten Webseiten nicht nur Bilder, sondern auch andere externe Bestandteile, die in eigenen Dateien untergebracht sind: Stil-Dateien (*.css), Script-Dateien (*.js), usw. Das Verhalten ihrer Kopie kann fehlerhaft sein, wenn diese Bestandteile nicht efunden werden.

Verzeichnis-Ansicht: Je nach Einstellung des Webservers dürfen sie sich im Verzeichnis (Ordner) der Webseite umsehen (directory browsing): Löschen sie z.B. die Endung "src_code.htm" aus der aktuellen Web-Adresse (URL) ihres Browsers. Mit etwas Glück sehen sie das Verzeichnis "webdesign" und alle darin untergebrachten Dateien (Webseiten, Bilder, Sounds, Stil-Angaben, Programme, ...), die sie auch einzeln öffnen können.

Spezial-Software: Für das komplette Kopieren ("Saugen") ganzer Webs, inklusive aller Bestandteile (z.B. Bilder) gibt es eigene Software (Stichwort z.B. download manager), meist als Shareware oder FreeWare.

Das Web wird in einem eigenen Ordner untergebracht, wo sie es in aller Ruhe studieren können.

Wenn sie ein Web lediglich konsumieren (ansehen) möchten, ergibt das natürlich keinen Sinn. Sie verbrauchen mehr Ladezeit und viel Speicherplatz und erhalten eine Kopie mit meist eingeschränkter Funktion (Bilder, Links, ...)

Rahmen-(frame)-Seiten:
enthalten selbst keine Information, sondern dienen ähnlich wie Bilder-Rahmen nur als Mittel zur Darstellung einer oder mehrerer "eigentlicher" Webseiten. Der Quelltext von Rahmenseiten ist kurz und erkennbar an den Befehlen (tags) <frameset>, <frame> usw. Um den Quelltext einer in einem Rahmen enthaltenen Webseite anzuzeigen, können sie verschiedene Tricks anwenden:

Navigator verwenden: Falls sie die "eigentlichen" Webseiten sehen wollen, so verwenden sie einen Browser, der einzelne Seiten von Rahmen anzeigen kann (Navigator, Mozilla...).
Mit der rechten Maustaste in eine Rahmenseite klicken und befehlen "Rahmen in neuem Fenster öffnen" (Open frame in new window): Wenn es der Web-Hersteller nicht unterbunden hat, sehen sie dann die Webseite und können deren Quelltext studieren.

Rahmen-Quelltext auswerten:
Sehen sie sich den Quelltext der Rahmenseite an. Sie finden mindestens 2 <frame...>-tags, wie z.B.:

<frame name="rechts" src="start.htm">
Im Attribut src ist die Startseite jedes Rahmens festgelegt. Notieren sie deren URL (hier: start.htm) und geben sie die URL sinnvoll als Web-Adresse in ihren Browser ein.
Wenn die aktuelle Web-Adresse keinen Dateinamen enthält, dann fügen sie den Dateinamen an. Beispiel:
aus http://www.dasweb.com/ wird http://www.dasweb.com/start.htm.
Wenn die aktuelle Web-Adresse bereits einen Dateinamen enthält, dann ersetzen sie diesen. Beispiel:
aus http://www.dasweb.com/rahmen.htm wird
http://www.dasweb.com/start.htm.

Navigations-Links auswerten:
Auf den meisten Rahmenseiten finden sie einige Links zur Navigation. Diese Links enthalten die Information, wie man zur gesuchten Webseite kommt.
+ Fahren sie mit dem Mauszeiger über den Link: meist wird die URL (Web-Adresse) der Ziel-Seite dabei in der Statuszeile (ganz unten links) angezeigt. Öffnen sie ein neues Browser-Fenster und geben sie die Adresse so ein, wie bei "Rahmen-Quelltext" beschrieben.
+ Versuchen sie, die Navigations-Webseite direkt zu öffnen (z.B. mit Navigator), und untersuchen sie deren Quelltext. Dort finden sie meist Links, wie z.B.
<a href="zielseite.htm" target="rechts">
Im Attribut href ist die Zielseite des jeweiligen Links festgelegt (hier: zielseite.htm). Öffnen sie ein neues Browser-Fenster und geben sie die Adresse so ein, wie bei "Rahmen-Quelltext" beschrieben.

Geschützte Rahmen Web-ProgrammiererInnen versuchen manchmal, das Öffnen einzelner Seiten ohne Rahmen zu unterbinden. Das verhindert nicht die Möglichkeit, macht es aber komplizierter und wird hier nicht beschrieben.

Dynamische Webseiten: Bei diesen Seiten sind die Inhalte nicht "statisch" durch HTML-Programme und -Daten vorgegeben, sondern werden "dynamisch" zum Zeitpunkt des Ansehens erzeugt. Je nach den Umständen sehen sie dann den wirklichen Quelltext (z.B. das dahinterstehende JavaScript-Programm) oder nur das Ergebnis (den soeben durch das JavaScript-Programm erzeugten HTML-Code). Wenn sie diesen HTML-Code kopieren, wird sich ihre Webseite möglicherweise anders als das Original verhalten.
Beispiel: Dieser Text wird beim Anklicken "dynamisch" verändert.

Quelltext-Service:
Wenn sie den Quelltext eigener Webseiten komfortabel anzeigen wollen, dann bieten sie dazu ein eigenes Service.
Mit Klick wird der Quellcode dieser Seite angezeigt. Den Service-Link erzeugen sie so:
<a href="javascript:src_show()"> ... </a>

Hier das Script zu diesem Service:
<script type="text/javascript">
function src_show() {
  window.location='view-source:'+window.location.href;
}
<script>

Quelltext-BookMarklet:
Ein BookMarklet ist ein kleines Werkzeug-Programm, das unter den Favoriten (Lesezeichen, BookMarks, ...) ihres Browsers gespeichert wird.

Fügen sie diesen Link " Quelltext" zu den Favoriten ihres Browsers (mit der rechten Maustaste anklicken, Befehl "Zu Favrotiten hinzufügen, Bookmark this Link, ... " oder ähnlich).

Nun können sie das Programm "Quelltext" aus der Favoriten-Liste ihres Browsers auswählen: Wenn es korrekt funktioniert, wird der Quelltext dieser Seite angezeigt.

Je nach Browser-Hersteller und -Version kehren sie unterschiedlich wieder zur Original-Seite zurück: entweder mit der "Zurück"-Taste des Browsers, oder durch Schliessen des Code-Fensters, oder durch eine Kombination davon.

Die Quellcode-Anzeige haben sie auch schon mit anderen Mitteln geschafft. Das BookMarklet kann aber noch mehr:
Damit können sie nun den Quelltext jeder Webseite anzeigen, die sie gerade geöffnet haben !

Homepage von PS-Trainer - Web-Entwicklung - an PS-Trainer

Aktuelle Daten dieser Seite Letzte Änderung:
  Geocities