HTML, CSS & JavaScript: Die Basics Teil II

6/18/2016

Dies ist Teil zwei unseres Tutorials über HTML, CSS und ein bisschen JavaScript. Im letzten Teil haben wir die Grundfunktionen dieser drei Sprachen kennengelernt und ein paar nützliche HTML-Befehle kennengelernt. Wenn du den ersten Teil bereits gelesen hast oder dich sowieso schon auskennst, ist dies der perfekte Ort für dich, um weiterzumachen – indem du etwas über CSS lernst und wie du JavaScript-Bibliotheken in deine Webseite einbaust. Let’s get right to it!

CSS

CSS ist die Abkürzung für Cascading Style Sheets. Es ist eine nette Art, deinem Browser mitzuteilen, wie er deine Webseite aussehen lassen soll. Du kannst deinen HTML-Code auf verschiedene Arten stylen.

Für kleine Anpassungen kann es ausreichen, den inline style zu verwenden. Bei dieser Methode gibst du die Stilanpassungen für bestimmte Elemente direkt im elements-Tag an. Zum Beispiel haben wir im ersten Teil über das <span> Element gesprochen. So würdest du <span> und einen Inline-Stil verwenden, um einen Teil deines Satzes einzufärben:

<p>Meine Lieblingsfarbe ist <span style="color:red">rot</span> wie mein Haar.</p>

Hier kannst du den Befehl style wie ein Attribut verwenden. Du kannst mehrere Dinge in einem Inline-Style-Attribut angeben, wie z.B. die Angabe von style="color:red;text-align:right", um die Textausrichtung und -farbe in einem Rutsch zu ändern, aber stelle sicher, dass du Anführungszeichen um das Ganze setzt, sonst funktioniert es nicht.

Natürlich gibt es viel mehr mögliche Einstellungen als nur die Textfarbe:

Du’hast gerade gelernt, was Farbe bewirkt. Du kannst aus den Standard-Farbnamen wählen oder per Hexadezimalcode oder rgb-Farbcode angeben.
background-color setzt die Hintergrundfarbe des aktuellen Elements. Das kann ein Text oder ein ganzer Absatz sein, ein durch ein div definierter Abschnitt oder sogar der gesamte Body des Dokuments.
font-family legt die Schriftart für ein Element fest.
font-size legt die Größe des aktuellen Textelements fest.
text-align lässt dich wählen, ob der Text links, rechts, zentriert oder justified ausgerichtet werden soll. initial wählt den Standardwert und inherit richtet den Text nach der Ausrichtung seines Elternelements aus.

Es gibt noch mehr, aber lass uns erst einmal nur damit arbeiten. Versuche, die oben genannten Eigenschaften in deinem HTML-Dokument, das du im ersten Teil dieses Tutorials erstellt hast, mit Inline-Style zu ändern.

Wenn du viele Eigenschaften definieren oder viele Elemente bearbeiten willst, könnte Inline-Style ein wenig unbequem sein. Zum Glück gibt es einen anderen Weg: Du kannst den style Tag verwenden. Alles was du zwischen <style></style> in deinem Dokument werden als CSS-Befehle interpretiert. Du’wirst das normalerweise im Kopf machen, da es als Metainformation zählt. Aber wenn du CSS-Code in den Kopf deines Dokuments schreibst, wie soll dein Browser dann wissen, auf welches Element du dich beziehst?

Das ist der Grund, warum es Dinge gibt, die man Ids und Klassen nennt. Für jedes HTML-Element in deinem Dokument kannst du eine (oder sogar mehrere) Klassen und eine eindeutige ID definieren. Das sieht dann so aus.

<div class="red pushright" id="a1">
   etwas Text
</div>
<div class="red">
  mehr Text
</div>
<div>
  dieses hier hat keine Klasse
<div>

Dem ersten div haben wir gerade die Klassen red und pushright sowie die ID a1 gegeben. Das zweite hat nur die Klasse rot, und das dritte hat gar keine Klasse oder ID. Klassen werden normalerweise für eine größere Menge von Elementen verwendet, die die gleichen CSS-Eigenschaften haben sollen. IDs sind in der Regel eindeutig und sind ein nützlicher Weg, um ein bestimmtes Element herauszufiltern, das du manipulieren willst.

