HTML / CSS LEVEL 1

Teil 4

Structural HTML5 Elements

Sectioning & Document Outline

HTML4 (gültig)

HTML4 (ungültig)

HTML5

Struktur einer Seite

<body>
  <header>
    <h1>Struktur- und semantische Elemente</h1>
  </header>
  <section>
    <h2>Haupt-Section</h2>
    <aside>
      <h3>Randbemerkung</h3>
    </aside>
    <footer>
      Footer von section
    </footer>
  </section>
  <footer>
    Footer von Seite
  </footer>
</body>

Tabellen

  <table>
    <tr>
      <td>Tag 1</td>
      <td>Tag 2</td>
      <td>Tag 3</td>
    </tr>
  </table>

Tabellen mit Kopfzeile

  <table>
    <tr>
      <th>Vorname</th>
      <th>Name</th>
      <th>E-Mail</th>
    </tr>
    <tr>
      <td>Sandra</td>
      <td>Tester</td>
      <td>sandra.tester@example.org</td>
    </tr>
  </table>

noch besser...

  <table>
    <thead>
      <tr>
        <th>Vorname</th>
        <th>Name</th>
        <th>E-Mail</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sandra</td>
        <td>Tester</td>
        <td>sandra.tester@example.org</td>
      </tr>
    </tbody>
  </table>

Styling von Tabellen

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

Formulare

Formulare

<form action="" method="get">
  <label for="vorname">Vorname</label>
  <input type="text" id="vorname">
  <button>Absenden</button>
</form>

Übung

Strukturelle Elemente, Tabellen, Bilder und Styling

Ressourcen

Made with Slides.com