Navigation ein/ausblenden

 Navigation ein/ausblenden

3 - Inhalte einfügen

Video im Fenster öffnen

  1. Öffne jeweils die Erweiterung "EB Übungen" um Html-Elemente zu platzieren
  2.  Schreibe einen Haupttitel mit dem Element "h1" in den "header" <h1>Weblabor</h1>
  3. Erstelle innerhalb des Elements "nav" eine unsortierte Liste "ul" <ul><li></li></ul>
  4. Erstelle innerhalb des Listenelements "li" einen Hyperlink "a href= ..."
  5. Die Beschriftung des Links "Home" (belasse vorderhand das Rautesymbol "#" als Link-Ziel)
  6. Kopiere die ganze Zeile mit Listenelement und Link " <li><a href="#">Home</a></li>"
  7. Ergänze die Beschriftung so, dass folgende Navigation entsteht:
    Home  <li><a href="#">Home</a></li>
    Seite 1  <li><a href="#">Seite 1</a></li>
    Seite 2  <li><a href="#">Seite 2</a></li>
    Seite 3  <li><a href="#">Seite 3</a></li>
  8. Erstelle innerhalb von "article" einen Seitentitel mit dem Element "h2" <h2>Startseite</h2>
  9. Erstelle darunter einen Absatz "p" (du kannst den Absatz mit Blindtext verwenden)
  10. Erstelle einen Absatz "p" in der Fusszeile
  11. Speichere deine Datei
  12. Mit Klick auf den Button "Live-Vorschau" kannst du deine Seite im Browser öffnen

 

Weiter, eine externe CSS-Datei anlegen

Beispieldatei: Weblabor

Code-Beispiel

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Weblabor - Start</title>
</head>

<body>
    <div id="container">
        <header><h1>Weblabor</h1></header>
        <nav class="top">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Seite 1</a></li>
                <li><a href="#">Seite 2</a></li>
                <li><a href="#">Seite 3</a></li>
            </ul>
        
        </nav>
        <article>
            <h2>Startseite</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </article>
        <footer><p>Adresse in der Fusszeile</p></footer>
    </div>
    
</body>
</html>