Aufgabe 2: CSS-Integration und Aufräumung von HTML-Dateien

In dieser Aufgabe werden Sie lernen, wie man Inline-CSS aus HTML-Dateien in eine externe CSS-Datei überträgt. Dies verbessert die Wartbarkeit der Webseite und reduziert Redundanzen.

Einleitung

Redundanz zu reduzieren ist ein Hauptziel der Datenkomprimierung. Redundante Daten unterstützen zwar die Fehlererkennung und Fehlerkorrektur, sollten aber zur Effizienzsteigerung minimiert werden. CSS (Cascading Style Sheets) helfen dabei, HTML-Code zu optimieren, indem wiederkehrende Stilinformationen zentral verwaltet werden.

HTML 
<html>
<body>
<h1 style="font-family: Arial; font-size: 30px; color: red;">Wartungsseite</h1>
<p style="font-family: Arial; font-size: 16px; color: black;">Diese Homepage wird erstellt von Name</p>
<h2 style="font-family: Arial; font-size: 24px; color: orange;">Bitte habe noch etwas Geduld, die Homepage befindet sich noch in der Entstehung</h2>
<p style="font-family: Arial; font-size: 16px; color: black;"><a href="kontakt.html">Hier könnt ihr mich kontaktieren</a></p>
</body>
</html>

Schritte zur Aufgabe

  1. Öffnen Sie den Online-FTP-Client und navigieren Sie zu Ihrem persönlichen Verzeichnis. Die Ordnerstruktur wurde bereits durch das Entpacken der Datei 'homepage.zip' im vorherigen Schritt erstellt.
  2. Erstellen Sie eine neue Datei in dem Ordner 'assets/css/' und benennen Sie diese 'stylesheet.css'.
  3. Verknüpfen Sie das Stylesheet in der 'index.html' und 'kontakt.html' wie folgt:
    HTML 
    <link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css">
  4. Entfernen Sie alle Inline-Styles aus der 'index.html' und 'kontakt.html' und fügen Sie diese in die 'stylesheet.css' ein.
  5. Überprüfen Sie die Änderungen im Browser, um sicherzustellen, dass die Webseiten korrekt dargestellt werden.

Personalisierung der Start- und Kontaktseite

Personalisieren Sie die Start- und Kontaktseite Ihrer Webseite, um sie einzigartiger zu gestalten. Laden Sie Screenshots Ihrer personalisierten Seiten im Padlet hoch. Geben Sie außerdem die URL zu Ihrem Ordner auf dem Server im Padlet an, um zu zeigen, dass Sie die Aufgabe erfolgreich abgeschlossen haben.