Sie sind hier: Startseite -> HTML-Beispielseite -> Phase I: Gerüst -> HTML-Gerüst-SEO-CSS

HTML-Gerüst: das Basisgerüst mit SEO + CSS

Das HTML-Gerüst mit einer CSS-Datei

Bisher haben wir in dieser ersten Phase ein simples HTML-Gerüst für unsere erste Seite erstellt und dieses im zweiten Schritt gleich suchmaschinenoptimiert, denn wir wollen später ja in den Suchmaschinen erfolgreich auftreten können.

Die erste Phase und damit das Grundwissen für die Erstellung einer HTML-Seite - egal ob Startseite oder beliebige Unterseite - finalisiert sich damit, dass eine CSS-Datei eingebaut wird. Diese wird per Link in den Kopfteil geschrieben und damit ist sie fixer Bestandteil der gesamten Seite.

Das ist der erste Entwurf

Das Ergebnis sieht so aus: Beispielseite

Das HTML-Gerüst für unsere erste Seite blieb ident mit Ausnahme einer Zeile, nämlich dem Linkaufruf für die CSS-Datei. Diese wird in den Kopfteil geschrieben und damit wird die CSS-Datei, die wir als styles.css abgespeichert haben, automatisch aufgerufen, sobald jemand unsere Seite später im Internet lädt.

CSS habe ich in einem eigenen Bereich (siehe Navigation links) vorgestellt und dient der Formatierung der Webseite. CSS hat viele alte HTML-Befehle entsorgt und eine Modernisierung im Webdesign möglich gemacht. Beispiel: früher wurde die Schriftfarbe mit dem font-Tag festgelegt, heute wird dies direkt über CSS für alle in Frage kommenden Textbereiche erledigt. Man spart damit viel Zeit.

Im konkreten Fall haben wir nur den body-Tag mit CSS-Befehlen ausgestattet. Die Folge ist, dass der Inhalt in Form unserer berühmt-berüchtigten Zeile nun in der Schriftart Verdana, soweit diese vorliegt, gezeigt wird. Mac-User werden vermutlich den Satz in Helvetica angezeigt bekommen, die Standardschrift Times, die nicht wirklich schön ist, ist damit vom Tisch und würde der Inhalt 50 DIN A4-Seiten lang sein, wäre es immer noch so.

Beim font-Tag wäre das nicht der Fall. Dann müsste nach jedem Absatz die Definition wiederholt werden und deshalb hat man sich davon abgewendet, um die Formatierung einfacher zu gestalten. Es gibt viele HTML-Kurse, die sich rein mit HTML beschäftigen. Dieses Projekt hier stellt den Versuch dar, HTML und CSS in Kombination zur Verfügung zu stellen, um die Zusammenhänge verständlich zu machen und gleichzeitig Webdesign richtig zu demonstrieren. Andernfalls prägt man sich HTML-Lösungen ein, die man später wieder aus dem Gedächtnis streichen muss.

Die Phase I ist damit abgeschlossen, die erste Seite steht und diese ist suchmaschinenoptimiert und hat eine eigene CSS-Datei. Was man alles damit machen kann, ist nicht so wichtig. Der Inhalt wird uns in Phase II beschäftigen und die hier gespeicherte CSS-Datei wird als Grundlage verwendet.

Ebenfalls interessant:

HTML-Gerüst

Informationen über das HTML-Gerüst der HTML-Beispielseite mit Kopfteil und Inhaltsbereich.

HTML-Gerüst-SEO

Informationen über das HTML-Gerüst der HTML-Beispielseite, das durch Doctype und Suchmaschinenoptimierung (SEO) erweitert wurde.

[aktuelle Seite]

HTML-Gerüst-SEO-CSS

Informationen über das HTML-Gerüst der HTML-Beispielseite, das nun auch mit einer CSS-Datei ausgestattet wird.

Zurück zum Hauptthema

Übersicht Phase I: Gerüst

Startseite HTML-Beispielseite