HTML Crashkurs

Teil 2: Layouting / Outlining

Basiswissen

  • Nenne HTML Tags zur Textstrukturierung & -auszeichnung.
  • Was bedeuted CSS?
  • Wie sieht eine CSS Regel aus?
  • Was für CSS Selektoren gibt es?

HTML: Grundgerüst

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel oder Name der Website</title>
    <meta name="description" content="Beschreibungstext 120-158 Zeichen">
    <!-- CSS Styles verlinken & JavaScript Anweisungen laden -->
    <link href="main.css" rel="stylesheet">
    <script src="main.js" async></script>
  </head>
  <body>
    <!-- Sichtbarer Bereich -->
    <h1>Hallo Welt</h1>
    <p>Meine erste Website</p>
  </body>
</html>

HTML: Seitenstruktur

<!DOCTYPE html>
<html lang="de">
  <head>
  ...
  </head>
  <body>
    <header>einleitende Inhalte, Orientierungshilfen</header>
    <nav>Seitennavigation <ul>...</ul></nav>
    <main>Hauptinhalt</main>
    <section>thematische Gruppierung von Inhalten
      <h2>Mit überschrift h2</h2>
      <arcticle>einzelne in sich geschlossene Inhaltsbereiche</article>
      <arcticle>einzelne in sich geschlossene Inhaltsbereiche</article>
      <arcticle>einzelne in sich geschlossene Inhaltsbereiche</article>
    </section>
    <aside>ergänzende Hinweise, „Randbemerkungen“</aside>
    <footer>informative Inhalte etwa Impressum, Copyright, Autor</footer>
  </body>
</html>

Layouting: float

so wars früher … man sieht es noch oft

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
</div>

.row {
  clear: both;
}

.row:after {
  content: " ";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  line-height: 0;
}
.col {
  float: left;
  margin-left: 1rem;
}
.col:first-child {
  margin-left: 0;
}

Layouting: flexbox

so gehts heute … Eindimensional (Zeile oder Spalte)

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
</div>

.row {
  display: flex;
}

.col {
  flex: 1 1 100%;
  margin-left: 1rem;
}
.col:first-child {
  margin-left: 0;
}

Layouting: grid

so gehts heute noch besser… Zweidimensional (Zeilen und Spalten)

<div class="container">
 <div>Element 1</div>
 <div>Element 2</div>
  …
 <div>Element 11</div>
 <div>Element 12</div>
</div>

/* 3 Zeilen mit je 4 Spalten */
.container {
  display: grid;
  grid-template-rows:200px 1fr 100px;
  grid-template-columns:25% 25% 25% 25%;
}

Let’s code …

lokal mit Visual Studio Code