MWN1_10 - Refresh

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)