<html>
<p><b>Heute befassen wir uns mit neuen HTML5-Elementen: header, nav, section, article, aside und footer. Wofür sind diese gut und warum sind sie so wichtig sind für eine moderne Webseite? -Diese und noch mehr Fragen werden heute behandelt.</b></p>
<p><img src="https://steemitimages.com/DQmbkU9AgPNRy5pMW7mto4mVoZa67u9j5U3mVdjCq1hRtKY/html-elemente-header-nav-footer.jpg"/></p>
<p><b>Was wir bisher gelernt haben:</b> Wir kennen und verstehen das <a href="https://steemit.com/deutsch/@domii.net/der-weg-zur-eigenen-webseite-guide-alles-von-beginn-an">HTML-Grundgerüst</a>. Wie wir <a href="https://steemit.com/deutsch/@domii.net/html-tags-texte-strukturieren-u-formatieren-der-weg-zur-eigenen-webseite-guide-2">Texte in einer Webseite formatieren und strukturieren</a> ist mittlerweile auch kein Problem mehr. Seit dem letzten Post gestern können wir auch <a href="https://steemit.com/deutsch/@domii.net/html-div-und-span-elemente-der-weg-zur-eigenen-webseite-guide-3">DIV- und SPAN-Elemente in HTML</a> einsetzen.</p>
<p>Heute zeige ich euch weitere HTML-TAGs die ähnlich wie <a href="https://steemit.com/deutsch/@domii.net/html-div-und-span-elemente-der-weg-zur-eigenen-webseite-guide-3">DIV-Elemente</a> arbeiten. Diese Elemente umhüllen andere Elemente (beispielsweise Texte oder Bilder).</p>
<h2>Los gehts!</h2>
<p><img src="https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg" /></p>
<code>START</code>
<h2>Nützliche Hilfe zum Einteilen der Webseite</h2>
<p>Die folgenden TAG's gibt es erst seit HTML5. Also stark veraltete Browser unterstützen diese noch nicht. Da dies jedoch die Zukunft ist und wir moderne Webseiten gestalten wollen gehe ich näher auf diese ein.</p>
<p>Wie anfangs schon erwähnt umhüllen diese TAGs nur bestehende Elemente wie Texte oder Grafiken. Sie erleichtern uns die Arbeit aber wesentlich.</p>
<p><a href="https://steemitimages.com/DQmRWoxFjYHkN3X3zJMK5YVB8NNCvSnGpbWLcdokecAiTP5/html5-tags.jpg" target="_blank"><img src="https://steemitimages.com/DQmRWoxFjYHkN3X3zJMK5YVB8NNCvSnGpbWLcdokecAiTP5/html5-tags.jpg"/></a></p>
<p><i>Um die Bilder zu vergrößern und die volle Auflösung zu sehen, einfach draufklicken.</i><br></p>
<p><a href="https://steemitimages.com/DQmY2xAvBmA5d4WRb1UoVERaQPkhVK5Rmtu7iiiRJT7FeR3/html-elemente-browser.jpg"><img src="https://steemitimages.com/DQmY2xAvBmA5d4WRb1UoVERaQPkhVK5Rmtu7iiiRJT7FeR3/html-elemente-browser.jpg"/></a></p>
<p><img src="https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg" /></p>
<h2>Bereiche über HTML5 besser einteilen</h2>
<p>Wie du an den beiden oberen Grafiken erkennen kannst sieht man von den HTML-Elemente <i>header, nav, section, article, aside</i> und <i>footer</i> nichts.</p>
<p>Sie sind sozusagen nur "Hilfselemente" für das Layout. Im nächsten Post geht dann um CSS und dort können wir diese Elemente sehr gut gebrauchen.</p>
<hr>
<code>Bereich für Kopf</code>
<h3>header-TAG</h3>
<p><b>(aber nicht verwechseln mit < head >-Bereich ganz am Anfang des HTML-Dokuments)</b></p>
<p>Dieser Bereich sollte immer ganz oben sein. Hier kann ein Logo oder der Name deiner Webseite hinkommen. Viele Webseiten binden schon hier Links zu ihren <i>Social-Media-Accounts</i> ein.</p>
<hr>
<code>Bereich für Navigation (=Steuerung)</code>
<h3>nav-TAG</h3>
<p>Der Name sagt schon alles. Der Grundgedanke für eine Navigation ist einfach: Man schreibt eine ungeordnete Liste (also <b>ul-TAG</b>) und füllt diese mit Listenelementen (<b>li-TAG</b>).</p>
<p>Jedes einzelne Listenelement bekommt noch einen LINK. (z.B.: der Menüpunkt (Listenpunkt) "über mich" soll zur Datei <i>ueber-mich.html</i> gehen <i>und so weiter </i>)</p>
<p>Im nächsten Schritt "umhüllen" wir diese Liste mit dem <b>nav-TAG</b>. Das "styling" zur Navigation kommt in einem weiteren Punkt, da dies wiederum ein sehr umfangreiches Thema ist.</p>
<p><a href="https://steemitimages.com/DQmeKTEA1N3GKcCY3ULd4iAsFStSbGVmy6dvrZNNHRPoh6g/nav-bar.jpg"><img src="https://steemitimages.com/DQmeKTEA1N3GKcCY3ULd4iAsFStSbGVmy6dvrZNNHRPoh6g/nav-bar.jpg"/></a></p>
<sup>Dies ist ein Beispiel, wie man die Navigation später mit CSS stylen können.</sup>
<hr>
<code>Gruppiert Elemente</code>
<h3>section-TAG</h3>
<p>Wir können damit einige Elemente gruppieren. Ich beispielsweise habe alle Artikel und den <i>aside-TAG</i> in diesem <i>section-TAG</i> zusammengefasst. Dies hat den Vorteil, dass wir später alle Inhalte in diesem TAG dieselben Eigenschaften geben können.</p>
<p>Mit CSS können wir dann die Hintergrundfarbe von allen Elementen in diesem TAG einheitlich festlegen. -Dies gilt auch für die Schrift (Größe, Schriftart, ...).</p>
<hr>
<code>Bereich für Inhalt</code>
<h3>article-TAG</h3>
<p>Den article-TAG nutzt man wie der Name schon sagt für <i>Artikel</i>. Im oberen Beispiel habe ich zwei Artikel auf einer Seite geschrieben, so ähnlich wie eine Blog-Übersicht.</p>
<p>Wenn sich die Seite jedoch nur um einen Artikel/ein Thema dreht, dann ist der article-TAG nicht zwingend notwendig. Zur besseren Aufgliederung der Inhalte würde ich ihn trotzdem verwenden (oder ein DIV-Feld).</p>
<hr>
<p><a href="https://steemitimages.com/DQmcxjHXUvm4QeeVBvTuJpGdhbLJoxQ2CUGm34kr2BBMsrf/artikel-seitenleiste.jpg"><img src="https://steemitimages.com/DQmcxjHXUvm4QeeVBvTuJpGdhbLJoxQ2CUGm34kr2BBMsrf/artikel-seitenleiste.jpg"/></a></p>
<sup>Ein Beispiel für den article-TAG und aside-TAG.</sup>
<hr>
<code>Bereich für Zusatzinformationen zum Inhalt</code>
<h3>aside-TAG</h3>
<p>Übersetzt bedeutet <i>aside</i> "beiseite". Damit definieren wir eine Seitenleiste, die etwas schmäler neben dem wirklichen Inhalt zu sehen ist.</p>
<p>Hier können wir Zusatzinformationen hinschreiben, die vielleicht auf jeder Unterseite unserer Webseite auch zu sehen sein sollen. Beispielsweise Neuigkeiten oder Links zu weiteren Seiten.</p>
<p>Der Browser liest die HTML-Datei wie wir Menschen von oben nach unten, deswegen ist unsere Seitenleiste noch unter und nicht neben dem Inhalt zu sehen. Damit dieser Bereich neben unseren Inhalt steht benötigen wir noch eine <i>style-Datei</i>.</p>
<hr>
<code>Bereich für Fuß</code>
<h3>footer-TAG</h3>
<p>Dies ist der unterste Bereich der Webseite. <b>Ähnlich wie die Fußzeile</b> einer <i>Word-Datei</i>.</p>
<p>Wenn wir das Design selbst erstellt haben können wir hier ein © festlegen. Beispielsweise<br> <b>© by Domii.net</b>.</p>
<p>Natürlich kann man den Footer (Fußbereich) noch umfangreicher gestalten. Im Bild unterhalb hab ein Beispiel von meinem alten Blog:</p>
<p><a href="https://steemitimages.com/DQmarKWNmy4uyhMeZGjr8aUhdBfFP3sAcAEYakiJyM42pbN/footer.jpg"><img src="https://steemitimages.com/DQmarKWNmy4uyhMeZGjr8aUhdBfFP3sAcAEYakiJyM42pbN/footer.jpg"/></a></p>
<p><img src="https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg" /></p>
<h2>Kommentieren, Auskommentieren</h2>
<p><a href="https://steemitimages.com/DQmQGecp7fatohJKDajL6rw7qTQrCWkngomN2Rkqn6EgkHV/kommentare.jpg"><img src="https://steemitimages.com/DQmQGecp7fatohJKDajL6rw7qTQrCWkngomN2Rkqn6EgkHV/kommentare.jpg"/></a></p>
<sup>Ich hoffe, dass dir Kommentare klar sind. Sie sind nicht zwingend notwendig, jedoch können sie zur Verständnishilfe/Gedächtnisstützen zusätzlich verwendet werden.<br><br>Auf der normalen Webseite sieht man die Kommentare natürlich nicht!</sup>
<p><img src="https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg" /></p>
<h4>Im nächsten Teil geht es endlich um CSS. Also wie man diese TAGs und Elemente schöner gestalten kann.</h4>
<p><br>Wenn du nichts verpassen willst folge mir einfach!</p>
<p><img src="https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg" /></p>
<h2>Mehr Wissen!</h2>
<p>Ich habe schon einige Artikel über das Internet geschrieben. Vielleicht ist etwas interessantes für dich dabei:</p>
<ul>
<li><a href="https://steemit.com/deutsch/@domii.net/html-div-und-span-elemente-der-weg-zur-eigenen-webseite-guide-3">HTML: DIV und SPAN-Elemente</a> - Internet-Basics #8</li>
<li><a href="https://steemit.com/deutsch/@domii.net/html-tags-texte-strukturieren-u-formatieren-der-weg-zur-eigenen-webseite-guide-2">HTML-TAG: Texte strukturieren und formatieren.</a> - Internet-Basics #7</li>
<li><a href="https://steemit.com/deutsch/@domii.net/der-weg-zur-eigenen-webseite-guide-alles-von-beginn-an">Der Weg zur eigenen Webseite! - Guide. Alles von Beginn an.</a> - Internet-Basics #6</li>
<li><a href="https://steemit.com/deutsch/@domii.net/warum-gibt-es-domains-internet-basics-5">Warum gibt es Domains?</a> - Internet-Basics #5</li>
</ul>
<p><br></p>
<p><img src="https://steemitimages.com/DQmeCckejeGavvf2XqS6AHAfhmRmPVuaEivscesyxHQiEgo/signatur.jpg" width="1600" height="795"/></p>
<sup><i>Kurze Schlussworte:</i> Ich würde mich riesig über<b> Feedback in einen Kommentar</b> freuen.<br>Im nächsten Teil der Serie ist es endlich soweit. Wir beschäftigen uns endlich mit CSS. Was das ist und wie wir unsere erster Webseite damit schöner gestalten können.</sup><p><b>DANKE!</b>
</html>
hiveblocks