{"id":113,"date":"2022-08-03T09:00:00","date_gmt":"2022-08-03T07:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=113"},"modified":"2025-05-26T11:53:00","modified_gmt":"2025-05-26T09:53:00","slug":"html-grundgeruest-2","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2022\/08\/03\/html-grundgeruest-2\/","title":{"rendered":"HTML Grundger\u00fcst 2"},"content":{"rendered":"\n<p>In diesem zweiten Teil des Webdesign Workshops 2022 geht es an den Inhaltsbereich der Webseite. Der body-Bereich wird also mit weiteren Elementen gef\u00fcllt\u2026<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Der body-Bereich:<\/strong><\/p>\n\n\n\n<p>Der n\u00e4chste Bereich ist nun der Hauptbereich der Webseite \u2013 der body-Bereich.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;body&gt;<\/li>\n<\/ul>\n\n\n\n<p>Innerhalb dieses body-Bereichs werden nun entweder \u201ediv id-Bereiche\u201c eingef\u00fcgt oder gleich die neuen semantischen HTML 5 Elemente benutzt.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;div id=\u201cwrapper\u201c&gt; &lt;!\u2013 Anfang vom wrapper-Bereich \u2013&gt;<\/li>\n<\/ul>\n\n\n\n<p>Der Wrapper-Bereich dient hier als Rahmen um alle weiteren Boxen die nachfolgend angelegt werden, um die Webseite in Bereiche einzuteilen. Nat\u00fcrlich wird dieses Element sp\u00e4ter wieder geschlossen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;header&gt; &lt;!\u2013 Anfang vom kopfbereich-Bereich \u2013&gt;<\/li>\n\n\n\n<li>&lt;\/header&gt; &lt;!\u2013 Ende vom kopfbereich-Bereich \u2013&gt;<\/li>\n<\/ul>\n\n\n\n<p>Der \u201eheader\u201c ist bereits ein neues semantisches HTML 5 Element und bildet den Kopfbereich. Nicht verwechseln mit dem Seitenkopf \u201ehead\u201c! Nachdem header kommt der Navigationsbereich. HTML 5 bietet hierf\u00fcr das Element \u201enav\u201c:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;nav&gt; &lt;!\u2013 Anfang vom navibereich \u2013&gt;<\/li>\n\n\n\n<li>&lt;ul&gt;<\/li>\n\n\n\n<li>&lt;li&gt;&lt;a href=\u201cindex.html\u201c&gt;Gesamt\u00fcbersicht&lt;\/a&gt;&lt;\/li&gt;<\/li>\n\n\n\n<li>&lt;li&gt;&lt;a href=\u201cstart.html\u201c&gt;Startseite&lt;\/a&gt;&lt;\/li&gt;<\/li>\n\n\n\n<li>&lt;\/ul&gt;<\/li>\n\n\n\n<li>&lt;\/nav&gt; &lt;!\u2013 Ende vom navibereich \u2013&gt;<\/li>\n<\/ul>\n\n\n\n<p>Innerhalb des nav-Elements dient eine ungeordnete Liste als eigentliche Navigation f\u00fcr die Webseite. Das Konzept der \u00f6ffnenden und schlie\u00dfenden Elemente (Tags genannt) ist hier gut zu erkennen Der Hauptbereich hei\u00dft in HTML 5 jetzt \u201emain\u201c\u2026:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;main&gt; &lt;!\u2013 Anfang vom main-Bereich \u2013&gt;<\/li>\n\n\n\n<li>&lt;\/main&gt; &lt;!\u2013 Ende vom main-Bereich \u2013&gt;<\/li>\n<\/ul>\n\n\n\n<p>Innerhalb dieses Hauptbereiches werden jetzt die Artikel eingebaut. HTML 5 bietet auch f\u00fcr Artikel ein semantisches Element.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;article&gt;<\/li>\n\n\n\n<li>&lt;h1&gt;Artikel\u00fcberschrift&lt;\/h1&gt;<\/li>\n\n\n\n<li>&lt;p&gt;<\/li>\n\n\n\n<li>Text des Artikels\u2026<\/li>\n\n\n\n<li>&lt;\/p&gt;<\/li>\n\n\n\n<li>&lt;\/article&gt;<\/li>\n\n\n\n<li>&lt;br \/&gt;<\/li>\n<\/ul>\n\n\n\n<p>Das article-Element wird also ge\u00f6ffnet. Es folgt eine \u00dcberschrift. Hier \u00fcbrigens eine \u00dcberschrift ersten Grades (h1). Der Artikeltext steht dann in einem p-Element \u2013 einem Absatz. Nach dem letzten Absatz wird der Artikel geschlossen. Das break-Element sorgt nur f\u00fcr etwas Abstand zum nachfolgenden Artikel.<\/p>\n\n\n\n<p>In sp\u00e4teren Artikeln zum Webdesign Workshop werde ich noch auf die Details eingehen die ich hier noch weggelassen habe\u2026<\/p>\n\n\n\n<p>Folgende Elemente werden auch noch erstellt\u2026<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;footer&gt; &lt;!\u2013 Anfang vom footer-Element \u2013&gt;<\/li>\n\n\n\n<li>&lt;\/footer&gt; &lt;!\u2013 Ende vom footer-Element \u2013&gt;<\/li>\n\n\n\n<li>&lt;\/div&gt; &lt;!\u2013 Ende vom wrapper-Bereich \u2013&gt;<\/li>\n<\/ul>\n\n\n\n<p>F\u00fcr sp\u00e4tere Layouts ist auch schon ein Fu\u00dfbereich als Platzhalter reserviert und dann wird auch der Wrapper geschlossen.<\/p>\n\n\n\n<p>Abschlie\u00dfend wird noch das body-Element und das html-Element geschlossen. Das HTML 5 Grundger\u00fcst ist damit schon fertig. Nat\u00fcrlich gibt es noch viele weitere HTML Elemente, doch die betrachten wir erst sp\u00e4ter, wenn es soweit ist. Der HTML 5 Quelltext kann einfach in einen Texteditor eingegeben werden und als html-Datei gespeichert werden. Dazu wird die Datei einfach mit der Endung html gespeichert.<\/p>\n\n\n\n<p>Der hier gezeigte Quelltext eignet sich nicht als Kopiervorlage.<\/p>\n\n\n\n<p>Die Kommentare wurden von WordPress umformatiert.<br>HTML-Kommentare bestehen aus zwei Spiegelstrichen !<\/p>\n\n\n\n<p>Au\u00dferdem werden die Anf\u00fchrungszeichen von WordPress umformatiert.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem zweiten Teil des Webdesign Workshops 2022 geht es an den Inhaltsbereich der Webseite. Der body-Bereich wird also mit weiteren Elementen gef\u00fcllt\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-113","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":2,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/113\/revisions"}],"predecessor-version":[{"id":546,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/113\/revisions\/546"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}