HTML und CSS Einführung

LH-Tech Learn > Web

Hintergrundgeschichte

HTML wurde 1992 erstmals veröffentlicht und diente zunächst der einfachen Textdarstellung im Web. Mit HTML 2.0 im Jahr 1995 wurden erste interaktive Elemente wie Formulare eingeführt. HTML 3.2 brachte 1997 Tabellen und die Möglichkeit, Bilder in Texte einzubinden. Ein großer Fortschritt folgte mit HTML 4.0 im Jahr 1997, das Stylesheets und Skripte unterstützte. Ab 2000 entwickelte sich XHTML als striktere XML-basierte Variante, blieb aber weniger populär. Der bedeutendste Meilenstein war die Veröffentlichung von HTML5 im Jahr 2014, das moderne Webanwendungen ermöglichte. Die aktuellste Version, HTML 5.2, erschien 2017 und wird stetig weiterentwickelt.

Aufbau einer Webseite

Eine Webseite besteht aus:

Ein HTML-Dokument beginnt mit dem <!DOCTYPE html> und enthält die Elemente <html>, <head>, <body>, <header> und <footer>.


Beispiel für ein HTML-Dokument:

<!DOCTYPE html>
        
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
        
<html>
  <head>
    <!--Tags wie title, meta und link rel="icon" href="favicon.ico"-->
  </head>
  <body>
    <header>
      <!--Kopfzeile: Navigation-->
    </header>
    <!--Eigentlicher Inhalt der Webseite-->
    <footer>
      <!Fußzeile: Footer-Navigation und Copyright-->
    </footer>
  </body>
</html>

HTML-Tags

Grundlegende Tags

CSS Einführung

CSS (Cascading Style Sheets) wird verwendet, um das Aussehen von HTML-Elementen zu definieren.

Wie funktioniert CSS? - Grundlagen

Im CSS gibt es immer einen sogenannten Selektor, der auf ein oder mehrere Elemente in deinem HTML-Dokument verweist.
So hat die Überschrift h1 den CSS-Selektor h1.

Allgemeine Verwendung von Selektoren (Beispiel):

Selektor {
  Stile für das selektierte Element
}

/*Also sieht das für unser Beispiel mit h1 so aus:*/
h1 {
  color: green;
}
Du kannst auf diese Weise alle Elemente in einem HTML-Dokument auswählen:

/*Das ist ein Kommentar in CSS.*/

body {
  /*Hier wird die Schriftart für den gesamten body gesetzt:*/
  font-family: sans-serif;
}

p {
  /*Hier setze ich die Farbe für alle p-Elemente auf rot:*/
  color: red;
}

/*Nun werden noch die Schriftgrößen für die Überschriften 1 bis 4 definiert:*/
h1 {
  font-size: 25px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 13px;
}

h4 {
  font-size: 7px;
}

Doch was ist nun, wenn die Hyperlinks im header eine andere Farbe haben sollen als im footer?
Auch für dieses Problem bietet CSS eine elegante Lösung. Sieh dir folgendes Beispiel mal genauer an:

header {
  a {
    color: red;
  }
}
footer {
  a {
    color: blue;
  }
}

Auf diese Weise wird jeweils der Stil nur von den Hyperlinks im header oder nur der Stil von den Hyperlinks im footer verändert. Simpel, oder?

Weitere Selektoren
In CSS gibt es nicht nur die Möglichkeit, die von HTML bereits vergebenen Selektoren zu nutzen. Du kannst auch einen p-Tag in HTML erstellen und ihm einen Namen geben. Das funktioniert wie folgt:
Als Erstes legen wir uns einen neuen p-Tag (Paragraphen) in unserer Webseite an:

<p>Mein neuer Paragraph</p>

Dann geben wir unserem neuen Paragraphen die eindeutige ID meinParagraph:

<p id="meinParagraph">Mein neuer Paragraph</p>

Jetzt wollen wir nur diesem einen Paragraphen eine grüne Hintergrundfarbe geben:

#meinParagraph {
  background-color: green;
}

