{"id":2053,"date":"2023-09-03T13:50:49","date_gmt":"2023-09-03T11:50:49","guid":{"rendered":"https:\/\/maximini.eu\/work\/?page_id=2053"},"modified":"2026-04-01T16:40:10","modified_gmt":"2026-04-01T14:40:10","slug":"course-html-lektion01","status":"publish","type":"page","link":"https:\/\/maximini.eu\/work\/course-html-lektion01\/","title":{"rendered":"HTML | Lektion 01 | Was ist HTML?"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-2056\" src=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/07\/HTML-Datei_Icon-e1690029946997-300x189.png\" alt=\"HTML Datei Icon\" width=\"238\" height=\"150\" srcset=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/07\/HTML-Datei_Icon-e1690029946997-300x189.png 300w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/07\/HTML-Datei_Icon-e1690029946997.png 500w\" sizes=\"auto, (max-width: 238px) 100vw, 238px\" \/>In der ersten Lektion werden Sie erfahren, was HTML ist und wie die Kommunikation im Internet funktioniert. Diese fundamentalen Kenntnisse sind f\u00fcr alle von Bedeutung, die beabsichtigen, eine Webseite zu ver\u00f6ffentlichen. Nachdem Sie alle Lernmodule der ersten Lektion erfolgreich durchgearbeitet haben, werden Sie ein umfassendes Verst\u00e4ndnis daf\u00fcr haben, was HTML-Seiten sind und wie der Austausch von HTML-Seiten zwischen Webbrowser und Webserver erfolgt. Schlie\u00dflich werden Sie in der Lage sein, eine eigene HTML-Seite zu erstellen, auf der der Text &#8222;Hallo Welt&#8220; angezeigt wird.<br \/>\n<!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><br \/>\n<a id=\"lesson01_inhalt\"><\/a><strong>Inhalt<\/strong><br \/>\n<a href=\"#lektion101\">| 01.1 | Die Bedeutung von HTML<\/a><br \/>\n<a href=\"#lektion102\">| 01.2 | Die Historie von HTML<\/a><br \/>\n<a href=\"#lektion103\">| 01.3 | Die Kommunikation zwischen Webbrowser und Webserver<\/a><br \/>\n<a href=\"#lektion1031\">| 01.3.1 | Die Anfrage des Clients (Request)<\/a><br \/>\n<a href=\"#lektion10311\">| 01.3.1.1 | Die Request-Line<\/a><br \/>\n<a href=\"#lektion10312\">| 01.3.1.2 | Der Anfrage-Header<\/a><br \/>\n<a href=\"#lektion1032\">| 01.3.2 |Die Antwort vom Server (Response) <\/a><br \/>\n<a href=\"#lektion10321\">| 01.3.2.1 | Die Status-Line<\/a><br \/>\n<a href=\"#lektion10322\">| 01.3.2.2 | Der Antwort-Header<\/a><br \/>\n<a href=\"#lektion104\">| 01.4| Wie Webbrowser Webseiten interpretieren <\/a><br \/>\n<a href=\"#lektion1041\">| 01.4.1 | Parsen und DOM-Baum<\/a><br \/>\n<a href=\"#lektion1042\">| 01.4.2 | Die Darstellung im Browserfenster (Rendern)<\/a><br \/>\n<a href=\"#lektion105\">| 01.5 | Die Grundstruktur von HTML<\/a><br \/>\n<a href=\"#lektion1051\">| 01.5.1 |<\/a> <a href=\"#lektion1051\">Die &lt;html&gt; Tags<\/a><br \/>\n<a href=\"#lektion1052\">| 01.5.2 | Die &lt;head&gt; Tags<\/a><br \/>\n<a href=\"#lektion1053\">| 01.5.3 | Die &lt;body&gt; Tags<\/a><br \/>\n<a href=\"#lektion106\">| 01.6 | Praktische \u00dcbung<\/a><br \/>\n<!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<hr>\n<h2><a id=\"lektion101\"><\/a>| 01.1 | Die Bedeutung von HTML<\/h2>\n<figure id=\"attachment_2615\" aria-describedby=\"caption-attachment-2615\" style=\"width: 2560px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2615\" src=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung011-scaled.jpg\" alt=\"HTML ist die Abk\u00fcrzung f\u00fcr Hypertext Markup Language (de: Hypertextmarkierungssprache)\" width=\"2560\" height=\"942\" srcset=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung011-scaled.jpg 2560w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung011-300x110.jpg 300w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung011-1024x377.jpg 1024w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung011-768x283.jpg 768w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung011-1536x565.jpg 1536w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung011-2048x753.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><figcaption id=\"caption-attachment-2615\" class=\"wp-caption-text\">HTML ist die Abk\u00fcrzung f\u00fcr Hypertext Markup Language (de: Hypertextmarkierungssprache)<\/figcaption><\/figure>\n<p>Mit HTML, CSS (Cascading Style Sheets) und JavaScript gibt man Webbrowsern Anweisungen zur Darstellung von Webseiten. Webseiten sind interaktive Hypertexte, bei denen Informationen \u00fcber Verweise (Links) nicht-linear durchsucht werden k\u00f6nnen. Im Gegensatz dazu folgt man in einem gedruckten Text auf Papier einer linearen Leserichtung.<\/p>\n<p>Webseiten werden mithilfe der Hypertext Markup Language (HTML) verfasst. In der Informatik werden f\u00fcr die <a href=\"https:\/\/www.seobility.net\/de\/wiki\/Markup\" target=\"_blank\" rel=\"noopener\">Markierung<\/a> sogenannte <a href=\"https:\/\/de.wikipedia.org\/wiki\/Tag_(Informatik)\" target=\"_blank\" rel=\"noopener\">Tags<\/a> (Etiketten) in spitzen Klammern verwendet. \u00dcblicherweise wird der Inhalt zwischen einem Anfangs- und einem Endtag eingeschlossen, wobei Endtags einen Schr\u00e4gstrich innerhalb der Klammer aufweisen, wie zum Beispiel &lt;p&gt; Hallo Welt &lt;\/p&gt;.<\/p>\n<p>HTML ist eine formale <a href=\"https:\/\/de.wikipedia.org\/wiki\/Auszeichnungssprache\" target=\"_blank\" rel=\"noopener\">Sprache<\/a> (en: Language) mit festgelegter <a href=\"https:\/\/de.wikipedia.org\/wiki\/Syntax\" target=\"_blank\" rel=\"noopener\">Syntax<\/a> und klaren <a href=\"https:\/\/validator.w3.org\" target=\"_blank\" rel=\"noopener\">Regeln<\/a>. <a href=\"https:\/\/de.wikipedia.org\/wiki\/Formale_Sprache\" target=\"_blank\" rel=\"noopener\">Formale Sprachen<\/a> verf\u00fcgen zwar nicht \u00fcber eine gesprochene Aussprache, aber sie verwenden ein bestimmtes Alphabet. Die erlaubten Zeichen f\u00fcr HTML sind <a href=\"https:\/\/de.wikipedia.org\/wiki\/Unicode\" target=\"_blank\" rel=\"noopener\">Unicode<\/a>-Zeichen, die f\u00fcr den Computer in Nullen und Einsen \u00fcbersetzt werden. Dieser Umwandlungsprozess wird als UTF (<a href=\"https:\/\/de.wikipedia.org\/wiki\/Unicode_Transformation_Format\" target=\"_blank\" rel=\"noopener\">Unicode Transformation Format<\/a>) bezeichnet, wobei <a href=\"https:\/\/de.wikipedia.org\/wiki\/UTF-8\" target=\"_blank\" rel=\"noopener\">UTF-8<\/a> die am weitesten verbreitete Variante ist. Dabei wird zur Darstellung eines Zeichens 1 Byte (8 Bits) verwendet.<span class=\"mw-page-title-main\">&nbsp;<\/span><\/p>\n<p style=\"text-align: right;\"><span style=\"font-size: 10pt;\"><a href=\"#lesson01_inhalt\">zur\u00fcck zum Inhalt |<\/a><\/span><\/p>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<hr>\n<h2>Testen Sie ihr Wissen<\/h2>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-5\" class=\"h5p-iframe\" data-content-id=\"5\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML | Lektion 01 | \u00dcbung 011\"><\/iframe><\/div>\n<hr>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h2><a id=\"lektion102\"><\/a> 01.2 | Die Historie von HTML<\/h2>\n<figure id=\"attachment_2622\" aria-describedby=\"caption-attachment-2622\" style=\"width: 2560px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/de.wikipedia.org\/wiki\/Tim_Berners-Lee\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2622\" src=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung012-1-scaled.jpg\" alt=\"Erster Webserver der Welt, entwickelt und implementiert von Tim Berners-Lee auf einem NeXTcube im CERN. (heute im Science Museum in London ausgestellt)\" width=\"2560\" height=\"942\" srcset=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung012-1-scaled.jpg 2560w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung012-1-300x110.jpg 300w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung012-1-1024x377.jpg 1024w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung012-1-768x283.jpg 768w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung012-1-1536x565.jpg 1536w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung012-1-2048x753.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/a><figcaption id=\"caption-attachment-2622\" class=\"wp-caption-text\">Erster Webserver der Welt, entwickelt und implementiert von Tim Berners-Lee auf einem <a href=\"https:\/\/de.wikipedia.org\/wiki\/NeXTcube\" target=\"_blank\" rel=\"noopener\">NeXTcube<\/a> im CERN. (heute im<a href=\"https:\/\/www.sciencemuseum.org.uk\"> Science Museum in London<\/a> ausgestellt)<\/figcaption><\/figure>\n<p>Im Jahr 1989 entwickelte <a href=\"https:\/\/de.wikipedia.org\/wiki\/Tim_Berners-Lee\" target=\"_blank\" rel=\"noopener\">Tim Berners-Lee<\/a> bei der <a href=\"https:\/\/de.wikipedia.org\/wiki\/CERN\">Europ\u00e4ischen Organisation f\u00fcr Kernforschung<\/a> (<a href=\"https:\/\/home.cern\/directions\" target=\"_blank\" rel=\"noopener\">CERN<\/a>) in der Gemeinde <a href=\"https:\/\/de.wikipedia.org\/wiki\/Meyrin\" target=\"_blank\" rel=\"noopener\">Meyrin<\/a> im <a href=\"https:\/\/de.wikipedia.org\/wiki\/Kanton_Genf\" target=\"_blank\" rel=\"noopener\">Kanton Genf<\/a> die Hypertext Markup Language (HTML). Seine Absicht war es, Dokumente \u00fcber Computer miteinander zu verkn\u00fcpfen, um den Informationsaustausch zwischen den verschiedenen CERN-Instituten zu erleichtern. Zwei Jahre sp\u00e4ter, 1991, stellte er sein <a href=\"https:\/\/de.wikipedia.org\/wiki\/Hypertext\" target=\"_blank\" rel=\"noopener\">Hypertext<\/a>-Projekt erstmals vor. Beachtenswerterweise entschied er sich, auf <a href=\"https:\/\/de.wikipedia.org\/wiki\/Patent\" target=\"_blank\" rel=\"noopener\">Patente<\/a> zu verzichten und seine Entwicklung frei zug\u00e4nglich zu machen. Tim Berners-Lee wird seitdem als der Gr\u00fcnder des <a href=\"https:\/\/de.wikipedia.org\/wiki\/WorldWideWeb\" target=\"_blank\" rel=\"noopener\">World Wide Web<\/a> (<a href=\"https:\/\/de.wikipedia.org\/wiki\/World_Wide_Web\" target=\"_blank\" rel=\"noopener\">WWW<\/a>) anerkannt. Heute ist er Professor und Leiter des von ihm ins Leben gerufenen <a title=\"World Wide Web Consortium\" href=\"https:\/\/de.wikipedia.org\/wiki\/World_Wide_Web_Consortium\">World Wide Web Consortium<\/a> (<a href=\"https:\/\/www.w3.org\" target=\"_blank\" rel=\"noopener\">W3C)<\/a>, das die HTML-Sprache kontinuierlich weiterentwickelt.<\/p>\n<p>Die erste Version der <a href=\"https:\/\/de.wikipedia.org\/wiki\/Hypertext_Markup_Language#Versionen\" target=\"_blank\" rel=\"noopener\">HTML-Spezifikation<\/a> wurde im Jahr 1992 ver\u00f6ffentlicht und definierte grundlegende Elemente wie \u00dcberschriften, Abs\u00e4tze und Links. Drei Jahre sp\u00e4ter, im Jahr 1995, erweiterte die Internet Engineering Task Force (<a href=\"https:\/\/de.wikipedia.org\/wiki\/Internet_Engineering_Task_Force\" target=\"_blank\" rel=\"noopener\">IETF<\/a>) die <a href=\"https:\/\/www.w3.org\/MarkUp\/html-spec\/\">zweiten Version<\/a> um Tabellen und Formulare. Die <a href=\"https:\/\/www.w3.org\/MarkUp\/html3\/intro.html\" target=\"_blank\" rel=\"noopener\">dritte Version<\/a> , ver\u00f6ffentlicht 1997, f\u00fchrte Hintergrundbilder ein, und zwei Jahre sp\u00e4ter, in der <a href=\"https:\/\/www.w3.org\/TR\/html401\/\" target=\"_blank\" rel=\"noopener\">vierten Version<\/a>, wurden Cascading Style Sheets (CSS) und Skript-Tags f\u00fcr JavaScript hinzugef\u00fcgt. Im Jahr 2000 wurde <a href=\"https:\/\/de.wikipedia.org\/wiki\/Extensible_Hypertext_Markup_Language\" target=\"_blank\" rel=\"noopener\">XHTML<\/a> (Extensible Hypertext Markup Language) eingef\u00fchrt, eine Kombination aus HTML und <a href=\"https:\/\/de.wikipedia.org\/wiki\/Extensible_Markup_Language\" target=\"_blank\" rel=\"noopener\">XML<\/a>. Seit 2014 ist die aktuelle Version <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/\" target=\"_blank\" rel=\"noopener\">HTML5<\/a> in Verwendung.<\/p>\n<p style=\"text-align: right;\"><span style=\"font-size: 10pt;\"><a href=\"#lesson01_inhalt\">zur\u00fcck zum Inhalt |<\/a><\/span><\/p>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<hr>\n<h2>Testen Sie ihr Wissen<\/h2>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-6\" class=\"h5p-iframe\" data-content-id=\"6\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML | Lektion 01 | Uebung 012\"><\/iframe><\/div>\n<hr>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h2><a id=\"lektion103\"><\/a>| 01.3 | Die Kommunikation zwischen Webbrowser und Webserver<\/h2>\n<figure id=\"attachment_2620\" aria-describedby=\"caption-attachment-2620\" style=\"width: 2560px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung013-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2620\" src=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung013-scaled.jpg\" alt=\"Abbildung: Client stellt GET-Anfrage und Server antwortet mit HTTP-Response\" width=\"2560\" height=\"942\" srcset=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung013-scaled.jpg 2560w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung013-300x110.jpg 300w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung013-1024x377.jpg 1024w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung013-768x283.jpg 768w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung013-1536x565.jpg 1536w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_uebung013-2048x753.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/a><figcaption id=\"caption-attachment-2620\" class=\"wp-caption-text\">Abbildung: Client stellt GET-Anfrage und Server antwortet mit HTTP-Response<\/figcaption><\/figure>\n<figure style=\"width: 357px\" class=\"wp-caption alignright\"><a href=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/c\/c9\/Client-server-model.svg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/c\/c9\/Client-server-model.svg\" alt=\"Das Client-Server Modell, Abbildung von David Vignoni\" width=\"357\" height=\"239\"><\/a><figcaption class=\"wp-caption-text\">Das Client-Server Modell, Abbildung von David Vignoni<\/figcaption><\/figure>\n<p>Beim Surfen im Internet interagieren Sie mit einem Webbrowser, einem <a href=\"https:\/\/de.wikipedia.org\/wiki\/Computerprogramm\" target=\"_blank\" rel=\"noopener\">Computerprogramm<\/a> (en: <a href=\"https:\/\/de.wikipedia.org\/wiki\/Software\" target=\"_blank\" rel=\"noopener\">Software)<\/a> zur Darstellung von Webseiten. Sie stellen eine Anfrage an den Browser, ob er eine bestimmte Webseite (<a href=\"https:\/\/de.wikipedia.org\/wiki\/Uniform_Resource_Locator\" target=\"_blank\" rel=\"noopener\">URL<\/a>) anzeigen kann, und dieser leitet Ihre Anfrage an das Ger\u00e4t weiter, auf dem die Webseite gespeichert (gehostet) ist. Der Webserver antwortet, und Ihr Webbrowser zeigt Ihnen die angeforderte Seite an.<\/p>\n<p>Im Fachjargon wird ein Browser als Client (Kunde oder Auftraggeber) bezeichnet, w\u00e4hrend das Ger\u00e4t, an das die Anfrage gerichtet ist, als Server (Diener oder Dienstprogramm) fungiert. Der Client sendet eine Anfrage (Request) an den Server und erh\u00e4lt von diesem eine Antwort (Response). Bei dieser <a href=\"https:\/\/de.wikipedia.org\/wiki\/Daten\u00fcbertragung#Daten\u00fcbertragung_im_Internet\" target=\"_blank\" rel=\"noopener\">\u00dcbertragung<\/a> werden <a title=\"Datenpaket\" href=\"https:\/\/de.wikipedia.org\/wiki\/Datenpaket\">Datenpakete<\/a> zwischen den Client- und Serverrechnern hin und her gesendet.<\/p>\n<p>Die genaue Formulierung dieser Nachrichten zwischen Client und Server wird durch das Hypertext-\u00dcbertragungsprotokoll <a class=\"link-internal\" title=\"Was ist HTTP?\" href=\"https:\/\/de.wikipedia.org\/wiki\/Hypertext_Transfer_Protocol\">HTTP<\/a> (en: Hypertext Transfer Protocol) geregelt. Dieses Protokoll wurde von der <a title=\"Internet Engineering Task Force\" href=\"https:\/\/de.wikipedia.org\/wiki\/Internet_Engineering_Task_Force\">Internet Engineering Task Force<\/a> (IETF) und dem <a title=\"World Wide Web Consortium\" href=\"https:\/\/de.wikipedia.org\/wiki\/World_Wide_Web_Consortium\">World Wide Web Consortium<\/a> (W3C) standardisiert und definiert die Syntax f\u00fcr HTTP-Requests und -Responses.<\/p>\n<p>Die erste offizielle Standard-Protokollversion, HTTP\/1.1, wird bis heute verwendet. Mit den neueren Versionen, <a href=\"https:\/\/de.wikipedia.org\/wiki\/Hypertext_Transfer_Protocol#HTTP\/2\" target=\"_blank\" rel=\"noopener\">HTTP\/2<\/a> und der im Juni 2022 ver\u00f6ffentlichten aktuellen Version <a href=\"https:\/\/en.wikipedia.org\/wiki\/HTTP\/3\" target=\"_blank\" rel=\"noopener\">HTTP\/3<\/a>, wird angestrebt, die Internet\u00fcbertragung zu beschleunigen und zu optimieren. Die Nutzung dieser neueren Versionen h\u00e4ngt von Ihrem Hosting-Unternehmen und dem verwendeten Browser ab.<\/p>\n<p style=\"text-align: right;\"><span style=\"font-size: 10pt;\"><a href=\"#lesson01_inhalt\">zur\u00fcck zum Inhalt |<\/a><\/span><\/p>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<hr>\n<h2>Testen Sie ihr Wissen<\/h2>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-12\" class=\"h5p-iframe\" data-content-id=\"12\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML | Lektion 01 | \u00dcbung 013\"><\/iframe><\/div>\n<hr>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h3><a id=\"lektion1031\"><\/a>| 01.3.1 | Die Anfrage des Clients (Request)<\/h3>\n<p>Eine HTTP-Anfrage (Hypertext Transfer Protocol Request) ist ein <a href=\"https:\/\/de.wikipedia.org\/wiki\/IP-Paket\" target=\"_blank\" rel=\"noopener\">Datenpaket im Internet<\/a>, das \u00fcber ein Netzwerk versendet wird. Programmierer und Administratoren geben ihre <a href=\"https:\/\/de.wikipedia.org\/wiki\/Anweisung_(Programmierung)\" target=\"_blank\" rel=\"noopener\">Anweisungen<\/a> (en.: statements) direkt in eine Konsole ein, beispielsweise in die <a href=\"https:\/\/de.wikipedia.org\/wiki\/Cmd.exe\" target=\"_blank\" rel=\"noopener\">Windows-Eingabeaufforderung<\/a>. Diese <a href=\"https:\/\/de.wikipedia.org\/wiki\/Datagramm#:~:text=Ein%20Datagramm%20ist%20eine%20in,ein%20Netzwerk%20transportiert%20werden%20sollen.\" target=\"_blank\" rel=\"noopener\">Datagramme<\/a> bestehen aus mehreren Codezeilen, die in verschiedene Abschnitte unterteilt sind. (Im Gegensatz dazu ist eine <a href=\"https:\/\/de.wikipedia.org\/wiki\/Datei\" target=\"_blank\" rel=\"noopener\">Datei<\/a>&nbsp;eine Sammlung von Daten und kann Texte, Bilder, Videos, Audiodateien oder Programmiercode enthalten.)<!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h4><a id=\"lektion10311\"><\/a>| 01.3.1.1 | Die Request-Line<\/h4>\n<figure id=\"attachment_2442\" aria-describedby=\"caption-attachment-2442\" style=\"width: 300px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2442\" src=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_013_requestline-e1691346971967-300x28.jpg\" alt=\"Abbildung: Request-Line einer GET-Anfrage\" width=\"300\" height=\"40\"><figcaption id=\"caption-attachment-2442\" class=\"wp-caption-text\">Abbildung: Request-Line einer GET-Anfrage<\/figcaption><\/figure>\n<p>Die Kommunikation zwischen Browser und Server beginnt mit dem ersten Abschnitt einer Anfrage, der sogenannten Anfragezeile (Request Line). Am Anfang der Anfragezeile steht die <a href=\"https:\/\/de.wikipedia.org\/wiki\/Hypertext_Transfer_Protocol#HTTP-Anfragemethoden\" target=\"_blank\" rel=\"noopener\">Anfragemethode <\/a>(en: Request method). Die am h\u00e4ufigsten verwendete Methode ist GET, mit der ein Client eine Datei vom Server anfordert, um sie anschlie\u00dfend anzuzeigen. Es gibt jedoch auch andere Methoden, die verwendet werden k\u00f6nnen, um Dateien auf dem Server zu aktualisieren oder zu l\u00f6schen.<\/p>\n<p>Nach der Angabe der Methode und einem Leerzeichen werden dem Server zun\u00e4chst die gew\u00fcnschte Datei und der Dateipfad mitgeteilt. Anschlie\u00dfend folgt erneut ein Leerzeichen, gefolgt von der verwendeten HTTP-Protokoll-Version. Zum Beispiel, wenn Sie die URL <a href=\"http:\/\/www.example.net\/infotext.html\" target=\"_new\" rel=\"noopener\">http:\/\/www.example.net\/infotext.html<\/a> in die Adresszeile Ihres Browsers eingeben, sendet Ihr Browser eine GET-Anfrage an den Rechner mit dem Hostnamen <a href=\"http:\/\/www.example.net\/\" target=\"_new\" rel=\"noopener\">www.example.net<\/a>, um die Datei infotext.html anzuzeigen.<\/p>\n<p style=\"text-align: right;\"><span style=\"font-size: 10pt;\"><a href=\"#lesson01_inhalt\">zur\u00fcck zum Inhalt |<\/a><\/span><\/p>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<hr>\n<h2>Testen Sie ihr Wissen<\/h2>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-3\" class=\"h5p-iframe\" data-content-id=\"3\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML | Lektion 01 | \u00dcbung 01311\"><\/iframe><\/div>\n<hr>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h4><a id=\"lektion10312\"><\/a>| 01.3.1.2 | Der Anfrage-Header<\/h4>\n<figure id=\"attachment_2446\" aria-describedby=\"caption-attachment-2446\" style=\"width: 300px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2446\" src=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_013_header-e1691491472235-300x47.jpg\" alt=\"Abbildung: GET-Anfrage mit Request-Line und den Headerzeilen Host und User-Agent \" width=\"300\" height=\"50\"><figcaption id=\"caption-attachment-2446\" class=\"wp-caption-text\">Abbildung: GET-Anfrage mit Request-Line und den Headerzeilen Host und User-Agent<\/figcaption><\/figure>\n<p>Im n\u00e4chsten Abschnitt einer Anfrage folgen die <a href=\"https:\/\/de.wikipedia.org\/wiki\/Header\" target=\"_blank\" rel=\"noopener\">Header<\/a>-Zeilen, die unterhalb der Anfragezeile stehen. Diese werden auch als Nachrichtenkopf (Message-Header, <a href=\"https:\/\/de.wikipedia.org\/wiki\/Liste_der_HTTP-Headerfelder\" target=\"_blank\" rel=\"noopener\">HTTP-Header<\/a>) bezeichnet. Die Kopfdaten enthalten s\u00e4mtliche Informationen, die der Server ben\u00f6tigt, um die Anfrage zu verarbeiten. Eine unverzichtbare Angabe ist der <a href=\"https:\/\/de.wikipedia.org\/wiki\/Hostrechner\">Hostrechner<\/a>, auf dem sich die angeforderte Datei befindet.<\/p>\n<p>Die Header-Daten sind in der Form von <a href=\"https:\/\/datei.wiki\/definition\/schluessel-werte-paare-verstehen\/\" target=\"_blank\" rel=\"noopener\">Schl\u00fcssel-Wert-Paaren <\/a>strukturiert, die durch einen Doppelpunkt getrennt sind. Die Schl\u00fcssel (en.: key) repr\u00e4sentieren verschiedene <a href=\"https:\/\/de.wikipedia.org\/wiki\/Liste_der_HTTP-Headerfelder#Anfrage-Headerfelder\" target=\"_blank\" rel=\"noopener\">Header-Felder<\/a>, gefolgt von einem Doppelpunkt und dem zugeh\u00f6rigen Wert (en.: value). Ein Beispiel f\u00fcr ein solches Schl\u00fcssel-Wert-Paar ist die Zeile &#8222;Host: <a href=\"http:\/\/www.example.net\/\" target=\"_new\" rel=\"noopener\">www.example.net<\/a>&#8222;, bei der nach dem Doppelpunkt des Headerfelds &#8222;Host&#8220; der <a href=\"https:\/\/de.wikipedia.org\/wiki\/Hostname\" target=\"_blank\" rel=\"noopener\">Hostname<\/a> &#8222;<a href=\"http:\/\/www.example.net\/\" target=\"_new\" rel=\"noopener\">www.example.net<\/a>&#8220; als Wert angegeben wird. Der Hostname, also der Name der URL, wird zun\u00e4chst mithilfe des <a title=\"Domain Name System\" href=\"https:\/\/de.wikipedia.org\/wiki\/Domain_Name_System\">DNS<\/a>-Protokolls in eine <a title=\"IP-Adresse\" href=\"https:\/\/de.wikipedia.org\/wiki\/IP-Adresse\">IP-Adresse<\/a> umgewandelt und dann an den Server gesendet.<\/p>\n<p>Die meisten Webbrowser \u00fcbermitteln standardm\u00e4\u00dfig auch ihre Browserversion. Hinter dem Doppelpunkt des Headerfelds &#8222;<a title=\"User Agent\" href=\"https:\/\/de.wikipedia.org\/wiki\/User_Agent\">User-Agent<\/a>&#8220; (Clientname) folgt die entsprechende Browserversion (z.B., &#8222;Mozilla\/5.0&#8220;). Dar\u00fcber hinaus kann dem Server in den Header-Daten mitgeteilt werden, welchen <a href=\"https:\/\/wiki.selfhtml.org\/wiki\/MIME-Type\/\u00dcbersicht\" target=\"_blank\" rel=\"noopener\">Inhaltstyp<\/a> (en.: <a class=\"mw-redirect\" title=\"MIME-Typ\" href=\"https:\/\/de.wikipedia.org\/wiki\/Internet_Media_Type\">MIME-Typ<\/a>) der Client verarbeiten kann oder ob ein Nachrichtenrumpf (Message Body, <a href=\"https:\/\/en.wikipedia.org\/wiki\/HTTP_message_body\" target=\"_blank\" rel=\"noopener\">HTTP-Body<\/a>, Body) mit Nutzdaten (en.: Payload) \u00fcbertragen wird. Dies ist relevant bei Anfragemethoden, bei denen Texte, Bilder oder Videos auf dem Server aktualisiert werden sollen. Bei einfachen GET-Anfragen ist der Body in der Regel leer.<\/p>\n<p style=\"text-align: right;\"><span style=\"font-size: 10pt;\"><a href=\"#lesson01_inhalt\">zur\u00fcck zum Inhalt |<\/a><\/span><\/p>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<hr>\n<h2>Testen Sie ihr Wissen<\/h2>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-13\" class=\"h5p-iframe\" data-content-id=\"13\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML | Lektion 01 | \u00dcbung 01312\"><\/iframe><\/div>\n<hr>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h3><a id=\"lektion1032\"><\/a>| 01.3.2 | Die Antwort vom Server (Response)<\/h3>\n<p>Jede Anfrage wird vom Server beantwortet. Die Antwort setzt sich aus der ersten Zeile, der Status-Line, sowie den Response-Headerzeilen zusammen, in denen Informationen f\u00fcr den Webbrowser \u00fcbertragen werden.<br \/>\n<!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h4><a id=\"lektion10321\"><\/a>| 01.3.2.1 |Die Status-Line<\/h4>\n<figure id=\"attachment_2452\" aria-describedby=\"caption-attachment-2452\" style=\"width: 300px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2452\" src=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_013_response-e1691492056890-300x28.jpg\" alt=\"Abbildung: Antwort (Response) mit Status-Line \" width=\"300\" height=\"30\"><figcaption id=\"caption-attachment-2452\" class=\"wp-caption-text\">Abbildung: Antwort (Response) mit Status-Line<\/figcaption><\/figure>\n<p>In der ersten Zeile, der sogenannten Status-Line, sind die HTTP-Protokollversion und der HTTP-<a href=\"https:\/\/de.wikipedia.org\/wiki\/HTTP-Statuscode\" target=\"_blank\" rel=\"noopener\">Statuscode<\/a> enthalten. Bei einer erfolgreichen Bearbeitung der Anfrage sendet der Server den Statuscode &#8222;200 OK&#8220; an den Browser (Client) zur\u00fcck.<\/p>\n<p>Im Falle eines Fehlers wird ein entsprechender Fehlercode \u00fcbermittelt. Beispiele hierf\u00fcr sind der Code &#8222;404 &#8211; Not Found,&#8220; wenn die angeforderte URL nicht gefunden wurde, oder &#8222;500 Internal Server Error,&#8220; wenn der Server nicht erreichbar ist. Die Statuscodes sind in f\u00fcnf verschiedene Kategorien unterteilt:<\/p>\n<ol>\n<li>Informationscodes (100 bis 199): teilen dem Client mit, dass die Verarbeitung der Anfrage noch andauert<\/li>\n<li>Erfolgscodes (200 bis 299): best\u00e4tigen dem Client eine erfolgreiche Anfrage<\/li>\n<li>Umleitungscodes (300 bis 399): signalisieren dem Client, dass die Ressource unter einer anderen URL verf\u00fcgbar ist<\/li>\n<li>Client-Fehlercodes (400 bis 499): treten auf, wenn die Anfrage aufgrund eines Client-Fehlers fehlschl\u00e4gt<\/li>\n<li>Server-Fehlercodes (500 bis 599): treten auf, wenn die Anfrage aufgrund eines Server-Fehlers nicht bearbeitet werden kann<\/li>\n<\/ol>\n<p style=\"text-align: right;\"><span style=\"font-size: 10pt;\"><a href=\"#lesson01_inhalt\">zur\u00fcck zum Inhalt |<\/a><\/span><\/p>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<hr>\n<h2>Testen Sie ihr Wissen<\/h2>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-15\" class=\"h5p-iframe\" data-content-id=\"15\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML | Lektion 01 | \u00dcbung 01321\"><\/iframe><\/div>\n<hr>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h4><a id=\"lektion10322\"><\/a> | 01.3.2.2 | Der Antwort-Header<\/h4>\n<figure id=\"attachment_2473\" aria-describedby=\"caption-attachment-2473\" style=\"width: 300px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2473\" src=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/08\/Abb_HTML_013_responseheader-300x90.jpg\" alt=\"Abbildung: Headerzeilen einer Server-Response mit Content-Length und -Type.\" width=\"300\" height=\"100\"><figcaption id=\"caption-attachment-2473\" class=\"wp-caption-text\">Abbildung: Headerzeilen einer Server-Response mit Content-Length und -Type.<\/figcaption><\/figure>\n<p>Die folgenden Zeilen im Datenpaket geh\u00f6ren zum Nachrichtenkopf (<a href=\"https:\/\/de.wikipedia.org\/wiki\/Liste_der_HTTP-Headerfelder\" target=\"_blank\" rel=\"noopener\">HTTP-Header<\/a>, Message-Header). Hier finden sich Schl\u00fcssel-Wert-Paare mit zus\u00e4tzlichen Informationen f\u00fcr den Webbrowser.<\/p>\n<p>Nach dem Doppelpunkt im Header-Feld &#8222;Server&#8220; wird der Name der Serversoftware angegeben. Die am h\u00e4ufigsten verwendete Webserversoftware im Internet ist <a href=\"https:\/\/de.wikipedia.org\/wiki\/Apache_HTTP_Server\" target=\"_blank\" rel=\"noopener\">Apache<\/a>. Unter dem Schl\u00fcssel &#8222;Content-Length&#8220; (de.: <span class=\"Y2IQFc\" lang=\"de\">Inhaltsl\u00e4nge) <\/span>wird die Gr\u00f6\u00dfe der Datei &#8222;infotext.html&#8220; in <a href=\"https:\/\/de.wikipedia.org\/wiki\/Byte\" target=\"_blank\" rel=\"noopener\">Bytes<\/a> \u00fcbermittelt.<\/p>\n<p>Dar\u00fcber hinaus informiert der Server den Client \u00fcber den Dateityp (en.: Content-Type), was darauf hinweist, dass eine HTML-Datei \u00fcbertragen wird. Somit ist klar, dass hier noch ein weiteres Datenpaket, ein Nachrichtenrumpf mit Payload, \u00fcbermittelt wird.<\/p>\n<p style=\"text-align: right;\"><span style=\"font-size: 10pt;\"><a href=\"#lesson01_inhalt\">zur\u00fcck zum Inhalt |<\/a><\/span><\/p>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<hr>\n<h2>Testen Sie ihr Wissen<\/h2>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-17\" class=\"h5p-iframe\" data-content-id=\"17\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML | Lektion 01 | \u00dcbung 01322\"><\/iframe><\/div>\n<hr>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h2><a id=\"lektion104\"><\/a>| 01.4 | Wie Webbrowser Webseiten interpretieren<\/h2>\n<figure id=\"attachment_2712\" aria-describedby=\"caption-attachment-2712\" style=\"width: 2560px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung014-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2712\" src=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung014-scaled.jpg\" alt=\"Webbrowser parsen den HTML-Code und rendern die Webseite\" width=\"2560\" height=\"942\" srcset=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung014-scaled.jpg 2560w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung014-300x110.jpg 300w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung014-1024x377.jpg 1024w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung014-768x283.jpg 768w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung014-1536x565.jpg 1536w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung014-2048x753.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/a><figcaption id=\"caption-attachment-2712\" class=\"wp-caption-text\">Webbrowser parsen den HTML-Code und rendern die Webseite<\/figcaption><\/figure>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h3><a id=\"lektion1041\"><\/a>| 01.4.1 | Parsen und DOM-Baum<\/h3>\n<p>Nachdem der Browser als Antwort auf seine GET-Anfrage eine HTML-Datei vom Server erhalten hat, beginnt er mit dem Analysieren des HTML-Codes, einem Prozess, der als Parsen bezeichnet wird. Hierbei liest der Browser zun\u00e4chst die Zeilen der HTML-Datei von oben nach unten und markiert alle Tags sowie deren Inhalte.<\/p>\n<p>Der Browser unterteilt den HTML-Code in kleinere Einheiten, die als Tokens (de: Zeichen) bezeichnet werden (<a href=\"https:\/\/de.wikipedia.org\/wiki\/Tokenisierung\" target=\"_blank\" rel=\"noopener\">Tokenisierung<\/a>, en.: Tokenizing). Zum Beispiel w\u00fcrde ein Browser die Codezeile &#8222;&lt;p&gt; Hallo Welt &lt;\/p&gt;&#8220; in drei Tokens aufteilen: &#8222;&lt;p&gt;&#8220;, &#8222;Hallo Welt&#8220; und &#8222;&lt;\/p&gt;&#8220;. Die beiden Tags &#8222;&lt;p&gt;&#8220; und &#8222;&lt;\/p&gt;&#8220; erkennt er an den eckigen Klammern, w\u00e4hrend zwischen dem Anfangs- und dem Endtag der Inhalt &#8222;Hallo Welt&#8220; steht.<\/p>\n<p>Sobald der Browser den Code gelesen hat, erstellt er eine hierarchische \u00dcbersicht aller Tags, die als <a href=\"https:\/\/de.wikipedia.org\/wiki\/Document_Object_Model\" target=\"_blank\" rel=\"noopener\">DOM<\/a> (Document Object Model)-Baum bezeichnet wird.<\/p>\n<p style=\"text-align: right;\"><span style=\"font-size: 10pt;\"><a href=\"#lesson01_inhalt\">zur\u00fcck zum Inhalt |<\/a><\/span><\/p>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<hr>\n<h2>Testen Sie ihr Wissen<\/h2>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-18\" class=\"h5p-iframe\" data-content-id=\"18\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML | Lektion 01 | \u00dcbung 0141\"><\/iframe><\/div>\n<hr>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h3><a id=\"lektion1042\"><\/a>| 01.4.2 | Die Darstellung im Browserfenster (Rendern)<\/h3>\n<p>Nachdem der Browser den DOM-Baum erstellt hat, beginnt er mit dem Rendern, also mit der Darstellung der Webseite im Browserfenster. Zu diesem Zweck liest er zuerst die CSS (Cascading Style Sheets)-Datei ein und anschlie\u00dfend alle anderen <a href=\"https:\/\/de.wikipedia.org\/wiki\/Ressource_(Software)\" target=\"_blank\" rel=\"noopener\">Ressourcen<\/a>, die in der HTML-Datei angegeben sind, wie Bilder, Skripte und Videos. Er ruft diese Ressourcen von den entsprechenden Webservern ab, bindet sie in die Webseite ein und f\u00fchrt angegebene Skripte aus. Sobald die Webseite vollst\u00e4ndig angezeigt wird, kann der Benutzer mit ihr interagieren.<\/p>\n<p>Verschiedene Browser interpretieren den HTML-Code unterschiedlich. Daher sollten Webdesigner das Erscheinungsbild der Webseite immer in mehreren Browsern \u00fcberpr\u00fcfen. Um sicherzustellen, dass der HTML-Code korrekt dargestellt wird, ist es wichtig, den Code genau zu \u00fcberpr\u00fcfen (validieren). Es stehen verschiedene Online-Tools zur Verf\u00fcgung, um die HTML-Validit\u00e4t zu \u00fcberpr\u00fcfen, darunter der <span class=\"Y2IQFc\" lang=\"de\"><a href=\"https:\/\/validator.w3.org\/\" target=\"_blank\" rel=\"noopener\">Validator<\/a><\/span> des World Wide Web Consortiums (W3C).<\/p>\n<p>Alle Browser bieten sogenannte Entwicklertools zum Inspizieren und <a href=\"https:\/\/de.wikipedia.org\/wiki\/Debuggen\" target=\"_blank\" rel=\"noopener\">Debuggen<\/a> von HTML-Seiten. Klicken Sie mit der rechten Maustaste auf eine Webseite und w\u00e4hlen Sie im Kontextmen\u00fc die Option &#8222;Element untersuchen&#8220; oder &#8222;untersuchen&#8220; aus. Die Bezeichnung variiert in Abh\u00e4ngigkeit&nbsp; vom verwendeten Browser. Ein Ansichtsfenster \u00f6ffnet sich, das sehr viele Informationen \u00fcber die Webseiten-Struktur enth\u00e4lt, und Sie k\u00f6nnen sehen, welche Dateien vom Browser angefragt und von den Webservern geliefert werden.<\/p>\n<figure id=\"attachment_2696\" aria-describedby=\"caption-attachment-2696\" style=\"width: 1661px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_1_FF_Netzwerkanalyse.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2696 size-full\" src=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_1_FF_Netzwerkanalyse.png\" alt=\"Ansicht der Entwicklertools auf der Seite http:\/\/www.example.net\/infotext.html im Mozilla Firefox Browser\" width=\"1661\" height=\"494\" srcset=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_1_FF_Netzwerkanalyse.png 1661w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_1_FF_Netzwerkanalyse-300x89.png 300w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_1_FF_Netzwerkanalyse-1024x305.png 1024w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_1_FF_Netzwerkanalyse-768x228.png 768w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_1_FF_Netzwerkanalyse-1536x457.png 1536w\" sizes=\"auto, (max-width: 1661px) 100vw, 1661px\" \/><\/a><figcaption id=\"caption-attachment-2696\" class=\"wp-caption-text\">Ansicht der Entwicklertools auf der Seite <a href=\"http:\/\/www.example.net\/infotext.html\" target=\"_blank\" rel=\"noopener\">http:\/\/www.example.net\/infotext.html<\/a> im Mozilla Firefox Browser<\/figcaption><\/figure>\n<p style=\"text-align: right;\"><span style=\"font-size: 10pt;\"><a href=\"#lesson01_inhalt\">zur\u00fcck zum Inhalt |<\/a><\/span><\/p>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<hr>\n<h2>Testen Sie ihr Wissen<\/h2>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-2\" class=\"h5p-iframe\" data-content-id=\"2\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML | Lektion 01 | \u00dcbung 0142\"><\/iframe><\/div>\n<hr>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h2><a id=\"lektion105\"><\/a>| 01.5 | Die Grundstruktur von HTML<\/h2>\n<div class=\"flex-1 overflow-hidden\">\n<div class=\"react-scroll-to-bottom--css-chozo-79elbk h-full dark:bg-gray-800\">\n<div class=\"react-scroll-to-bottom--css-chozo-1n7m0yu\">\n<div class=\"flex flex-col text-sm dark:bg-gray-800\">\n<div class=\"group w-full text-token-text-primary border-b border-black\/10 dark:border-gray-900\/50 bg-gray-50 dark:bg-[#444654]\" data-testid=\"conversation-turn-29\">\n<div class=\"p-4 justify-center text-base md:gap-6 md:py-6 m-auto\">\n<div class=\"flex flex-1 gap-4 text-base mx-auto md:gap-6 md:max-w-2xl lg:max-w-[38rem] xl:max-w-3xl }\">\n<div class=\"relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]\">\n<div class=\"flex flex-grow flex-col gap-3 max-w-full\">\n<div class=\"min-h-[20px] flex flex-col items-start gap-3 overflow-x-auto whitespace-pre-wrap break-words\">\n<div class=\"markdown prose w-full break-words dark:prose-invert light\">\n<figure id=\"attachment_2710\" aria-describedby=\"caption-attachment-2710\" style=\"width: 2560px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung015-1-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2710\" src=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung015-1-scaled.jpg\" alt=\"Die HTML-Grundstruktur\" width=\"2560\" height=\"942\" srcset=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung015-1-scaled.jpg 2560w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung015-1-300x110.jpg 300w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung015-1-1024x377.jpg 1024w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung015-1-768x283.jpg 768w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung015-1-1536x565.jpg 1536w, https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/09\/Abb_HTML_uebung015-1-2048x753.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/a><figcaption id=\"caption-attachment-2710\" class=\"wp-caption-text\">Die HTML-Grundstruktur<\/figcaption><\/figure>\n<p>HTML-Tags in spitzen Klammern (&lt; &gt;) werden in englischer Sprache verfasst, da das World Wide Web in den Vereinigten Staaten entwickelt wurde und Englisch die vorherrschende Sprache in der Softwareentwicklung ist. Die Elementnamen innerhalb der Tags k\u00f6nnen bei herk\u00f6mmlichem HTML sowohl in Gro\u00df- als auch in Kleinbuchstaben geschrieben werden, da sie nicht <a href=\"https:\/\/de.wikipedia.org\/wiki\/Case_sensitivity\" target=\"_blank\" rel=\"noopener\">case-sensitiv<\/a>&nbsp;sind. In XHTML hingegen m\u00fcssen die Elementnamen in Kleinbuchstaben geschrieben werden, und heutzutage wird generell die Kleinschreibung empfohlen.<\/p>\n<p>Jedes HTML-Dokument beginnt mit dem Tag &lt;!DOCTYPE html&gt;, der den Dokumententyp (<a href=\"https:\/\/de.wikipedia.org\/wiki\/Dokumenttypdefinition\">DTD<\/a>) festlegt. Dadurch wei\u00df der Browser, dass es sich um ein HTML-Dokument handelt und welche Syntax er verwenden muss. Das Grundger\u00fcst von HTML-Dokumenten besteht immer aus den Tags &lt;html&gt;, &lt;head&gt; und &lt;body&gt;, die jeweils mit einem Endtag geschlossen werden.<\/p>\n<p>Innerhalb der spitzen Klammern der HTML-Tags k\u00f6nnen zus\u00e4tzliche Eigenschaften (<a href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Attribute\" target=\"_blank\" rel=\"noopener\">Attribute<\/a>) hinzugef\u00fcgt werden. <span class=\"p\">Attribute werden immer innerhalb der Tags geschrieben. <\/span>Hinter dem Tagnamen folgt, durch ein Leerzeichen getrennt, das Attribut, dem mit dem Gleichzeichen ein Wert zugewiesen wird. Auch die Namen der Attribute sind in HTML nicht <a href=\"https:\/\/de.wikipedia.org\/wiki\/Case_sensitivity\" target=\"_blank\" rel=\"noopener\">case-sensitiv<\/a>. Die Werte der Attribute d\u00fcrfen sowohl in einfachen als auch in doppelten Anf\u00fchrungszeichen stehen. Es ist ratsam, zu Beginn zu entscheiden, welche Methode Sie f\u00fcr Ihren Code bevorzugen, und konsequent bei Ihrer Wahl zu bleiben.<\/p>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h3><a id=\"lektion1051\"><\/a>| 01.5.1 | Die &lt;<a title=\"HTML\/Elemente\/html\" href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Elemente\/html\">html<\/a>&gt; Tags<\/h3>\n<p>Die Tags &lt;<a title=\"HTML\/Elemente\/html\" href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Elemente\/html\">html<\/a>&gt; und &lt;\/<a title=\"HTML\/Elemente\/html\" href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Elemente\/html\">html<\/a>&gt; werden verwendet, um den Anfang und das Ende eines HTML-Dokuments zu markieren. Dadurch wei\u00df der Browser, wo er mit dem Parsen beginnen und wo seine Analyse enden soll. Diese Tags umfassen somit den gesamten Inhalt der Webseite. Im DOM-Baum wird das &lt;html&gt;-Element als Wurzelelement (en.: root element) bezeichnet.<\/p>\n<p>Um die Sprache des Seiteninhalts der Webseite anzugeben, sollte das Sprachenattribut &#8222;lang&#8220; (language) im &lt;html&gt;-Tag verwendet werden. Durch die Verwendung des Werts &#8222;de&#8220; teilt man dem Browser mit, dass es sich um eine deutsche Seite handelt. Verwendet man den Wert &#8222;en&#8220;, wird die Seite mit dem Tag &lt;html lang=&#8220;en&#8220;&gt; als englisch gekennzeichnet. Auf Wikipedia finden Sie eine \u00dcbersicht der g\u00fcltigen <a href=\"https:\/\/de.wikipedia.org\/wiki\/Liste_der_ISO-639-1-Codes\" target=\"_blank\" rel=\"noopener\">Sprachenk\u00fcrzel<\/a>.<\/p>\n<p style=\"text-align: right;\"><span style=\"font-size: 10pt;\"><a href=\"#lesson01_inhalt\">zur\u00fcck zum Inhalt |<\/a><\/span><\/p>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<hr>\n<h2>Testen Sie ihr Wissen<\/h2>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-16\" class=\"h5p-iframe\" data-content-id=\"16\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML | Lektion 01 | \u00dcbung 0151\"><\/iframe><\/div>\n<hr>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h3><a id=\"lektion1052\"><\/a>| 01.5.2 | Die &lt;head&gt; Tags<\/h3>\n<p>Der <a href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Elemente\/head\" target=\"_blank\" rel=\"noopener\">&lt;head&gt;<\/a>-Tag leitet den Kopfbereich ein und wird mit einem &lt;\/head&gt;-Endtag geschlossen. Die Informationen im Kopfbereich sind f\u00fcr den Browser bestimmt und werden nicht auf der eigentlichen Webseite angezeigt.<\/p>\n<p>Im Kopfbereich finden sich unter anderem Metainformationen, die mit &lt;meta&gt;-Tags eingef\u00fchrt werden und keine schlie\u00dfenden Tags ben\u00f6tigen. Ein Beispiel ist der Tag &lt;meta charset=&#8220;utf-8&#8243;&gt;, der dem Browser Informationen \u00fcber die verwendete <a href=\"http:\/\/de.wikipedia.org\/wiki\/Zeichenkodierung\" target=\"_blank\" rel=\"noopener\">Zeichenkodierung<\/a>, in der Regel <a href=\"https:\/\/de.wikipedia.org\/wiki\/UTF-8\" target=\"_blank\" rel=\"noopener\">utf-8<\/a>, \u00fcbermittelt. Mithilfe des Metatags &lt;meta name=&#8220;author&#8220; content=&#8220;Max Mustermann&#8220;&gt; kann der Autor der Webseite angegeben werden.<\/p>\n<p>Eine weitere wichtige Information im Header ist der Webseitentitel, der in den <a href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Elemente\/title\" target=\"_blank\" rel=\"noopener\">&lt;title&gt;<\/a>&lt;\/title&gt;-Tags eingef\u00fcgt wird. Zudem sollte dem Browser mit einem Metatag die Gr\u00f6\u00dfe des Browserfensters, also der Viewport, mitgeteilt werden, damit er wei\u00df, wie viel Platz f\u00fcr die Anzeige zur Verf\u00fcgung steht. Die Angabe &lt;meta name=&#8220;viewport&#8220; content=&#8220;width=device-width, initial-scale=1.0&#8243;&gt; erm\u00f6glicht es Ihrer Webseite, sich an den <a title=\"Viewport\" href=\"https:\/\/wiki.selfhtml.org\/wiki\/Viewport\">Viewport<\/a> anzupassen und gleichzeitig eine Skalierung zu erm\u00f6glichen.<\/p>\n<p style=\"text-align: right;\"><span style=\"font-size: 10pt;\"><a href=\"#lesson01_inhalt\">zur\u00fcck zum Inhalt |<\/a><\/span><\/p>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<hr>\n<h2>Testen Sie ihr Wissen<\/h2>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-19\" class=\"h5p-iframe\" data-content-id=\"19\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML | Lektion 01 | \u00dcbung 0152\"><\/iframe><\/div>\n<hr>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h3><a id=\"lektion1053\"><\/a>| 01.5.3 | Die &lt;body&gt; Tags<\/h3>\n<p>Im Nachrichtenrumpf, dem Bereich zwischen dem Starttag <a href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Elemente\/body\" target=\"_blank\" rel=\"noopener\">&lt;body&gt;<\/a> und dem Endtag &lt;\/body&gt;, befinden sich alle Informationen, die im Browserfenster (en: Viewport) angezeigt werden. Dieser Abschnitt enth\u00e4lt die Nutzdaten (en.: Payload), also alles, was auf der Webseite sichtbar ist. In den kommenden Lektionen werden verschiedene HTML-Tags ausf\u00fchrlich erl\u00e4utert, die die strukturierte Gestaltung von Hypertexten erm\u00f6glichen.<\/p>\n<p>Zu den grundlegenden HTML-Tags, die bereits in der ersten <a href=\"https:\/\/de.wikipedia.org\/wiki\/Hypertext_Markup_Language#Versionen\" target=\"_blank\" rel=\"noopener\">HTML-Spezifikation<\/a> entwickelt wurden, geh\u00f6ren Tags f\u00fcr Verlinkungen sowie Tags zur Textformatierung. Ein Verweis (en.: Link) wird mithilfe der Anker (en.: Anchor)-Tags <a href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Elemente\/a\" target=\"_blank\" rel=\"noopener\">&lt;a&gt;<\/a> und &lt;\/a&gt; erstellt. \u00dcberschriften (en: Headline) werden beispielsweise mit &lt;h1&gt;&lt;\/h1&gt; markiert, und f\u00fcr Abs\u00e4tze (en.: paragraphs) werden die <a href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Elemente\/p\" target=\"_blank\" rel=\"noopener\">&lt;p&gt;<\/a>&lt;\/p&gt;-Tags verwendet.<\/p>\n<p>Neben den Elementen mit Start- und Endtag gibt es in HTML auch inhaltsleere Elemente, die keinen Endtag ben\u00f6tigen. Diese werden beispielsweise f\u00fcr Zeilenumbr\u00fcche (en: line breaks) und Bilder (en: image) verwendet. Mit dem <a href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Elemente\/br\" target=\"_blank\" rel=\"noopener\">&lt;br&gt;<\/a>-Tag wird ein Zeilenumbruch eingef\u00fcgt, und mit dem <a href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Elemente\/img\" target=\"_blank\" rel=\"noopener\">&lt;img&gt;<\/a>-Tag wird ein Bild in die Webseite integriert.<\/p>\n<p style=\"text-align: right;\"><span style=\"font-size: 10pt;\"><a href=\"#lesson01_inhalt\">zur\u00fcck zum Inhalt |<\/a><\/span><\/p>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<hr>\n<h2>Testen Sie ihr Wissen<\/h2>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-21\" class=\"h5p-iframe\" data-content-id=\"21\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML | Lektion 01 | \u00dcbung 0153\"><\/iframe><\/div>\n<hr>\n<p><!-- \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ --><\/p>\n<h2><a id=\"lektion106\"><\/a>| 01.6 <strong>| Praktische \u00dcbung<\/strong><\/h2>\n<p>Schreiben Sie einen HTML-Code, der eine Webseite mit dem Text &#8222;Hallo Welt&#8220; anzeigt.<br \/>\nF\u00fcr Ihre ersten Programmierschritte k\u00f6nnen Sie <a href=\"https:\/\/www.htmlinstant.com\/\" target=\"_blank\" rel=\"noopener\">HTML Instant<\/a> verwenden, einen kostenlosen HTML-Editor mit Live-Vorschau. Wenn Sie Ihren Code in das rechte Fenster tippen, k\u00f6nnen Sie im linken Fenster sehen, wie der Browser die Webseite (also Ihre Programmieranweisungen) darstellt.&nbsp;&nbsp;<\/p>\n<p>HTML-Dokumente sind Textdateien. Daher k\u00f6nnen Sie am Anfang alternativ auch einen einfachen <a href=\"https:\/\/de.wikipedia.org\/wiki\/Liste_von_Texteditoren\" target=\"_blank\" rel=\"noopener\">Text-Editor<\/a> verwenden, der meist auf jedem Betriebssystem vorinstalliert ist. Beispiele sind der <a href=\"https:\/\/de.wikipedia.org\/wiki\/Editor_(Windows)\" target=\"_blank\" rel=\"noopener\">Editor<\/a> auf Windows-<span class=\"mw-page-title-main\">Rechnern<\/span> oder <span class=\"mw-page-title-main\"><a href=\"https:\/\/de.wikipedia.org\/wiki\/TextEdit\" target=\"_blank\" rel=\"noopener\">TextEdit<\/a> f\u00fcr das Betriebssystem&nbsp;<a title=\"MacOS\" href=\"https:\/\/de.wikipedia.org\/wiki\/MacOS\">macOS<\/a>.&nbsp;<\/span><span class=\"mw-page-title-main\">Wenn Sie mit einem Texteditor arbeiten, m\u00fcssen Sie die Datei mit ihrem <a href=\"https:\/\/de.wikipedia.org\/wiki\/Code#Informatik\" target=\"_blank\" rel=\"noopener\">Code<\/a> (<a href=\"https:\/\/de.wikipedia.org\/wiki\/Quelltext\" target=\"_blank\" rel=\"noopener\">Quelltext<\/a>) als index.html abspeichern und diese Datei anschlie\u00dfend mit einem Browser \u00f6ffnen. <\/span><span class=\"mw-page-title-main\">In der folgenden Demonstration sehen Sie wie man HTML-Quellcode im Windows Editor als index.html abspeichert und die Datei in einem Webbrowser \u00f6ffnet.<\/span><br \/>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-11\" class=\"h5p-iframe\" data-content-id=\"11\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML | Lektion 01 | Demonstration 016\"><\/iframe><\/div><\/p>\n<p>F\u00fcr professionelles Webdesign empfehle ich Ihnen einen <a href=\"https:\/\/www.ionos.de\/digitalguide\/websites\/web-entwicklung\/html-editoren\/\" target=\"_blank\" rel=\"noopener\">Code-Editor<\/a>, der die Arbeit sehr vereinfacht, vor allem durch eine farbliche Syntaxhervorhebung. Pers\u00f6nlich verwende ich <a href=\"https:\/\/code.visualstudio.com\/Download\" target=\"_blank\" rel=\"noopener\">Visual Studio Code<\/a> von Microsoft.&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In der ersten Lektion werden Sie erfahren, was HTML ist und wie die Kommunikation im Internet funktioniert. Diese fundamentalen Kenntnisse sind f\u00fcr alle von Bedeutung,&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/maximini.eu\/work\/course-html-lektion01\/\">weiterlesen<span class=\"screen-reader-text\">HTML | Lektion 01 | Was ist HTML?<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/full-width.php","meta":{"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-2053","page","type-page","status-publish","hentry","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML | Lektion 01 | Was ist HTML? - Katja Maximini | work<\/title>\n<meta name=\"description\" content=\"HTML-Kurs: Lektion 01: Kommunikation im Internet zwischen Webbrowser und Webserver und die Grundstruktur von HTML-Seiten.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/maximini.eu\/work\/course-html-lektion01\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML | Lektion 01 | Was ist HTML? - Katja Maximini | work\" \/>\n<meta property=\"og:url\" content=\"https:\/\/maximini.eu\/work\/course-html-lektion01\/\" \/>\n<meta property=\"og:site_name\" content=\"Katja Maximini | work\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-01T14:40:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/07\/HTML-Datei_Icon-e1690029946997.png\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"315\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"19\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/maximini.eu\\\/work\\\/course-html-lektion01\\\/\",\"url\":\"https:\\\/\\\/maximini.eu\\\/work\\\/course-html-lektion01\\\/\",\"name\":\"HTML | Lektion 01 | Was ist HTML? - Katja Maximini | work\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/maximini.eu\\\/work\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/maximini.eu\\\/work\\\/course-html-lektion01\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/maximini.eu\\\/work\\\/course-html-lektion01\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/maximini.eu\\\/work\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2023\\\/07\\\/HTML-Datei_Icon-e1690029946997-300x189.png\",\"datePublished\":\"2023-09-03T11:50:49+00:00\",\"dateModified\":\"2026-04-01T14:40:10+00:00\",\"description\":\"HTML-Kurs: Lektion 01: Kommunikation im Internet zwischen Webbrowser und Webserver und die Grundstruktur von HTML-Seiten.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/maximini.eu\\\/work\\\/course-html-lektion01\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/maximini.eu\\\/work\\\/course-html-lektion01\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/maximini.eu\\\/work\\\/course-html-lektion01\\\/#primaryimage\",\"url\":\"https:\\\/\\\/maximini.eu\\\/work\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2023\\\/07\\\/HTML-Datei_Icon-e1690029946997.png\",\"contentUrl\":\"https:\\\/\\\/maximini.eu\\\/work\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2023\\\/07\\\/HTML-Datei_Icon-e1690029946997.png\",\"width\":500,\"height\":315,\"caption\":\"HTML Datei Icon\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/maximini.eu\\\/work\\\/course-html-lektion01\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/maximini.eu\\\/work\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML | Lektion 01 | Was ist HTML?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/maximini.eu\\\/work\\\/#website\",\"url\":\"https:\\\/\\\/maximini.eu\\\/work\\\/\",\"name\":\"Katja Maximini | work\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/maximini.eu\\\/work\\\/#\\\/schema\\\/person\\\/e5568f683596440f38d468287e995bd5\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/maximini.eu\\\/work\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/maximini.eu\\\/work\\\/#\\\/schema\\\/person\\\/e5568f683596440f38d468287e995bd5\",\"name\":\"Katja Maximini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6b71fa48f76dd3fbb2952f49b5f639da2f333317ec371c541b72bdb7b3ebc4f8?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6b71fa48f76dd3fbb2952f49b5f639da2f333317ec371c541b72bdb7b3ebc4f8?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6b71fa48f76dd3fbb2952f49b5f639da2f333317ec371c541b72bdb7b3ebc4f8?s=96&r=g\",\"caption\":\"Katja Maximini\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6b71fa48f76dd3fbb2952f49b5f639da2f333317ec371c541b72bdb7b3ebc4f8?s=96&r=g\"},\"sameAs\":[\"https:\\\/\\\/www.maximini.eu\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/katja-maximini-68032566\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML | Lektion 01 | Was ist HTML? - Katja Maximini | work","description":"HTML-Kurs: Lektion 01: Kommunikation im Internet zwischen Webbrowser und Webserver und die Grundstruktur von HTML-Seiten.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/maximini.eu\/work\/course-html-lektion01\/","og_locale":"de_DE","og_type":"article","og_title":"HTML | Lektion 01 | Was ist HTML? - Katja Maximini | work","og_url":"https:\/\/maximini.eu\/work\/course-html-lektion01\/","og_site_name":"Katja Maximini | work","article_modified_time":"2026-04-01T14:40:10+00:00","og_image":[{"width":500,"height":315,"url":"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/07\/HTML-Datei_Icon-e1690029946997.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"19\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/maximini.eu\/work\/course-html-lektion01\/","url":"https:\/\/maximini.eu\/work\/course-html-lektion01\/","name":"HTML | Lektion 01 | Was ist HTML? - Katja Maximini | work","isPartOf":{"@id":"https:\/\/maximini.eu\/work\/#website"},"primaryImageOfPage":{"@id":"https:\/\/maximini.eu\/work\/course-html-lektion01\/#primaryimage"},"image":{"@id":"https:\/\/maximini.eu\/work\/course-html-lektion01\/#primaryimage"},"thumbnailUrl":"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/07\/HTML-Datei_Icon-e1690029946997-300x189.png","datePublished":"2023-09-03T11:50:49+00:00","dateModified":"2026-04-01T14:40:10+00:00","description":"HTML-Kurs: Lektion 01: Kommunikation im Internet zwischen Webbrowser und Webserver und die Grundstruktur von HTML-Seiten.","breadcrumb":{"@id":"https:\/\/maximini.eu\/work\/course-html-lektion01\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/maximini.eu\/work\/course-html-lektion01\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/maximini.eu\/work\/course-html-lektion01\/#primaryimage","url":"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/07\/HTML-Datei_Icon-e1690029946997.png","contentUrl":"https:\/\/maximini.eu\/work\/wp-content\/uploads\/sites\/4\/2023\/07\/HTML-Datei_Icon-e1690029946997.png","width":500,"height":315,"caption":"HTML Datei Icon"},{"@type":"BreadcrumbList","@id":"https:\/\/maximini.eu\/work\/course-html-lektion01\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/maximini.eu\/work\/"},{"@type":"ListItem","position":2,"name":"HTML | Lektion 01 | Was ist HTML?"}]},{"@type":"WebSite","@id":"https:\/\/maximini.eu\/work\/#website","url":"https:\/\/maximini.eu\/work\/","name":"Katja Maximini | work","description":"","publisher":{"@id":"https:\/\/maximini.eu\/work\/#\/schema\/person\/e5568f683596440f38d468287e995bd5"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/maximini.eu\/work\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/maximini.eu\/work\/#\/schema\/person\/e5568f683596440f38d468287e995bd5","name":"Katja Maximini","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/6b71fa48f76dd3fbb2952f49b5f639da2f333317ec371c541b72bdb7b3ebc4f8?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6b71fa48f76dd3fbb2952f49b5f639da2f333317ec371c541b72bdb7b3ebc4f8?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6b71fa48f76dd3fbb2952f49b5f639da2f333317ec371c541b72bdb7b3ebc4f8?s=96&r=g","caption":"Katja Maximini"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/6b71fa48f76dd3fbb2952f49b5f639da2f333317ec371c541b72bdb7b3ebc4f8?s=96&r=g"},"sameAs":["https:\/\/www.maximini.eu","https:\/\/www.linkedin.com\/in\/katja-maximini-68032566\/"]}]}},"_links":{"self":[{"href":"https:\/\/maximini.eu\/work\/wp-json\/wp\/v2\/pages\/2053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maximini.eu\/work\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maximini.eu\/work\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maximini.eu\/work\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maximini.eu\/work\/wp-json\/wp\/v2\/comments?post=2053"}],"version-history":[{"count":479,"href":"https:\/\/maximini.eu\/work\/wp-json\/wp\/v2\/pages\/2053\/revisions"}],"predecessor-version":[{"id":4362,"href":"https:\/\/maximini.eu\/work\/wp-json\/wp\/v2\/pages\/2053\/revisions\/4362"}],"wp:attachment":[{"href":"https:\/\/maximini.eu\/work\/wp-json\/wp\/v2\/media?parent=2053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}