Anzeigen der HTML-Quelle in Google Chrome

Erfahren Sie, wie eine Website erstellt wurde, indem Sie den Quellcode anzeigen

Unabhängig davon, ob Sie ein Neuling in der Webbranche oder ein erfahrener Veteran sind, wird das Anzeigen der HTML-Quelle verschiedener Webseiten im Laufe Ihrer Karriere wahrscheinlich viele Male durchgeführt.

Für diejenigen, die noch nicht mit Webdesign vertraut sind, ist das Anzeigen des Quellcodes einer Site eine der einfachsten Möglichkeiten, um zu sehen, wie bestimmte Dinge ausgeführt werden, damit Sie aus dieser Arbeit lernen und bestimmte Codes oder Techniken in Ihrer eigenen Arbeit anwenden können. Wie jeder Webdesigner, der heute arbeitet, vor allem diejenigen, die seit den Anfängen der Branche dabei sind, und es ist sicher, dass sie Ihnen sagen, dass sie HTML gelernt haben, indem sie einfach die Quelle der Webseiten angesehen haben, die sie gesehen haben und fasziniert waren durch. Neben dem Lesen von Webdesign-Büchern oder der Teilnahme an Fachkonferenzen ist das Anzeigen des Quellcodes einer Site eine hervorragende Möglichkeit für Anfänger, HTML zu lernen.

Mehr als nur HTML

Beachten Sie, dass Quelldateien sehr kompliziert sein können (und je komplexer die angezeigte Website ist, desto komplexer ist wahrscheinlich der Code der Website). Neben der HTML-Struktur, aus der sich die angezeigte Seite zusammensetzt, gibt es auch CSS (Cascading Style Sheets), die das Erscheinungsbild dieser Site bestimmen. Darüber hinaus enthalten viele Websites heute Skriptdateien, die zusammen mit dem HTML-Code enthalten sind.

Es ist wahrscheinlich, dass mehrere Skriptdateien enthalten sind, von denen jede unterschiedliche Aspekte der Site unterstützt. Ehrlich gesagt, kann der Quellcode einer Site überwältigend erscheinen, insbesondere wenn Sie noch nicht mit diesem Thema vertraut sind. Seien Sie nicht frustriert, wenn Sie nicht sofort herausfinden können, was mit dieser Website los ist. Das Anzeigen der HTML-Quelle ist nur der erste Schritt in diesem Prozess. Mit ein wenig Erfahrung werden Sie besser verstehen, wie all diese Teile zusammenpassen, um die Website zu erstellen, die Sie in Ihrem Browser sehen. Wenn Sie sich mit dem Code vertraut machen, können Sie mehr daraus lernen und es wird Ihnen nicht so entmutigend erscheinen.

Wie sehen Sie den Quellcode einer Website? Hier finden Sie eine schrittweise Anleitung zur Verwendung des Google Chrome-Browsers.

Schritt für Schritt Anweisungen

  1. Öffnen Sie den Google Chrome-Webbrowser (wenn Sie Google Chrome nicht installiert haben, ist dies ein kostenloser Download).

  2. Navigieren Sie zu der Webseite, die Sie überprüfen möchten .

  3. Klicken Sie mit der rechten Maustaste auf die Seite und sehen Sie sich das angezeigte Menü an. Klicken Sie in diesem Menü auf Seitenquelle anzeigen .

  4. Der Quellcode für diese Seite wird jetzt als neue Registerkarte im Browser angezeigt.

  5. Alternativ können Sie auch die Tastenkombinationen von STRG + U auf einem PC verwenden, um ein Fenster mit dem angezeigten Quellcode einer Site zu öffnen. Auf einem Mac lautet diese Verknüpfung Befehlstaste + Wahltaste + U.

Entwicklerwerkzeuge

Neben der einfachen Funktion zum Anzeigen von Seitenquellen, die Google Chrome bietet, können Sie auch die hervorragenden Entwicklertools nutzen, um noch tiefer in eine Website einzutauchen. Mit diesen Tools können Sie nicht nur den HTML-Code anzeigen, sondern auch den CSS-Code, der für die Anzeige von Elementen in diesem HTML-Dokument gilt.

So verwenden Sie die Entwicklertools von Chrome:

  1. Öffnen Sie Google Chrome .

  2. Navigieren Sie zu der Webseite, die Sie überprüfen möchten .

  3. Klicken Sie auf das dreizeilige Symbol in der oberen rechten Ecke des Browserfensters.

  4. Bewegen Sie den Mauszeiger im Menü über Weitere Tools und klicken Sie dann im angezeigten Menü auf Entwickler-Tools .

  5. Dadurch wird ein Fenster geöffnet, in dem der HTML-Quellcode links im Bereich und das zugehörige CSS rechts angezeigt werden.

  6. Wenn Sie alternativ mit der rechten Maustaste auf ein Element in einer Webseite klicken und im angezeigten Menü die Option "Überprüfen" auswählen, werden die Entwickler-Tools von Chrome eingeblendet , und das genaue ausgewählte Element wird im HTML- Code mit dem entsprechenden rechts angezeigten CSS hervorgehoben. Dies ist sehr hilfreich, wenn Sie mehr darüber erfahren möchten, wie ein bestimmtes Teil einer Website erstellt wurde.

Ist das Anzeigen von Quellcode legal?

Im Laufe der Jahre hatten wir viele neue Webdesigner die Frage, ob es akzeptabel ist, den Quellcode einer Website anzuzeigen und ihn für ihre Ausbildung und letztendlich für die von ihnen geleistete Arbeit zu verwenden. Das Kopieren des Codes einer Site im Großhandel und das Weitergeben des Codes als eigenen Code auf einer Site ist sicherlich nicht akzeptabel. Wenn Sie diesen Code als Sprungbrett verwenden, um daraus zu lernen, wird tatsächlich die Anzahl der in dieser Branche erzielten Fortschritte ermittelt.

Wie wir am Anfang dieses Artikels erwähnt haben, wird es Ihnen heute schwer fallen, einen funktionierenden Web-Profi zu finden, der durch das Betrachten der Quelle einer Site nichts gelernt hat! Ja, das Anzeigen des Quellcodes einer Site ist legal. Es ist auch in Ordnung, diesen Code als Ressource zu verwenden, um etwas Ähnliches zu erstellen. Nehmen Sie den Code so wie er ist und geben Sie ihn weiter, während Ihre Arbeit auf Probleme stößt.

Letztendlich lernen Web-Profis voneinander und verbessern häufig die Arbeit, die sie sehen und von der sie inspiriert sind. Zögern Sie also nicht, den Quellcode einer Site anzuzeigen und ihn als Lernwerkzeug zu verwenden.