Lass uns CSS in unserem <style> Tags, um die Textfarbe von allem mit der Klasse red auf rot zu stellen und jedes Element mit der Klasse pushright rechts auszurichten. Das Element mit der ID a1 sollte fett gedruckt sein. Außerdem sollen alle Divs ohne Klassen die Textfarbe lila haben und links ausgerichtet sein. Das würde in etwa so aussehen:

<style>
div {.
   color: purple;
   text-align: left
}
.red {
   color: red
}
.pushright {
   text-align:right
}
#a1{
   font-weight: bold
}
</style>

Wenn du den obigen Text kopierst und in den <head> deines Dokuments einfügst, solltest du die Änderungen sehen, die wir anwenden wollten, wenn du das nächste Mal die Datei im Browser aktualisierst.

Es gibt allerdings ein Rätsel. Die erste Stilregel soll auf alle <div> Elemente angewendet werden und ihre Textfarbe auf lila ändern. Aber zwei unserer Divs sind trotzdem rot. Das liegt natürlich daran, dass sie die Klasse rot haben, und anscheinend sind die Stilregeln für Klassen stärker als die für allgemeine Elemente, wenn es einen Widerspruch gibt.

In Wirklichkeit ist es ein wenig komplizierter als das. Es gibt ganze Tutorials, die sich um die sogenannten Spezifitätsregeln von CSS drehen, die bestimmen, welche Stilregeln angewendet werden und welchen Platz sie in der CSS-Hierarchie einnehmen. Wenn einige Regeln nicht angewendet werden, obwohl du denkst, dass sie angewendet werden sollten, ist das wahrscheinlich ein Spezifitätsfehler. Als Grundregel können wir uns jedoch diese Hierarchie merken, in der Reihenfolge von höchster zu niedrigster Priorität:

Inline-Stil
IDs
Klassen
Allgemeine Elemente

Versuch doch mal ein wenig mit diesen CSS-Einstellungen herumzuspielen. In der Zwischenzeit werfen wir einen kurzen Blick darauf, wie du JavaScript-Bibliotheken in deine Webseite einbindest und wie du die Dateien verwaltest, aus denen deine Seite besteht.

JavaScript-Bibliotheken

JavaScript ist eine ziemlich mächtige Sprache, mit der du so ziemlich alles auf deiner Webseite manipulieren kannst. Es kann allerdings ziemlich schnell kompliziert werden, wenn du komplexere Elemente erstellen willst. Zum Glück musst du die ganze Arbeit nicht selbst machen. Es gibt viele JavaScript Bibliotheken online, Bündel von Funktionen, die einem bestimmten Zweck dienen. Wenn du interaktive Karten für eine Webseite programmieren willst, könnte dich zum Beispiel leaflet interessieren. Highcharts oder die sehr mächtige D3 Bibliothek sind ein wunderbares Werkzeug, um alle Arten von Datenvisualisierungen zu erstellen. Um die Funktionen dieser Bibliotheken zu nutzen, musst du sie in dein aktuelles Dokument importieren.

Die meisten Bibliotheken bieten sogar Tutorials an, wie man das macht. Das Einzige, was du dazu brauchst, sind die Dateien, in denen die Funktionen der Bibliothek definiert sind. Die Links dazu findest du auf den Webseiten der Bibliotheken. Sobald du weißt, wo die Dateien sind, hast du zwei Möglichkeiten, sie zu importieren. Du kannst entweder eine gehostete Version verwenden, die die Ersteller der Bibliothek auf ihre Server hochgeladen haben. In diesem Fall importierst du sie einfach durch Eingabe von

<link rel="stylesheet" href="http://www.example.com/path/to/stylesheet.css"/>

für CSS-Stylesheets oder

<script src="http://www.example.com/path/to/script.js"/>/script>

Für Javascript-Dateien in den Kopf deines HTML-Dokuments. That’s all there is to it!

