{"id":124,"date":"2020-08-19T07:43:28","date_gmt":"2020-08-19T05:43:28","guid":{"rendered":"https:\/\/followthescore.org\/schueler-labor\/?page_id=124"},"modified":"2022-10-21T00:51:22","modified_gmt":"2022-10-20T22:51:22","slug":"html","status":"publish","type":"page","link":"https:\/\/followthescore.org\/schueler-labor\/html\/","title":{"rendered":"HTML"},"content":{"rendered":"\n<p>Diese Seite erkl\u00e4rt in knapper Form die Ideen von HTTP, HTML, CSS, JS. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2>Browseranfrage<\/h2>\n\n\n\n<p>Du betrachtest die aktuelle Seite in einem Browser. Ein Web-Browser ist ein lokal auf deinem (Windows-)Rechner installiertes Programm. Wenn man oben in der URL-Zeile einen Namen eingibt, versucht der Browser eine Datei (genauer gesagt: eine &#8222;Resource&#8220;) mit diesem Name zu finden.<\/p>\n\n\n\n<h2>Was vom Server zur\u00fcck kommt<\/h2>\n\n\n\n<p>Oft wird es sich bei der Server-Antwort um den Inhalt einer Datei im HTML-Format handeln, die Text enth\u00e4lt, welcher angezeigt werden soll.<\/p>\n\n\n\n<p>Sie kann zus\u00e4tzlich auch Verweise auf weitere Ressourcen enthalten, wie etwa auf Style-Anweisungen (CSS-Dateien), Fonts (WOFF) oder anzuzeigende Bilder (JPG,PNG), auf Sound (MP3,OGG) oder Videos (MP4,WEBM) oder auch auf Programm-Code (JS), den der Browser ausf\u00fchren soll. Wenn du eine &#8222;einzelne Seite&#8220; im Web aufrufst, kann es ohne weiteres passieren, dass der Browser sich 30 mal mit dem Server unterh\u00e4lt, bevor die Seite fertig aufgebaut ist. Es kann sogar sein, dass er zwischendurch auch Inhalte von anderen Servern herbeiholt, weil in der urspr\u00fcnglichen Antwort des angesprochenen Servers darum gebeten wird. Damit auf diese Weise nicht zu viel &#8222;Unfug&#8220; getrieben wird, haben die Browser bestimmte Sicherheitsrichtlinien (CORS).<\/p>\n\n\n\n<p>Die vielen Anfragen, die beim Aufbau einer Seite im Hintergrund passieren, laufen \u00fcbrigens asynchron, d.h. der Browser stellt gleichzeitig viele Anfragen (z.B. nach allen Bildern, die auf der Seite gezeigt werden sollen) und bekommt die Antworten dann zeitlich versetzt und ungeordnet. Er muss alles richtig zusammenf\u00fchren. Damit der Benutzer nicht warten muss, bis die letzte Antwort eingetroffen ist, baut der Browser den Bildschirm auf der Basis von Teilantworten auf und baut ihn sp\u00e4ter um, nachdem weitere Informationen eingetroffen sind.<\/p>\n\n\n\n<p>Jeder Browser besitzt einen <strong>Debugger<\/strong>. Den solltest du unbedingt kennenlernen. Klicke rechts auf irgendein Element des Browser-Fensters und w\u00e4hle &#8222;Untersuchen&#8220; aus (in Google Chrome, bei anderen Browser ist es \u00e4hnlich). Betrachte alle Tabs (Reiter, Laschen), insbesondere den Network-Tab. Damit du siehst was beim Laden einer Seite passiert, musst du die Seite im Browser erneut laden, w\u00e4hrend der Debugger offen ist. Schau dir auch den HTML-Code an, JSON Responses, JS-Code und Cookies.<\/p>\n\n\n\n<h2>Rendering<\/h2>\n\n\n\n<p>Die Hauptaufgabe des Browsers besteht darin, den Text und die Bilder darzustellen. Das nennt man &#8222;Rendering&#8220;. Beim Rendering beachtet der Browser die HTML-Anweisungen (&#8222;Tags&#8220; zwischen spitzen Klammern), welche die Formatierung (&#8222;Layout&#8220;,&#8220;Style&#8220;) festlegen (Schriftart, Gr\u00f6\u00dfe, Fettdruck, Einr\u00fcckungen, Farben, Abst\u00e4nde, Trennlinien, Fu\u00dfnoten usw.). Damit der eigentliche inhaltliche Text und die vielen Layout-Hinweise sich nicht zu sehr vermischen, lagert man das Styling gern in separate Abschnitte der HTML-Datei oder gar in separate CSS-Dateien aus.<\/p>\n\n\n\n<h2>Programmausf\u00fchrung im Browser<\/h2>\n\n\n\n<p>Wenn der Browser in den Server-Antworten neben manchen anderen Dingen auch Javascript-Code (JS) erhalten hat, wird er diesen ausf\u00fchren. Dabei kann er zu beliebigen Zeitpunkten &#8211; auch ohne dass du etwas dazu tust oder es bemerkst &#8211; weitere Anfragen an den Server richten. Oft erh\u00e4lt er dabei eine Antwort im JSON-Format. Dieses Datenformat wird zwar auch via HTTP transportiert, ist aber f\u00fcr den Nachrichtenaustausch zwischen zwei Programmen gedacht und daher f\u00fcr den Menschen nur bedingt lesbar. Solche Nachrichten werden in der Regel dem Nutzer auch nicht direkt angezeigt.<br><em>Ein Beispiel:<\/em> Wenn du in einem Formular auf einer Website eine Postleitzahl eingibst, besorgt sich der Browser eine Liste der dazu passenden St\u00e4dtenamen vom Server, nachdem du die Ziffern eingegeben hast. Es w\u00e4re h\u00f6chst unpraktisch, wenn der Server dem Browser eine Liste aller St\u00e4dte vorab mitteilen w\u00fcrde. Der Browser f\u00fcllt daraufhin das Feld mit dem Ortsnamen. An der Reaktion des Browsers kannst du erkennen, dass er im Hintergrund etwas getan hat. Wenn du dann noch die Stra\u00dfe und die Hausnummer eingibst, kann es sein, dass der Browser nochmals den Server fragt, um herauszufinden, ob Personen mit dieser Wohnadresse voraussichtlich ihre Rechnung bezahlen werden (Bonit\u00e4t). Dar\u00fcber wird dich der Browser normalerweise nicht informieren. Wenn du dann aber etwas bestellen willst und die Bonit\u00e4t wurde vom Server als <em>gering<\/em> eingesch\u00e4tzt, dann erlaubt dir der Browser bei der Auswahl der Zahlungsbedingungen jedoch nur &#8222;Vorkasse&#8220; und &#8222;per Nachnahme&#8220;.<\/p>\n\n\n\n<h2>Internet &#8211; Nachrichtenverkehr<\/h2>\n\n\n\n<p>Alle Nachrichten, die \u00fcber das Web ausgetauscht werden, sind im Prinzip technisch zug\u00e4nglich, wenn man sich damit auskennt. Allerdings werden alle Nachrichten in kleine Portionen (&#8222;Pakete&#8220;) zerhackt und nehmen h\u00e4ufig sogar unterschiedliche Wege, wenn sie von einer IP-Adresse A zu einer IP-Adresse B \u00fcbertragen werden. Dabei ger\u00e4t auch die Reihenfolge durcheinander (Laufzeitunterschiede). Der Empf\u00e4nger muss also alle Pakete wieder zusammensetzen; verloren gegangene Pakete erkennt er und fordert sie erneut an.<\/p>\n\n\n\n<p>Wenn jemand technisch viel wei\u00df, kann er dennoch als &#8222;man in the middle&#8220; alle Pakete abfangen und deren Inhalt ver\u00e4ndern, ohne dass es A oder B mitbekommen. Um sich  dagegen zu sch\u00fctzen, k\u00f6nnen Sender und Empf\u00e4nger Verfahren zur Datenverschl\u00fcsselung benutzen, Au\u00dferdem wollen sie nat\u00fcrlich wissen, ob sie wirklich mit dem gewollten Partner reden oder mit einem verborgenen Mittelsmann.<\/p>\n\n\n\n<p>HTTP-Nachrichten beruhen urspr\u00fcnglich immer darauf, dass der Client die Initiative ergreift und den Server etwas fragt und dass dieser dann antwortet. Der Browser \u00fcberwacht die Zeitdauer und meldet &#8222;nicht verf\u00fcgbar&#8220;, wenn die Antwort zu lange dauert.<br>Es gibt jedoch seit einiger Zeit auch diverse Mechanismen, \u00fcber die ein Server von sich aus dem Client etwas mitteilen kann (push-Nachrichten, Websockets, Long Polling, usw.). Oft ist dies aus Sicht des Benutzers l\u00e4stig, manchmal aber auch erw\u00fcnscht (B\u00f6rsenkursticker alle 10 Sekunden). Die einfachste Art des &#8222;Zusendens&#8220; besteht darin, dass der Browser per JS regelm\u00e4\u00dfig Update-Requests an den Server schickt und daraufhin den Bildschirminhalt aktualisiert.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2>Die URL (uniform resource locator)<\/h2>\n\n\n\n<p><strong>Doch zur\u00fcck zur Anfrage, die man in das URL-Feld eintr\u00e4gt: <\/strong><\/p>\n\n\n\n<ul><li>Beginnt der Name mit <em>file:\/\/<\/em> , dann sucht der Browser nach einer Datei auf der lokalen Festplatte.<\/li><li>Beginnt der Name mit <em>http:\/\/localhost<\/em> , dann fragt der Browser einen HTTP-Server, der sich auf dem eigenen Rechner befinden muss; das klappt nat\u00fcrlich nur, wenn ein solcher Server installiert ist (z.B. mit <em>xampp<\/em>)<\/li><li>Beginnt die URL mit Zahlen, die eine IP-Adresse darstellen, so wendet sich der Browser direkt an diese Adresse. Befindest du dich in einem LAN, dessen IP-Adressbereich mit 192.168.xxx.xxx beginnt, so kannst du auf diese Weise HTTP-Server erreichen, die sich auf anderen Rechnern in deinem LAN befinden.<\/li><li>Zu einer http:\/\/ &#8211; Anfrage geh\u00f6rt immer auch eine Portnummer, die mit einem Doppelpunkt abgetrennt ist. Allerdings kann man diese Nummer weglassen, wenn man den Standard-Port f\u00fcr HTTP-Anfragen (:80) meint.<br>Wenn man einen Server installiert, muss man den Port festlegen, auf dem er lauscht und antwortet. W\u00e4hlt man z.B. 9000 aus, so kann man diesen lokalen Server unter http:\/\/localhost:9000 erreichen. Auf diese Weise kann man auf einem Rechner auch mehrere Server installieren, solange sie auf unterschiedlichen Ports sitzen.<\/li><li>Steht hinter http:\/\/ eine Domainbezeichnung (also z.B. &#8222;faz.net&#8220;), so wendet sich der Browser an einen <em>Nameserver<\/em> im Internet (wo dieser zu finden ist, steht in der Netzwerkkonfiguration deines Rechners) und erh\u00e4lt von diesem die zugeordnete IP-Adresse.<\/li><li>Damit der Benutzer sicher sein kann, dass er auch wirklich mit dem Server spricht, dessen Name er angegeben hat, gibt es eine Hierarchie des Vertrauens, die auf Zertifikaten beruht. Verwendet man <em>https<\/em> anstelle von <em>http<\/em> in der URL-Anfrage, dann benutzen Browser und Server andere Ports (:443) und verst\u00e4ndigen sich durch den Austausch von Zusatzinformationen \u00fcber die Authentifikation. Der Datenverkehr zwischen Browser und Server ist dann verschl\u00fcsselt, so dass ihn ein fremder Lauscher im Netz nicht entziffern kann.<\/li><li>Es kann sein, dass mehrere unterschiedliche Domains auf dieselbe IP-Adresse zeigen.<\/li><li>Wenn man in der Browser-Zeile nur die Domain oder nur eine IP-Adresse angibt, antwortet der Server mit einer <strong>Standarddatei<\/strong>, die &#8222;index.php&#8220; oder &#8222;index.html&#8220; hei\u00dft. Er sucht diese Datei in seinem Web-Root-Verzeichnis, das oft aus Sicht des lokalen Dateisystems auf dem Server &#8222;www&#8220; oder &#8222;htdocs&#8220; hei\u00dft.<\/li><li>Wenn man hinter dem Domainnamen einen Pfad und\/oder einen Dateinamen angibt, dann sucht der Server diesen <strong>Pfad<\/strong> (relativ zu seiner Web-Root).<\/li><li>Wenn ein Dateiname auf html, png, jpg usw. endet, liefert der Server die entsprechende Datei aus (&#8222;statisches HTML&#8220;).<\/li><li>Wenn ein Dateiname auf php endet, dann startet der Server den php-Interpreter (also ein <strong>Programm<\/strong>, das auf dem Server installiert ist) und bietet ihn, die Anweisungen in der betreffenden php-Datei auszuf\u00fchren. Bei der Ausf\u00fchrung der Anweisungen erzeugt der php-Interpreter dann HTML-Code (&#8222;dynamisches HTML&#8220;), den der Server an den Browser als Antwort zur\u00fcckgibt.<\/li><li>Wenn man eine php-Datei vom Browser aus anspricht, kann man an die URL ein &#8222;?&#8220; anh\u00e4ngen und dahinter <strong>Parameter<\/strong> angeben, die der Server liest und an das php-Programm weitergibt. Auf diese Weise kann das php-Programm unterschiedliche Antworten erzeugen, abh\u00e4ngig von den Parameter-Inhalten. Es gibt sogar eine M\u00f6glichkeit, Verweise auf Dateien im eigenen Dateisystem als Parameter anzuh\u00e4ngen. In diesem Fall \u00fcbertr\u00e4gt der Browser den Inhalt dieser Dateien zusammen mit der URL als Anhang zu der URL-Anfrage. Der Server kann solche Dateien dann in seinem eigenen Dateisystem abspeichern, ver\u00e4ndern und beliebig weiter verwenden.<\/li><li>Wenn man an eine URL ein &#8222;#&#8220; (<strong>Hash-Tag<\/strong>) und einen Text anh\u00e4ngt, dann betrachtet der Browser den Teil hinter dem # als Hinweis darauf, zu welchem Textteil der Benutzer springen m\u00f6chte, nachdem die HTML-Antwort des Servers empfangen und dargestellt (gerendert) wurde. Damit das klappt, muss der HTML-Text eine Markierung mit dem betreffenden Namen enthalten.<\/li><\/ul>\n\n\n\n<p>Es lohnt sich, wenn du einmal die Regeln f\u00fcr den <em><strong><a href=\"https:\/\/de.wikipedia.org\/wiki\/Uniform_Resource_Locator\">Aufbau einer URL<\/a><\/strong><\/em> genau studierst.<\/p>\n\n\n\n<h2>Daten speichern auf dem Server<\/h2>\n\n\n\n<p>Wenn man Daten in eine Webseite eintr\u00e4gt, kann der Browser sie (hoffentlich per https verschl\u00fcsselt) an den Server \u00fcbertragen.<br>Er spricht dazu auf dem Server h\u00e4ufig ein php-Script an (es funktioniert aber auch mit Java-Programmen und etlichen anderen Technologien).<\/p>\n\n\n\n<p>Das php-Programm auf dem Server pr\u00fcft die Daten und speichert sie in einer Datenbank, die sich auf dem Server (oder auf einem separaten Rechner innerhalb des Server-Netzwerks) befindet.<\/p>\n\n\n\n<p>Wenn der Benutzer sich Tage sp\u00e4ter wieder auf dieser Webseite anmeldet, kann ihm der Server &#8222;seine&#8220; Daten (z.B. sein Benutzerprofil) wieder zeigen, indem ein anderes php Script den Namen des Benutzers vom Browser bekommt und die gespeicherten Daten aus der Datenbank abruft und dem Browser als JSON oder HTML als Antwort zusendet.<\/p>\n\n\n\n<p>Das php-Script kann die Daten als JSON-Nachricht an den Browser \u00fcbertragen oder direkt als HTML.<\/p>\n\n\n\n<h2>Daten speichern im Browser<\/h2>\n\n\n\n<p>Wenn Menschen &#8222;anonym&#8220; eine Website besuchen und z.B. einen Warenkorb zusammenstellen, ohne dann am Ende wirklich einzukaufen,<br>dann m\u00f6chte der Betreiber der Webseite sie gerne wieder mit diesem Warenkorb konfrontieren, wenn die Benutzer Tage sp\u00e4ter die betreffende Seite noch einmal aufrufen.<br>Dazu hinterlegt ein JS-Programm, das von der Website als Antwort auf die erste http-Anfrage \u00fcbermittelt wurde, bestimmte Daten im Browser (unter dem Namen ihrer URL), z.B. eine Referenznummer. Gleichzeitig wird auf dem Server unter dieser Referenznummer der Warenkorb in der Datenbank gespeichert.<br>Wenn nun der Benutzer mit demselben Endger\u00e4t die Seite erneut besucht, pr\u00fcft der JS-Code im Browser, ob bereits ein Cookie mit einer Referenznummer hinterlegt ist und fordert ggf. beim Server den Warenkorb an. Auch Spracheinstellungen und etliches andere kann man in Cookies hinterlegen.<\/p>\n\n\n\n<p>Reiseb\u00fcros benutzen manchmal diese Verfahren, um zu pr\u00fcfen, ob ein Kunde sich mehrfach f\u00fcr dieselbe Reise interessiert &#8211; ohne jedoch zu buchen. Manchmal setzen sie dann die Preise etwas h\u00f6her an bei sp\u00e4teren Besuchen, um den Kaufdruck zu erh\u00f6hen.<\/p>\n\n\n\n<p>Wenn man sich von einem anderen Endger\u00e4t aus anmeldet und exakt dieselbe Reise abfragt, sieht man einen niedrigeren Preis.<\/p>\n\n\n\n<p>Der JS-Code einer Website kann auch versuchen, noch zus\u00e4tzliche Daten \u00fcber den Nutzer herauszufinden, etwa indem er nach der Browser-Version fragt oder indem er einen kleinen Benchmark durchf\u00fchrt, um die Leistungsf\u00e4higkeit des Rechners zu ermitteln. Gewinnt er den Eindruck, dass der Benutzer an einem modernen (teuren) Rechner sitzt, kann er ihm hochwertige Reisen bevorzugt vorschlagen.<\/p>\n\n\n\n<p>Damit eine Website nicht deinen Rechner vollst\u00e4ndig aussp\u00e4hen kann, benutzen die Browser ein &#8222;Sandbox&#8220; Konzept, d.h der JS-Code im Browser kommt nicht an das Dateisystem deines Rechners heran.<\/p>\n\n\n\n<h2>Batch-Requests, Spidering, SEO<\/h2>\n\n\n\n<p>Anstatt einen Browser zu benutzen, kann man einen http-Request auch mit einem Kommandozeilenwerkzeug wie <em>wget<\/em> oder <em>curl<\/em> absetzen. Man kann curl-Aufrufe auch in ein lokal ausgef\u00fchrtes php-Script einbinden. Auf diese Weise k\u00f6nnte man z.B. 10 Nachrichtenportale abfragen und dann per Programm in den erhaltenen Antworten nach irgendeinem Stichwort suchen und den Textabschnitt anzeigen, in dem das Stichwort vorkommt. <\/p>\n\n\n\n<p>So etwas erfordert viel Programmieraufwand, aber es hat den Vorteil, dass es vollst\u00e4ndig automatisierbar ist. Man k\u00f6nnte z.B. versuchen, auf diese Weise das aktuelle Kinoprogramm aller Kinos einer bestimmten Region zusammenzufassen. Dazu muss das Programm, welches die vielen Seiten abfragt, am Ende selbst auch wieder eine HTML-Seite erstellen. Oder besser: Es tr\u00e4gt seine Ergebnisse in eine Datenbank ein und ein anderes Programm (das dann eigentlich wieder ein Web-Server ist), gestattet Benutzern \u00fcber URL-Requests den Zugriff auf den Datenbankinhalt.<\/p>\n\n\n\n<p>Wenn man sich direkt mit dem HTML-Code jeder Seite auseinandersetzen muss, ist das sehr, sehr m\u00fchsam und fehleranf\u00e4llig; man hat sich daher darauf verst\u00e4ndigt, dass Webseiten &#8222;Feeds&#8220; anbieten k\u00f6nnen, in denen sie &#8222;Nettoinformationen&#8220; in strukturierter Form anbieten und aktualisieren.<\/p>\n\n\n\n<p>Damit Google Suchergebnisse liefern kann, muss Google so viele Webseiten wie m\u00f6glich untersuchen und interessante Suchbegriffe darin herausfiltern. Damit das m\u00f6glichst effektiv geht, kann man in HTML im Kopfbereich spezielle Tags benutzen, bei denen man Stichworte zum Inhalt der Seite hinterlegt. Man optimiert die Seite auf diese Weise f\u00fcr Google und anderer Search Engines (SEO = Search Engine Optimization).<\/p>\n\n\n\n<p>Wenn die Google-Indexer in einer HTML-Antwort eines beliebigen Servers Verweise auf andere Seiten (&#8222;Hyperlinks&#8220;, Verweise auf Bilder usw.) finden, dann hangeln sie sich sozusagen an Spinnenf\u00e4den durch das Web entlang; die Indizierprogramme von Suchmaschinen hei\u00dfen daher auch &#8222;spider&#8220;. Nebenbei halten sie auch noch fest, wie viele Webseiten (A,B,C, ..) einen Verweis auf eine bestimmte andere Webseite (X) enthalten. Je \u00f6fter X vorkommt, desto popul\u00e4rer scheint X zu sein und desto weiter oben in der Trefferliste von Google kommt es vor. Wenn A oder C ihrerseits als popul\u00e4r gelten, dann steigert das den Wert eines Verweises auf X zus\u00e4tzlich. Wenn zwei Seiten (U,V) sich gegenseitig verlinken, dann steigert das ihre Popularit\u00e4t nur minimal. Wenn allerdings U sehr popul\u00e4r ist, dann steigert der Verweis von U auf V die Popularit\u00e4t von V merklich. Wenn der Inhaber von &#8222;Z&#8220; viel Geld an Google bezahlt, kann er weiter oben in der Trefferliste stehen, als es seinem Ranking aufgrund der Wertsch\u00e4tzung aus der Sicht anderer Webseiten entsprechen w\u00fcrde.<\/p>\n\n\n\n<p>Wenn man eine Zeitung im Internet liest, dann wird oft &#8222;passende&#8220; Werbung eingeblendet. Da Google die Suchhistorie eines Rechners (Browsers) speichert, kann es einer beliebigen Website passende Links auf Dinge anbieten, die der Benutzer in den letzten Wochen gesucht hat. Manchmal funktioniert so etwas, manchmal wirkt es aus Benutzersicht etwas d\u00fcmmlich, n\u00e4mlich wenn man bereits eine Kaufentscheidung getroffen hat. Aber soll man sich wirklich w\u00fcnschen, dass Google auch das noch im Detail nachvollziehen kann?<\/p>\n\n\n\n<h2>Javascript ohne Browser<\/h2>\n\n\n\n<p>Traditionell ist Javascript die &#8222;Programmiersprache f\u00fcr den Browser&#8220;. JS hat \u00fcbrigens \u00fcberhaupt nichts mit der klassischen Programmiersprache Java zu tun, obwohl der Name so \u00e4hnlich klingt.<\/p>\n\n\n\n<p>Web-Entwickler m\u00fcssen neben HTML, CSS und JS h\u00e4ufig auch php verstehen und schreiben k\u00f6nnen, weil auf dem Server (Unix-Betriebssystem) traditionell ganz andere Sprachen etabliert sind (php, python, perl, Java, Ruby, tcl\/tk). Aus dem &#8222;Bruch zwischen den Sprachen&#8220; ergeben sich zahlreiche M\u00fchseligkeiten, zumal f\u00fcr die Kommunikation mit der Datenbank auf dem Server noch eine weitere Sprache (SQL) hinzukommt.<\/p>\n\n\n\n<p>Ein erster Versuch der Standardisierung bestand darin, Daten zwischen php (Server) und JS (Browser, Client) im sog. XML Format zu \u00fcbertragen. Dieses Format ist sehr gr\u00fcndlich entworfen, f\u00fcr viele praktische F\u00e4lle abr recht schwerf\u00e4llig und geschw\u00e4tzig. Wenn man &#8222;strict&#8220; HTML benutzt, dann ist auch HTML ein XML-Dokument, d.h. XML benutzt spitze Klammern, um &#8222;Tags&#8220; in die Daten einzubetten, aus denen die Bedeutung der Textinhalte hervorgeht.<\/p>\n\n\n\n<p>Besser geeignet is die Javascript Object Notation (JSON); sie ist schlanker und hat den Vorteil, dass sie ohnehin organischer Bestandteil von JS ist. Also haben alle Serversprachen gelernt, JSON-Nachrichten zu empfangen, zu analysieren, in ihr eigenes Format zu \u00fcbersetzen und ihre Ergebnisse bei Bedarf auch als JSON auszugeben (au\u00dfer sie produzieren HTML\/XML als Ergebnis).<\/p>\n\n\n\n<p>Irgendwann kam jemand auf die Idee, den Javascript-Interpreter aus dem Browser herauszuholen und als eigenst\u00e4ndige Programmiersprache auch auf dem Server zu benutzen. Dieser Ansatz ist als Node.js bekannt (manchmal auch als NodeJS geschrieben). Node.js wurde anfangs bel\u00e4chelt, weil die Programme etwas langsamer liefen als die anderen Server-Programme. Inzwischen ist es aber ein ernst zu nehmender Weg, der den gro\u00dfen Vorteil hat, dass man auf dem Client und auf dem Server mit derselben Programmiersprache arbeiten kann.<\/p>\n\n\n\n<h2>Fehlertoleranz, Syntax<\/h2>\n\n\n\n<p>HTML war am Anfang &#8222;schnell zusammengestrickt&#8220; und nicht besonders sorgf\u00e4ltig definiert als Sprache. Au\u00dferdem haben viele Leute mit normalen Texteditoren HTML geschrieben und dabei auch Fehler gemacht, z.B. schlie\u00dfende Tags vergessen.<\/p>\n\n\n\n<p>Die Hersteller der Browser haben daraufhin ihren Browsern beigebracht, auch &#8222;v\u00f6llig kaputte&#8220; Syntax noch zu akzeptieren und irgendetwas halbwegs vern\u00fcnftiges anzuzeigen, selbst wenn so elementare Tags wie &lt;html&gt; oder &lt;body&gt; fehlen oder mehrfach vorkommen.<\/p>\n\n\n\n<p>Deshalb K\u00f6nnen wir z.B. einfach &#8222;Hallo Welt&#8220; in eine Datei schreiben und die Browser werden den Text anzeigen, obwohl &lt;html&gt; und &lt;body&gt; fehlen.<\/p>\n\n\n\n<p>Sp\u00e4ter hat man HTML5 als eine XML-konforme Sprache definiert und wesentlich mehr Klarheit geschaffen und Mehrdeutigkeiten entfernt. Man kann Webseiten auf Einhaltung alle HTML5-Regeln pr\u00fcfen lassen, bevor man sie ins Netz stellt.<\/p>\n\n\n\n<p>Die g\u00e4ngigen Content-Management-Systeme erzeugen korrektes HTML5.<\/p>\n\n\n\n<h2>Content-Management-Systeme<\/h2>\n\n\n\n<p>Als das Web zum Massenph\u00e4nomen wurde, musste man einfache M\u00f6glichkeiten schaffen, eine Website zu erstellen. Man konnte nicht erwarten, dass jeder HTML lernt, der etwas publizieren will.<\/p>\n\n\n\n<p>Also entwarf man Web-Anwendungen, die dazu dienen, ihrerseits andere Webanwendungen zu bauen. Diese Gattung von Anwendungen nennt man CMS (Content Management Systeme). Sie bieten f\u00fcr eine Administrator die M\u00f6glichkeit, das generelle Layout einer Website einzustellen. F\u00fcr ander Personen, die Content-Lieferanten (Editoren), hat man die M\u00f6glichkeit geschaffen, ihrer fachlichen Inhalte in das System zu packen, ohne sich viel mit Technik befassen zu m\u00fcssen. Die meisten CMS erlauben es dem Benutzer jedoch auch, in Sonderf\u00e4llen direkt HTML einzugeben.<\/p>\n\n\n\n<p>Ein CMS ist meist in php geschrieben und legt seine Daten (also die Inhalte der zu erstellenden Website) in einer Datenbank ab. Wenn ein Endbenutzer der erstellten Website diese aufruft, wird der HTML Code, den ihm das System zeigt, dadurch montiert, dass die passenden Teile aus dieser Datenbank herausgeholt werden.<\/p>\n\n\n\n<p>Viele CMS bieten die M\u00f6glichkeit &#8222;Plugins&#8220; zu installieren, also kleinere (oder gr\u00f6\u00dfere) funktionale Erweiterungen, die nicht von Hersteller des CMS entwickelt wurden, sondern von unabh\u00e4ngigen Dritten. Manche Plugins kosten Geld, andere sind vollst\u00e4ndig umsonst oder bieten einen kostenfreien Grundumfang an. Auch das CMS selbst ist f\u00fcr nicht-kommerzielle Nutzung sehr oft umsonst zu haben.<\/p>\n\n\n\n<p>Die vorliegende Website beruht auf dem CMS &#8222;WordPress&#8220; und benutzt einige kostenfreie Plugins.<\/p>\n\n\n\n<h2>Server-Hardware, Rechenzentrum<\/h2>\n\n\n\n<p>Server werden meist mit dem Betriebssystem Unix (\u00fcberwiegend &#8222;Debian&#8220;) ausgestattet. Sie stehen in physisch gut gesicherten Rechenzentren, haben redundante Stromversorgung, K\u00fchlung und eine schnelle Internetanbindung (Upload-Geschwindigkeit). Es gibt dedizierte Server, also wirklich separate Hardware, die man bei einem entsprechenden Anbieter mieten kann. Oft ist man aber auch mit einem virtuellen Server zufrieden. Das ist aus logischer Sicht ein separater Rechner, der aber physikalisch (CPU, Memory,Disk, Netzwerk) Resourcen mit anderen virtullen Rechnern teilt.<\/p>\n\n\n\n<p>Die vorliegende Website l\u00e4uft auf einem virtuellen Server des Providers ip-projects.de.<\/p>\n\n\n\n<p>Als Mieter eines virtuellen Servers hat man technisch alle Rechte (&#8222;root&#8220;-Zugang).<\/p>\n\n\n\n<p>Wenn man einfach nur eine WordPress-Seite ins Web stellen m\u00f6chte, dann gibt es noch deutlich preiswertere Angebote, bei denen man innerhalb eines virtuellen Servers, den der Provider betreibt, eine CMS-INstanz eingerichtet bekommt.<br>Man meldet sich dann als Administrator bei WordPress auf diesem Rechner an und kann die eigene Website bearbeiten.<\/p>\n\n\n\n<p>Damit das funktioniert, muss man gleichzeitig mindestens eine Domain erwerben, die der Provider dann mit dieser WordPress-Instanz verkn\u00fcpft.<\/p>\n\n\n\n<h2>Domains<\/h2>\n\n\n\n<p>Man entscheidet sich f\u00fcr eine TLD (Top Level Domain, also z.B. .de, .org, .com, .net) und pr\u00fcft dann im Web bei entsprechenden Domain-Suchmaschinen, ob die gew\u00fcnschte Domain frei ist. Dann teilt man diese Domain dem Server-Provider mit, er besorgt sie und man bezahlt 5..10 \u20ac Jahresmiete daf\u00fcr. Damit man die Domain unter https (also &#8222;secure&#8220;) erreichen kann, muss noch ein Zertifikat ausgestellt werden, Dies \u00fcbernimmt auch der Provider.<\/p>\n\n\n\n<p>Wenn alles richtig eingerichtet ist, landet eine Anfrage nach fitzliputzli.de dann irgendwann genau auf dem virtuellen Server und in der WordPress-Installation, die man gemietet hat. <\/p>\n\n\n\n<p> <\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2>Praktische \u00dcbungen zum besseren Vest\u00e4ndnis<\/h2>\n\n\n\n<p><strong>Lokale Datei<\/strong><\/p>\n\n\n\n<ol><li>Erstelle eine Datei namens &#8222;index.html&#8220; an einem beliebigen Ort im Dateisystem deines Rechners.<\/li><li>Benutze eine Texteditor dazu, wie z.B. Programmer\u00b4s Notepad.<\/li><li>Schreibe folgenden Text in die Datei &#8222;H\u00e4llo W\u00f6rld!&#8220;.<\/li><li>Ziehe die Datei vom Explorer in den Browser und beobachte, was passiert. Schau den Inhalt der URL-Zeile an!<\/li><li>Wird der Text korrekt angezeigt oder sind die &#8222;Umlaute kaputt&#8220;?<\/li><\/ol>\n\n\n\n<p><strong>Localhost<\/strong><\/p>\n\n\n\n<ol><li>Installiere xampp (nur Apache, evtl. mysql)<\/li><li>Pr\u00fcfe die Installation, indem du &#8222;http:\/\/localhost&#8220; aufrufst.<\/li><li>Verschiebe die Datei aus der ersten \u00dcbung (&#8222;index.html&#8220;) in das Web-Root-Verzeichnis von xampp<\/li><li>Rufe &#8222;localhost\/index.html&#8220; auf.<\/li><li>Benenne die Datei in &#8222;hallo.html&#8220; um und rufe localhost\/hallo.html auf.<\/li><li>Benenne die Datei in &#8222;hallo.xyz&#8220; um rufe &#8222;localhost\/hallo.xyz&#8220; auf.<\/li><\/ol>\n\n\n\n<p><strong>LAN-Kommunikation<\/strong><\/p>\n\n\n\n<ol><li>\u00d6ffne eine cmd-shell und gib &#8222;ipconfig&#8220; ein. Notiere deine lokale &lt;IP&gt;.<\/li><li>Rufe vom eigenen Rechner aus &lt;IP&gt;\/index.html auf<\/li><li>Rufe genau die selbe Adresse von einem anderen Rechner im LAN aus auf.<\/li><\/ol>\n\n\n\n<p><strong>WAN-Kommunikation<\/strong><\/p>\n\n\n\n<p>Achtung: die folgende \u00dcbung ist nur etwas f\u00fcr Erfahrene!<\/p>\n\n\n\n<ol><li>Rufe eine Seite im Web auf, die dir deine EXTERNE IP anzeigt. (&lt;EIP&gt;)<\/li><li>Melde dich in deinem Router an und erteile eine Freigabe f\u00fcr deinen lokalen Rechner (Port 80) auf einem exotischen Port (43752 z.B.)<\/li><li>Nimm dein Handy und schalte WLAN aus, so dass die WEbverbindung \u00fcber die SIM-Karte l\u00e4uft.<\/li><li>Gib im Handy &lt;EIP&gt;:43752\/index.html ein<\/li><li>L\u00f6sche die Freigabe im Router wieder.<\/li><\/ol>\n\n\n\n<p><strong>Blinkender Text<\/strong><\/p>\n\n\n\n<p>Jetzt ist es an der Zeit, ein paar HTML, CSS und JS Anweisungen auszuprobieren.<\/p>\n\n\n\n<ol><li>Erstelle eine Datei namens blink1.html.<\/li><li>Sie soll in drei verschiedenen Farben, zentriert und in gro\u00dfer Schrift ohne Serifen die folgenden W\u00f6rter anzeigen &#8222;<strong><code>Sch\u00fcler-Labor     FWSW     2020<\/code><\/strong>&#8222;.<\/li><li>Benutze CSS, um f\u00fcr Zentrierung, Font, Schriftgr\u00f6\u00dfe und Wortabst\u00e4nde zu sorgen.<\/li><li>Die drei W\u00f6rter sollen im Sekundentakt der Reihe nach aufleuchten bzw. verschwinden. Realisiere diese Funktionalit\u00e4t mit reinem CSS.<\/li><li>Erstelle einen andere Datei namens &#8222;blink2.html&#8220; und realisiere die Blink-Funktion diesmal mit Javascript.<\/li><li>Zeige, dass die Javascript-Realisierung m\u00e4chtiger ist. \u00c4ndere z.B. bei jedem Durchlauf die Farbe jedes Wortes ab (zuf\u00e4lliger Wert, aber nicht zu hell, damit die Schrift lesbar bleibt).<\/li><\/ol>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Diese Seite erkl\u00e4rt in knapper Form die Ideen von HTTP, HTML, CSS, JS. Browseranfrage Du betrachtest die aktuelle Seite in einem Browser. Ein Web-Browser ist ein lokal auf deinem (Windows-)Rechner installiertes Programm. Wenn man oben in der URL-Zeile einen Namen eingibt, versucht der Browser eine Datei (genauer gesagt: eine &#8222;Resource&#8220;) mit diesem Name zu finden.&hellip; <a class=\"more-link\" href=\"https:\/\/followthescore.org\/schueler-labor\/html\/\"><span class=\"screen-reader-text\">HTML<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/followthescore.org\/schueler-labor\/wp-json\/wp\/v2\/pages\/124"}],"collection":[{"href":"https:\/\/followthescore.org\/schueler-labor\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/followthescore.org\/schueler-labor\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/followthescore.org\/schueler-labor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/followthescore.org\/schueler-labor\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":24,"href":"https:\/\/followthescore.org\/schueler-labor\/wp-json\/wp\/v2\/pages\/124\/revisions"}],"predecessor-version":[{"id":764,"href":"https:\/\/followthescore.org\/schueler-labor\/wp-json\/wp\/v2\/pages\/124\/revisions\/764"}],"wp:attachment":[{"href":"https:\/\/followthescore.org\/schueler-labor\/wp-json\/wp\/v2\/media?parent=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}