Tobias Brüser Webdesign
Kontakt

Die Basics einer Website: Ein Überblick zu HTML, CSS und JavaScript

Eine Website setzt sich aus verschiedenen Bestandteilen zusammen. Auch wenn der Einstieg in die Websiteerstellung durch Baukästen und Automatisierungen einfach gemacht wird, kommt doch kaum jemand um grundlegende Begriffe wie HTML, CSS und JavaScript herum.

Daher möchte ich hier einen kurzen Überblick über diese Begriffe und klassische Verwendungsbeispiele in der Praxis geben.

Programmiercode

Das World Wide Web ist ein komplexes System, das aus vielen verschiedenen Komponenten besteht. Die drei wichtigsten Bausteine sind HTML, CSS und JavaScript.

Aus der Perspektive der Websiteentwicklung gehören diese Komponenten zum sogenannten Frontend einer Website, also ihrem sichtbaren Teil. Damit werden insbesondere das Layout, die Navigation und die Inhalte gestaltet.

HTML

HTML steht für Hypertext Markup Language. Es ist eine Auszeichnungssprache, die verwendet wird, um die Struktur einer Website zu definieren. Mit HTML-Tags werden verschiedene Elemente auf einer Website markiert, wie z. B. Überschriften, Absätze, Bilder, Links und Formulare.

Hier ist ein Beispiel für eine einfache HTML-Datei:

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Meine Website</title>
</head>
<body>
  <h1>Willkommen auf meiner Website!</h1>
  <p>Diese Website wurde mit HTML, CSS und JavaScript erstellt.</p>
  <img src="image.jpg" alt="Mein Bild">
  <a href="https://www.google.com">Google</a>
  <form action="index.php">
    <input type="text" name="name">
    <input type="submit" value="Absenden">
  </form>
</body>
</html>

Diese Datei erstellt eine einfache Website mit einer Überschrift, einem Absatz, einem Bild, einem Link und einem Formular.

CSS: Das Aussehen der Website

CSS ist die Abkürzung für Cascading Style Sheets. Es ist eine Stylesheet-Sprache, die genutzt wird, um das Aussehen einer Website zu definieren. Mit CSS-Regeln werden Farben, Schriftarten, Layouts und andere visuelle Elemente einer Website gesteuert.

CSS-Code kann zum Beispiel so aussehen:

body {
    font-family: sans-serif;
    font-size: 16px;
}

h1 {
    color: red;
    font-size: 24px;
}

p {
    color: black;
    font-size: 14px;
}

img {
    width: 200px;
}

a {
    color: blue;
    text-decoration: none;
}

Diese Befehle legen fest, dass die Website eine Sans-Serif-Schriftart mit einer Größe von 16 Pixeln verwendet. Die Überschrift wird rot und 24 Pixel groß dargestellt. Die Schrift des Absatzes ist schwarz und mit einer Größe von 14 Pixeln formatiert. Das Bild hat eine Breite von 200 Pixeln. Der Link ist blau und wird ohne Unterstreichung angezeigt.

JavaScript: Interaktion auf der Website

JavaScript ist eine Skriptsprache, die verwendet wird, um die Interaktion zwischen Benutzern und Websites zu ermöglichen. JavaScript-Code wird eingesetzt, um Animationen, Effekte und andere interaktive Elemente einer Website zu erstellen.

Hier ist ein Beispiel für eine einfache JavaScript-Datei:

<script type="text/javascript">
function Hello(){
alert("Hallo Welt!");
}
</script>

<input type="button" onclick="Hello();" name="OK" value="Klick mich"/>

Dieses JavaScript bettet nach Klick auf einen Button ein einfaches Textfeld mit der Begrüßung „Hallo Welt!“ ein, das mit einem weiteren Klick wieder ausgeblendet wird.

In Aktion können Sie das hier testen:

Zusammenhänge und Abgrenzungen

    HTML, CSS und JavaScript sind eng miteinander verbunden. HTML wird verwendet, um die Struktur einer Website zu definieren. Mit CSS wird das Aussehen einer Website gestaltet und JavaScript wird genutzt, um Interaktionen zwischen Benutzern und Websites zu ermöglichen.

    HTML ist also die Grundlage für die Erstellung von Websites und somit elementar für die Realisierung einer lesbaren Website, die in einem Browser dargestellt werden soll. CSS und JavaScript sind nicht zwingend erforderlich, um eine Webseite für die Anzeige in einem Browser zu erstellen. Es sind Hilfsmittel, um die optische Gestaltung von Internetseiten zu optimieren. So wird CSS verwendet, um Websites ansprechender und benutzerfreundlicher zu gestalten, während Websites mittels JavaScript interaktiver und dynamischer gestaltet werden können.

    Fazit

      HTML, CSS und JavaScript sind drei der wohl wichtigsten Technologien für die Erstellung von Websites und Anwendungen. Diese Technologien arbeiten zusammen, um die Websites und Anwendungen zu erstellen, die Sie täglich verwenden.

      Wenn Sie genauer lernen möchten, wie man Websites individueller erstellen kann und nicht nur per Baukasten zusammensetzt, empfehle ich Ihnen, sich mit HTML, CSS und JavaScript vertraut zu machen. Sie finden dazu viele Tutorials im Internet, die Ihnen dabei helfen, diese Technologien zu erlernen.