HTML / CSS LEVEL 1

Teil 4

Structural HTML5 Elements

<section>

<article>

<aside>

<header>

<footer>

<nav>

Sectioning & Document Outline

https://gsnedders.html5.org/outliner/​

http://jsbin.com/xihose/1/edit?html,output

HTML4 (gültig)

http://www.w3.org/TR/html5/sections.html#outline​

http://jsbin.com/lopoji/1/edit?html,output​

HTML4 (ungültig)

http://jsbin.com/hixaru/1/edit?html,output​

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>

http://jsbin.com/gegayo/1/edit?html,output​

Tabellen

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

http://jsbin.com/wuvexo/1/edit?html,output​

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>

http://jsbin.com/wuvexo/1/edit?html,output​

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>

http://jsbin.com/wuvexo/1/edit?html,output​

Styling von Tabellen

http://jsbin.com/sebilu/1/edit?html,css,output​

table {
    border-collapse: collapse;
}

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

Formulare

<form>

<input>

<button>

<select>

<textarea>

<label>

<option>

<fieldset>

<caption>

Formulare

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

http://jsbin.com/cosose/1/edit?html,css,output​

Übung

Strukturelle Elemente, Tabellen, Bilder und Styling

http://jsbin.com/witito/1/edit?html,css,output​

Ressourcen

http://wiki.selfhtml.org/wiki/HTML/Tabellen/Aufbau_einer_Tabelle​

https://css-tricks.com/complete-guide-table-element/​

HTML / CSS I - Teil 4

By Gion Kunz

Made with Slides.com

HTML / CSS I - Teil 4

  • 2,646

More from Gion Kunz