Tag 7: Fortgeschrittenes HTML & Abschlussprojekt

Ziel

Lerne fortgeschrittene HTML-Funktionen und setze alles zusammen, um eine vollständige persönliche Portfolio-Seite zu erstellen.

Themen

• Iframes: <iframe> zum Einbetten externer Inhalte
• Meta-Tags für SEO: <meta charset="UTF-8">, <meta name="description">
• Einbetten von Google Maps, YouTube-Videos oder anderen externen Medien
• HTML-Best-Practices: semantische Struktur, Barrierefreiheit, klare Navigation

Iframes Beispiel

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        title="YouTube video" frameborder="0" allowfullscreen></iframe>

Meta-Tags für SEO

Verwende Meta-Tags, um die Suchmaschinenoptimierung zu verbessern und Seiten-Metadaten zu definieren.

<meta charset="UTF-8">
<meta name="description" content="Portfolio von John Doe, das Fähigkeiten und Projekte zeigt">

Übung

Erstelle deine persönliche Portfolio-Seite mit folgenden Elementen:

• Header mit deinem Namen und Navigationslinks
• Über-mich-Bereich mit einer Beschreibung deiner Person
• Liste von Fähigkeiten mit <ul> oder <ol>
• Tabelle mit deinen Erfahrungen oder Projekten
• Kontaktformular, damit Besucher dich erreichen können
• Eingebettete Medien wie ein YouTube-Video oder eine Google-Karte
• Footer mit Copyright-Informationen

Beispiel-Portfolio-Struktur

<header>
  <h1>John Doe</h1>
  <nav>
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="about">
    <h2>About Me</h2>
    <p>I am a web developer passionate about HTML, CSS, and JavaScript.</p>
  </section>

  <section id="skills">
    <h2>Skills</h2>
    <ul>
      <li>HTML </li>
      <li>CSS </li>
      <li>JavaScript </li>
    </ul>
  </section>

  <section id="projects">
    <h2>Projects</h2>
    <table border="1">
      <tr><th>Project</th><th>Year</th><th>Description</th></tr>
      <tr><td>Portfolio Site</td><td>2026</td><td>Personal website</td></tr>
      <tr><td>Game App</td><td>2025</td><td>Simple browser game</td></tr>
    </table>

    <h3>Demo Video</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
            title="YouTube video" frameborder="0" allowfullscreen></iframe>
  </section>

  <section id="contact">
    <h2>Contact Me</h2>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name"><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email"><br><br>
      <label for="message">Message:</label><br>
      <textarea id="message" rows="4" cols="30"></textarea><br><br>
      <button type="submit">Send</button>
    </form>
  </section>
</main>

<footer>
  <p>© 2026 John Doe</p>
</footer>

Tipps & Best Practices

• Nutze durchgehend semantisches HTML für Klarheit und SEO.
• Füge immer alt-Texte für Bilder und beschreibende Titel für Iframes hinzu.
• Halte dein Layout mit klaren Abschnitten und Überschriften organisiert.
• Teste dein Portfolio in verschiedenen Browsern und Bildschirmgrößen.