lehrkraefte:blc:informatik:glf24:web:webseite-mit-navigation [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Mehrere Seiten mit Navigation ======
===== Vorbereitung =====
  * 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)

==== Grundstuktur für index.html ====
  * 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:
<code html>
    <nav>
        <ul>
            <li> <a href="index.html">Startseite</a> </li>
            <li> <a href="kontakt.html">Kontakt</a> </li>
        </ul>
    </nav>
</code>
  * Fügen Sie dann unmittelbar nach dem schliessenden ''</nav>''-Tag einen minimalen Inhalt wie folgt ein:
<code html>
   <main>
        <h1>Willkommen</h1>
        Willkommen
    </main>
</code>
  * Und zuletzt (unmittelbar vor den schliessenden ''</body>''-Tag noch eine Fusszeile:
<code html>
 <footer>
        Super coole Fusszeile
    </footer>
</code>
  * Datei speichern, auf den Server laden, online anschauen (sieht zugegebenermassen ziemlich lahm aus).

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

===== Effizienter Arbeiten mit Live-Server =====
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: {{:lehrkraefte:blc:informatik:glf24:web:pasted:20250429-075222.png}}
  * 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''): {{:lehrkraefte:blc:informatik:glf24:web:pasted:20250429-075710.png}}
  * 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.
  * Ordnen Sie das Browser-Fenster mit <key>Windows</key><key>Right</key> rechts auf dem Bildschirm an, und VS-Code mit <key>Windows</key><key>Left</key> links.
  * Machen Sie eine Änderung im HTML-Code der Seite und speichern Sie. Diese Änderung sollte sofort im Browser sichtbar sein.

===== Mit style =====
  * Unmittelbar vor dem schliessenden ''</head>''-Tag, fügen Sie folgende Zeile ein:
<code html>
   <link rel="stylesheet" href="style.css">
</code>
  * Halten Sie dann die <key>Ctrl</key>-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).
<code css>
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 */ 
}
</code>
  * Speichern Sie alle Dateien (File -> Save All) und betrachten Sie das Resultat (evtl. ordnen Sie die Fenster nebeneinander oder untereinander an, <key>Win</key>+<key>Left</key> und <key>Win</key>+<key>Right</key>
  * 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):
<code css>
nav li {
   float: left;         /* Elemente nebeneinander */ 
}
</code>
  * Speichern Sie mit <key>Ctrl</key>+<key>s</key> und betrachten Sie die Änderungen.
  * Die Links sollen nicht mehr unterstrichen sein, und etwas mehr Platz kriegen:
<code css>
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 */
}
</code>
  * Speichern, anschauen.
  * Jetzt soll es farbig(er) werden. Das ''<ul>'' Element soll einen schwarzen Hintergrund kriegen, z.B. mit
<code css>
   background-color: black;   
</code>
  * Die ''<a>'' Element im ''<nav>'' sollen einen dunkelorangen Hintergrund kriegen, mit weisser Schrift:
<code css>
    background-color: #604000;   /* Dunkles Orange */
    color: white;                /* Weisse Schrift */
</code>
  * Wenn der Mauszeiger über einem Link in der Navigation ist, sollen Hintergrund und Textfarbe angepasst werden:
<code css>
nav a:hover {
    background-color: orange;
    color:black;
}
</code>
  * 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'':
<code css>
.aktiv {
    font-weight: bold;             /* Fette Schrift */
    background-color: #008000;   /* Dunkelgrün */
}
</code>
  * In der Datei ''index.html'' im Link auf die Startseite für wir noch das Attribute ''class="aktiv"'' ein:
<code html>
<li> <a class="aktiv" href="index.html">Startseite</a> </li>
</code>

Wer später noch mehr an der Navigation "basteln" möchte, sei auf diese Seite und deren Unterseiten verwiesen: https://www.w3schools.com/css/css_navbar.asp

===== Footer =====
  * Der Footer gehört ans Seiten-Ende. Fügen Sie folgenden Code der Datei ''style.css'' hinzu:
<code css>
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #F1F1F1;
    text-align: center;
    padding: 10px;
}
</code>
===== body =====
Um Formatierungen für die ganze Seite festzulegen, kann das ''<body>''-Element "gestylet" werden (am besten am Anfang der Datei ''style.css'' einfügen):
<code css>
body {
    padding:0;
    margin:0;
    font-family: sans-serif;
    background-color: #fff9e0;
}
</code>

===== Navigationsmenu nur an einem Ort =====
Es ist mühsam, das Navigationsmenü auf allen Seiten nachzuführen. Praktischer ist es, das an einem Ort zu haben. Dazu werden wir das Menü mit einem kleinen Programmcode generieren:
  * Fügen Sie in der Datei ''index.html'' vor dem schliessenden ''</head>''-Tag folgende Zeile ein:
<code html>
  <script src="navmenu.js"></script>
</code>
  * Ctrl-Klick im HTML-Code auf navmenu.js, Datei kreieren.
  * Folgenden Code in navmenu.js speichern.
<code javascript>
function myNavMenu(aktuelleSeite) {
    let myMenu = {
        "Startseite":"index.html",
        "Kontakt":"kontakt.html",
    };
    let nav = document.getElementsByTagName("nav").item(0);
    let html = "<ul>\n";
    for (let titel in myMenu) {
        let klasse = "";
        if (titel==aktuelleSeite) {
            klasse = 'class="aktiv"';
        }
        html += `  <li><a ${klasse} href="${myMenu[titel]}">${titel}</a></li>\n`;
    }
    html += "</ul>\n"
    nav.innerHTML = html;
}
</code>
  * In der Datei ''index.html'' löschen Sie alles zwischen den ''<nav>''- und ''</nav>''-Tags.
  * Im Body-Tag kann dann unsere JavaScript-Funktion aufgerufen werden, nachdem die Seite vollständig geladen ist (vorher existieren die Funktion und html-Element noch gar nicht):
<code html>
<body onload="myNavMenu('Startseite')">
</code>
  * Machen Sie die entsprechenden Anpassungen in der Datei ''kontakt.html''.

==== Footer automatisch auf allen Seiten ====
  * Der Footer kann auch automatisch eingefügt werden. Dazu werden wir zusätzlichen Code am Ende der Datei ''navmenu.js'' unterbringen:
<code javascript>
window.addEventListener('load', ()=>{
    let footer = document.getElementsByTagName("footer").item(0);
    footer.innerHTML = 'Dieser HTML-Code wurde automatisch in den Footer eingefügt. Und ein Link auf <a href="https://fginfo.ksbg.ch/">fginfo</a>.';
});
</code>
  * Der eingefügte HTML-Code soll natürlich sinnvoll angepasst werden.


===== Weitere Ideen =====
Wie bestimme Dinge in HTML und oder CSS gemacht werden, finden Sie Hilfe auf dem Internet oder auch Sprachmodelle sind erstaunlich versiert darin. Empfehlenswerte Seiten:
  * W3Schools: https://www.w3schools.com/css/default.asp