Teil 2 - Meine eigene Webseite: CSS Farben und HTML-Editoren
Aufbauend auf dem Artikel „Wie erstelle ich eine HTML Seite“, den ich als Gastautor für Clanpage.net geschrieben habe, folgt hier der Versprochene Artikel zum Thema Farbgebung und Menüaufbau. Doch zuerst möchte ich ein paar Worte über HTML-Editoren verlieren. Ganz am Anfang des ersten Artikels habe ich geschrieben, dass wir erst einmal keinen HTML-Editor verwenden möchten, da man sich erst einmal an diesen Editor gewöhnen muss. Ich denke es ist an der Zeit damit zu beginnen. Es gibt eine ganze Menge kostenloser und kostenpflichtiger HTML-Editoren. Ich möchte euch kurz drei Editoren vorstellen. Beginnen wir mit Dreamweaver aus dem Hause Adobe. Das Programm ist das Non plus ultra unter den HTML Editoren. Eine Version kostet allerdings auch mindestens 400 Euro wenn man nicht Schüler,Student oder Lehrer ist. Das Programm bietet zwar viele tolle Funktionen, mit denen man wirklich Zeit sparen kann, aber für den Hobbygebrauch ist es viel zu teuer. Ganz anders sieht das bei meinen zwei kostenlosen Kandidaten aus. Die beiden heißen notepad++ und Phase 5. Beide haben den Vorteil, dass sie euch die Arbeit erleichtern, weil HTML-Syntax farbig markiert wird. Der normale Editor von Windows schmuggelt gerne einmal Sonderzeichen mit in den Quellcode. Das passiert hier nicht. Für welchen der beiden HTML-Editoren ihr euch letztendlich entscheidet ist eigentlich nur Geschmackssache. Sie unterscheiden sich sowohl in Sachen Performance als auch in der Bedienbarkeit nur minimal. Kommen wir nun wieder zu unserer Webseite die wir ab jetzt bitte mit einem HTML-Editor bearbeiten. Womit wir beim Thema CSS (Cascading Style Sheets) wären. Bei Stylesheets handelt es sich um Ergänzungen zu HTML. Genauer gesagt ermöglichen sie das Format einzelner HTML-Elemente zu verändern. Was heißt das genau? Mit Stylesheets könnt ihr Schriftgröße, art und Farbe, Hintergrundbilder oder die Ausrichtung des Textes festlegen. Vereinfacht kann man sagen, dass sich im Stylesheet das Design einer Webseite befindet.
Ein weiterer Vorteil ist, dass du das Stylesheet in eine extra Datei auslagern kannst und in viele Seiten deiner Webpage gleichzeitig einbinden kannst. Die meisten Webseiten haben ja Unterseiten die gleich oder zumindest ähnlich aufgebaut sind.
Wird auf ein zentrales Design zurückgegriffen, ist die HTML Datei wesentlich kleiner und man spart Zeit beim erstellen und Performance beim Aufrufen der Webseite. Zusätzlicher Vorteil, wir können unendlich viele HTML Dateien die mit unserem Stylesheet arbeiten gleichzeitig ändern, in dem wir im Stylesheet z.B. die Breite einer Tabelle verdoppeln.
Gut. Ich denke wir wissen jetzt was Cascading Style Sheets sind, aber wie benutzen wir sie? Als erstes rufen wir wieder unsere HTML Datei auf.
Vorneweg. Aus den oben beschriebenen Gründen sollten Stylesheets immer ausgelagert werden (also in einer extra Datei abgespeichert werden) das werden wir auch machen. Aber damit es einfacher ist, speichern wir das ganze erst einmal in unserer HTML Datei und exportieren es später, wenn wir fertig sind.
Fangen wir mit der Navigation an. Ich bevorzuge hier ein Menü auf der Rechten Seite. Warum rechts? Na weil die wenigsten Webseiten rechts ihr Menü haben. Wir könnten das Menü natürlich auch oben oder links platzieren, aber dazu evt. ein anderes mal mehr. Das Menü selbst ist schon da. Es ist die <ul> Liste die wir erstellt haben. Wir müssen es nur noch bearbeiten.
Als aller erstes fügen wir das hier in den Kopfbereich unserer Webseite ein:
<title>Mein erstes HTML Projekt</title>
<style type="text/css">
ul.nav {
position: absolute;
left: 45em;
top: 2em;
width: 10em }
</style>
</head>
Mit Style type signalisieren wir dem Browser um was es sich handelt (in diesem Fall CSS).
Das ganze setzt sich aus 3 Teilen zusammen.
Als allererstes ein Selector (hier ul.nav) über den wir dem Browser mitteilen welches Element wir überhaupt verändern möchten.
Es folgt die Eigenschaft. (z.B. die Position oder der Abstand zum Linkenrand)
Und zu letzt geben wir einen Wert an.
Unsere Navigation wird nav genannt. Das ul steht dafür das wir einen ul-Tag benutzen. Left beschreibt die Entfernung zum Linken Seitenrand und top die nach oben. Width beschreibt die Breite unserer Navigation. Der Name (nav) für die Navigation ist nötig damit nicht alles was einen ul-Tag hat direkt zur Navigation wird. Damit der Browser jetzt auch erfahren kann was unsere Navigation ist, müssen wir die HTML Datei etwas anpassen. Unter <!—Unsere Navigation --> ist ein
<ul> daraus müssen wir <ul class="nav"> machen. Speichert ab und seht euch das ganze im Browser einmal an. Es sieht zwar immer noch nicht schön aus, aber wir haben jetzt ein Menü auf der Rechten Seite. Kommen wir nun zu den Farben.
Bestimmen wir erstmal die Schriftfarbe und verändern den Hintergrund.
Dafür fügen wir den folgenden Abschnitt zwischen <style> und </style> ein.
body {
color: #000000;
background-color: #0099FF }
color ist dabei die Schriftfarbe und background-color die Hintergrundfarbe. Wir haben für den Hintergrund ein helles Blau gewählt und für die Schrift Schwarz.
