In diesem kleinen Tutorial möchten wir uns anschauen, wie wir eine einfache HTML-Webseite erstellen. Dazu werden wir uns zunächst damit beschäftigen, was eine Webseite ist und welche Vorbereitungen wir treffen sollten.
Was ist eine Webseite?
“Hast du auch schon eine Homepage?”, “Man kann jetzt auch ne ganze Webseite online erstellen. Kostenlos.”, “Ich habe jetzt im Internet eine Website.”
Das sind einige Aussagen, die ich schon vor über 20 Jahren gehört habe. Und alle haben sie miteinander zu tun, beschreiben aber nicht unbedingt das gleiche.
Ich möchte hier nur grob die Unterschiede und Begriffe klären.
Eine Website ist ein Platz im Internet, die durch das World Wide Web sichtbar gemacht werden kann. Im Prinzip ist eine Website der Ordner, indem alle Inhalte gespeichert sind. Um genau zu sein, mehr ist es auch nicht.
Eine Website umfasst dabei u.a. auch Webseiten. Webseiten sind die einzelnen Bereiche, die wir mit einer URL aufrufen können und in unserem Browser als eine Seite angezeigt werden. Dabei besteht eine Website mindestens aus einer Webseite, in der Regel aus mehreren.
Und die Homepage ist die “erste” Seite der Website. Sie trägt in der Regel den Dateinamen index.html oder home.html. Die Homepage ist sozusagen die Frontseite unserer Publikation. Sozusagen hat jede Website mindestens eine Homepage, die auch eine Webseite ist, und mehrere Unterseiten.
Das ganz grob zur Unterscheidung der Begriffe.
Wie erstellt man eine Webseite?
Eine Webseite wird in der Regel in HTML geschrieben. Das ist die Sprache, in der wir das Aussehen und den Inhalt für den Browser “lesbar” machen. Dabei ist diese Sprache recht einfach aufgebaut und liegt mittlerweile als HTML5 vor.
Wir benötigen zum Erstellen einer Webseite einen Editor. Wir wollen ganz klassisch die Seite selbst erstellen.
Dazu reicht ein ganz einfaches Programm wie der Windowseditor Notepad. Nutzt bitte auf gar keinen Fall Word und der gleichen. Es gibt aber unzählige spezialisierte HTML-Editoren mit Zusatzfunktionen, die wir aber für dieses Tutorial nicht benötigen.
Nachdem wir den Editor geöffnet haben, können wir auch schon loslegen. Wir werden die Datei als HTML-Datei abspeichern (also nicht als txt-Datei, wie es der Windows-Editor standardmäßig macht). Wir nennen die Datei test.html.
Grundgerüst
Die einfachste HTML-Datei sieht so aus:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Hier sehen wir, wie eine HTML-Datei mindestens aufgebaut sein soll, damit sie den HTML5-Standards entspricht.
Normalerweise hat jede Anweisung, besser gesagt TAG einen öffnenden <xxx> und einen schließenden </xxx> Teil. TAGs sind die Sachen in den spitzen Klammern, die dem Browser sagen, was gerade gemeint ist.
Die erste Zeile hat nur die eine Information, welche HTML-Version verwendet werden soll. Es HTML 1 bis HTML 4.01 und HTML5, die unterschiedliche Schreibweisen und unterschiedliche Möglichkeiten boten bzw. bieten.
Bei HTML5 benötigt man nur <!DOCTYPE html> und der Browser weiß, dass es sich um HTML5 handelt.
<html> und </html> umschließen das ganze HTML-Dokument. Es steht also am Anfang und am Ende unserer Webseite und zeigt, dass hier eben HTML geschrieben steht. Damit der Browser weiß, in welcher Sprache der Text für den Nutzer verfasst wurde, erweitern wir den <html>-Tag zunächst noch um eine Sprachenkennung, zum Beispiel für deutsch:
<html lang="de">
Direkt nach dem öffnenden <html> finden wir einen Bereich mit <head> und </head>. In diesem Head-Bereich hinterlegen wir Anweisungen für den Browser und beispielsweise Suchmaschinen. Diese werden nicht im Browserfenster angezeigt.
Hier finden wir auch den Titel der Seite <title> xxx </title>, der im Tab des Browserfensters angezeigt wird und bei Suchmaschinen als Linktext zu finden sein wird.
Nach dem <head>-Bereich folgt der Body des Dokuments. Das ist der Bereich, in dem wir alles reinschreiben, was auf der Webseite zu sehen sein soll. Dieser Bereich wird umschlossen von <body> und </body>.
Anmerkung: Man hat sich angewöhnt, Bestimmte Bereiche einzurücken. Und zwar immer dann, wenn ein Unterbereich erstellt wird. Dies dient der besseren Lesbarkeit und der Fehlerfindung.
So. Damit sind wir fertig. Naja, fast.
HEAD-Bereich
Wie bereits gesagt, der Head-Bereich enthält Informationen, die wir nicht dem Nutzer der Webseite anzeigen, sondern er enthält in erster Linie spezielle Anweisungen für den Browser. Das einzige, was wir direkt sehen werden, ist der Title, der uns im Browsertab angezeigt wird.
Diesen Title müssen wir immer angeben. Er beschreibt in Kurzform den Inhalt der Seite. Also
<title>Impressum</title>
zeigt uns, dass es die Seite Impressum ist, die wir hier geöffnet haben. Sinnvollerweise schreibt man dahinter noch den Namen der Website(!).
Hier werden wir aber auch noch sogenannte Meta-Tags hinterlegen, die weitere Informationen beinhalten, die z. B. für Suchmaschinen relevant sind. Dazu gleich mehr.
Wichtige Meta-Tags
<meta charset="utf-8">
Wir sagen dem Browser, welchen Zeichensatz wir verwenden wollen. Das ist wichtig, damit zum Beispiel die deutschen Umlaute richtig dargestellt werden, wenn wir sie auch als solche schreiben (Am Besten schreib man sie in einer speziellen HTML-Codierung). Das gilt für andere Sprachen und deren Schriftzeichen ebenfalls.
UTF-8 ist der Standard-Zeichensatz, der mittlerweile die meisten Zeichen umfasst.
Achtung: Die Datei muss auch als UTF-8 abgespeichert worden sein und vom Server als solche Datei auch ausgeliefert werden.
<meta name="description" content="Das ist eine Beschreibung der Seite für Suchmaschinen. Sie wird in den meisten Fällen dort angezeigt">
Dieser Meta-Tag umfasst die Beschreibung der Seite. In der Regel wird der Inhalt dieser Beschreibung auch bei Suchmaschinen angezeigt. Muss aber nicht sein. Wenn die Suchmaschine findet, dass ein anderer Text auf der Webseite relevanter ist, kann die description auch ignoriert werden.
<meta name="viewport" content="width=device-width, initial-scale=1">
Mit diesem Meta-Tag ermöglichen wir es, dass die Seite mobil nicht sehr klein und unleserlich dargestellt wird.
Es gibt noch weitere Meta-Tags, die wir aber an dieser Stell noch nicht behandeln wollen.
Unser HEAD-Bereich sieht also jetzt so aus:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>So erstellt man eine einfache Webseite - campus1.de</title>
<meta name="description" content="Das ist eine Beschreibung der Seite für Suchmaschinen.
Sie wird in den meisten Fällen dort angezeigt">
</head>
BODY-Bereich
Nun schauen wir uns den BODY-Bereich an.
Wollen zunächst eine einfache Webseite erstellen. Dazu benötigen wir nichts weiter als einen Text zwischen <body> und </body>. Fertig.
<body>
Hier steht jetzt unser Text.
</body>
Das ist bereits unsere ganze Webseite. Allerdings sieht sie noch sehr basic aus.
Wir möchten nun das ganze etwas stylen. Dazu gab es früher Anweisungen innerhalb der Tags, die wir uns jetzt nicht anschauen möchten.
Wir schauen uns kurz die Möglichkeit an, mit einfachen Mitteln das Design anzupassen.
Das erfolgt mit sogenannten Stylesheets. Wir können sie auf mehrere Arten einbauen:
- mit Hilfe einer Datei mit der Endung .css wie styles.css
- im HEAD-Bereich in einem <style…></style>-Bereich, die wir dann mit Anweisungen in den Tags ansprechen
- in den einzelnen Tags direkt in der Zeile (inline) mit style=””
Wir schauen uns hier nur die zweite Möglichkeit an.
Stylesheets Basics
Stylessheets – besser Cascading Style Sheets (CSS) sind etwas tolles. Sie ermöglichen uns das Gestalten der Seite.
Sie können Farben, Größen, Position und noch einige andere Designelemente damit steuern.
Im HEAD-Bereich werden sie für den Browser mit
<style type="text/css"> </style>
markiert.
Dabei vergeben wir für Tags im BODY-Bereich (sowie für das gesamte HTML-Dokument bzw den gesammten BODY-Bereich) Anweisungen, wie die Gestaltung erfolgen soll. Wir beschänken uns hier nur auf ein paar wenige.
<style type="text/css">
body {background: #dddddd; width:100%; font-family: Arial, Helvetica, sans-serif; color:#0000ff}
.content {width: 75%; padding: 10px; background: #ffffff;margin: auto;}
h1 {font-size: 1.5em; color: #ff0000; border-bottom: 1px solid #000000}
</style>
Wir haben jetzt verschiedenen Elemente der gesamten Seite Design-Anweisungen gegeben.
Zunächst soll für die gesamte Seite gelten:
- background: #dddddd;: Setze die Hintergrundfarbe auf einen hellen Grauton.
- width:100%;: die Seite soll 100% des Bildschirms einnehmen.
- font-family: Arial, Helvetica, sans-serif;: Hier haben wir die Schriftart Arial als Default gesetzt. Ist die nicht vorhanden auf dem Rechner des Users, dann nehme die nächste etc.
- color:#0000ff;: Die Schriftfarbe für die Seite soll Blau sein (Rot=00, Grün=00; Blau=ff)
Dann haben wir eine Anweisung .content hinzugefügt. Dabei gibt es zwei Möglichkeiten, Tags “auszuzeichnen”: mit einer class oder einer id.
In diesem Fall haben wir eine Klasse content gebildet, die wir benutzen können. Eine Klasse wird mit einem Punkt gekennzeichnet und eine ID mit einer Raute: Klasse also .content und ID #content. Der Unterschied ist: Man kann Klassen mehrfach auf einer Seite verwenden, eine ID kommt nur einmal pro Seite vor.
- width: 75%;: Hier geben wir die Breite des Bereichs an. Wir werden die Klasse bei einem div-Container verwenden, in dem wir den Text einbinden werden. Dieser hat dann 75 % der Fensterbreite. Alternativ können wir auch eine feste Pixelzahl verwenden.
- padding: 10px;: Mit dieser Anweisung sagen wir, dass die Inhalte des Containers einen abstand vom Containerrand von 10 Pixel haben sollen. Das ist sinnvoll, wenn wir einen Rahmen oder eine Hintergrundfarbe verwenden.
- background: #ffffff;: Hier geben wir eine Hintergrundfarbe an: Weiß. Weiß wird mit #ffffff geschrieben.
- margin: auto;: Diese Anweisung sagt dem Container, dass er den Abstand links und rechts (eigentlich auch oben und unten) so einstellen soll, dass der Container mittig platziert wird. Würden wir diese Anweisung weglassen, würde der Container linksbündig gesetzt werden.
Zu guter letzt haben wir noch eine H1-Überschrift gestylt. Jede Webseite hat eine H1-Überschrift. In dieser gibt man den Seitennamen an.
- font-size: 1.5em;: Wir setzen die Größe der Schrift auf das 1.5fache der Basisschriftgröße bzw. der Schriftgröße des Elternelements. Wichtig ist nur, dass wir hier eine bestimmte Schriftgröße festlegen. H1 hat vom Browser bereits eine Größe erhalten, wir “überschreiben” diese aber.
- color: #ff0000;: Kennen wir schon, wir haben jetzt eine rote Schriftfarbe gewählt.
- border-bottom: 1px solid #000000;: Border ist der Rahmen um das Element. Hier haben wir nur einen Teil des Rahmens, den unteren gewählt. Wir setzen ihn auf 1 Pixel Größe, durchgezogene Linie mit der Farbe Schwarz (=#000000).
Eine genaue Anleitung findet man u.a. bei SelfHTML.org. Mit diesem Kompendium habe ich schon vor über 20 Jahren HTML gelernt.
Angepasster BODY-Bereich
Jetzt brauchen wir nur noch unseren BODY-Bereich:
<body>
<div class="content">
<h1>Das ist eine Überschrift</h1>
<p>Hier steht jetzt unser Text.</p>
</div>
</body>
Wir haben jetzt um unseren Textbereich ein Absatz gesetzt, den wir eventuell auch noch stylen könnten. Einen Absatz erstellt man mit <p>xxxx</p>. Einen einfachen Zeilenumbruch übrigens mit <br> am Ende der Zeile.
Nun haben wir auch gleich noch etwas CSS hinzugefügt.
So sieht die Seite aus, wenn das Fenster eine geringere Breite aufweist. Der Container bleibt bei 75 % der Fensterbreite. Hätten wir eine feste Pixelzahl gewählt, dann wäre der Container eventuell teilweise aus dem Fenster nach rechts raus und wir müssten scrollen.
