{"id":39,"date":"2012-08-05T13:09:19","date_gmt":"2012-08-05T13:09:19","guid":{"rendered":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/05\/html2\/"},"modified":"2023-12-14T16:33:13","modified_gmt":"2023-12-14T16:33:13","slug":"html2","status":"publish","type":"post","link":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/05\/html2\/","title":{"rendered":"2 Erste eigene HTML-Seite"},"content":{"rendered":"<p>&nbsp;<\/p>\n<h2 style=\"margin: 0px; padding: 0px; color: #6e7376; font-family: 'Lucida Grande', arial, verdana, sans-serif; word-spacing: 1px;\">&nbsp;<\/h2>\n<h1 style=\"margin: 0px; padding: 0px; color: #6e7376; font-family: 'Lucida Grande', arial, verdana, sans-serif; word-spacing: 1px;\">erste eigene HTML-Seite erstellen<\/h1>\n<p><code><span style=\"font-family: arial, helvetica, sans-serif;\">Wir steigen hier ganz einfach ein. Dabei werden wir sehr schnell eine HTML-Seite entwerfen, die in einem Web-Browser angezeigt werden kann.Dabei werden die Beispiele am Anfang sehr einfach gehalten sein, damit ein grundlegendes Verst\u00e4ndnis aufgebaut werden kann.&nbsp;<\/span><\/code><\/p>\n<h2 style=\"margin: 0px; padding: 0px; color: #6e7376; font-family: 'Lucida Grande', arial, verdana, sans-serif; word-spacing: 1px;\">sehr einfache HTML-Seite erstellen<\/h2>\n<p>F\u00fcr das Grundverst\u00e4ndnis legen wir nun eine Seite in einem einfachen Texteditor (z.B. dem Programm \u201eEditor\u201c unter Windows, zu finden unter \u201eAlle Programme\u201c &#8211; Zubeh\u00f6r) an.<\/p>\n<p>Du kannst auch direkt mit dem komfortableren Programm Notepad++ arbeiten. Gibt es kostenlos zum Download im Netz.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"bilder\/erste-html-seite-editor.png\" alt=\"einfacher Texteditor vom Betriebssystem\" title=\"einfacher Texteditor vom Betriebssystem\" width=\"668\" height=\"158\" \/><\/p>\n<p>Als Speicherort f\u00fcr die zuk\u00fcnftigen Dateien legst du auf deinem USB Stick die Ordner ai\/html\/ an.<\/p>\n<p><code>F\u00fcr ISERV gilt: Du speicherst deine Dateien in deinem Homepageverzeichnis ab H:\\homepage<\/p>\n<p>Netzlaufwerk einbinden: <a href=\"https:\/\/www.iserv.de\/doc\/cookbook\/external\/webdav\/windows-10\/\">https:\/\/www.iserv.de\/doc\/cookbook\/external\/webdav\/windows-10\/<\/a><br \/><\/code><\/p>\n<p><code><strong>max.muster.stt-hl.org<\/strong> ruft deine H:\\homepage\\index.html auf<\/code><br \/><code><strong>max.muster.stt-hl.org\/absatz.html<\/strong> ruft die Datei H:\\homepage\\absatz.html auf<\/code><\/p>\n<p>Diese Datei speichern wir mit dem Namen &#8222;index.html&#8220;. Wichtig ist dabei die Endung. Durch die Endung sagen wir, dass es sich um eine HTML-Seite handelt. Wichtig ist beim Editor unter Windows, dass der Dateityp auf \u201eAlle Dateien\u201c gestellt wird \u0096 sonst kann es vorkommen, dass unsere Datei in Wirklichkeit dann \u201eindex.htm.txt\u201c hei\u00dft und daher keine HTML-Seite ist. Die Anzeige der letzten Endung kann je nach Einstellung des Betriebssystems unterdr\u00fcckt sein und man wundert sich dann, dass nichts so funktioniert wie hier beschrieben. Daher bitte darauf achten, dass die Endung entsprechend eingetragen ist!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"bilder\/erste-html-seite-speichern.png\" alt=\"wichtig beim Speichern von Internetseiten mit dem Editor\" title=\"wichtig beim Speichern von Internetseiten mit dem Editor\" width=\"567\" height=\"452\" \/><\/p>\n<p>Der Inhalt der Datei ist (exakt mit Leerzeichen und Umbr\u00fcchen abtippen!):<\/p>\n<pre style=\"margin: 0px 0px 1em; padding: 0em 0.8em; position: relative; border-left-color: #b4c6e0; border-left-width: 6px; border-left-style: solid; overflow: auto; font-family: monospace; font-size: 1em; line-height: 1.5em; background-color: #eeeeee; word-spacing: 1px;\">Herzlich willkommen auf\r\nmeiner ersten HTML-Seite\r\nHier                  findest\r\ndu meine erste Homepage zum\r\nLernen von HTML \r\nAngewandte \r\nInformatik\r\nmacht ganz viel Spass!<\/pre>\n<h2>Datei speichern als HTML-Seite<\/h2>\n<p>Die Datei hat durch die Endung &#8222;.htm&#8220; im Betriebssystem das Browserlogo bekommen (meistens das E des Internet Explorer oder je nach Webbrowser das entsprechende Symbol).<\/p>\n<p>Im Dateibrowser wird nun die Datei mit entsprechendem Icon angezeigt \u0096 hier das bekannte E vom Internet Explorer f\u00fcr Internetseiten:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"bilder\/erste-html-seite-explorer-ansicht-ie-standardbrowser.png\" alt=\"Icon im Explorer bei Standardbrowser Internet Explorer\" title=\"Icon im Explorer bei Standardbrowser Internet Explorer\" width=\"433\" height=\"175\" \/><\/p>\n<p>Oder dem entsprechenden f\u00fcr Firefox:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"bilder\/erste-html-seite-explorer-ansicht-firefox-standardbrowser.png\" alt=\"Icon im Explorer bei Standardbrowser Firefox\" title=\"Icon im Explorer bei Standardbrowser Firefox\" width=\"433\" height=\"174\" \/><\/p>\n<p>Hier unbedingt auf die Endung achten \u0096 schief lief es, wenn folgendes Symbol auftaucht:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"bilder\/erste-html-seite-explorer-ansicht-falsche-dateiendung.png\" alt=\"falsche Dateiendung durch selbstgef\u00e4lligen Editor\" title=\"falsche Dateiendung durch selbstgef\u00e4lligen Editor\" width=\"433\" height=\"174\" \/><\/p>\n<p>Nun schauen wir uns diese Seite mit einem Webbrowser an. Sobald wir die Datei doppelt anklicken, wird diese im Webbrowser angezeigt.&nbsp;<\/p>\n<p>Was f\u00e4llt dir auf?<\/p>\n<p>Erstaunlich, oder? Alle Umbr\u00fcche sind beseitigt und mehrere Leerzeichen werden zu einem Leerzeichen zusammengefasst. Nicht wundern &#8211; denn dies ist in HMTL v\u00f6llig normal.<\/p>\n<h2>Schockiert, wie einfach HTML Seiten erstellen sein kann?<\/h2>\n<p>Das ist durchaus schon eine HTML-Seite (auch wenn sie nicht blinkt und leuchtet und videos beinhaltet). Hier siehst du Grund f\u00fcr den Siegeszug von HTML. Durch sehr einfache Mittel k\u00f6nnen Inhalte f\u00fcr andere bereitgestellt werden, die dann weltweit darauf zugreifen k\u00f6nnen. Unsere Datei m\u00fcssten wir dazu nur noch auf einen Webserver schieben (dazu kommen wir sp\u00e4ter).<\/p>\n<p><code>F\u00fcr ISERV gilt: Deine Datei ist bereits im WWW erreichbar. Bedenke: du bist verantwortlich f\u00fcr den Inhalt.<\/code><\/p>\n<p>Als n\u00e4chstes wollen wir unseren Text strukturieren und sauber anzeigen lassen. Dazu ben\u00f6tigen wir die ersten <strong>HTML-TAGs<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; &nbsp; erste eigene HTML-Seite erstellen Wir steigen hier ganz einfach ein. Dabei werden wir sehr schnell eine HTML-Seite entwerfen, die in einem Web-Browser angezeigt werden kann.Dabei werden die Beispiele am Anfang sehr einfach gehalten sein, damit ein grundlegendes Verst\u00e4ndnis aufgebaut werden kann.&nbsp; sehr einfache HTML-Seite erstellen F\u00fcr das Grundverst\u00e4ndnis legen wir nun eine Seite [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[9,47],"tags":[],"class_list":["post-39","post","type-post","status-publish","format-standard","hentry","category-html","category-html2"],"_links":{"self":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":1,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"predecessor-version":[{"id":397,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/39\/revisions\/397"}],"wp:attachment":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/tags?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}