HTML-Projektarbeit: Erstellen einer mehrseitigen Website

Ziel: Erstellen eine mehrseitige Website, die verschiedene HTML-Elemente und -Funktionen nutzt. Die Seiten sollen gut strukturiert und visuell ansprechend sein. Das Projekt soll die wichtigsten Grundlagen von HTML (sowie CSS, falls gewünscht) umfassen.

Anforderungen:

1. Website-Struktur: Erstellen Sie eine Website mit mindestens vier Seiten.

• Startseite (index.html)

• Über mich/uns (about.html)

• Kontaktseite (contact.html)

• Galerie oder Blog (gallery.html oder blog.html)

1. Verwendung von HTML-Elementen: Auf jeder Seite sollten mindestens folgende HTML-Elemente vorkommen:

• Überschriften (<h1>, <h2>, etc.)

• Absätze (<p>)

• Listen (geordnete <ol> und/oder ungeordnete Listen <ul>)

• Links (<a href="...">)

• Bilder (<img src="..." alt="...")

• Tabellen (<table>) – Optional, z.B. auf der Kontaktseite für Öffnungszeiten

• Formularelemente (<form>, <input>, <textarea>, <button>) – Insbesondere auf der Kontaktseite

• Einbettung von externen Inhalten (z.B. ein YouTube-Video oder eine Google Map) über <iframe> – Optional für die Galerie oder die Kontaktseite.

1. Navigation:

• Alle Seiten sollten über ein Navigationsmenü miteinander verlinkt sein, das auf jeder Seite eingebaut ist.

• CSS Navigation Bar: https://www.w3schools.com/Css/css_navbar.asp Beispiel:

<nav>
  <ul>
    <li><a href="index.html">Startseite</a></li>
    <li><a href="about.html">Über mich</a></li>
    <li><a href="contact.html">Kontakt</a></li>
    <li><a href="gallery.html">Galerie</a></li>
  </ul>
</nav>

1. Gestaltung: Optional: Verwenden Sie CSS (internes oder externes Stylesheet), um die Website zu gestalten:

• Farben für den Hintergrund und den Text festlegen.

• Schriftarten und Textausrichtungen anpassen.

• Abstände und Ränder für die verschiedenen Elemente definieren.

1. Beispielstruktur einer Seite (index.html)

Abgabe:

• Reichen Sie die Website als ZIP-Datei ein, die alle HTML-Seiten, CSS-Dateien und Bilder enthält.

• Stellen Sie sicher, dass die Seiten korrekt miteinander verlinkt sind und die Website vollständig funktional ist.

Beispiele für Elemente und Seiten:

• Startseite (index.html): Kurze Begrüßung, Navigation, Bild.

• Über mich (about.html): Beschreibung Ihrer Person/Ihres Projekts, Listen mit Fähigkeiten oder Interessen.

• Kontaktseite (contact.html): Ein einfaches Kontaktformular mit Eingabefeldern für Name, E-Mail und Nachricht.

• Galerie (gallery.html): Eine Bildersammlung mit -Tags oder eine eingebettete Slideshow.