Jnnbo: Mein erster HTML Aufbau & zwei Fragen zur Navigation und Bild

Beitrag lesen

Moin,

ich habe den ersten HTML Code umgesetzt wie ich mir denken, dass es richtig sein könnte. Laut validator.w3.org scheint kein Fehler vorhanden zu sein.


<body>
<header>
  <h1>Titel der Seite</h1>
</header>
<main>
  <section>
    <h2>Titel der Section</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.</p>
    <article>
      <h2>Leistung 1</h2>
      <figure>
      <img src="http://placehold.it/350x150" alt="Bild 1">
    </figure>
    <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.</p>
    <p>... weiterlesen</p>
    </article>
    <article>
      <h2>Leistung 1</h2>
      <figure>
      <img src="http://placehold.it/350x150" alt="Bild 1">
    </figure>
    <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.</p>
    <p>... weiterlesen</p>
    </article>
    <article>
      <h2>Leistung 1</h2>
      <figure>
      <img src="http://placehold.it/350x150" alt="Bild 1">
    </figure>
    <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.</p>
    <p>... weiterlesen</p>
    </article>
  </section>
</main>
<footer> </footer>
</body>

Die Frage ist nun, wie und wo platziere ich das Bild das zwischen den beiden blauen Ecken eingeschlossen werden soll sowie die Navigation, die so ausschaut:


<nav>
    <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Leistungen</a></li>
        <li><a href="#">Referenzen</a></li>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Impressum</a></li>
    </ul>
</nav>

Meine Einfache Zeichnung, wie es ausschauen soll, habe ich ja bereits im gezeigt.