Woche 03 - Webserver

Statische Webseite mit Apache bereitstellen

In dieser Woche lernst du, wie du mit dem Apache-Webserver eine einfache statische Webseite auf deinem Raspberry Pi bereitstellen kannst. Folge den untenstehenden Schritten:

1. Apache installieren

Installiere den Webserver und starte ihn:

sudo apt install apache2 -y
sudo systemctl enable --now apache2

Prüfe den Status mit sudo systemctl status apache2. Mit CTRL + c kannst du die Statusanzeige beenden.

2. Standard-Website prüfen

Im Browser die IP-Adresse des Raspberry Pi öffnen (z. B. http://hostname.local (z.B. http://pi5-2.local) oder http://localhost). Es sollte die Apache-Standardseite erscheinen.

3. Berechtigungen setzen

Damit ihr als normale Benutzer Dateien in /var/www/html ändern könnt, ist die sichere Methode, den Nutzer zur Gruppe www-data hinzuzufügen und die Gruppenrechte passend zu setzen:

# Gruppeneigentümer setzen (root bleibt Besitzer)
sudo chown -R root:www-data /var/www

# Benutzer (z. B. "pi4-1") zur Gruppe www-data hinzufügen
sudo usermod -aG www-data pi4-1

# Für Verzeichnisse setgid und rwxrwsr-x (2775), für Dateien rw-rw-r-- (664)
sudo find /var/www/html -type d -exec chmod 2775 {} +
sudo find /var/www/html -type f -exec chmod 664 {} +

Hinweis: Die geschweiften Klammern macht ihr mit Alt Gr + Ä und Alt Gr + # (rechts neben Ä).

Danach beim Raspberry Pi ab- und wieder anmelden, damit die Gruppenänderung wirksam wird.

4. Eigene statische Dateien bereitstellen

Öffne den Terminal und tippe:

code /var/www/html

Es sollte Visual Studio Code geöffnet werden. Jetzt kannst du index.html anpassen.

Überprüfe deine Änderungen, indem du im Browser auf http://localhost gehst und die Seite aktualisierst.

Beispiel: Minimale index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Meine statische Seite</title>
  </head>
  <body>
    <h1>Willkommen</h1>
    <p>Diese Seite wird vom Apache-Webserver bereitgestellt.</p>
  </body>
</html>

Grundlagen von HTML

HTML (HyperText Markup Language) ist die Auszeichnungssprache, mit der Webseiten strukturiert werden. Ein HTML‑Dokument besteht aus Elementen, die durch Tags (<tag> … </tag>) gekennzeichnet sind.

Minimaler Aufbau einer HTML‑Seite

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine erste Seite</title>
</head>
<body>
    <h1>Willkommen!</h1>
    <p>Dies ist ein Absatz.</p>
</body>
</html>

<!DOCTYPE html> – teilt dem Browser mit, dass es sich um HTML5 handelt.
<html> – Wurzelelement, das den gesamten Inhalt umschließt.
<head> – enthält Metainformationen (Titel, Zeichensatz, CSS‑Links usw.).
<body> – hier steht alles, was im Browser sichtbar wird.

Wichtige HTML‑Elemente

Element	Zweck	Beispiel
`<h1>`‑`<h6>`	Überschriften, `<h1>` ist die wichtigste	`<h2>Unterüberschrift</h2>`
`<p>`	Absatz	`<p>Ein kurzer Text.</p>`
`<a>`	Hyperlink	`<a href="https://duckduckgo.com">DuckDuckGo</a>`
`<img>`	Bild einbinden	`<img src="bild.jpg" alt="Beispielbild">`
`<ul>` / `<ol>`	Aufzählungen (ungeordnet/geordnet)	Siehe unten
`<div>`	Block‑Container für Layout	`<div class="box">Inhalt</div>`
`<span>`	Inline‑Container für Text	`<span style="color:red">Rot</span>`
`<table>`	Tabellenstruktur	Siehe unten

Überschriften und Absätze

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<p>Ein Absatz mit <strong>fetter</strong> und <em>kursiver</em> Formatierung.</p>

Das von oben sieht so aus:

Hauptüberschrift

Unterüberschrift

Ein Absatz mit fetter und kursiver Formatierung.

Links und Bilder

<p>Besuche <a href="https://duckduckgo.com" target="_blank">DuckDuckGo</a> für sichere Suche.</p>

<img src="https://www.tomsnow.co.uk/wp-content/uploads/2023/10/Example-logos-13.png" alt="Logo" width="200">

target="_blank" öffnet den Link in einem neuen Tab.
alt‑Attribut liefert Text, falls das Bild nicht geladen werden kann (wichtig für Barrierefreiheit).

Das von oben sieht so aus:

Besuche DuckDuckGo für sichere Suche.

Listen

Ungeordnete Liste

<ul>
    <li>Apfel</li>
    <li>Banane</li>
    <li>Orange</li>
</ul>

Geordnete Liste

<ol>
    <li>Erster Schritt</li>
    <li>Zweiter Schritt</li>
    <li>Dritter Schritt</li>
</ol>

Die beiden Listen sehen so aus:

Apfel
Banane
Orange

Erster Schritt
Zweiter Schritt
Dritter Schritt

Tabellen

<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Alter</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Anna</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Ben</td>
            <td>34</td>
        </tr>
    </tbody>
</table>

<thead> – Kopfzeile, <tbody> – eigentlicher Tabelleninhalt.
border="1" fügt einen einfachen Rahmen hinzu (für Lernzwecke; später lieber CSS verwenden).

Tabelle von oben:

Name	Alter
Anna	28
Ben	34

Formulare (kurze Einführung)

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">E‑Mail:</label>
    <input type="email" id="email" name="email">

    <button type="submit">Absenden</button>
</form>

<label> verbindet Text mit dem jeweiligen Eingabefeld (for‑Attribut).
action gibt das Ziel der Datenübermittlung an, method legt das HTTP‑Verfahren fest.

Formular von oben:

Praktische Tipps für Anfänger

Dateiendung – speichere deine Datei als dateiname.html.
Editor – nutze einen Texteditor mit Syntax‑Highlighting (z. B. VS Code, Sublime Text).
Einrückung – halte die Struktur durch Einrückungen lesbar.
Validierung – prüfe dein HTML mit dem W3C‑Validator (validator.w3.org).
CSS einbinden – für das Aussehen später ein separates Stylesheet (<link rel="stylesheet" href="style.css">) verwenden.

Beispiel einer kleinen kompletten Seite

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Mein Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Mein Portfolio</h1>
        <nav>
            <a href="#about">Über mich</a> |
            <a href="#projects">Projekte</a>
        </nav>
    </header>

    <section id="about">
        <h2>Über mich</h2>
        <p>Ich bin Webentwickler und lerne gerade HTML.</p>
    </section>

    <section id="projects">
        <h2>Projekte</h2>
        <ul>
            <li>Website für lokale Bäckerei</li>
            <li>Persönlicher Blog</li>
        </ul>
    </section>

    <footer>
        <p>&copy; 2026 Mein Name</p>
    </footer>
</body>
</html>

Damit hast du die wichtigsten Bausteine von HTML kennengelernt. Viel Spaß beim Experimentieren!

Interaktiver Kurs zu HTML und mehr

Unter khanacademy.org findest du gute interaktive Anleitungen und Tutorials, wie du mit HTML, CSS und JS Webseiten kreieren kannst. Am besten erstellst du gleich ein Konto, um deinen Lernstand online zu speichern.

Du kannst auch im Web oder auf Youtube nach Anleitungen suchen, wie du in Visual Studio Code einfach statische Webseiten erstellen kannst.

Statische Webseite mit Apache bereitstellen​

1. Apache installieren​

2. Standard-Website prüfen​

3. Berechtigungen setzen​

4. Eigene statische Dateien bereitstellen​

Beispiel: Minimale index.html​

Grundlagen von HTML​

Minimaler Aufbau einer HTML‑Seite​

Wichtige HTML‑Elemente​

Überschriften und Absätze​