HTML, CSS und JavaScript sind das, woraus die meisten Webseiten bestehen. Sie arbeiten zusammen und haben jeweils eine bestimmte Aufgabe. Während du eine Webseite schreibst, wird sie im Grunde nur wie ein Textdokument aussehen. Du kannst sie in einem beliebigen Texteditor deiner Wahl schreiben, obwohl es wahrscheinlich eine gute Idee ist, einen Code-Editor wie Atom oder Sublime Text zu verwenden, der dich bei der Formatierung und Code-Vervollständigung unterstützt, sobald du das File mit der passenden Endung, zum Beispiel .html, abspeicherst.

Sobald du die Seite geschrieben hast, ist dein Browser der Ort, an dem die Magie passiert. Er interpretiert den Code, den du in deinen .html-, .css- und .js-Textdateien geschrieben hast, und baut daraus eine voll funktionsfähige, schöne Website auf - vorausgesetzt natürlich, es sind keine Fehler in deinem Code. Aber dafür bist du ja heute hier.

HTML, oder HyperText Markup Language, ist das Rückgrat einer jeden Webseite. Sie bestimmt die grundlegende Struktur und den Inhalt. Wenn du jedoch nur HTML verwendest, sieht deine Webseite am Ende aus wie die allerersten Seiten aus den Anfangstagen des Webs. Keine hübschen Formatierungen, keine interaktiven Elemente. Du wirst das manchmal sehen, wenn deine Internetverbindung sehr langsam ist und dein Browser die Seite nicht richtig laden kann. Das ist in Ordnung, aber wir können es besser machen. Dafür gibt es CSS.

CSS ist die Abkürzung für Cascading Style Sheets. Das ist der Code, der deinem Browser sagt, wie deine Webseite aussehen soll: Welche Schriftarten und Farben verwendet werden sollen, welche Größe dein Text haben soll usw. Aber eine hübsch aussehende Webseite ist nicht alles, was du wollen kannst. Du möchtest vielleicht mit der Webseite interagieren, Dinge anklicken, Dinge bewegen und sie auf deine Aktionen reagieren lassen. HTML und CSS können das nicht besonders gut, aber JavaScript schon.

JavaScript teilt deinem Browser mit, wie sich die Seite verhalten soll. Damit schreibst du interaktive Grafiken, oder so ziemlich jedes interaktive Element auf deiner Website. Verglichen mit den anderen beiden ist es eine ziemlich komplexe Sprache, die du wahrscheinlich nicht in ein oder zwei Wochen komplett lernen wist. Aber das ist in Ordnung. Für den Moment reicht es, wenn du weißt, was sie tut.

Wenn du dich also nur an eine Sache aus diesem Tutorial erinnerst, dann soll es diese Zusammenfassung sein, was eine Webseite ausmacht:

HTML: Struktur/Inhalt
CSS: Stil
JavaScript: Verhalten

Wenn dein Kopf jetzt immer noch Platz hat, dann lass uns einen genaueren Blick darauf werfen, wie eine Webseite aufgebaut ist. Wie bereits erwähnt, sind Webseiten nichts anderes als Textdokumente, die dein Browser zu interpretieren weiß. Um diese Dokumente zu schreiben, kannst du einen beliebigen Code-Editor deiner Wahl verwenden. Ich verwende Atom, was sehr gut funktioniert, solange du nicht versuchst, riesige Datensätze anzuzeigen.

Wir werden uns in diesem Tutorial einige nützliche Befehle ansehen. Aber natürlich gibt es noch viel mehr zu entdecken. Wenn du mehr nachschlagen willst, ist W3schools ein guter Ort, um damit zu beginnen. Du findest dort Referenzen für HTML, CSS, JavaScript und mehr. Es gibt auch einige gute MOOCs (Massive Open Online Courses) für Webentwicklung. Schau zum Beispiel bei Coursera oder CodeAcademy vorbei.

Es ist immer eine gute Idee, sich den Code anderer Webseiten anzuschauen und zu sehen, wie sie funktionieren. Klicke dazu mit der rechten Maustaste irgendwo auf eine Website. Die Details sind bei jedem Browser anders, aber es wird eine Option wie "Element inspizieren" und "Quellcode anzeigen" geben. Wenn du darauf klickst, solltest du eine Menge Code sehen. Das ist die Website, wie dein Browser sie sieht. Versuche zu verstehen, was da vor sich geht. Dies ist auch eine gute Inspirationsquelle für deine eigenen Seiten.

Während du deine eigenen Projekte programmierst, kannst du vielleicht auch einen Blick in die Konsole deines Browsers werfen. Du findest sie, indem du auf "Element inspizieren" (oder was auch immer dem in deinem Browser entspricht) klickst und in dem sich öffnenden Fenster den Reiter "Konsole" wählst. Die Konsole zeigt dir eine Fehlermeldung an, wenn etwas mit deiner Seite nicht stimmt. Diese Meldung kann dir helfen, das Problem zu identifizieren, oder dir zumindest etwas zum Googeln geben, wenn du das Problem nicht auf Anhieb verstehst.

Aber dazu kommst du später. Lass uns zunächst die Grundlagen kennenlernen.

HTML

Beginnen wir mit etwas HTML-Code. Wenn du mitcoden möchtest, öffne ein neues Dokument in einem Code-Editor deiner Wahl. Kopiere den untenstehenden Code in die Datei und speicher ihn z. B. als index.html (der .html-Teil ist das Wichtige).

<!DOCTYPE html>
<html>
 
<head>
	<title>Meine Webseite</title>
	<style> <!--Ein bisschen CSS--> </style>
	<script> <!--Ein wenig JavaScript--> </script>
</head>
 
<body>
 
<h1>Das ist eine Überschrift</h1>
<p>Das ist Text.</p>
 
</body>
 
</html>

Dies ist die Struktur, der jedes HTML-Dokument folgt. Das erste, was dir auffallen wird, sind die vielen spitzen Klammern. Die Wörter zwischen den spitzen Klammern sind Schlüsselwörter, die wir Tag-Namen nennen. Zusammen mit der Klammer bilden sie ein Tag, das eine bestimmte Funktion erfüllt. HTML-Inhalt wird immer zwischen einem Start-Tag und einem End-Tag platziert, das mit einem Schrägstrich beginnt, etwa so:

<tagname>Inhalt</tagname>

Die meisten Tags akzeptieren Attribute, die angeben, wie sie sich verhalten sollen:

<tagname arg1 = value1 arg2=value2>Inhalt</tagname>

Wir werden bald einige Beispiele dafür kennenlernen.

Jedes HTML-Dokument beginnt mit der Deklaration <!DOCTYPE html>, die dem Browser mitteilt, welche Art von Dokument er erwarten soll (in diesem Fall html, duh). Dann gibt es den <html>-Tag. Es schließt sich erst am Ende der Seite und macht besonders deutlich, dass alles, was dazwischen liegt, tatsächlich HTML-Code ist.

Die beiden grundlegenden Teile deiner Seite sind der <head> und der <body>. Der head enthält alle Meta-Informationen, die du dir wünschst oder benötigst, damit deine Website richtig funktioniert. Er kann z. B. dazu verwendet werden, deine Website einen Namen zu geben (<title>), notwendige CSS-Informationen zu laden (<style>) oder JavaScript-Quellen (<script>), wozu wir später noch kommen. Du kannst auch viele andere Dinge wie die Sprache oder die Zeichenkodierung im head einstellen.

Alles, was im head steht, wird auf der Webseite nicht direkt sichtbar sein. Wenn du also endlich etwas Inhalt hinzufügen möchtest, solltest du dir den Body deiner Seite ansehen. Dies ist der Ort, an dem du deinen eigentlichen Inhalt platzierst. Es gibt eine ganze Reihe von Optionen, wie du deinen Text schreiben und welche Medien du in deine Seite einbinden können. Werfen wir einen kurzen Blick auf ein paar wichtige Tags dafür. Wenn du willst, kopier sie in dein frisch erstelltes HTML-Dokument und spiel ein wenig mit ihnen herum. Um zu sehen, was sie bewirken, speicher einfach die Datei und öffne sie in deinem Browser (du kannst sie natürlich auch in deinen Code-Editor geöffnet lassen).

Formatierung

• <p> steht für "paragraph". Verwende es, um wichtige Dinge auf deiner Website zu schreiben, und vergiss nicht, deinen Absatz mit </p> zu schließen. End-Tags sind wichtig für fast alle Tags, die wir hier besprechen werden.
• <h1> ... <h6> sind Überschriften. Je höher die Zahl, desto kleiner wird die Schrift deiner Überschrift.
• <b> oder <strong> wird verwendet, um deinen Text fett zu drucken. Beide Befehle bewirken im Wesentlichen das Gleiche.
• <i> oder <em> werden beide verwendet, um kursiv zu schreiben.
• <u> unterstreicht Text, aber das kannst du gleich wieder vergessen. Im Web ist es so gut wie nie eine gute Idee, Text zu unterstreichen, der kein Link ist, und diese sind standardmäßig unterstrichen.
• <br> erzeugt einen Zeilenumbruch. Dies ist eines der ganz wenigen so genannten void-Tags, die keinen schließenden Tag benötigen.

Listen

• <ul> erzeugt eine ungeordnete Liste, wie die, die du gerade liest.
• <ol> erzeugt eine geordnete Liste. Sie kann mit einigen Attributen geändert werden. Zum Beispiel wird <ol start="343" reversed> die Liste bei der Nummer 343 statt bei 1 beginnen und von dort aus abwärts statt aufwärts zählen. Hier findest du eine Liste aller möglichen Attribute.
• <li> erzeugt ein Listenelement, um die mit deinen erstellten ungeordneten oder geordneten Listen aufzufüllen.
• Deine Einkaufsliste in HTML könnte etwa so aussehen:
  
  <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

  <ul>
    <li>Kaffee</li>
    <li>Tee</li>
    <li>Milch</li>
  </ul>

Medien

