Homepage mit HTML und CSS

Homepage mit HTML, CSS & Co.
Homepage mit HTML und CSS
Ein schneller und zielgerichteter Einstieg zur Erstellung einer Homepage
Erstellungsdatum: November 2010
Autor: Thomas von Glahn
Seite 1
Homepage mit HTML, CSS & Co.
Inhaltsverzeichnis
1.
Vorbereitende Tätigkeiten
1.1
1.2
1.3
1.4
1.5
Verzeichnisstruktur anlegen.................................................................
Dateien vorbereiten ..............................................................................
Das HTML-Grundgerüst .......................................................................
CSS-Datei einbinden............................................................................
Titel eintragen.......................................................................................
Seite
Seite
Seite
Seite
Seite
4
4
4
5
5
2.
Layout
2.1
2.2
2.3
Vorüberlegungen zum Layout .............................................................. Seite
Das Box-Modell .................................................................................... Seite
Layout erstellen .................................................................................... Seite
6
6
8
3.
Homepage mit Inhalten füllen
3.1
3.2
3.3
3.4
3.5
3.6
3.7
3.7
3.8
Überschrift im Kopfbereich...................................................................
Text im Inhaltsbereich ..........................................................................
Text im Infobereich...............................................................................
Randeinstellungen zurücksetzen .........................................................
Randeinstellungen für Texte ................................................................
Schriftarten einstellen...........................................................................
Schriftgrößen einstellen........................................................................
Grafiken/Bilder einfügen.......................................................................
Weiteren Inhalt einfügen ......................................................................
4.
Die Navigation
4.1
4.2
Platz für die Navigationsleiste .............................................................. Seite 24
Menüeinträge ....................................................................................... Seite 24
5.
Farben und Grafik
5.1
5.2
5.3
5.3.1
5.3.2
5.3.3
5.4
5.5
HTML 4 Farbtabelle..............................................................................
Hexadezimale Farbwerte .....................................................................
Farbverläufe für Hintergründe ..............................................................
Vertikaler Farbverlauf ...........................................................................
Horizontaler Farbverlauf.......................................................................
Übergang des Farbverlaufs in Hintergrundfarbe..................................
3D-Effekt für die Navigationsleiste .......................................................
Bilder und Grafiken...............................................................................
Seite 2
Seite
Seite
Seite
Seite
Seite
Seite
Seite
Seite
Seite
Seite
Seite
Seite
Seite
Seite
Seite
Seite
Seite
16
16
16
17
18
18
19
20
23
29
29
30
30
30
30
31
33
Homepage mit HTML, CSS & Co.
Einleitung
Bevor wir loslegen, ein paar Worte als Einführung in das Thema HTML und CSS.
Warum HTML-Seiten "per Hand" erstellen?
Es gibt unzählige Programme auf dem Markt, mit denen im Baukastenprinzip Internetseiten ohne
Kenntnisse von HTML oder CSS erstellt oder besser zusammengeklickt werden können. Einige sind
kostenlos, andere müssen für viel Geld erworben werden. Mit diesen Programmen kann man mit mehr
oder weniger Aufwand eine komplette Homepage erstellen und ins Internet stellen. Dennoch gibt es gute
Gründe dafür, eine Homepage manuell aufzubauen und zu entwickeln, lassen Sie mich einige davon
nennen:
•
•
•
•
•
•
es ist wesentlich einfacher, als Sie wahrscheinlich denken
es wird keine besondere Software benötigt
Sie haben absolute Kontrolle über alle Details
besondere Tricks und Effekte sind evtl. überhaupt nur manuell realisierbar
kein aufgeblähter HTML-Code, der die Dateien unübersichtlich macht
und ganz wichtig: Es macht richtig viel Spaß!
HTML (Hypertext-Markup-Language) ist eine Auszeichnungssprache für die Darstellung von Textinhalten
im Internet. Texte und Bilder werden dabei mit HTML-Strukturelementen, den so genannten Tags,
ausgezeichnet. Es gibt eine Fülle von Tags, z.B. <p> für Textabsätze oder <img> für Grafiken. Jedes
Tag besteht dabei aus einem Anfangs- und einem End-Tag, zwischen diesen beiden wird der jeweilige
Inhalt geschrieben. Die Tags werden in spitzen Klammern notiert (auf der Tastatur links neben der YTaste), wobei das End-Tag jeweils nach der öffnenden Klammer einen Schrägstrich enthält, siehe
Beispiel:
<p>Dies ist ein Textabsatz</p>
In HTML selber gibt es nur sehr eingeschränkte Möglichkeiten zur Formatierung von Inhalten. Für die
formale Ausgestaltung des Inhalts wurde CSS (Cascading Style Sheets) entwickelt. Wie der Name schon
sagt, erstellt man ein so genanntes Style Sheet, welches die zu einer HTML-Datei gehörenden
Formatierungen aufnimmt. Der Vorteil dieser separaten CSS-Style-Sheet-Datei ist, das sie für alle zu
einer Homepage gehörenden HTML-Dateien gilt. Änderungen bei einer Formatierung müssen nur an
einer einzigen Stelle (bzw. in einer einzigen Datei) durchgeführt werden und wirken sich dann auf die
gesamten Homepage aus. Wir werden diese beiden Dateien gleich zu Beginn im Abschnitt 1.2 erstellen.
Programm zum Erstellen unserer Homepage
Wenn Sie keinen HTML-Editor installiert haben, ist das kein Problem. Da HTML-Dateien reine
Textdateien sind, können Sie auch MS-Word, OpenOffice oder ein anderes Textbearbeitungsprogramm
ihrer Wahl benutzen. Sie können sogar den Text-Editor von Windows benutzen.
Sie sollten dann aber auf jeden Fall eine nicht proportionale
Schriftart wie z.B. Courier New einstellen, um die Lesbarkeit zu
verbessern und Text-Einrückungen zu vereinfachen.
Oder Sie laden den HTML-Editor Weaverslave (http://www.weaverslave.ws) aus dem Internet herunter.
Dieses Programm ist auf die Erstellung von HTML-Dateien zugeschnitten und einfach in der
Handhabung.
Die in diesem eBook verwendeten Techniken setzte ich auch auf meinen eigenen Webseiten ein. Sie
sind daher ausgiebig getestet und funktionieren in allen Browsern.
Seite 3
Homepage mit HTML, CSS & Co.
1. Vorbereitende Tätigkeiten
Bevor wir beginnen, müssen wir einige Vorbereitungen für unser Projekt treffen.
1.1 Verzeichnisstruktur anlegen
Zunächst benötigen wir eine Ordnerstruktur für unsere Homepage, wo alle Dateien und
Grafiken abgelegt werden. Diese Ordnerstruktur kann später auf einen Webserver übertragen
werden. Legen Sie folgende Verzeichnisse an:
Der Ordner Meine_Homepage nimmt alle HTML-Dateien unserer Homepage auf, während die
Grafiken und Bilder in den Ordner img kopiert werden. Das Verzeichnis css ist für die CSSDatei bestimmt, welche sämtliche CSS-Formatierungen für unsere Homepage beinhalten wird.
Als nächstes kopieren Sie bitte alle Grafiken aus dem img-Verzeichnis des eBook-Pakets in
das Verzeichnis img.
1.2 Dateien vorbereiten
Für die Homepage benötigen wir zunächst zwei Dateien, eine für den HTML-Code unserer
Startseite und eine für die CSS-Anweisungen. Erstellen Sie die erste Datei im Verzeichnis
Meine_Homepage und nennen Sie sie index.html. Wenn Sie mit Weaverslave arbeiten, öffnen
Sie das Programm und erstellen Sie über "Datei – Neu" eine neue Datei. Wählen Sie die
Vorlage "XHTML 1.0 transitional" aus und speichern Sie die Datei unter dem Namen index.html
im Verzeichnis Meine_Hompage. Diese Datei wird im weiteren Verlauf des eBooks HTML-Datei
genannt.
Die zweite Datei erstellen Sie auf die gleiche Weise im Verzeichnis css und nennen Sie
homepage.css. Löschen Sie anschließend den gesamten voreingetragenen Text, da diese
Datei kein HTML-Gerüst benötigt. Diese Datei bezeichnen wir im Folgenden als CSS-Datei.
Halten Sie beide Dateien geöffnet, da wir in beiden Dateien gleichzeitig arbeiten werden.
1.3 Das HTML-Grundgerüst
Auf das HTML-Grundgerüst soll hier nicht im Detail eingegangen werden, wir benötigen es
jedoch für den Aufbau unserer Homepage. Dieses Gerüst wurde mit Weaverslave automatisch
erstellt. Wenn Sie einen anderen HTML-Editor verwenden, sollte es so ähnlich aussehen. Sie
können den Text auch kopieren und in Word oder OpenOffice einfügen.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Seite 4
Homepage mit HTML, CSS & Co.
2. Layout mit Kopfbereich und 2 Spalten erstellen
2.1 Vorüberlegungen zum Layout
Jetzt können wir beginnen, ein Layout mit einem Kopfbereich und 2 Spalten zu erstellen. Es
wird ein Inhaltsbereich auf der linken Seite und eine Info- oder Menuleiste am rechten Rand
erstellt.
Zuerst müssen wir uns Gedanken über die gesamte Breite der Homepage machen.
Üblicherweise werden diese Angaben in Pixel (px) gemacht. Stellen wir also folgende
Überlegung an:
Die gesamte Breite der Homepage soll 800 Pixel betragen, davon sollen auf den Inhaltsbereich
600 und auf den Infobereich 200 Pixel fallen. Außerdem soll der Inhaltsbereich links einen
kleinen Rand von 5 Pixeln erhalten und der Infobereich rechts auch. Die beiden Spalten sollen
zudem durch einen Abstand von 5 Pixeln voneinander getrennt werden. Das wird ungefähr
folgendermaßen aussehen:
Solche Spaltenlayouts werden mit dem HTML-Tag <div> </div> (Division) gebildet. Das
<div> Tag ist zwar ein HTML-Element, aber ohne entsprechende CSS-Formatierungen nicht
wirklich sinnvoll. Deshalb müssen wir dieser Stelle bereits CSS-Elemente einbringen. Doch
bevor wir damit beginnen, möchte ich gerne eines der wichtigsten Dinge in HTML klären:
Die Art und Weise, wie Elemente angezeigt werden – das Boxmodell.
2.2
Das Boxmodell
Es gibt zwei ganz wichtige Anzeigeformen, mit denen Elemente dargestellt werden können:
block-Elemente und inline-Elemente. Das Verständnis dieser beiden Methoden ist daher
von Bedeutung für die weitere Arbeit. Wenn man das Prinzip dieser beiden Anzeigeformen
einmal verstanden hat, ist der Rest ein Kinderspiel. Beschäftigen wir uns daher zunächst
damit.
Das block-Element
Ein block-Element ist eine Art Kasten mit Inhalt (Text oder Bilder). Es erzeugt im Normalfall
immer einen Absatz, d.h. folgende Elemente werden also darunter dargestellt. Ein blockElement verfügt über verschiedene Randeinstellungen, deren Breite z.B. in Pixel angegeben
werden kann. Ganz außen befindet sich der äußere Abstand, genannt margin, er bestimmt
Seite 6
Homepage mit HTML, CSS & Co.
den Abstand zu anderen block-Elementen. Dann folgt border, das ist ein Rahmen, den
man einstellen kann, wie z.B. einen Rahmen um eine Zelle in MS-Excel. Als nächstes haben
wir den padding-Bereich. padding definiert den inneren Abstand des Textes zum border,
also zum Rahmen. Wenn kein Rahmen eingestellt ist, ist es der Abstand zum margin. Wenn
margin auch nicht eingestellt ist, dann definiert padding gleichzeitig den Textabstand zu
den Seiten des block-Elements. Dann kommen width und height. Mit diesen beiden
Parametern kann die Höhe und die Breite eines Bereich eingestellt werden. Wenn diese
beiden Werte nicht angegeben werden, richtet sich die Größe des block-Elements nach dem
verfügbaren Platz und der Höhe des Inhalts. Die gesamte Größe dieses 'Kastens' resultiert aus
der Addition aller genannten Werte (siehe Abb. Boxmodell) Das erscheint vielleicht am Anfang
etwas kompliziert, aber Sie werden es schnell verinnerlichen. Schauen Sie sich zum
Verständnis des Prinzips auch die folgende Grafik an:
Abb.: Boxmodell
Zu den block-Elementen zählen z.B. <div>, <p>, die Überschriften <h1> bis <h6>, wir
werden diese Tags später noch kennenlernen.
block-Elemente können inline-Elemente oder weitere block-Elemente aufnehmen. Eine
solche "Verschachtelung" von block-Elementen nehmen wir auch bei unserem Layout vor,
wir kommen später noch dazu.
Das inline-Element
inline-Elemente sind Elemente, die im Prinzip innerhalb einer Zeile (Textzeile, daher auch
in line) angezeigt werden, sie brechen auch am Zeilenende automatisch um. Dazu zählen
neben den eigentlichen Textelementen u.a. Grafiken mit dem <img>-Tag. inline-Elemente
verfügen im Gegensatz zu block-Elementen über eingeschränkte Randeinstellungen:
margin wirkt nur links und rechts (margin-left und margin-right), width und
height dagegen gar nicht (wirkt nicht bedeuted, Sie können es zwar angeben, aber es hat
keinerlei Auswirkungen). border und padding hingegen können normal eingesetzt werden.
Betrachten wir mit diesem Wissen noch einmal unser Layout, diesmal mit Browserfenster:
Seite 7
Homepage mit HTML, CSS & Co.
3. Homepage mit Inhalt füllen
3.1 Überschrift im Kopfbereich
Erstellen wir zuerst eine Überschrift im Kopfbereich und einen kleinen Absatz direkt darunter in
der HTML-Datei. Für Überschriften gibt es in HTML 6 spezielle Tags, <h1> bis <h6> (engl.
header 1-6). Die Überschriften unterscheiden sich nur in der Größe der Schrift, wobei <h1> die
größte und <h6> die kleinste ist. Wir nehmen das <h1>-Tag für die größte Überschrift.
Anschließend benutzen wir das Absatz-Tag <p> (engl. paragraph) und fügen ein wenig Text
hinzu. Natürlich können Sie an dieser Stelle auch schon gerne ihren eigenen Text einfügen.
<body>
<div id="wrapper">
<div id="header">
<h1>Meine neue Homepage</h1>
<p>Viel Spaß beim Surfen auf meiner frisch erstellten
Website</p>
</div>
<div id="info"> </div>
<div id="inhalt"> </div>
</div>
</body>
3.2 Text im Inhaltsbereich
Fügen wir als nächstes eine Überschrift und etwas Text im Inhaltsbereich ein. Ich habe an
dieser Stelle den Fülltext Lorem Ipsum verwendet (http://www.loremipsum.de), den man
benutzen kann, wenn man noch keinen Text hat. Schreiben Sie an dieser Stelle ihren Text oder
kopieren Sie sich diese Textpassage:
<div id="inhalt">
<h2>Meine Reiseerlebnisse</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy
eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.
</p>
</div>
3.3 Text im Infobereich
Und nun noch etwas Text im Infobereich:
<div id="info">
<h3>Italien</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
Seite 16
Homepage mit HTML, CSS & Co.
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
Speichern Sie beide Dateien und schauen Sie sich das Ergebnis im Browser an.
Das Ergebnis ist etwas ernüchternd, wie Sie sehen. Der Infobereich ragt über den wrapper-Div
nach unten hinaus und die Textformatierung lässt auch noch zu Wünschen übrig.
3.4 Randeinstellungen zurücksetzen
Beschäftigen wir uns kurz mit Randeinstellungen und Abständen. Jeder Browser hat seine
eigenen vordefinierten Standardeinstellungen bezüglich Rändern und Abständen zwischen
Elementen. Diese Einstellungen können ein Konzept manchmal ganz schön durcheinander
bringen. Also machen wir Tabula Rasa mit den Standardeinstellungen: Wir setzen alle
standardmäßigen Vorgaben auf 0 Pixel zurück (man nennt dies allgemein hin auch „BrowserReset“). Natürlich müssen wir uns im Anschluss um alle Abstände und Ränder selber
kümmern, aber das ist halb so schlimm.
Fügen Sie in der CSS-Datei ganz oben eine neue Zeile ein und notieren Sie folgenden Eintrag
als erste Zeile:
* { margin: 0px; padding: 0px; }
* {
margin: 0px;
padding: 0px;
}
Wir haben gelernt, dass in CSS HTML-Elemente
notiert werden (man nennt diese in CSS auch
Selektoren) und dann in geschweiften Klammern
Formatierungs-Attribute erstellt.
Der Wildcard-Selektor * wählt alle
existierenden HTML-Elemente aus und wendet die
Attribute darauf an, d.h. für alle in HTML zur
Verfügung stehenden Tags werden die marginund padding-Einstellungen auf 0px gesetzt
Speichern Sie die Datei und aktualisieren Sie den Browser. Wie durch ein Wunder sind
plötzlich alle Abstände gleich, auch die beiden Inhalts- und Infobereich beginnen auf einer
Seite 17
Homepage mit HTML, CSS & Co.
5. Farben und Grafiken
5.1
HTML 4 Farbtabelle
Für die Einstellung von Farben gibt es verschiedene Möglichkeiten. Zum Einen können Sie
benannte Farben aus einer vordefinierten Farbtabelle, den so genannten HTML 4.01-Farben,
verwenden. Diese Tabelle enthält die folgenden 16 Farben:
Farbname
black
navy
blue
green
teal
lime
aqua
maroon
purple
olive
gray
silver
red
fuchsia
yellow
white
Farbbeispiel
Diese Farben können Sie direkt verwenden, z.B. für eine Hintergrundfarbe:
background-color: blue;
Oder für eine Schriftfarbe:
color: red;
5.2
Hexadezimale Farbwerte
Wesentlich flexibler bei der Farbgestaltung ist die Darstellung mit Hilfe von hexadezimalen
Farbwerten. Sie haben bereits solche Farbdefinitionen weiter oben eingesetzt, hier einige
kurze Erläuterungen dazu:
Der Farbwert setzt sich aus drei hexadezimalen Zahlen zusammen, jeweils eine für die drei
Grundfarben rot, grün und blau. Mögliche Werte sind dabei die Zahlen von 0-9 sowie die
Buchstaben A-F. Vorangestellt wird immer ein #-Zeichen: #RRGGBB.
Mit dieser Kombination können Sie nahezu 16,7 Mio. Farben darstellen.
Wie findet man den hexadezimalen Wert für eine bestimmte Farbe?
Zum Bestimmen hexadezimaler Farbwerte benutzen Sie am besten ein Grafikprogramm,
welches das hexadezimale Farbschema unterstütz. Ich habe PhotoImpact von Ulead im
Einsatz, ein etwas älteres Grafikprogramm für Fotobearbeitung und Vektorgrafik. Öffnen Sie
ein Bild in ihrem Grafikprogramm oder erstellen Sie eine Vektorgrafik mit der benötigten
Füllfarbe. Nehmen Sie das Pipettenwerkzeug und ermitteln Sie den Farbwert, er sollte
entweder in der Statusleiste angezeigt werden oder über die Eigenschaften der Grafik
ersichtlich sein. Den ermittelten Wert können Sie dann in den CSS-Einstellungen benutzen:
background-color: #0000FF;
background-color: #000000;
(blau)
(schwarz)
Seite 29