====== 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 ''''-Tag und dem schliessenden ''''-Tag wie folgt ein:


    
        
             Startseite 
             Kontakt

* Fügen Sie dann unmittelbar nach dem schliessenden ''''-Tag einen minimalen Inhalt wie folgt ein:


   
        Willkommen
        Willkommen

* Und zuletzt (unmittelbar vor den schliessenden ''''-Tag noch eine Fusszeile:


 
        Super coole Fusszeile

* 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 WindowsRight rechts auf dem Bildschirm an, und VS-Code mit WindowsLeft 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 ''''-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 ''

'' 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+Left und Win+Right * Damit die ''

''-Elemente nebeneinander erscheinen, fügen Sie folgenden Code in ''style.css'' hinzu (bezieht sich auf alle ''

''-Elemente innerhalb eines ''

''-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 ''


   background-color: black;

'' Element im ''

'' 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:

 Startseite

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:


footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #F1F1F1;
    text-align: center;
    padding: 10px;
}

===== body ===== Um Formatierungen für die ganze Seite festzulegen, kann das ''''-Element "gestylet" werden (am besten am Anfang der Datei ''style.css'' einfügen):


body {
    padding:0;
    margin:0;
    font-family: sans-serif;
    background-color: #fff9e0;
}

===== 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 ''''-Tag folgende Zeile ein:

* Ctrl-Klick im HTML-Code auf navmenu.js, Datei kreieren. * Folgenden Code in navmenu.js speichern.


function myNavMenu(aktuelleSeite) {
    let myMenu = {
        "Startseite":"index.html",
        "Kontakt":"kontakt.html",
    };
    let nav = document.getElementsByTagName("nav").item(0);
    let html = "\n";
    for (let titel in myMenu) {
        let klasse = "";
        if (titel==aktuelleSeite) {
            klasse = 'class="aktiv"';
        }
        html += `  ${titel}\n`;
    }
    html += "\n"
    nav.innerHTML = html;
}

* In der Datei ''index.html'' löschen Sie alles zwischen den ''''-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):

* 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:


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 fginfo.';
});

* 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