Wenn du auf Nummer sicher gehen willst, kannst du die Dateien auch über die angegebenen Links herunterladen und auf deinem eigenen Computer speichern. Wenn du das machst, ersetze einfach die URL in den obigen Befehlen durch den Pfad zu den Dateien auf deinem Computer. Nicht so beängstigend, oder.

Dateiverwaltung: Externe Dateien und Dateipfade

Wenn wir schon beim Thema Import von externen Skripten sind, lass uns noch einen kurzen Blick auf die Dateiverwaltung werfen, bevor wir Schluss machen. Bis jetzt haben wir’unsere gesamte Webseite in einem einzigen Dokument codiert. Wir’haben CSS Code mit den <style> Tags und JavaScript mit den <script> Tags eingebettet. Sobald du komplexere Seiten aufbaust, kann das bedeuten, dass dein Dokument ziemlich lang und unübersichtlich wird. Es gibt aber einen einfachen Ausweg: Speichere einfach deinen CSS Code als .css Datei und deine JavaScript Bits als .js Datei. Es ist hilfreich, einen neuen Ordner zu erstellen, um alle Dateien an einem Ort zu haben. Das HTML-Dokument dient dann als Drehscheibe, die alle Dateien zu einer Seite vereint, weshalb es üblich ist, dein Haupt-HTML-Dokument index.html zu nennen.

Dann kannst du auf die Dateien in der gleichen Weise verweisen, wie wir es oben für Bibliotheken erklärt haben– schließlich sind sie’selbst nichts anderes als Skripte und Style-Dokumente.

<link rel="stylesheet" href="path/to/stylesheet.css"/>
<script src="pfad/zu/script.js"/</script>

Wenn du die Links zu den Dateien an der gleichen Stelle einfügst, an der wir zuvor die Skripte und Stilregeln eingefügt haben, sollte es keinen Unterschied zwischen getrennten und gemeinsamen Dateien geben.

Wenn du die Dateipfade angibst, musst du nicht die kompletten Pfade verwenden. Es ist zwar möglich, aber nicht ratsam. Denn wenn du deinen Ordner verschiebst oder dich entscheidest, deine Seite auf einem Server zu verteilen, anstatt sie auf deinem Computer zu behalten, wo nur du sie sehen kannst, ändern sich die Pfade und deine index.html wird nicht in der Lage sein, die Dateien zu finden, die sie braucht. Stattdessen kannst du den relativen Dateipfad verwenden, d.h. den Pfad relativ zum aktuellen Ort deiner index.html. Wenn du also alle deine Dateien in einem Ordner hast, sollte es ausreichen, nur den Dateinamen anzugeben. Das wird dafür sorgen, dass sie im aktuellen Verzeichnis gesucht wird. Wenn sich deine Dateien in einem Unterordner befinden, gib einfach den Pfad von index.html zu der Datei an, zum Beispiel mit "subfolder1/subfolder2/filename.css". Befindet sich die Datei in einem darüber liegenden Verzeichnis, musst du ".." eingeben, um in das übergeordnete Verzeichnis des aktuellen zu gelangen. Wenn also (aus irgendeinem Grund) deine Dateien wie folgt organisiert sind:

Dann musst du folgendes eingeben, um von deiner index.html Datei zu deiner script.js Datei zu gelangen:

"../../scripts/script.js"

That’s all, folks!

Das ist es für heute. Wir hoffen, du hast eine vage Vorstellung davon bekommen, was du googeln musst, wenn du etwas über Webentwicklung lernen willst. Das ist ein wunderbarer Schritt auf deinem Weg zu einem kompetenten Webentwickler - oder zumindest zu verstehen, wovon diese kompetenten Webentwickler reden. In unseren nächsten Tutorials werden wir ein wenig tiefer in die Welt von HTML, CSS und JavaScript eintauchen. Du wirst einige interessante Bibliotheken und Tutorials kennenlernen, wie du selbst Webseiten und interaktive Grafiken erstellen kannst. Wir hoffen, du bleibst eine Weile bei uns! In der Zwischenzeit kannst du gerne kommentieren oder unserem Slack-Team beitreten, wenn du Fragen hast oder einfach nur Hallo sagen möchtest. See you soon!

Die Credits für das großartige Bild gehen an Phil Ninh