Homepage

Aufgabe

Erstellen Sie eine einfache Homepage mit HTML, CSS und JavaScript.

Hintergrund

Das Internet hat unglaubliche Dinge ermöglicht: Wir können Suchmaschinen nutzen, um alles Vorstellbare zu recherchieren, mit Freunden und Familienmitgliedern auf der ganzen Welt kommunizieren, Spiele spielen, Onlinekurse belegen und vieles mehr. Aber es stellt sich heraus, dass fast alle Seiten, die wir besuchen, auf drei Kernsprachen basieren, die jeweils einen leicht unterschiedlichen Zweck erfüllen:

HTML (Hypertext Markup Language), wird verwendet, um den Inhalt von Websiten zu beschreiben;
CSS (Cascading Style Sheets), wird verwendet, um die Ästhetik von Websites zu gestalten;
JavaScript, welche verwendet wird, um Websiten interaktiv und dynamisch zu machen.

Erstellen Sie eine einfache Homepage, auf der Sie sich selbst, Ihr Lieblingshobby, eine außerschulische Aktivität oder etwas anderes, das Sie interessiert, vorstellen.

Bevor Sie beginnen

Melden Sie sich bei cs50.dev an, klicken Sie auf Ihr Terminalfenster und führen Sie cd aus. Die Eingabeaufforderung Ihres Terminalfensters sollte ungefähr wie folgt aussehen:

Führen Sie als Nächstes folgenden Befehl aus:

wget https://inf.zone/download/exercises/08/homepage.zip

um eine ZIP-Datei namens homepage.zip in Ihren Codespace herunterzuladen.

Führen Sie dann aus:

unzip homepage.zip

um einen Ordner namens homepage zu erstellen. Die ZIP-Datei wird nun nicht mehr benötigt. Daher können Sie ausführen:

rm homepage.zip

und mit „y“ gefolgt von Enter auf die Aufforderung antworten, um die heruntergeladene ZIP-Datei zu löschen.

Geben Sie nun ein:

cd homepage

gefolgt von Enter, um in dieses Verzeichnis zu wechseln (d.h. es zu öffnen). Ihre Eingabeaufforderung sollte jetzt ungefähr so aussehen:

homepage/ $

Führen Sie ls alleine aus, und Sie sollten einige Dateien sehen:

index.html  styles.css

Falls Sie auf Probleme stoßen, wiederholen Sie die gleichen Schritte und prüfen Sie, wo ein Fehler passiert sein könnte! Sie können sofort einen Server starten, um Ihre Website anzuzeigen, indem Sie im Terminalfenster ausführen:

http-server

Klicken Sie dann mit der Befehls-Taste (auf einem Mac) oder mit der Strg-Taste (auf einem PC) auf den ersten angezeigten Link:

http-server running on 'LINK'

wobei LINK die Adresse Ihres Servers ist.

Implementierungs Details

Implementieren Sie in Ihrem Homepage-Verzeichnis eine Website, die folgende Anforderungen erfüllt:

Ihre Website muss mindestens vier verschiedene .html-Seiten enthalten, darunter eine index.html (die Hauptseite Ihrer Website). Es sollte möglich sein, von jeder Seite Ihrer Website zu jeder anderen Seite zu gelangen, indem man einem oder mehreren Hyperlinks folgt.
Verwenden Sie mindestens zehn (10) verschiedene HTML-Tags, zusätzlich zu <html>, <head>, <body> und <title>. Die mehrfache Verwendung eines Tags (z.B. <p>) zählt trotzdem nur als eines dieser zehn Tags.
Fügen Sie in den <head> Ihrer Seiten folgenden Code ein, um Ihre eigene CSS-Datei zu verlinken:

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

