Grundlagen der Webprogrammierung: Meine erste Website

Das HTML aufbereiten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Einzelne Elemente bekommen spezielle Bezeichnungen zugewiesen, damit sie dann mit CSS angesprochen werden können.
04:22

Transkript

So, ich habe jetzt noch mal etwas weiter vorgearbeitet und zwar geht es darum, dass ich hier jetzt sogenannte Container um meine Inhalte gelegt habe. Container sind nochmal eine Möglichkeit, um zusätzliche Strukturierungsmittel zum Einsatz zu bringen mit deren Hilfe ich dann besser formatieren kann. Einer dieser Container hier zum Beispiel ist der "Header-Container" und dann kommen hier nochmal drei "Article-Container". Und es sind wieder semantisch orientierte Begrifflichkeiten, die mit HTML5 hier zum Einsatz kommen Und diese Begrifflichkeiten sorgen eben dafür, dass auch schon inhaltliche Tipps quasi mitgegeben werden, worum es sich jetzt innerhalb des Containers handelt. Der "Header-Container" hier zum Beispiel umfasst meinen zukünftigen Kopf-Bereich meiner Indexseite. Er beinhaltet die Überschrift der ersten Ebene und das Zitat. Und die "Article"-Elemente wiederum beschreiben drei einzelne Beiträge beziehungsweise die "Teaser"-Texte dann für diese Beiträge. Zu guter Letzt möchte ich jetzt noch ein weiteres Element haben, das mir aber hauptsächlich dann beim Positionieren dieses gesamten Inhaltsbereichs helfen soll. Und dazu verwende ich einen klassischen Container. Ein klassischer Container hat die Bezeichnung "div". Damit ich dann später diesen Container ansprechen kann, werde ich ihn noch mit einer Klasse ausstatten. Und die Klasse hat einen Namen und mithilfe dieses Namens kann ich dann auf diesen Container zugreifen. Ich werde dieses Element "wrapper" nennen, weil er meinen gesamten Text ummanteln soll. Das heißt, ich werde dieses schließende Tag mit "STRG + X" ausschneiden, werde unter den letzten "article" und mit "STRG + V" wieder einfügen. Und ich werde noch dafür sorgen, dass es auf meiner Seite auch einen Fußbereich geben wird. Das heißt, nach dem letzten "article" und vor dem schließenden "div", brauchen wir jetzt noch ein Element, das tatsächlich "footer" heißt. Und der "footer" sagt eben auch schon ganz konkret, dass es sich um den Fußteil handelt und am unteren Ende der Seite dargestellt werden wird. Und innerhalb des "footers" kann ich jetzt zum Beispiel einen Copyright-Hinweis machen. Dazu verwende ich jetzt ein ganz spezielles Zeichen. Nämlich dieses "kaufmännische Und" mit dem "copy" und dem Strichpunkt zum Schluss sorgt dafür, dass dann auf der Webseite dieses Copyright-Zeichen ausgegeben wird. Das heißt, das ist quasi eine schriftliche Umschreibung für dieses spezielle Copyright-Zeichen. Und dann noch "Bergwelt". Das heißt, das Copyright liegt bei Bergwelt selbst. So, ich speichere das ganze jetzt mit "STRG + S". Und wenn ich meine Seite jetzt aufrufe, dann werden Sie feststellen, dass sich optisch nicht so wahnsinnig viel verändert hat. Das ich Ihnen jetzt die neue Seite zeige, das sehen Sie hier daran, dass es dieses Copyright hier unten gibt. Aber diese Container sind jetzt nicht dafür da, dass man hier bei der Strukturierung schon was sieht, sondern diese Container müssen jetzt noch mithilfe von CSS zu ihrer vollen Schönheit, sozusagen, ausgearbeitet und umgearbeitet werden. Wir haben jetzt also mit zusätzlichen Strukturierungshilfen, indem wir Container zum Einsatz gebracht haben, zwar nichts mehr für die tatsächliche Lesbarkeit auf den ersten Blick getan, aber eine gute Grundlage geschaffen, um später mit Hilfe von CSS formatieren zu können. Und auf der anderen Seite haben wir auch noch die Lesbarkeit verbessert für Suchmaschinen und für Lesegeräte, indem wir eben semantische Bezeichnungen, die jetzt in HTML5 zur Verfügung stehen, mitverwendet haben.

Grundlagen der Webprogrammierung: Meine erste Website

Gestalten Sie in wenigen Stunden Ihre erste Website und lassen Sie sich dabei von der Idee über die Auswahl der Werkzeuge bis zur Veröffentlichung Ihrer Web-Präsenz begleiten.

2 Std. 53 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!