Persönliche Webseite anpassen (HTML-Anleitung)

Diese Anleitung beschreibt, wie Benutzerinnen und Benutzer ihre persönliche Webseite auf dem Synology-Server bearbeiten und gestalten können. Die Webseite liegt im Verzeichnis /home/www/ und besteht in der Regel aus einer Datei namens index.html.

Zugriff auf die Webseite

Um die Webseite zu bearbeiten, öffnen Sie die Datei:

/home/www/index.html

Diese Datei ist der Startpunkt Ihrer persönlichen Internetseite. Sie kann mit jedem Texteditor (z. B. Visual Studio Code, Notepad++, TextEdit oder Synology File Editor) bearbeitet werden.

Aufbau der Datei

Eine einfache Beispielstruktur sieht wie folgt aus:

<source lang="html">
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Willkommen auf deiner Webseite</title>
</head>
<body>

        <img src="profilbild.png" alt="Dein Profilbild" class="profile-img">

Willkommen!

Dies ist deine persönliche Webseite!

</body>
</html>
</source>

Diese Grundstruktur besteht aus drei Hauptteilen:

<head>...</head> – enthält Metadaten, den Seitentitel und CSS-Stile.
<body>...</body> – enthält den eigentlichen Inhalt (Text, Bilder usw.).
CSS – bestimmt das Aussehen (Farben, Abstände, Schriftarten usw.).

Bild anpassen oder austauschen

Neues Bild einfügen

Um ein anderes Bild anzuzeigen, ersetzen Sie den Dateinamen im folgenden Abschnitt:

<source lang="html">
<img src="profilbild.png" alt="Dein Profilbild" class="profile-img">
</source>

Beispiel: Wenn Sie z. B. ein Foto urlaub.jpg verwenden möchten, speichern Sie dieses im gleichen Ordner (/home/www/) und ändern Sie die Zeile zu:

<source lang="html">
<img src="urlaub.jpg" alt="Urlaubsfoto" class="profile-img">
</source>

Das alt-Attribut beschreibt das Bild – dieser Text wird angezeigt, falls das Bild nicht geladen werden kann.

Bildgröße verändern

Die Größe des Bildes wird in der Regel über CSS festgelegt. In diesem Beispiel wird eine maximale Höhe von 300 Pixeln eingestellt:

<source lang="css">
.profile-img {
    max-height: 300px;
    width: auto;
    border-radius: 50%;
}
</source>

Um das Bild rechteckig und größer darzustellen, ändern Sie z. B.:

<source lang="css">
.profile-img {
    max-height: 400px;
    border-radius: 0;
}
</source>

Rand oder Rahmenfarbe ändern

Die aktuelle Definition lautet:

<source lang="css">
border: 4px solid #007bff;
</source>

Hierbei ist #007bff ein Blauton. Wenn Sie z. B. einen roten Rahmen wünschen:

<source lang="css">
border: 4px solid red;
</source>

Text anpassen

Texte befinden sich in den <h1>- und <p>-Elementen:

<source lang="html">

Willkommen!

Dies ist deine persönliche Webseite!

</source>

Sie können die Inhalte einfach ersetzen, z. B.:

<source lang="html">

Hallo, ich bin Maria!

Willkommen auf meiner Seite über Reisen und Fotografie.

</source>

Farben ändern

Farben sind in der Regel im CSS-Block unter <style> definiert.

Beispiel:

<source lang="css">
body {
    background-color: #f4f4f4;
    color: #333;
}
</source>

Um einen dunklen Hintergrund mit heller Schrift zu erhalten:

<source lang="css">
body {
    background-color: #222;
    color: #f4f4f4;
}
</source>

Vorschau der Änderungen

Nach dem Speichern der Datei index.html können Sie die Seite im Browser neu laden (z. B. mit F5 oder Strg + R). Die Änderungen sind sofort sichtbar.

Tipps

Verwenden Sie einfache Dateinamen (ohne Leerzeichen, z. B. meinbild.jpg).
Achten Sie auf korrekte Groß- und Kleinschreibung bei Dateinamen.
Falls die Webseite nicht korrekt angezeigt wird, prüfen Sie mit einem Browser wie Firefox oder Chrome den Quelltext (Rechtsklick → Seitenquelltext anzeigen).

Siehe auch