Erstellen Sie mindestens eine eigene Stylesheet-Datei (styles.css), in der Sie mindestens fünf (5) verschiedene CSS-Selektoren verwenden, z.B. Tag-Selektor (example), Klassen-Selektor (.example) oder ID-Selektor (#example). Nutzen Sie in dieser Datei mindestens fünf (5) verschiedene CSS-Eigenschaften, wie z.B. font-size oder margin.
Integrieren Sie mindestens ein Feature von JavaScript, um Ihre Website interaktiver zu gestalten. Zum Beispiel könnten Sie JavaScript verwenden, um Warnmeldungen hinzuzufügen, Effekte in wiederkehrenden Intervallen zu erzeugen oder Buttons, Dropdowns oder Formulare interaktiv zu machen. Seien Sie kreativ!
Stellen Sie sicher, dass Ihre Website sowohl auf mobilen Geräten als auch auf Laptops und Desktops gut aussieht.

Erstellen Sie eine Textdatei mit dem Namen specification.txt, die Folgendes enthält:

Die 10 HTML-Tags, die Sie verwendet haben.
Die 5 CSS-Eigenschaften, die Sie angewandt haben.
Eine kurze (ein Satz) Beschreibung, wie Sie JavaScript eingesetzt haben.

Testen

Wenn Sie sehen möchten, wie Ihre Webseite aussieht, während Sie daran arbeiten, können Sie den Befehl http-server ausführen. Klicken Sie mit der Befehls- (Mac) oder Steuerungstaste (PC) auf den ersten Link, der von http-server angezeigt wird. Dadurch sollte Ihre Webseite in einem neuen Tab geöffnet werden. Sie können dann diesen Tab aktualisieren, um Ihre neuesten Änderungen zu sehen.

Denken Sie auch daran, dass Sie mit den Entwickler-Tools (Developer Tools) in Google Chrome den Besuch Ihrer Seite auf einem mobilen Gerät simulieren können. Klicken Sie dazu auf das telefonförmige Symbol links neben dem Tab „Elements“ im Fenster der Entwickler-Tools. Alternativ können Sie, wenn die Entwickler-Tools bereits geöffnet sind, die Tastenkombination Strg+Umschalt+M auf einem PC oder Cmd+Umschalt+M auf einem Mac verwenden, anstatt Ihre Seite separat auf einem mobilen Gerät zu besuchen!

Bewertung

Kein check50 für diese Aufgabe! Stattdessen wird die Korrektheit Ihrer Website anhand der Erfüllung der oben genannten Anforderungen der Spezifikation sowie der Struktur und Validität Ihres HTMLs bewertet. Um sicherzustellen, dass Ihre Seiten korrekt sind, können Sie diesen Markup Validation Service verwenden, indem Sie Ihr HTML direkt in das bereitgestellte Textfeld kopieren und einfügen. Achten Sie darauf, alle vom Validator vorgeschlagenen Warnungen oder Fehler zu beseitigen, bevor Sie Ihre Arbeit einreichen!

Berücksichtigen Sie außerdem:

ob die Ästhetik Ihrer Website so gestaltet ist, dass die Navigation für Benutzer intuitiv und einfach ist;
ob Ihr CSS in eine(n) separate(n) CSS-Datei(en) ausgelagert wurde; und
ob Sie Wiederholungen und Redundanzen vermieden haben, indem Sie Stileigenschaften von übergeordneten Tags „kaskadieren“ lassen.

Leider unterstützt style50 keine HTML-Dateien. Daher liegt es an Ihnen, Ihre HTML-Tags sauber einzurücken und auszurichten. Beachten Sie außerdem, dass Sie einen HTML-Kommentar wie folgt erstellen können:

<!-- Kommentar hier -->

Das Kommentieren Ihres HTML-Codes ist jedoch nicht so zwingend erforderlich wie das Kommentieren von Code in beispielsweise C oder Python. CSS-Kommentare in CSS-Dateien können Sie folgendermaßen schreiben:

/* Kommentar hier */

Hilfestellung

Für ausführliche Anleitungen zu den in diesem Problem vorgestellten Sprachen, schauen Sie sich bitte diese Tutorials an:

Trivia