HTML-, CSS- und JavaScript-Code übernehmen

Rotoide

Das Problem

Auf der Seite "Welche Programmiersprache sollte man lernen?" wird die Empfehlung gegeben, einfach den Quellcode der gerade gelesenen Seite auf den eigenen Computer zu übernehmen, zu modifizieren und das Ergebnis zu deuten.

Dies soll mit dieser Seite Schritt für Schritt demonstriert werden. Dafür sollte man einen Editor (findet man in Windows z. B. unter "Zubehör") für die Aufnahme und die Änderung des Quellcodes starten und vor dem Abspeichern ein spezielles (leeres) Verzeichnis auf dem eigenen Computer einrichten. Nachfolgend wird gezeigt, wie das bei Verwendung des Browsers Firefox aussieht, ärgerlicherweise findet man bei anderen Browsern (z. Google Chrome) nicht immer ein Menü mit dem Angebot "Datei". Abhilfe in diesen Fällen für das Öffnen der Datei im Browser (nachfolgend der 4. Punkt): Mit dem Explorer zum Ordner, in dem die HTML-Datei gespeichert ist, und Doppelklick auf die Datei.

Der folgende Ausschnitt aus der HTML-Datei zeigt in den roten und grünen Zeilen, die man hier noch nicht komplett verstehen muss, die Gründe dafür:

<head>
   <meta charset="windows-1252">
   <meta name="author" content="Dankert">
   <title>HTML-Code übernehmen</title>
   <link rel="stylesheet" href="proglang.css" type="text/css">
   <script type="text/javascript" src="http://www.TM-Mathe.de/CanvasGI/CanvasGI.js"</script>
   <script type="text/javascript" src="http://www.TM-Mathe.de/CanvasGI/platonbucket.js"</script>
</head>

<body>
  <div id="inhalt">
     <h1>HTML-, CSS- und JavaScript-Code übernehmen</h1>
     <img src="rotoide.jpg" alt="Rotoide" title="Rotoide" width="278" height="228" style="margin:10px;float:right;">
     <h2>Das Problem</h2>
     <p>Auf der Seite "<a href="proglang.html">Welche 
        Programmiersprache sollte man lernen?</a>" wird die Empfehlung gegeben,
        einfach den Quellcode der gerade gelesenen Seite auf den eigenen Computer zu übernehmen,
        zu modifizieren und das Ergebnis zu deuten.
     </p>
     ...
     

In den 5 Zeilen wird jeweils auf andere Dateien verwiesen (mit den Attributen href= bzw. src=), die an dieser Stelle eingebunden werden sollen, mit den roten Verweisen nur mit dem jeweiligen Dateinamen, mit den grünen Verweisen mit dem kompletten Pfad, der auch den Ort angibt, wo die Dateien gefunden werden. Wenn nur der Dateiname angegeben ist (proglang.css, rotoide.jpg bzw. proglang.html), wird die Datei in dem Verzeichnis gesucht, in dem sich auch die HTML-Datei befindet, und deshalb werden diese Dateien nicht gefunden. Die JavaScript-Dateien (grüne Verweise) werden gefunden, und deshalb funktioniert die Animation mit den "Tanzenden Körpern" nach wie vor.

Man registriere eine wichtige Eigenschaft der Browser: Sie lassen sich durch fehlende Informationen kaum in Verlegenheit bringen, sie stellen das dar, was möglich ist. Zwei Möglichkeiten gibt es, den Mangel zu heilen: Man kann die Dateinamen mit dem Pfad ergänzen, wo der Browser sie findet, oder man lädt die Dateien in das Verzeichnis, in dem sich die HTML-Datei befindet.

Man kann sich zum Beispiel die Datei proglang.css auf dem gleichen Weg wie die HTML-Datei auf den eigenen Computer übertragen, was sinnvoll ist, wenn man sich auch ansehen möchte, wie die Formatierung der Seite codiert wurde bzw. wenn man diese auch modifizieren möchte. Man klickt im Fenster mit dem Quellcode der Seite auf proglang.css, und es öffnet sich ein neues Quellcode-Fenster: Übernahme des Codes in den Editor und Speichern im gleichen Ordner unter dem Namen proglang.css. Noch einfacher kann man sich die Bilddatei besorgen: Man klickt auf der Originalseite mit der rechten Maustaste auf das Bild und wählt Grafik speichern unter..., um das Bild auf den eigenen Computer zu kopieren.

Wenn man dies erledigt hat, müsste die Seite myhomepage.html im Browser exakt so aussehen wie die Originalseite im Internet.

Anleitung zum Diebstahl?

Was auf dieser Seite demonstriert wird, sieht sehr nach einer "Anleitung zum Diebstahl" aus. Ist es natürlich nicht, wenn der Eigentümer der Dateien die Übernahme ausdrücklich erlaubt (ist hiermit geschehen). Das wird auch bei anderen Dateien anderer Eigentümer eher die Regel als die Ausnahme sein. Man weiß es aber meistens nicht, und ganz speziell bei Bilddateien sollte man vorsichtig sein.

Aber eine "Anleitung, sich inspirieren zu lassen", soll es auf jeden Fall sein, denn es ist natürlich nicht verboten, sich offen zugängliche Informationen anzusehen.

Wenn man alles löscht, was man für eine eigene Seite ohnehin nicht braucht, dann könnte zum Beispiel diese Datei als myhomepage.html übrig bleiben:

<!DOCTYPE html>
<html lang="de">

<head>
   <meta charset="windows-1252">
   <meta name="author" content="Mein Name">
   <title>Meine erste Homepage</title>
   <link rel="stylesheet" href="proglang.css" type="text/css">
   <script type="text/javascript" src="http://www.TM-Mathe.de/CanvasGI/CanvasGI.js"></script>
   <script type="text/javascript" src="http://www.TM-Mathe.de/CanvasGI/platonbucket.js"></script>
</head>

<body>
  <div id="inhalt">
     <h1>Meine erste Homepage</h1>
     <h2>Was ich hier mitteilen möchte</h2>
     <p>Dies ist die erste Version meiner persönlichen Homepage, die ab sofort ständig
        aktualisiert werden wird. Die Animation "Tanzende Körper", die nachfolgend zu sehen ist,
        hat keine Bedeutung. Ich finde sie nur ganz hübsch als Platzhalter, bis mir etwas
        Sinnvolles eingefallen ist, was ich hier veröffentlichen kann.
     </p>
     <div style="margin:10px;float:right;" >
         <canvas id="mycanvas" width="850" height="450">
         </canvas>
     </div>
  </div>  
</body>
</html>
     

Es ist also nur sehr wenig übrig geblieben, und in den verbliebenen Zeilen wurden folgende Änderungen (grün dargestellt) vorgenommen:

Und so sieht die Datei myhomepage.html nun im Browser aus.