Sie sind hier: Startseite -> HTML-Beispielseite -> Phase II: Inhalt

HTML-Inhalt: Gestalten mit CSS

HTML-Beispielseite Phase II: der Inhalt

In der Phase I dieses Projektes habe ich den Aufbau einer typischen HTML-Seite vorgestellt. Zuerst wurde das HTML-Gerüst gebaut, dann wurde die Seite richtig suchmaschinenoptimiert und zuletzt wurde auch eine CSS-Datei verknüpft, um von anfang an gleich richtig zu formatieren.

Mit diesem Ergebnis wird nun in Phase II der Inhalt beispielhaft gebastelt. Zur Wiederholung nochmals das Ergebnis von Phase I:

Nun noch die CSS-Datei selbst, die unter styles.css im gleichen Verzeichnis gespeichert wird.

In dieser zweiten Phase des Projektes "HTML-Beispielseite" geht es nun darum, das Verständnis für den Inhalt aufzubauen. Das heißt, dass wir Befehle, wie sie im Webdesign-Lexikon genauer vorgestellt wurden oder wie man sie anderswo schon gesehen hat, praktisch anwenden und außerdem werden punktuell Fakten für die Suchmaschinenoptimierung besprochen.

Besonders wichtig ist die Kombination aus HTML-Befehlen und der Gestaltungsmöglichkeiten von CSS. Diese Kombination stellt im modernen Webdesign den Schwerpunkt dar und liefert viele Möglichkeiten, dennoch werden Sie oft veraltet programmierte Webseiten finden.

Was in der zweiten Phase nicht besprochen wird, sind wesentliche Elemente wie Navigationen, räumlicher Aufbau einer Seite oder dergleichen mehr. Das folgt erst später. Zuerst muss das Grundwissen aufgebaut und erarbeitet werden. Das bedeutet, dass auf Basis des vorangestellten Gerüsts, das unsere erste Demoseite aus Phase I darstellt, der Bereich des body-Tag, in dem unser Entwurfssatz zu finden ist, überarbeitet wird.

Mal werden wir eine Tabelle bauen, mal mit Überschriften arbeiten, mal Absätze formatieren oder zwei Bereiche nebeneinander aufbauen.

Die vorgestellten Codes werden wie in Phase I Punkt für Punkt beschrieben und erläutert und können in das vorgestellte Gerüst hineinkopiert werden. Gut wäre es daher, die HTML-Seite als Vorlage abzuspeichern und als Kopie für die neuen Inhaltsvarianten zu nützen. So muss man nicht ständig das HTML-Gerüst nachbauen. Gleiches gilt für die CSS-Datei, die sich ebenfalls erweitern wird, wobei hier aber die verschiedenen Vorgaben, wenn sie sich nicht überschneiden, in der Datei belassen werden können.

Übersicht der Unterseiten

Überschrift + Text

Informationen über das HTML-Konzept von Überschrift und Text, SEO-Tipps und CSS-Formatierung.

Textformatierung

Informationen über die Textformatierung mit HTML und Möglichkeiten, CSS einzusetzen.

Aufzählungslisten

Informationen über die HTML-Aufzählungslisten in der HTML-Beispielseite und die Formatierung durch CSS.

Bild einbauen

Informationen über das Einbauen eines Bildes in die HTML-Beispielseite und die Formatierung mit CSS.

Startseite

Informationen über die Startseite mit echtem Text für das HTML-Beispielprojekt, die Ausgangspunkt für weitere Seiten ist.

Produktsuche

Was brauchen Sie?

Ein Vorteil von Amazon besteht darin, dass es Millionen Produkte gibt, die man auch sehr gut im Preis und Angebot überprüfen kann. Ob man nun Sport betreiben möchte oder ein Kochbuch sucht - man wird fast immer fündig. Mit der nachstehenden Suche können Sie sehr schnell das aktuelle Angebot durchsuchen. Einfach den gewünschten Suchbegriff eingeben und auf den Suche-Button klicken.


Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Themenliste:

Zurück zum Hauptthema

Übersicht HTML-Beispielseite