{"id":18,"date":"2018-08-26T14:39:16","date_gmt":"2018-08-26T14:39:16","guid":{"rendered":"https:\/\/math-brownies.de\/?p=18"},"modified":"2024-03-06T15:29:32","modified_gmt":"2024-03-06T15:29:32","slug":"grundgerueste","status":"publish","type":"post","link":"https:\/\/math-brownies.de\/index.php\/2018\/08\/26\/grundgerueste\/","title":{"rendered":"Grundger\u00fcste"},"content":{"rendered":"<p id=\"yui_3_17_2_1_1535294310903_1501\">Die meisten Dateien, die &#8222;programme&#8220; oder &#8222;Webseiten&#8220; darstellen, sind nichts anderes als Textdateien. Sie k\u00f6nnen mit jedem beliebigen Texteditor bearbeitet werden. Damit Browser und andere verarbeitende Software erkennt, um was f\u00fcr eine Art von Datei es sich handelt, nutzt man zum einen die Dateiendung, viel wichtiger aber ein standardisiertes Grundger\u00fcst, an dem alle wichtigen Daten erkennbar sind.<\/p>\n<p id=\"yui_3_17_2_1_1535294310903_1503\">Wichtige Dateien, mit denen ich f\u00fcr Web-Projekte arbeite, sind html-Dateien, css-Dateien und php-Dateien. (Im gro\u00dfen und ganzen sind dies die Hauptseiten, die Dateien, die das Aussehen bestimmen und Dateien, die Aktionen und Interaktionen h\u00e4ndeln.)<\/p>\n<h5 id=\"yui_3_17_2_1_1535294310903_1504\"><a id=\"yui_3_17_2_1_1535294310903_1505\" href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Dokumentstruktur_und_Aufbau#Grundger.C3.BCst_einer_HTML-Datei\" target=\"_blank\" rel=\"noreferrer noopener\"><b id=\"yui_3_17_2_1_1535294310903_1506\">Das Grundger\u00fcst einer html-Seite<\/b><\/a><\/h5>\n<table id=\"yui_3_17_2_1_1535294310903_1507\" style=\"height: 1361px;\">\n<thead id=\"yui_3_17_2_1_1535294310903_1508\">\n<tr id=\"yui_3_17_2_1_1535294310903_1509\" style=\"height: 46px;\">\n<th id=\"yui_3_17_2_1_1535294310903_1510\" style=\"width: 456.567px; height: 46px;\" scope=\"col\">Code<\/th>\n<th id=\"yui_3_17_2_1_1535294310903_1511\" style=\"width: 347.433px; height: 46px;\" scope=\"col\">Erkl\u00e4rung<\/th>\n<\/tr>\n<\/thead>\n<tbody id=\"yui_3_17_2_1_1535294310903_1512\">\n<tr id=\"yui_3_17_2_1_1535294310903_1513\" style=\"height: 1315px;\">\n<td id=\"yui_3_17_2_1_1535294310903_1514\" style=\"width: 456.567px; height: 1315px;\">\n<pre id=\"yui_3_17_2_1_1535294310903_1515\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"de\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"utf-8\" \/&gt;\n    &lt;meta name=\"viewport\" \n     content=\"width=device-width, \n     initial-scale=1.0\" \/&gt;\n    &lt;title&gt;Titel&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<\/td>\n<td id=\"yui_3_17_2_1_1535294310903_1516\" style=\"width: 347.433px; height: 1315px;\">Der Typ des Domumentes ist hmtl.<br id=\"yui_3_17_2_1_1535294310903_1517\" \/>Das html-Dokument ist auf Deutsch.<br id=\"yui_3_17_2_1_1535294310903_1518\" \/>Im Head werden wichtige Metadaten und Hinweise gespeichert. Er wird als erstes ausgelesen.<br id=\"yui_3_17_2_1_1535294310903_1519\" \/>Das Set an Zeichen wird gesetzt.<br id=\"yui_3_17_2_1_1535294310903_1520\" \/><a id=\"yui_3_17_2_1_1535294310903_1521\" href=\"https:\/\/wiki.selfhtml.org\/wiki\/HTML\/Kopfdaten\/meta#Viewport_einstellen\" target=\"_blank\" rel=\"noreferrer noopener\">Viewport<\/a> ist eine Einstellung, die die Anzeige auf Mobilger\u00e4ten optimieren kann.<br id=\"yui_3_17_2_1_1535294310903_1522\" \/>Der Titel erscheint zB oben im Browsertab.<br id=\"yui_3_17_2_1_1535294310903_1523\" \/>Im Body steht der eigentliche Inhalt.<br id=\"yui_3_17_2_1_1535294310903_1524\" \/><br id=\"yui_3_17_2_1_1535294310903_1525\" \/><br id=\"yui_3_17_2_1_1535294310903_1526\" \/>Zum Schluss wird das Dokument geschlossen.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5 id=\"yui_3_17_2_1_1535294310903_1530\"><a id=\"yui_3_17_2_1_1535294310903_1531\" href=\"https:\/\/wiki.selfhtml.org\/wiki\/CSS\/Tutorials\/Einstieg\/Stylesheets_einbinden\" target=\"_blank\" rel=\"noreferrer noopener\"><b id=\"yui_3_17_2_1_1535294310903_1532\">Eine css-Datei<\/b><\/a><\/h5>\n<p id=\"yui_3_17_2_1_1535294310903_1533\">Eine css-Datei beinhaltet alle Anweisungen, wie bestimmte Elemente zu formatieren sind. Man bindet die Datei im head der zugeh\u00f6rigen html-Dateien ein:<\/p>\n<pre id=\"yui_3_17_2_1_1535294310903_1535\">&lt;link rel=\"stylesheet\" href=\"stylesheet.css\"&gt; <br id=\"yui_3_17_2_1_1535294310903_1536\" \/><br id=\"yui_3_17_2_1_1535294310903_1537\" \/><\/pre>\n<p id=\"yui_3_17_2_1_1535294310903_1539\">Dabei bedeutet das rel-Attribut, dass hier ein Sytlesheet-Link eingebunden wird. Das href-Attribut muss den Pfad zur css-Datei beinhalten. Die css-Datei selber hat anders als die html-Datei keinen einleitenden Doctype oder einen head, sie fasst einfach Bl\u00f6cke (sogenannte Regels\u00e4tze) zusammen.<\/p>\n<p id=\"yui_3_17_2_1_1535294310903_1540\">Anweisungen k\u00f6nnen dabei das Format @&#8230; &#8222;..&#8220;; haben, zum Beispiel @charset &#8222;ISO-8859-1&#8220;; (Man beachte das Semikon, das ist wichtig!) \u00dcblicherweise ist es aber eher so, dass der Name des zu formatierenden Elements genannt wird und dann in geschweiften Klammern die gew\u00fcnschten Eigenschaften angegeben werden, z.B.<\/p>\n<pre id=\"yui_3_17_2_1_1535294310903_1542\"><a id=\"yui_3_17_2_1_1535294310903_1543\" href=\"https:\/\/wiki.selfhtml.org\/wiki\/CSS\/Tutorials\/Einstieg\/Syntax\" target=\"_blank\" rel=\"noreferrer noopener\">h1 {   color: red; }<\/a><\/pre>\n<div id=\"yui_3_17_2_1_1535294310903_1544\">Es k\u00f6nnen vorne mehrere Elementnamen stehen (auch selbst definierte) und es k\u00f6nnen auch viele verschiedene Eigenschaften in den geschweiften Klammern stehen.<\/div>\n<div id=\"yui_3_17_2_1_1535294310903_1546\"><\/div>\n<div id=\"yui_3_17_2_1_1535294310903_1548\">\n<h5 id=\"yui_3_17_2_1_1535294310903_1549\"><b id=\"yui_3_17_2_1_1535294310903_1550\">Eine php-Datei<\/b><\/h5>\n<div id=\"yui_3_17_2_1_1535294310903_1551\"><\/div>\n<div id=\"yui_3_17_2_1_1535294310903_1553\">Php besteht aus verschiedenen Einzeltzeilen. Die Dateien beginnen mit\u00a0&lt;?php , danach wird direkt &#8222;losgelegt&#8220;.<\/div>\n<div id=\"yui_3_17_2_1_1535294310903_1555\">Oft ist es so, dass man in einer Datei eine bestimmte Funktion definiert und beschreibt, die dann von anderen Programmteilen (also Dateien) aufgerufen werden.<\/div>\n<div id=\"yui_3_17_2_1_1535294310903_1557\"><\/div>\n<div id=\"yui_3_17_2_1_1535294310903_1559\">Die Synatx von php legt fest, dass $name eine Variable darstellt. Befehle enden immer mit einem Semikolon. Es gibt feste Klassen von Funktionen, die manchmal auch \u00fcber externe Bibliotheken eingebunden werden, man muss also viele Funktionen gar nicht mehr selber schreiben.<\/div>\n<div id=\"yui_3_17_2_1_1535294310903_1562\"><\/div>\n<p id=\"yui_3_17_2_1_1535294310903_1564\">Php-Dateien haben kein festgesetzten End-Befehl, aber man kann php und html mischen. (Das ist f\u00fcr Anf\u00e4nger ok, aber nicht so ganz sauber.) Wenn man mischt und mit html anf\u00e4ngt, dann beginnt man den php Block mit <b id=\"yui_3_17_2_1_1535294310903_1565\">&lt;?php <\/b>und beendet ihn mit<b id=\"yui_3_17_2_1_1535294310903_1566\"> ?&gt; <\/b>. M\u00f6chte man im php-code html aufrufen (weil Zum Beispiel eine html-Tabelle aufgebaut werden soll), nutzt man den php-Befehl<\/p>\n<pre id=\"yui_3_17_2_1_1535294310903_1567\"> echo \"html-code\";<\/pre>\n<p>zum Einf\u00fcgen.<\/p>\n<div id=\"yui_3_17_2_1_1535294310903_1569\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Die meisten Dateien, die &#8222;programme&#8220; oder &#8222;Webseiten&#8220; darstellen, sind nichts anderes als Textdateien. Sie k\u00f6nnen mit jedem beliebigen Texteditor bearbeitet werden. Damit Browser und andere verarbeitende Software erkennt, um was f\u00fcr eine Art von Datei es sich handelt, nutzt man zum einen die Dateiendung, viel wichtiger aber ein standardisiertes Grundger\u00fcst, an dem alle wichtigen Daten [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[11,3],"tags":[59,58],"class_list":["post-18","post","type-post","status-publish","format-standard","hentry","category-html","category-informatik","tag-grundgerueste","tag-html"],"_links":{"self":[{"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/posts\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":4,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":249,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/posts\/18\/revisions\/249"}],"wp:attachment":[{"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}