{"id":50,"date":"2007-01-10T23:51:14","date_gmt":"2007-01-10T23:51:14","guid":{"rendered":"https:\/\/kunstunterricht.ch\/e\/2007\/01\/10\/html-hypertext-markup-language\/"},"modified":"2024-09-25T20:31:26","modified_gmt":"2024-09-25T20:31:26","slug":"html-hypertext-markup-language","status":"publish","type":"post","link":"https:\/\/kunstunterricht.ch\/e\/html-hypertext-markup-language\/","title":{"rendered":"HTML (Hypertext Markup Language)"},"content":{"rendered":"<h3>Editiere, Betrachten und Ver\u00f6ffentlichen von HTML<\/h3>\n<p>Der Quellcode einer &#8222;HTML Datei&#8220; ist in reinem Text geschrieben. Somit kann eine Homepage bereits mit einem einfachen Texteditor geschrieben werden (z.B. Editor, Simpletext etc.). Zur Interpretation von HTML ben\u00f6tigt man einen HTML-Browser, welcher standardm\u00e4ssig bei jedem Betriebssystem installiert ist (z.B. Internetexplorer, Firefox, Safari etc.).<\/p>\n<p>M\u00f6chte man eine Webseite nicht nur lokal (auf dem eigenen Rechner) betrachten, sondern online ver\u00f6ffentlichen, muss der gesamte Ordner der Homepage mit den HTML-Dateien und den dazugeh\u00f6renden Bildern auf einen Webserver gestellt werden.<\/p>\n<h3>Ordnerstruktur einer Webseite<\/h3>\n<p>Eine Korrekte Bezeichnung und \u00fcbersichtliche Struktur der Ordner und Dateien sind f\u00fcr die Programmierung einer Homepage sehr wichtig. F\u00fcr die Namen der Ordner d\u00fcrfen keine Umlaute, Sonderzeichen und Leerschl\u00e4ge benutzt werden. HTML-Dateien werden mit dem Anhang .html bezeichnet. Bereits ein kleiner Rechtschreibfehler kann einen Link ung\u00fcltig machen.<\/p>\n<p>Um die Kontrolle bei der Entwicklung einer Website zu bewahren, schlage ich folgende Dateistruktur vor:<\/p>\n<table border=\"0\">\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\" alignleft size-full wp-image-29\" title=\"platzhalter\" src=\"https:\/\/kunstunterricht.ch\/e\/wp-content\/uploads\/2006\/12\/platzhalter.gif\" alt=\"platzhalter\" width=\"12\" height=\"12\" align=\"left\" border=\"0\" hspace=\"5\" vspace=\"5\" \/><\/td>\n<td><em><strong>homepage\/<\/strong> (Hauptordner) <\/em><\/p>\n<p><em> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 index.html (Startseite z.B. f\u00fcr ein Intro) <\/em><\/p>\n<p><em> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 home.html (\u00dcbersichtsseite) <\/em><\/p>\n<p><em> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>themen\/<\/strong> (Ordner 1) <\/em><\/p>\n<p><em> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 thema1.html (Inhaltsseite 1) <\/em><\/p>\n<p><em> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 thema2.html (Inhaltsseite 2) <\/em><\/p>\n<p><em><strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0bilder<\/strong>\/ (Ordner 2) <\/em><\/p>\n<p><em> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 bild1.jpg (Vollbild 1) <\/em><\/p>\n<p><em> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 bild2.jpg (Vollbild 2) <\/em><\/p>\n<p><em> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>thumbnails\/ <\/strong>(Unterordner) <\/em><\/p>\n<p><em> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 thumb1.jpg (Vorschau vom Vollbild 1) <\/em><\/p>\n<p><em> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 thumb2.jpg (Vorschau vom Vollbild 2)<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Wird mit einem Browser der Hauptordner angeklickt, wird automatisch die index.html-Seite ge\u00f6ffnet<\/p>\n<h3>Ger\u00fcst einer einzelnen HTML-Datei<\/h3>\n<p>Eine einzelne Webseite besteht im Wesentlichen aus drei Teilen:<\/p>\n<ul style=\"margin-top: 0cm;\">\n<li>Dokumenttyp-Beschreibung (Angabe zur verwendeten HTML-Version)<\/li>\n<li>Header (Seiteninformationen z.B. Angaben zu Seitentitel u.\u00e4.)<\/li>\n<li>Body (anzuzeigender Inhalt z.B.Text, Links, Grafikreferenzen usw.)<\/li>\n<\/ul>\n<p>Im Code sieht das folgendermassen aus:<\/p>\n<table border=\"0\">\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\" alignleft size-full wp-image-29\" title=\"platzhalter\" src=\"https:\/\/kunstunterricht.ch\/e\/wp-content\/uploads\/2006\/12\/platzhalter.gif\" alt=\"platzhalter\" width=\"12\" height=\"12\" align=\"left\" border=\"0\" hspace=\"5\" vspace=\"5\" \/><\/td>\n<td><em>&lt;!DOCTYPE HTML PUBLIC &#8222;-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN&#8220;<br \/>\n&#8222;http:\/\/www.w3.org\/TR\/html4\/loose.dtd&#8220;&gt;<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;&#8230;&lt;\/head&gt;<br \/>\n&lt;body&gt;&#8230;&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Tags<\/h3>\n<p>Tags sind Befehle, die vom Browser ausgef\u00fchrt werden. Diese beginnen oft mit einer spitzigen Klammer &lt;&#8230;&gt;, besitzen dazwischen evt. ein oder mehrer Attribute und enden mit einem abschliessenden Tag mit Schr\u00e4gstrich &lt;\/&#8230;&gt;. Tags k\u00f6nnen auch verschachtelt werden. Beispiele:<\/p>\n<h5>Einfache Textbl\u00f6cke (pause)<\/h5>\n<table border=\"0\">\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\" alignleft size-full wp-image-29\" title=\"platzhalter\" src=\"https:\/\/kunstunterricht.ch\/e\/wp-content\/uploads\/2006\/12\/platzhalter.gif\" alt=\"platzhalter\" width=\"12\" height=\"12\" align=\"left\" border=\"0\" hspace=\"5\" vspace=\"5\" \/><\/td>\n<td><em> &lt;p&gt;Hier kommt der Text&lt;\/p&gt;<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5>Manueller Zeilenumbruch (break)<\/h5>\n<table border=\"0\">\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\" alignleft size-full wp-image-29\" title=\"platzhalter\" src=\"https:\/\/kunstunterricht.ch\/e\/wp-content\/uploads\/2006\/12\/platzhalter.gif\" alt=\"platzhalter\" width=\"12\" height=\"12\" align=\"left\" border=\"0\" hspace=\"5\" vspace=\"5\" \/><\/td>\n<td><em> &lt;br&gt;<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5>Fette Schrift (bold)<\/h5>\n<table border=\"0\">\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\" alignleft size-full wp-image-29\" title=\"platzhalter\" src=\"https:\/\/kunstunterricht.ch\/e\/wp-content\/uploads\/2006\/12\/platzhalter.gif\" alt=\"platzhalter\" width=\"12\" height=\"12\" align=\"left\" border=\"0\" hspace=\"5\" vspace=\"5\" \/><\/td>\n<td><em> &lt;b&gt;Hier kommt der Text&lt;\/b&gt;<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5>Hyperlink (hyper reference)<\/h5>\n<table border=\"0\">\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\" alignleft size-full wp-image-29\" title=\"platzhalter\" src=\"https:\/\/kunstunterricht.ch\/e\/wp-content\/uploads\/2006\/12\/platzhalter.gif\" alt=\"platzhalter\" width=\"12\" height=\"12\" align=\"left\" border=\"0\" hspace=\"5\" vspace=\"5\" \/><\/td>\n<td><em> &lt;a href=\u201cLinkpfad\u201c&gt;Linktext&lt;\/a&gt;<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5>Bild aus einer Quelle z.B. einem Ordner in der Seite anzeigen (image source)<\/h5>\n<table border=\"0\">\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\" alignleft size-full wp-image-29\" title=\"platzhalter\" src=\"https:\/\/kunstunterricht.ch\/e\/wp-content\/uploads\/2006\/12\/platzhalter.gif\" alt=\"platzhalter\" width=\"12\" height=\"12\" align=\"left\" border=\"0\" hspace=\"5\" vspace=\"5\" \/><\/td>\n<td><em> &lt;img src=&#8220;Bildpfad&#8220; width=&#8220;300&#8243; height=&#8220;200&#8243; alt=&#8220;Alternativtext&#8220;&gt;<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Die Bildh\u00f6he und -breite werden in Pixel angegeben.<\/p>\n<h5>Farben von Text und Hintergrund<\/h5>\n<table border=\"0\">\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\" alignleft size-full wp-image-29\" title=\"platzhalter\" src=\"https:\/\/kunstunterricht.ch\/e\/wp-content\/uploads\/2006\/12\/platzhalter.gif\" alt=\"platzhalter\" width=\"12\" height=\"12\" align=\"left\" border=\"0\" hspace=\"5\" vspace=\"5\" \/><\/td>\n<td><em> &lt;body bgcolor=&#8220;#663333&#8243; text=&#8220;#FFCC99&#8243; link=&#8220;#FF9966&#8243; vlink=&#8220;#00FF00&#8243; alink=&#8220;#0000FF&#8220;&gt;<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Die Angabe der <a href=\"http:\/\/de.wikipedia.org\/wiki\/Webfarben\" target=\"_blank\" rel=\"noopener\">Farbe<\/a> ist in einem Hexidezimalen RGB-Code: #RRGGBB.<\/p>\n<h5>Versteckte Kommentare<\/h5>\n<table border=\"0\">\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\" alignleft size-full wp-image-29\" title=\"platzhalter\" src=\"https:\/\/kunstunterricht.ch\/e\/wp-content\/uploads\/2006\/12\/platzhalter.gif\" alt=\"platzhalter\" width=\"12\" height=\"12\" align=\"left\" border=\"0\" hspace=\"5\" vspace=\"5\" \/><\/td>\n<td><em> &lt;!&#8211; In einem Quellcode wird dieser Text vom Browser nicht angezeigt &#8211;&gt;<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Hiermit k\u00f6nnen Angaben zu Autor, Erstellungs\u00addatum, Urheberrechte, Programmierhinweise etc. gemacht werden, die vom Browser nicht angezeigt werden und nur im Quellcode sichtbar sind.<\/p>\n<h3>Quellen und Links<\/h3>\n<p>Selfhtml gilt als Klassiker: <a id=\"fm_file\" title=\"http:\/\/de.selfhtml.org\/html\/index.htm\" href=\"http:\/\/de.selfhtml.org\/html\/index.htm\" target=\"_blank\" rel=\"noopener\">http:\/\/de.selfhtml.org\/html\/index.htm<\/a><\/p>\n<p>Marco Abrar&#8217;s HTML-W\u00f6rterbuch ist besonders f\u00fcr Einsteiger geeignet: <a id=\"fm_file\" title=\"http:\/\/ww3.de\/inhalt.htm\" href=\"http:\/\/ww3.de\/inhalt.htm\" target=\"_blank\" rel=\"noopener\">http:\/\/ww3.de\/inhalt.htm<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Beitrag erhalten Sie eine kurze Einf\u00fchrung in Webdesign mit Fokus auf Hypertext Markup Language. HTML ist eine textbasierte Auszeichnungssprache, die haupts\u00e4chlich im WWW (World Wide Web) eingesetzt wird. HTML dient zur Gestaltung und Verkn\u00fcpfung von Text und Bild.<\/p>\n","protected":false},"author":1,"featured_media":29,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[13],"tags":[33,38],"class_list":["post-50","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-leitfaeden","tag-neue-medien","tag-webdesign-interactiondesign"],"acf":[],"_links":{"self":[{"href":"https:\/\/kunstunterricht.ch\/e\/wp-json\/wp\/v2\/posts\/50","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kunstunterricht.ch\/e\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kunstunterricht.ch\/e\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kunstunterricht.ch\/e\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kunstunterricht.ch\/e\/wp-json\/wp\/v2\/comments?post=50"}],"version-history":[{"count":2,"href":"https:\/\/kunstunterricht.ch\/e\/wp-json\/wp\/v2\/posts\/50\/revisions"}],"predecessor-version":[{"id":8414,"href":"https:\/\/kunstunterricht.ch\/e\/wp-json\/wp\/v2\/posts\/50\/revisions\/8414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kunstunterricht.ch\/e\/wp-json\/wp\/v2\/media\/29"}],"wp:attachment":[{"href":"https:\/\/kunstunterricht.ch\/e\/wp-json\/wp\/v2\/media?parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kunstunterricht.ch\/e\/wp-json\/wp\/v2\/categories?post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kunstunterricht.ch\/e\/wp-json\/wp\/v2\/tags?post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}