Website strukturieren und erweitern

Auf Basis der einfachen Landing Page aus U2 bauen Sie jetzt eine vollständige, mehrseitige Website mit Navigation, Design und interaktiven Elementen. Alle Änderungen sind sofort unter https://isa##.edumake.de sichtbar.

Verbindung
SSH-Verbindung wie in U2 herstellen (ssh -p 2222 isa##@edumake.de), dann cd ~/public_html. Nicht vergessen: Eduroam sperrt Port 2222 — WLAN mbm oder Hotspot nutzen.

Zwischenstand: Was habt ihr bereits?

Alle Tandems haben in der ersten Sitzung die Grundstruktur angelegt. Folgendes sollte bei euch vorhanden sein:

5 HTML-Seiten: index.html, kontakt.html, ueber_uns.html, eis_projekt.html, impressum.html
CSS-Datei: css/style.css (auf allen Seiten eingebunden)
JavaScript-Datei: js/script.js
Einheitliche Navigation auf jeder Seite

Was bei vielen noch fehlt

Bevor wir mit Git starten, muss euer Projekt auf den Stand der Best-Practice-Struktur gebracht werden. Prüft die folgenden Punkte und arbeitet ab, was bei euch noch fehlt.

Zielstruktur (zur Erinnerung)

Verzeichnisbaum

~/public_html/
├── index.html
├── kontakt.html
├── ueber_uns.html
├── eis_projekt.html
├── impressum.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── img/
│   ├── gruppenbild.jpg
│   └── logo.svg
└── assets/
    └── projektinfo.pdf

Aufgabe 1: Dateistruktur aufräumen

Bei einigen Tandems liegen Dateien am falschen Ort. Prüft und korrigiert das:

style.css gehört in den Ordner css/, nicht ins Hauptverzeichnis
script.js gehört in den Ordner js/
Keine HTML-Dateien im css/-Ordner!
.save-Dateien und Duplikate löschen (entstehen durch nano)

Verschiebt falsch platzierte Dateien mit mv:

Shell

# Beispiel: style.css ins richtige Verzeichnis verschieben
mv style.css css/style.css

# script.js ins richtige Verzeichnis verschieben
mv script.js js/script.js

# .save-Dateien und Backups loeschen
rm -f *.save *~
rm -f css/*.save js/*.save

Prüft danach, ob die Verlinkung in euren HTML-Dateien noch stimmt:

HTML

<!-- Im <head> jeder Seite -->
<link rel="stylesheet" href="css/style.css">

<!-- Vor dem schliessenden </body> -->
<script src="js/script.js"></script>

Tipp: Prüft mit ls -la in jedem Ordner, ob dort nur die richtigen Dateien liegen. Mit find ~/public_html -name "*.save" findet ihr alle überflüssigen Backup-Dateien.

Aufgabe 2: Bilder & Fotogalerie

Die meisten Websites haben noch keine Bilder. Erstellt den Ordner img/ (falls nicht vorhanden) und füllt ihn:

Shell

# Ordner anlegen (falls noch nicht vorhanden)
mkdir -p img

# Bilder vom Laptop auf den Server kopieren (auf dem Laptop ausfuehren!)
scp -P 2222 bild1.jpg isa##@edumake.de:~/public_html/img/
scp -P 2222 bild2.jpg isa##@edumake.de:~/public_html/img/

Bindet die Bilder in einer eurer Seiten ein – z. B. als Galerie auf eis_projekt.html:

HTML

<h2>Fotogalerie</h2>
<div class="galerie">
  <img src="img/bild1.jpg" alt="Beschreibung Bild 1">
  <img src="img/bild2.jpg" alt="Beschreibung Bild 2">
  <img src="img/bild3.jpg" alt="Beschreibung Bild 3">
</div>

Passende CSS-Regeln für die Galerie in css/style.css:

CSS

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.galerie img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.galerie img:hover {
  transform: scale(1.03);
}

Optional: Lightbox-Effekt – Klick auf ein Bild öffnet es vergrößert. Fügt das in js/script.js ein:

JavaScript

document.querySelectorAll('.galerie img').forEach(img => {
  img.addEventListener('click', () => {
    const overlay = document.createElement('div');
    overlay.style.cssText =
      'position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;' +
      'align-items:center;justify-content:center;cursor:pointer;z-index:999';
    const big = document.createElement('img');
    big.src = img.src;
    big.style.maxWidth = '90vw';
    big.style.maxHeight = '90vh';
    overlay.appendChild(big);
    overlay.addEventListener('click', () => overlay.remove());
    document.body.appendChild(overlay);
  });
});

Aufgabe 3: PDF-Download einrichten

Legt eine PDF-Datei im Ordner assets/ ab und verlinkt sie. Das kann z. B. eine Projektbeschreibung, ein Steckbrief oder ein beliebiges Dokument sein.

Shell

# Ordner anlegen (falls noch nicht vorhanden)
mkdir -p assets

# PDF vom Laptop auf den Server kopieren
scp -P 2222 projektinfo.pdf isa##@edumake.de:~/public_html/assets/

Download-Link in einer eurer Seiten einfügen:

HTML

<a href="assets/projektinfo.pdf" download>Projektinfo herunterladen (PDF)</a>

Das Attribut download sorgt dafür, dass der Browser die Datei herunterlädt statt sie im Tab zu öffnen.

Aufgabe 4: Logo & Favicon

Erstellt ein einfaches Logo (z. B. mit Canva) und ein Favicon für den Browser-Tab:

Shell

# Logo und Favicon hochladen
scp -P 2222 logo.svg isa##@edumake.de:~/public_html/img/
scp -P 2222 favicon.png isa##@edumake.de:~/public_html/img/

HTML

<!-- Im <head> jeder Seite -->
<link rel="icon" href="img/favicon.png" type="image/png">

<!-- Logo im Header -->
<img src="img/logo.svg" alt="Logo" style="height: 40px;">

Aufgabe 5: Impressum prüfen

Jede öffentlich erreichbare Website braucht ein Impressum. Prüft, ob eures vollständig ist:

HTML

<main>
  <h1>Impressum</h1>
  <p>Verantwortlich: [Euer Name]</p>
  <p>E-Mail: [Eure Hochschul-E-Mail]</p>
  <p>Diese Website ist ein Lernprojekt im Rahmen der Lehrveranstaltung
     „Entwicklung interaktiver Softwareanwendungen“ an der PH Weingarten.</p>
</main>

Checkliste vor Git

Bevor wir in der nächsten Aufgabe mit Git starten, sollte euer Projekt diese Punkte erfüllen:

Kriterium	Erledigt?
5 HTML-Seiten vorhanden (index, kontakt, ueber_uns, eis_projekt, impressum)
`css/style.css` existiert und ist auf allen Seiten eingebunden
`js/script.js` existiert und ist eingebunden
Navigation auf jeder Seite vorhanden und funktioniert
Ordner `img/` mit mindestens einem Bild
Ordner `assets/` mit einer PDF-Datei (Download-Link vorhanden)
Keine Dateien am falschen Ort (`.save`, HTML in `css/` etc.)
Impressum vollständig

Wichtig: Bringt euer Projekt auf diesen Stand, bevor wir mit Git starten. Danach versionieren wir das gesamte Projekt – eine saubere Ausgangslage spart später Probleme.

Structuring and Extending a Website

Building on the simple landing page from U2, you will now create a complete multi-page website with navigation, design and interactive elements. All changes are immediately visible at https://isa##.edumake.de.

Connection
Connect via SSH as in U2 (ssh -p 2222 isa##@edumake.de), then cd ~/public_html. Remember: Eduroam blocks port 2222 — use Wi-Fi mbm or a hotspot.

Status Check: What do you already have?

All tandems have created the basic structure in the first session. You should already have:

5 HTML pages: index.html, kontakt.html, ueber_uns.html, eis_projekt.html, impressum.html
CSS file: css/style.css (linked on all pages)
JavaScript file: js/script.js
Consistent navigation on every page

What many are still missing

Before we start with Git, your project needs to match the best-practice structure. Check the following points and complete what is still missing.

Target Structure (reminder)

Directory Tree

~/public_html/
├── index.html
├── kontakt.html
├── ueber_uns.html
├── eis_projekt.html
├── impressum.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── img/
│   ├── group_photo.jpg
│   └── logo.svg
└── assets/
    └── project_info.pdf

Task 1: Clean up file structure

Some tandems have files in the wrong place. Check and fix:

style.css belongs in the css/ folder, not in the root directory
script.js belongs in the js/ folder
No HTML files in the css/ folder!
Delete .save files and duplicates (created by nano)

Move misplaced files with mv:

Shell

# Example: move style.css to the correct directory
mv style.css css/style.css

# Move script.js to the correct directory
mv script.js js/script.js

# Delete .save files and backups
rm -f *.save *~
rm -f css/*.save js/*.save

Then check that the links in your HTML files still work:

HTML

<!-- In the <head> of every page -->
<link rel="stylesheet" href="css/style.css">

<!-- Before the closing </body> -->
<script src="js/script.js"></script>

Tip: Use ls -la in each folder to check that only the correct files are there. Use find ~/public_html -name "*.save" to find all unnecessary backup files.

Task 2: Images & Photo Gallery

Most websites have no images yet. Create the img/ folder (if missing) and add content:

Shell

# Create folder (if not already present)
mkdir -p img

# Copy images from laptop to server (run on your laptop!)
scp -P 2222 image1.jpg isa##@edumake.de:~/public_html/img/
scp -P 2222 image2.jpg isa##@edumake.de:~/public_html/img/

Embed the images on one of your pages – e.g. as a gallery on eis_projekt.html:

HTML

<h2>Photo Gallery</h2>
<div class="gallery">
  <img src="img/image1.jpg" alt="Description image 1">
  <img src="img/image2.jpg" alt="Description image 2">
  <img src="img/image3.jpg" alt="Description image 3">
</div>

CSS rules for the gallery in css/style.css:

CSS

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.gallery img:hover {
  transform: scale(1.03);
}

Optional: lightbox effect – clicking an image opens it enlarged. Add to js/script.js:

JavaScript

document.querySelectorAll('.gallery img').forEach(img => {
  img.addEventListener('click', () => {
    const overlay = document.createElement('div');
    overlay.style.cssText =
      'position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;' +
      'align-items:center;justify-content:center;cursor:pointer;z-index:999';
    const big = document.createElement('img');
    big.src = img.src;
    big.style.maxWidth = '90vw';
    big.style.maxHeight = '90vh';
    overlay.appendChild(big);
    overlay.addEventListener('click', () => overlay.remove());
    document.body.appendChild(overlay);
  });
});

Task 3: Set up PDF download

Place a PDF file in the assets/ folder and link to it. This can be a project description, a profile or any other document.

Shell

# Create folder (if not already present)
mkdir -p assets

# Copy PDF from laptop to server
scp -P 2222 project_info.pdf isa##@edumake.de:~/public_html/assets/

Add a download link on one of your pages:

HTML

<a href="assets/project_info.pdf" download>Download Project Info (PDF)</a>

The download attribute makes the browser download the file instead of opening it in a tab.

Task 4: Logo & Favicon

Create a simple logo (e.g. with Canva) and a favicon for the browser tab:

Shell

# Upload logo and favicon
scp -P 2222 logo.svg isa##@edumake.de:~/public_html/img/
scp -P 2222 favicon.png isa##@edumake.de:~/public_html/img/

HTML

<!-- In the <head> of every page -->
<link rel="icon" href="img/favicon.png" type="image/png">

<!-- Logo in header -->
<img src="img/logo.svg" alt="Logo" style="height: 40px;">

Task 5: Check imprint

Every publicly accessible website needs an imprint. Check that yours is complete:

HTML

<main>
  <h1>Impressum</h1>
  <p>Responsible: [Your Name]</p>
  <p>Email: [Your university email]</p>
  <p>This website is a learning project as part of the course
     "Development of Interactive Software Applications" at PH Weingarten.</p>
</main>

Checklist before Git

Before we start with Git in the next task, your project should meet these criteria:

Criterion	Done?
5 HTML pages present (index, kontakt, ueber_uns, eis_projekt, impressum)
`css/style.css` exists and is linked on all pages
`js/script.js` exists and is linked
Navigation on every page present and working
`img/` folder with at least one image
`assets/` folder with a PDF file (download link present)
No files in wrong places (`.save`, HTML in `css/` etc.)
Imprint complete

Important: Get your project to this state before we start with Git. We will then version the entire project – a clean starting point saves problems later.

Next Exercise Sheet