Einführung in HTML: Die Basis aller Webseiten
Möchten Sie eine Webseite erstellen, führt an HTML und CSS kein Weg vorbei. Wir geben Ihnen eine kleine Einführung, die auch für Projekte wie WordPress-Blogs nützlich ist.
HTML in Zeiten der Content Management Systeme
In modernen Webseiten schlägt normalerweise das Herz eines Content Management Systems (CMS). Diese Systeme liefern die Inhalte, die in einer Datenbank gespeichert sind, und zeigen sie anschließend auf einer HTML-Seite (oft mit dem Schuss .PHP) an.
Gewöhnliche, statische Webseiten hingegen basieren rein auf HTML, Änderungen werden dort mit einem Eingriff in den Code realisiert. Möchten Sie dies versuchen, brauchen Sie allerdings Grundkenntnisse sowohl in HTML als auch in CSS - die Anschaffung dieses Wissens lohnt auch dann, wenn Sie etwa das Design eines CMS verändern möchten.
Was machen HTML und CSS genau?
HTML dient dazu, Textdokumente mit einer Struktur zu versehen. Verwendet dafür werden Tags, die Sie vielleicht schon einmal gesehen haben. Es handelt sich immer um Paare, die geöffnet und geschlossen werden. In der Realität sieht dies so aus: [body]Hier steht beispielhafter Text[/body]. Durch den zweiten Tag, der mit einem / geschlossen wird, "weiß" die Webseite, dass der Tag beendet ist und ein neuer Abschnitt beginnt. Nicht geschlossene Tags führen immer zu einem Fehler in der Darstellung.
Ein populäres Beispiel sind auch Überschriften, die sich mit [h1]Beispieltext[/h1] eingrenzen lassen. Zusätzlich existieren weitere Hierarchien dieser Überschriften, also [h2]…[/h2], [h3]…[ /h3] und so weiter. Absätze hingegen werden in HTML als [p]…[/p] gekennzeichnet. Wenn Sie mehr darüber wissen möchten, empfehlen wir Ihnen einen Blick auf https://wiki.selfhtml.org. Dort finden Sie alle HTML- und CSS-Elemente. Die wichtigsten von ihnen werden Sie nach einer gewissen Zeit auswendig kennen.
- Schreibweise
Weder HTML noch CSS unterscheiden zwischen Groß- und Kleinschreibung, inoffiziell hat man sich jedoch auf die kleine Schreibweise für Tags geeignet. Auch muss Ihr Code nicht zwingend zu 100 Prozent "sauber" sein. Das heißt, dass zu viele Leerzeichen, Absätze und dergleichen keine Rolle spielen, da der Browser sie ignoriert. Verweisen Sie im HTML-Code auf Dateien und Ordner, sollten Sie stets nur Buchstaben und Ziffern finden, aber auf Umlaute und Sonderzeichen verzichten. Statt Leerzeichen verwenden Sie in Verweisen am besten Bindestriche. - FormatierungHTML dient nur dazu, Struktur in Textdokumente (und damit Webseiten) zu bringen. Im Rohzustand wird eine h1-Überschrift wie aus unserem Beispiel also nicht zwingend anders angezeigt als der restliche Text. Dass dies in den meisten Fällen trotzdem der Fall ist, liegt daran, das bestimmte festgelegte Formatierungen intern im Browser existieren. Möchten Sie jene Formate aber selbst bestimmen - wie etwa Schriftart, Zeilenabstand oder auch die Größe der Schrift -, brauchen Sie Cascading Style Sheets (CSS). Grob gesagt bestimmt CSS den Look Ihrer Webseite. Es ist kein Problem, diesen Code ebenfalls in der HTML-Datei unterzubringen, komfortabler ist jedoch der Wechsel auf eine externe Datei.
Das sind die Grundlagen. Aber wie entwickeln Sie eigentlich?
Die Entwicklung beginnt
Theoretisch sind sowohl HTML als auch CSS nichts anderes als Text. Das heißt, dass Sie mit jedem beliebigen Texteditor eine vollständig funktionale Webseite erstellen könnten. Das ist jedoch wenig komfortabel, da spezialisierte Tools wesentlich mehr auf Entwickler zugeschnittene Funktionen mitbringen - wie etwa Bluefish, das Sie über die Paketverwaltung von Linux installieren können. Um auch eine deutsche Rechtschreibprüfung zu erhalten, installieren Sie weiterhin das Paket "aspell-de". Das Programm vervollständigt beispielsweise die Syntax und prüft diese auch, wenn Sie noch das Programm tidy installieren. Herunterladen können Sie dies über http://binaries.html-tidy.org.
Wenn Sie fertig sind, können Sie sich das Ergebnis Ihrer Arbeit einfach in einem Browser anschauen. Bei der Bearbeitung von Bildern kann es nicht schaden, ein Programm wie Gimp zusätzlich zu Hilfe zu nehmen. Es kann auch ratsam sein, einen Webserver auf dem Computer zu installieren, den Sie zur Entwicklung verwenden. Damit prüfen Sie Änderungen im Code schneller - vor allem dann, wenn sie durch falsch platzierte Verweise erzeugt werden. Für die Installation eines Webservers empfehlen wir in Distributionen wie Ubuntu oder Linux Mint folgende Befehle für das Terminal:
sudo apt-get update
sudo apt-get install apache2
sudo a2enmod userdir
sudo service apache restart
Danach erstellen Sie einen neuen Ordner in Ihrem Home-Verzeichnis über "mkdir ~/public_html". In diesem Ordner legen Sie alles ab, was zu dem Projekt gehört, und zwar am besten in eindeutig gekennzeichneten Ordnern. "images" nutzen Sie für Bilder, "css" für CSS-Daten und so weiter.
Erstellung einer ersten Webseite - ein Beispiel
Gehen Sie zunächst in Bluefish auf "Datei" und dann auf "Neu aus Template" und "HTML 5". Speichern Sie jene Datei dann sofort in dem bereits erstellten Ordner "public_html" unter dem Dateinamen "index.html". Der Vorteil an diesem Dateinamen besteht darin, dass der Webserver sie automatisch lädt und als Startseite ausgibt, wenn ein Browser auf den Server zugreift. In der Datei sehen Sie jetzt zu Beginn nur eine kleine Vorlage, die mit [!DOCTYPE html] beginnt. Das informiert den Browser nur darüber, dass hier eine Datei mit HTML-Code anfängt.
Das Grundgerüst der Webseite sehen Sie dann zwischen den Tags [html] und [/html]. [head] hingegen beinhaltet Zusatzinformationen, während [meta charset="utf-8"/] den Zeichensatz beschreibt. Interessant wird es bei [title]…[/title], denn dieser Tag beschreibt den Text, der in der Titelleiste des Browsers sichtbar sein wird. Was Sie im Browser am Ende wirklich sehen, steht hingegen zwischen den Tags [body]…[/body].
Probieren Sie jetzt die Erstellung einer Überschrift mittels [h1]…[/h1]. Darunter geben Sie dann einen beliebigen Text ein und rahmen ihn mit den Tags [p]…[/p] ein. Klicken Sie dann in Bluefish auf die Vorschau. Die Daten stammen dann natürlich noch nicht von einem externen Webserver, sondern von Ihrer Festplatte.
Gestaltung über CSS
Ihre Webseite wird aktuell noch recht langweilig aussehen, denn der Browser verwendet bislang nur die Standardvorgaben. Um dies zu ändern, gehen Sie auf "Datei" und dann "Neu". Erstellen Sie dann eine Datei namens "site.css" und speichern Sie sie in "~/public_html/css". Damit die Webseite auch weiß, dass sie auf dieses Dokument zugreifen soll, müssen Sie ihr das sagen. Bauen Sie also eine Verknüpfung in den head-Bereich der Webseite ein, die in etwa so aussieht: [link href="css/site.css type=text/css rel=stylesheet].
Speichern Sie nun noch die folgenden Zeilen in die CSS-Datei:
html,body,h1,p {font-size: 100%;}
body {
font-family: Helvetica,sans-serif;
font-size: 14px;
color:#FFFFFF;
background:#0C99D5;
}
In der ersten Zeile erkennen Sie, auf welche Elemente sich die Formatierung beziehen soll - in unserem Beispiel body, h1 und p. In der ersten geschweiften Klammer sehen Sie dann Formatierungsangaben, bei uns wäre dies eine Schriftgröße von 100 Prozent. Für body ist danach die Schriftart Helvetica angegeben, die in der nächsten Zeile mit einer Schriftgröße von 14 Pixel gewünscht wird.
Falls Helvetica nicht vorhanden ist, wird der Browser auf die Schriftfamilie sans-serif zugreifen, die je nach Betriebssystem unterschiedlich ausfällt. Für Windows ist dies normalerweise Arial, bei Linux wird Nimbus Sans verwendet. Der color-Bereich gibt die Schriftfarbe an - in unserem Beispiel ein klares Weiß - während der Hintergrund in background mit einer anderen Farbe angezeigt wird. Spielen Sie mit diesen Einstellungen ruhig ein wenig herum, um die Auswirkungen zu sehen. Danach setzen Sie folgende Daten in die CSS-Datei:
h1 {
font-size: 28px;
font-size: 1.75rem;
}
p {
font-size: 1em;
margin: 0.35em 0px;
}
h1 wird alles, was Sie nicht explizit ändern - etwa die Schriftfarbe -, von body erben. In unserem Beispiel definieren wir jedoch die Schriftgröße auf 28 Pixel. Eine Alternative dazu ist die Angabe von font-size in rem-Einheiten, was erst seit CSS3 möglich ist. Mit diesem Befehl wird der Browser die Schrift mit der 1,75-fachen Vergrößerung im Vergleich zu den standardmäßigen 16 Pixeln darstellen (was ebenfalls 28 Pixel sind). Arbeiten Sie modern, nutzen Sie rem, andernfalls definieren Sie die Pixel exakt. Verwenden Sie beide Angaben, wie in unserem Beispiel, greifen Browser immer auf die zuletzt verwendete Formatierung zurück.
Im zweiten Block finden Sie die Schriftgrößenangabe von 1em für alle p-Elemente. em ist wie rem ebenfalls eine Bezugsgröße, in diesem Fall greift das Element direkt auf das übergeordnete Element in der HTML-Datei zu - bei uns wäre dies gerade das body-Element. Alle Absätze würden also so dargestellt werden, wie Sie dies für body definiert haben. Ersetzen Sie die Ziffer etwa durch 1.5em, würde jeder Absatz mit der 1,5-fachen Vergrößerung der Schriftart von body erscheinen. margin hingegen legt fest, dass der Zeilenabstand um 0,35 em reduziert werden soll und links und rechts auf der Webseite 0 Pixel Abstand zum Rand sichtbar sein soll (was in der Praxis keine gute Idee wäre).
Bedenken Sie, dass Theorie nicht alles ist. Experimentieren Sie am besten ein wenig mit den Werten, um ein Gefühl dafür zu bekommen, wie sich Befehle auswirken. Da Sie Änderungen in Bluefish wieder rückgängig machen können, werden Sie nichts "kaputt" machen können.
Positionierung von Webseiten-Elementen
Denken Sie an eine beliebige Webseite: Wahrscheinlich gibt es irgendwo bestimmte Elemente wie ein Menü, vielleicht ist noch eine Spalte für wichtige Links und ähnliche Sortierungen vorhanden. Damit der Browser diese Elemente geordnet anzeigt, müssen Sie ihm das sagen - andernfalls wird einfach alles stur untereinander angeordnet. Daran hat CSS auch gedacht und stellt die Tags [div]…[ /div] zur Verfügung. Ein einfaches Beispiel unterteilt Ihre Webseite in drei größere Blöcke: einen für den gesamten Content der Webseite, einen für den Hauptinhalt und einen für eine seitliche Menüspalte. Aussehen könnte das so:
[div id=content]
[div id=main][/div]
[div id=sidebar][/div]
[/div]
Die Bezeichnungen, die sie hinter id= festlegen, gestatten Ihnen die Formatierung bestimmter Elemente in CSS. Sehen Sie sich dazu das folgende Beispiel an:
#main {
float:left;
width:35em;
background-color: lightblue;
}
#sidebar {
float:left;
width:15em;
background-color: lightgreen;
}
Wichtig ist hier vor allem float:left. Damit geben Sie dem Browser die Anweisung, das Element in Relation zum vorherigen Element am linken Rand auszurichten. Wie breit dieses Element sein soll, definieren Sie über width:. Sie sollten hier stets relative Werte, als em und rem, verwenden. Ansonsten werden praktisch alle Nutzer mit anderen Einstellungen Probleme mit Ihrer Webseite bekommen. Wenn Sie das Beispiel bis hierhin verfolgt haben und die Änderungen ausprobieren, werden Sie jetzt noch bemerken, dass die sidebar unter dem Main-Block positioniert ist, sobald Sie den Browser verkleinern. Um das Problem zu beheben, geben Sie unter body eine Zeile wie width:900px ein.
Was bringen HTML5 und CSS3?
HTML5 und CSS3 haben für erfahrene Web-Entwickler viele Vorteile mitgebracht. Zwei davon haben wir für Sie ausgesucht.
- Menschliche Nutzer haben kein Problem damit, Anfang und Ende eines Artikels zu identifizieren, Kommentare zu erkennen, Werbung auszumachen oder Links zu unterscheiden. Suchmaschinen jedoch stellte dies lange vor eine recht große Herausforderung. Um das Problem zu beheben, bringt HTML5 neue Tags mit - etwa [header], [section] oder [article], womit sich einzelne Sektionen besser voneinander trennen lassen. Das hat vor allem Vorteile für die Suchmaschinenoptimierung, wenngleich diese insgesamt eher gering ausfallen. Mit wirklich gutem Content, der auf einer guten Webseite platziert ist, haben Sie immer noch die besten Erfolgsaussichten.
- Eine der wichtigsten Neuerungen war außerdem die native Wiedergabe von Audio und Video, damit Anwender diese ohne Plugins wie Flash wiedergeben können. Sie können das in Ihrer HTML-Datei ausprobieren:
[video id=myVideo width=640 height=360 controls poster=test.jpg]
[source src=TestVideo.mp4 type=video/mp4 /]
[/video]
Die erste Zeile definiert die Größe des Web-Players (hier sind es 640 x 360 Pixel) mit einem Vorschaubild namens test.jpg. Das source-Tag hingegen bestimmt die Quelle des Videos auf dem Webserver. Im Beispiel handelt es sich um TestVideo.mp4, das im ebenfalls definierten Format MP4 vorliegt, was alle aktuellen Browser beherrschen.
Ein Wort zur Farbe
Die RGB-Pixel eines Displays kennen nur ihre drei namensgebenden Farben: Rot, Grün und Blau. Alle anderen Farben müssen gemischt werden. In HTML werden Farben als Hexadezimalwert angegeben. Einige Beispiele: Schwarz ist #000000, Weiß hingegen #FFFFFF, Rot ist #FF0000, Grün ist #00FF00 und Blau zu guter Letzt #0000FF. Professionelle Grafikprogramme können Ihnen den Hex-Wert jeder beliebigen Farbe anzeigen. Laden Sie beispielsweise ein Logo in das Programm und ermitteln Sie, welchen exakten Farbwert die Grafik verwendet. Dann werden Sie keine Probleme bekommen, jene Farbe ebenfalls zu nutzen.
In CSS3 haben die Entwickler außerdem einige Farbnamen integriert, immerhin 140 Stück sind es geworden. Verwenden können Sie etwa Namen wie Purple oder Chocolate. Eine Übersicht aller Webfarben können Sie unter https://de.wikipedia.org/wiki/Webfarbe einsehen.