SSH-Verbindung & erste Website

In diesem Übungsblatt verbinden Sie sich zum ersten Mal per SSH mit Ihrem Entwicklungsserver und legen dort eine eigene Webseite an, die sofort öffentlich erreichbar ist.

Voraussetzung
Sie haben Ihren öffentlichen SSH-Schlüssel bereits per Mail übermittelt und eine Bestätigung erhalten, dass Ihr Zugang eingerichtet wurde. Falls nicht, bitte zuerst Übungsblatt 1 abschließen.

Aufgabe 1: SSH-Verbindung herstellen

Netzwerkzugang

Die Verbindung zum Server läuft über SSH-Port 2222. Dieser Port ist im Eduroam-Netz gesperrt. Nutzen Sie stattdessen:

💡 Veranstaltungs-WLAN „mbm" (Passwort im Moopaed-Kurs)
📱 Persönlichen Hotspot vom Smartphone
🖥️ Die bereitgestellten iMacs in den Laborräumen

Bitte Cloud-Synchronisation deaktivieren, wenn Sie das Veranstaltungs-WLAN nutzen, um Bandbreite zu sparen.

Verbinden

Ihr Benutzername ist Ihre Teamkennung isa## (z. B. isa7). Ersetzen Sie isa## durch Ihre eigene Kennung.

macOS & Linux

Shell

ssh -p 2222 isa##@edumake.de

Windows (PowerShell)

PowerShell

ssh -p 2222 isa##@edumake.de

Windows (PuTTY)

PuTTY starten, Hostname edumake.de, Port 2222.
Connection → SSH → Auth → Credentials: Private-Key-Datei (.ppk) auswählen.
Optional: Sitzung speichern, dann auf Open klicken.

Verbindung prüfen

Nach erfolgreichem Login erscheint die Server-Begrüßung und ein Prompt wie isa##@iss-sose25:~$. Prüfen Sie kurz, was in Ihrem Home-Verzeichnis liegt:

Shell

ls -la

Sie sehen dort einen Ordner public_html — das ist Ihr Webverzeichnis.

Aufgabe 2: Eigene Website erstellen

Ins Webverzeichnis wechseln

Alle Dateien, die Sie hier ablegen, sind sofort unter https://isa##.edumake.de erreichbar.

Shell

cd ~/public_html

index.html anlegen

Öffnen Sie den Editor nano, um eine neue Datei zu erstellen:

Shell

nano index.html

Fügen Sie folgenden Inhalt ein — das ist eine vollständige, funktionsfähige HTML-Seite:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine Website</title>
</head>
<body>
  <h1>Willkommen!</h1>
  <p>Meine erste Seite auf dem Server.</p>
</body>
</html>

Speichern: Strg+O → Enter → Strg+X zum Schließen.

Im Browser aufrufen

Öffnen Sie https://isa##.edumake.de im Browser. Die Seite sollte sofort erscheinen — kein Neustart nötig.

CSS hinzufügen

Erstellen Sie eine CSS-Datei für das Design:

Shell

nano style.css

CSS

body {
  font-family: sans-serif;
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
  color: #1e293b;
}

h1 {
  color: #2563eb;
}

Verknüpfen Sie die CSS-Datei in Ihrer index.html im <head>-Bereich:

HTML

<link rel="stylesheet" href="style.css">

JavaScript hinzufügen

Erstellen Sie eine JavaScript-Datei für Interaktivität:

Shell

nano script.js

JavaScript

console.log("Meine Seite läuft!");

Verknüpfen Sie das Script am Ende von index.html vor </body>:

HTML

<script src="script.js"></script>

Öffnen Sie die Browser-Konsole (F12 → Console), um die Ausgabe zu sehen.

Erweiterungsideen

Navigation mit mehreren HTML-Seiten (kontakt.html, ueber-mich.html)
Responsive Design mit CSS Media Queries
Einfache JS-Interaktion: Button, der Text ändert oder eine Farbe wechselt

nächstes Übungsblatt

SSH Connection & First Website

In this exercise sheet you will connect to your development server via SSH for the first time and deploy a website that is immediately publicly accessible.

Prerequisite
You have already submitted your public SSH key by email and received confirmation that your access has been set up. If not, please complete Exercise Sheet 1 first.

Task 1: Establish SSH Connection

Network Access

The server uses SSH port 2222. This port is blocked on Eduroam. Use one of these instead:

💡 Course Wi-Fi "mbm" (password in Moopaed course)
📱 Personal smartphone hotspot
🖥️ The provided iMacs in the lab rooms

Please disable cloud sync when using the course Wi-Fi to save bandwidth.

Connect

Your username is your team identifier isa## (e.g. isa7). Replace isa## with your own identifier.

macOS & Linux

Shell

ssh -p 2222 isa##@edumake.de

Windows (PowerShell)

PowerShell

ssh -p 2222 isa##@edumake.de

Windows (PuTTY)

Open PuTTY, set hostname edumake.de and port 2222.
Connection → SSH → Auth → Credentials: select your private key file (.ppk).
Optionally save the session, then click Open.

Verify the Connection

After a successful login you will see a server welcome message and a prompt like isa##@iss-sose25:~$. Check what's in your home directory:

Shell

ls -la

You will see a folder called public_html — that is your web directory.

Task 2: Create Your Website

Navigate to the Web Directory

Any files you place here are immediately accessible at https://isa##.edumake.de.

Shell

cd ~/public_html

Create index.html

Open the nano editor to create a new file:

Shell

nano index.html

Paste the following content — this is a complete, working HTML page:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <h1>Welcome!</h1>
  <p>My first page on the server.</p>
</body>
</html>

Save: Ctrl+O → Enter → Ctrl+X to close.

Open in the Browser

Visit https://isa##.edumake.de in your browser. The page should appear immediately — no restart needed.

Add CSS

Create a CSS file for styling:

Shell

nano style.css

CSS

body {
  font-family: sans-serif;
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
  color: #1e293b;
}

h1 {
  color: #2563eb;
}

Link the CSS file in your index.html inside the <head>:

HTML

<link rel="stylesheet" href="style.css">

Add JavaScript

Create a JavaScript file for interactivity:

Shell

nano script.js

JavaScript

console.log("My page is running!");

Link the script at the end of index.html before </body>:

HTML

<script src="script.js"></script>

Open the browser console (F12 → Console) to see the output.

Ideas for Extension

Navigation with multiple HTML pages (contact.html, about.html)
Responsive design with CSS media queries
Simple JS interaction: a button that changes text or toggles a color

Next Exercise Sheet

Entwicklung interaktiver Softwareanwendungen

SSH-Verbindung & erste Website

Aufgabe 1: SSH-Verbindung herstellen

Netzwerkzugang

Verbinden

macOS & Linux

Windows (PowerShell)

Windows (PuTTY)

Verbindung prüfen

Aufgabe 2: Eigene Website erstellen

Ins Webverzeichnis wechseln

index.html anlegen

Im Browser aufrufen

CSS hinzufügen

JavaScript hinzufügen

Erweiterungsideen

SSH Connection & First Website

Task 1: Establish SSH Connection

Network Access

Connect

macOS & Linux

Windows (PowerShell)

Windows (PuTTY)

Verify the Connection

Task 2: Create Your Website

Navigate to the Web Directory

Create index.html

Open in the Browser

Add CSS

Add JavaScript

Ideas for Extension