Zum Inhalt

03 Challenge

Grundlagen HTML & CSS

1. Grundlegender Aufbau einer Website in HTML

Eine HTML-Datei bildet die Struktur einer Website.
Beispiel:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine Website</title>
</head>
<body>
  <h1>Hallo Welt</h1>
  <p>Das ist meine erste Website.</p>
</body>
</html>
  • <!DOCTYPE html> → legt fest, dass es sich um HTML5 handelt
  • <html> → Wurzel-Element
  • <head> → Metadaten (Titel, Zeichensatz, CSS-Dateien usw.)
  • <body> → sichtbarer Inhalt der Seite

2. HTML-Grundstruktur: Wie erzeugen in VS Code?

In Visual Studio Code kann man die Grundstruktur automatisch erzeugen:

  1. Neue Datei index.html anlegen.
  2. ! tippen und Enter → Es wird ein vollständiges HTML5-Grundgerüst generiert.

3. CSS-Datei: Definition, Zweck, Verknüpfung

  • CSS (Cascading Style Sheets): regelt das Design (Farben, Schriften, Abstände, Layout).

  • Vorteile: Trennung von Struktur (HTML) und Gestaltung (CSS).

  • Verknüpfung im <head> der HTML:

<link rel="stylesheet" href="css/styles.css">

4. HTML + CSS im Detail

class- und ID-Attribute

  • class: für mehrere Elemente, die gleich aussehen sollen.
<p class="info">Hinweis</p>
  • id: eindeutige Kennzeichnung eines einzelnen Elements.
<h1 id="haupttitel">Überschrift</h1>

Kommentare

  • In HTML:
<!-- Kommentar -->
  • In CSS:
/* Kommentar */

Selektoren in CSS

  • Element-Selektor: spricht alle Elemente eines Typs an
body { background: #f0f0f0; }
  • Class-Selektor: mit .
.info { color: blue; }
  • ID-Selektor: mit #
#haupttitel { font-size: 2rem; }

CSS in separater Datei oder direkt in HTML?

  • Empfohlen: externe Datei (.css) → <link> im <head>.

  • Alternativ: direkt im HTML

  • Inline:

    <p style="color:red;">Text</p>

  • Im <style>-Block:

    <style>
  p { color: red; }
</style>

5. Weitere Grundstrukturen

<nav>
  <a href="index.html">Start</a>
  <a href="about.html">Über mich</a>
</nav>

<a href="https://example.com">Externe Seite</a>

Tabelle

<table>
  <thead>
    <tr><th>Jahr</th><th>Schule</th></tr>
  </thead>
  <tbody>
    <tr><td>2011</td><td>Kindergarten</td></tr>
  </tbody>
</table>

Float

Eigenschaft Erklärung
Zweck Platziert ein Element links oder rechts, sodass Text und andere Elemente daran vorbeifliessen können.
Richtung Nur horizontal möglich: left oder right.
Verhalten Element wird aus dem normalen Fluss genommen, bleibt aber Teil der Seite.
Einschränkung Nur Elemente nach dem gefloateten Element fliessen daran vorbei.
Syntax `float: none
Ziel Code Erklärung
Box links mit Text umfliessen .box { float: left; } Die Box wird nach links geschoben, Text fliesst rechts daneben.
Kein Float .box { float: none; } Box bleibt im normalen Blockfluss, Text steht darunter.
Mehrere Boxen nebeneinander[ .box { float: left; margin: 10px; } 8 Boxen werden nebeneinander angezeigt. Durch margin entsteht Abstand.
Text + Boxen gemischt[ p { float: left; } .box { float: left; } Auch Text kann gefloatet werden, dann steht er neben den Boxen.
Float beenden[ p { clear: both; } Mit clear: both wird der Absatz unter allen gefloateten Elementen dargestellt.e

Flexbox

Eigenschaft Wert Erklärung
display flex Schaltet den Container in den Flexbox-Modus
flex-direction row Elemente werden nebeneinander von links nach rechts angezeigt
row-reverse Elemente werden nebeneinander von rechts nach links angezeigt
column Elemente werden untereinander von oben nach unten angezeigt
column-reverse Elemente werden untereinander von unten nach oben angezeigt
justify-content (entlang der Hauptachse) flex-start Elemente sammeln sich am Anfang der Hauptachse
center Elemente sind mittig auf der Hauptachse
flex-end Elemente sammeln sich am Ende der Hauptachse
space-between Erstes Element vorne, letztes hinten – Rest gleichmässig dazwischen
space-around Wie space-between, zusätzlich Aussenabstände
align-items (entlang der Querachse) flex-start Elemente liegen am Anfang der Querachse
center Elemente liegen mittig auf der Querachse
flex-end Elemente liegen am Ende der Querachse
stretch (Standard) Elemente dehnen sich auf die volle Höhe des Containers
order Zahl (z. B. 1, 2, 3 …) Legt die Reihenfolge der Elemente fest, unabhängig vom HTML-Code

Grid

 <body>
    <aside></aside>
    <header></header>
    <section></section>
    <section></section>
    <section></section>
    <main></main>
    <footer></footer>
</body>

body,
html {
  height: 100vh;
}

body {
  margin: 0;
  display: grid;
  grid-template-columns: auto 27% 27% 27%;
  grid-template-rows: 8% 30% auto 10%;
  grid-template-areas:
    "sidebar header header header"
    "sidebar section1 section2 section3"
    "sidebar main main main"
    "sidebar footer footer footer";
}

aside {
  grid-area: sidebar;
  background-color: #007fff;
}

header {
  grid-area: header;
  background-color: #91c8ff;
}

section:nth-of-type(1) {
  grid-area: section1;
  background-color: #b3d8fd;
}
section:nth-of-type(2) {
  grid-area: section2;
  background-color: #5e86af;
}
section:nth-of-type(3) {
  grid-area: section3;
  background-color: #6d9fd2;
}

main {
  grid-area: main;
  background-color: #7da9d5;
}
footer {
  grid-area: footer;
  background-color: #588ec3;
}