Mehrere Seiten mit Navigation

This is an old revision of the document!

Auf Ihrem Computer, in einem geeigneten Verzeichnis (idealerweise dort, wo Sie schon andere Verzeichnisse mit Webseiten gespeichert haben) legen Sie ein neues Verzeichnis mit einem kurzen Namen wie z.B. cool an.
Öffnen Sie dieses Verzeichnis mit Visual Studio Code (File → Open Folder)

Im Ordner cool, legen Sie eine neue Datei index.html an.
Lassen Sie durch Eingabe vom Ausrufezeichen !, (Emmet Abbreviation) die Grundstruktur einer Seite erzeugen.
Ändern Sie den Titel der Seite auf z.B. Startseite, oder Willkomen bei …
Ändern Sie im HTML-Code gegebenenfalls die Sprache von en auf de.
Bauen Sie die Navigation, zwischen dem öffnenden <body>-Tag und dem schliessenden </body>-Tag wie folgt ein:

    <nav>
        <ul>
            <li> <a href="index.html">Startseite</a> </li>
            <li> <a href="kontakt.html">Kontakt</a> </li>
        </ul>
    </nav>

Fügen Sie dann unmittelbar nach dem schliessenden </nav>-Tag einen minimalen Inhalt wie folgt ein:

   <main>
        <h1>Willkommen</h1>
        Willkommen
    </main>

Und zuletzt (unmittelbar vor den schliessenden </body>-Tag noch eine Fusszeile:

 <footer>
        Super coole Fusszeile
    </footer>

Datei speichern, auf den Server laden, online anschauen (sieht zugegebenermassen ziemlich lahm aus).

Kopieren Sie die Datei index.html als kontakt.html.
Passen Sie die Titel und Texte in kontakt.html entsprechend an.
Speichern, hochladen, testen.

Gerade wenn man kleinere Änderungen vornimmt, ist das Hochladen auf den Server und Neuladen der Seite im Browser etwas umständlich. Wir werden deswegen die “Live-Server”-Extension verwenden, damit Sie lokal auf Ihrem Computer einen Webserver betreiben können. Zusätzlich fügt diese Erweiterung Ihrer Seite ein Programm hinzu, das die Seite automatisch neu lädt, sobald sich eine Datei ändert.

Öffnen Sie die Extensions in VS-Code:
Suche Sie dort nach Live Server und installieren Sie die Extension.
Zurück im Editor, Rechts-Klick auf index.html und wählen Sie Open with Live Server):
Die Webadresse ist von Ihrem Server ist http://127.0.0.1:5500/index.html, wobei die IP-Adresse 127.0.0.1 immer auf den eigenen Computer verweist.
Machen Sie eine Änderung an der angezeigten Seite und speichern Sie. Diese Änderung sollte sofort sichtbar sein.

Unmittelbar vor dem schliessenden </head>-Tag, fügen Sie folgende Zeile ein:

Halten Sie dann die Ctrl-Taste gedrückt und klicken Sie im HTML-Code auf style.css. Bestätigen Sie, dass die Datei neu angelegt werden soll.
Fügen Sie in der Datei style.css folgende Code hinzu, um die Punkte von der Liste zu entfernen (d.h. von allen <ul> Elementen, die innerhalb eines <nav> Elements sind).

nav ul {
    list-style-type: none;   /* Keine Bullets */
    margin: 0;               /* Keinen äusseren Abstand */
    padding: 0;              /* Keinen inneren Abstand */
    overflow: hidden;        /* ?? Ohne das gibt es keinen Zeilenumbruch */ 
}

Speichern Sie alle Dateien (File → Save All) und betrachten Sie das Resultat (evtl. ordnen Sie die Fenster nebeneinander oder untereinander an, Win+← und Win+→
Damit die <li>-Elemente nebeneinander erscheinen, fügen Sie folgenden Code in style.css hinzu (bezieht sich auf alle <li>-Elemente innerhalb eines <nav>-Elements):

nav li {
   float: left;         /* Elemente nebeneinander */ 
}

Speichern Sie mit Ctrl+S und betrachten Sie die Änderungen.
Die Links sollen nicht mehr unterstrichen sein, und etwas mehr Platz kriegen:

nav a {
    text-decoration: none;      /* Links nicht mehr unterstreichen */
    padding: 1em 2em;           /* Oben/Unten 1x Schriftgrösse Platz, Links/Rechts 2x Schriftgrösse Platz */
    display: block;             /* Damit die Ränder auch ihren Platz bekommen */
}

Speichern, anschauen.
Jetzt soll es farbig(er) werden. Das <ul> Element soll einen schwarzen Hintergrund kriegen, z.B. mit

   background-color: black;

Die <a> Element im <nav> sollen einen dunkelorangen Hintergrund kriegen, mit weisser Schrift:

    background-color: #604000;   /* Dunkles Orange */
    color: white;                /* Weisse Schrift */

Wenn der Mauszeiger über einem Link in der Navigation ist, sollen Hintergrund und Textfarbe angepasst werden:

nav a:hover {
    background-color: orange;
    color:black;
}

Zuletzt wäre es noch toll, den Menu-Punkt der aktuellen Seite anders zu formatieren. Dazu definieren wir in der Datei style.css eine Klasse aktiv:

.aktiv {
    font-weight: bold;             /* Fette Schrift */
    background-color: #008000;   /* Dunkelgrün */
}

In der Datei index.html im Link auf die Startseite für wir noch das Attribute class=“aktiv” ein:

<li> <a class="aktiv" href="index.html">Startseite</a> </li>

Mehrere Seiten mit Navigation

Vorbereitung

Grundstuktur für index.html

kontakt.html

Effizienter Arbeiten mit Live-Server

Mit style

https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG