CSS - Metatags: Refresh, CSS-Layout
Refresh - automatische Weiterleitung von der Startseite (Homepage) auf andere Seiten, siehe: https://www.w3schools.com/tags/att_meta_http_equiv.asp
Was passiert, wenn src oder die Zeit nicht angegeben werden?
Mittels Iframe soll die Navigation für eine einfach Website umgesetzt werden.
Erstellen Sie 2 Dateien im Ordner: 9_refresh:
index.html (Inhalt: kurze Begrüßung) leitet mit refresh auf main.html weiter
main.html: enthält Navigation und Content
Achtung auf die Verwendung von HTML5-Elementen: <nav> für das Menü und <main> für den Inhalt (hier wird auch der Iframe eingefügt)
Um zu verstehen, wie groß die Elemente sind, sollen in dieser Übung für body, nav und main unterschiedliche Hintergrundfarben festgelegt werden.
Vorbereitung:
Metatags: https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta
WH Iframes + deren Verlinkung
Infos zum Sinn von CSS-Layouts: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Warum_Layouts_mit_CSS%3F
Wiederholung und Vertiefung:
Wo können CSS-Informationen untergebracht werden: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden
wofür kann CSS festgelegt werden: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Syntax und https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Syntax
Pseudoklassen: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Selektoren#Benutzeraktionen_sichtbar_machen
Schrittweise Erstellung von main.html:
1. Erstellen Sie die Container nav und main und geben Sie diesen unterschiedliche Farben
nav |
main |
2. Fügen Sie einen Style-Bereich mit Formatierungen für nav und main ein
3. nav soll 200px breit sein und von main umflossen werden
Tipp: setzen Sie für main die Eigenschaft min-height:400px, dann sehen Sie den Effekt
nav |
main ... |
... umfließt nun nav |
4. Erstellen Sie in main einen iframe und in nav 2 Menüeinträge (Hyperlinks: 1. x auf externe, 1 x auf eine interne Seite)