Du siehst im oben stehenden CSS-Code, wie meinParagraph selektiert wurde: #meinParagraph {...}. Du musst also im HTML nur ein id="idName" hinzufügen und anschließend im CSS die neue ID selektieren: #idName {...}
Der Selektor für eine ID ist ein #

Es gibt aber noch eine andere Möglichkeit, ein Element in CSS zu selektieren. Neben den IDs (sie sollten nur einmal auf der Seite verwendet werden) gibt es auch noch Klassen, die man einmal in CSS definiert und anschließend auf mehrere Element anwenden kann. Der Selektor für eine Klasse ist ein .
Wir legen zuerst ein paar HTML-Elemente an:

<p class="meineKlasse">Willkommen auf meiner Webseite!</p>
<br>
<p class="meineKlasse">Hier findest du wichtige Infos zu:</p>
<ul class="meineKlasse">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Dann fügen wir das CSS hinzu:

.meineKlasse {
  color: darkblue;
  background-color: grey;
}

Du sieht also, es ist sehr einfach, die grundlegenden Funktionen von CSS zu verstehen.


CSS in das HTML-Dokument einbauen

Man kann CSS auf verschiedene Arten anwenden:


Welche der drei Möglichkeiten ist am besten?

Fakt ist: Die zweite (im <head>-Tag) und die dritte (als externe .css-Datei mit <link rel="stylesheet" href="styles.css">) Möglichkeit sind die professionellsten Wege, CSS in die Webseite einzubauen. Die erste Variante, das CSS jeweils mit dem style-Attribut in jeden einzelnen Tag einzubauen ist schlechter Stil und wird bei längeren HTML-Dokumenten schnell unpraktisch und unübersichtlich, da dann bei allen Elementen, die denselben Stil haben sollen, immer die Styles aller Elemente geändert werden müssen, und das ist mühsam.


Die wichtigsten CSS-Eigenschaften im Überblick

JavaScript Einführung

JavaScript ist eine Programmiersprache, die es ermöglicht, Webseiten interaktiv zu gestalten. Während HTML die Struktur und CSS das Design einer Webseite bestimmt, sorgt JavaScript für dynamische Inhalte, Animationen und Benutzerinteraktionen.

Einbinden von JavaScript

JavaScript kann auf verschiedene Arten in eine Webseite eingebunden werden:

Variablen und Datentypen

JavaScript bietet verschiedene Möglichkeiten, Daten zu speichern:

let name = "Max";
const alter = 25;
var istOnline = true;

Funktionen in JavaScript

Funktionen sind wiederverwendbare Code-Blöcke:

function sagHallo() {
  console.log("Hallo, Welt!");
}
sagHallo();

DOM-Manipulation

JavaScript kann den Inhalt und das Design von HTML-Elementen verändern:

Ursprünglicher Text

//Das ist der Code dafür:
function aendereText() {
  document.getElementById("demoText").innerHTML = "Neuer Text!";
}

Event Listener

Anstatt onclick direkt ins HTML zu schreiben, kann JavaScript Events eleganter verwalten:

//Das ist der Code dafür:
document.getElementById("eventButton").addEventListener("click", function() {
alert("Button wurde geklickt!");
});

Arrays und Schleifen

Arrays sind Listen von Werten:

let farben = ["Rot", "Blau", "Grün"];
console.log(farben[0]);

Schleifen helfen, Listen zu durchlaufen:

for (let i = 0; i < farben.length; i++) {
  console.log(farben[i]);
}

Bedingungen (if/else)

Mit Bedingungen können unterschiedliche Anweisungen ausgeführt werden:

let zahl = 10;
if (zahl > 5) {
  console.log("Die Zahl ist größer als 5.");
} else {
  console.log("Die Zahl ist kleiner oder gleich 5.");
}

Ein einfaches JavaScript-Projekt: Uhrzeit anzeigen

Die aktuelle Uhrzeit ist:

Das ist der Code dafür:
function zeigeUhrzeit() {
  let jetzt = new Date();
  document.getElementById("uhrzeit").innerHTML = "Die aktuelle Uhrzeit ist: " + jetzt.toLocaleTimeString();
};