• Links: <a href="URL" target="_blank">Linktext</a> Das "a" steht für Anker und wird verwendet, um einen Link zu erstellen. Setze die URL, auf die du verweisen willst, in das href-Attribut. target="_blank" öffnet den Link in einem neuen Tab. Wenn du es weglassen willst, wird der Link standardmäßig in der aktuellen Registerkarte geöffnet.
• Bilder: <img src="Dateipfad/URL" height="550" width="100%"> Das img-Tag ist ein weiteres void-Tag, du musst also kein </img> dahinter schreiben. Experimentiere mit den Einstellungen für Breite (width) und Höhe (height). Wenn du sie nur als Zahl angibst, wird die Einheit standardmäßig auf Pixel gesetzt. Wenn du Prozentwerte angibst, wird das Bild entsprechend dem Bildschirm skaliert, auf dem es angezeigt wird. Mit den obigen Angaben wird unser Bild zum Beispiel die gesamte Breite des Bildschirms einnehmen und 550 Pixel hoch sein. Beachte, dass du die Proportionen deines Bildes möglicherweise verzerrst, wenn du sowohl die Breite als auch die Höhe angibst. Deshalb ist es manchmal besser, nur entweder die Breite oder die Höhe anzugeben.
• Audio: <audio src="file path/URL" controls autoplay loop> Sorry, your browser can't handle this </audio> Mit dem Audio-Tag kannst du beliebige Audiodateien in deine Website einbinden. Es ist wahrscheinlich eine gute Idee, controls als Attribut einzugeben, damit Benutzer*innen das Audio anhalten und wieder starten können. Autoplay und Loop sind ziemlich selbsterklärend. Allerdings solltest du dir zweimal überlegen, ob du tatsächlich willst, dass dein Audio sofort und in einer Schleife abgespielt wird. Der Text zwischen dem öffnenden und schließenden Tag dieser Zeile wird nur angezeigt, wenn der Browser die Audiodatei nicht laden kann, um Benutzer*innen darüber zu informieren, dass hier tatsächlich etwas stehen sollte.
• Video: <video src="file path/URL" controls autoplay loop> Sorry, your browser can't handle this </video> Das Video-Tag funktioniert ziemlich genau so wie das Audio-Tag, nur, na ja, mit Videos. Du kannst auch Breite und Höhe wie bei einem Bild angeben.

Inline-Frames

<iframe src=“Dateipfad/URL“ height=“550“ width=“100%“ scrolling style=„border:none“>
      Sorry, dein Browser kann das nicht verarbeiten
</iframe>

Ein Inline-Frame, oder kurz Iframe, funktioniert ähnlich wie die Video- oder Audio-Tags, ist aber viel leistungsfähiger. Mit ihm kannst du jeden beliebigen Inhalt, sogar eine ganze andere Website, innerhalb des von dir angegebenen Rahmens anzeigen. Es ist so etwas wie ein Fenster zu einer anderen Seite. Es ist sehr nützlich für die einfache Anzeige von Grafiken oder Web-Applikationen und dergleichen, aber es kann ein bisschen schwierig sein, es richtig responsive zu machen. Wenn du also die Möglichkeit hast, solltest du immer versuchen, deine hübschen interaktiven Grafiken nativ in deine Webseite zu integrieren. Wenn du aber nicht die Zeit oder die Ressourcen dafür hast, ist ein iframe genau das Richtige. Wirf hier einen Blick auf seine möglichen Eigenschaften.

Struktur

Es gibt einige HTML-Tags, die auf den ersten Blick nichts zu tun haben. Sie sind Strukturelemente, mit denen du das Layout deiner Seite gestalten kannst.

• <div>Inhalt</div> Ein div, kurz für Division, ist eines dieser Elemente. Es wird verwendet, um einen separaten Abschnitt in Ihrem HTML-Dokument zu definieren. Wenn du nicht CSS oder JavaScript verwendest, um dem Browser mitzuteilen, was er damit tun soll, wirst du nicht einmal bemerken, dass es da ist. Aber wenn sie richtig eingesetzt werden, können Divs ein großartiges Layout-Werkzeug sein.
• Ein <span> ist so etwas wie das kleine Geschwisterchen des divs. Während ein div verwendet werden kann, um ganze Abschnitte eines Textes zu stylen, sie zu verschieben oder ihnen ein bestimmtes Format zu geben, wird <span> häufiger für das Styling kleinerer Elemente verwendet, etwa wenn du einem Teil deines Satzes eine andere Farbe geben möchtest.

Wenn du dieser Anleitung gefolgt bist und einige der bisher besprochenen Optionen ausprobiert hast, solltest du inzwischen etwas haben, das einer Website aus den frühen 2000er Jahren ähnelt. Das ist ziemlich cool. Schauen wir mal, ob wir es noch cooler machen können. Wenn du mehr darüber erfahren möchten, wie du deine Website mit CSS gestalten und mit JavaScript interaktiv machen kannst, lies bitte weiter im zweiten Teil unseres Tutorials. Wir sehen uns dort!

Weiter zu Teil II

Credits für das grandiose Titelbild gehen an Phil Ninh