Zum Inhalt

Grundlagen von HTML und CSS

HTML Grundlagen

Dokumentaufbau

  • Grundstruktur eines HTML-Dokuments: Sie definiert die grundlegende Struktur einer Webseite, inklusive <!DOCTYPE html> zur Deklaration des HTML-Typs und <html> als Wurzelelement.
<!DOCTYPE html> <!-- Deklariert den Dokumenttyp als HTML5 -->
<html lang="de"> <!-- Öffnet das HTML-Dokument und legt die Sprache als Deutsch fest -->
  <head>
    <meta charset="UTF-8"> <!-- Zeichensatz auf UTF-8 festlegen, um Sonderzeichen darzustellen -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Viewport für responsives Design einstellen -->
    <title>Meine Seite</title> <!-- Titel der Webseite, wird im Browser-Tab angezeigt -->
    <link rel="stylesheet" href="styles.css"> <!-- Verlinkt eine externe CSS-Datei -->
  </head>
  <body>
    <!-- Inhalt hier -->
  </body>
</html>

Semantische Elemente

  • Semantische Elemente geben dem Inhalt eine klare Bedeutung und verbessern die Struktur und Zugänglichkeit der Webseite. Beispiele sind <header>, <footer>, <main>, und <section>.
<header> <!-- Enthält den Header-Bereich der Seite, z.B. Logo oder Navigation -->
  <h1>Willkommen auf meiner Seite</h1> <!-- Überschrift der Seite -->
  <img src="header-bild.jpg" alt="Header Bild"> <!-- Header Bild einfügen -->
</header>
<main> <!-- Hauptbereich des Inhalts -->
  <section> <!-- Abschnitt, um Inhalt zu gruppieren -->
    <h2>Über uns</h2> <!-- Unterüberschrift -->
    <img src="ueber-uns.jpg" alt="Bild über uns"> <!-- Bild über uns einfügen -->
    <p>Hier steht etwas über uns.</p> <!-- Beschreibung über uns -->
  </section>
  <section>
    <h2>Unsere Dienstleistungen</h2> <!-- Unterüberschrift für Dienstleistungen -->
    <img src="dienstleistungen.jpg" alt="Dienstleistungen Bild"> <!-- Bild zu Dienstleistungen einfügen -->
    <p>Details zu unseren Dienstleistungen.</p> <!-- Beschreibung der Dienstleistungen -->
  </section>
</main>
<footer> <!-- Enthält den Footer-Bereich, z.B. Kontaktinformationen -->
  <p>Kontakt: email@beispiel.com</p> <!-- Kontaktinformationen -->
  <img src="footer-bild.jpg" alt="Footer Bild"> <!-- Footer Bild einfügen -->
</footer>

Standard-Elemente

  • Links (<a>): Verknüpfen andere Seiten oder Ressourcen und ermöglichen das Navigieren innerhalb der Webseite oder zu externen Seiten.
<a href="https://example.com">Klick mich</a> <!-- Erstellt einen anklickbaren Link zur angegebenen URL -->
  • Listen (<ul>, <ol>): Unsortierte (<ul>) und sortierte (<ol>) Listen zur Darstellung von Aufzählungen.
<ul> <!-- Unsortierte Liste -->
  <li>Ein Punkt</li> <!-- Ein Listenpunkt -->
  <li>Noch ein Punkt</li>
</ul>
<ol> <!-- Sortierte Liste -->
  <li>Erster Punkt</li> <!-- Erster Eintrag in sortierter Reihenfolge -->
  <li>Zweiter Punkt</li>
</ol>
  • Tabellen (<table>): Strukturierte Darstellung von Daten in Zeilen und Spalten. Sie sind hilfreich, um Informationen klar und übersichtlich zu organisieren.
<table> <!-- Definiert eine Tabelle -->
  <tr> <!-- Tabellenzeile -->
    <th>Name</th> <!-- Tabellenkopf für Spalte Name -->
    <th>Alter</th> <!-- Tabellenkopf für Spalte Alter -->
  </tr>
  <tr> <!-- Tabellenzeile mit Daten -->
    <td>Max</td> <!-- Tabellenzelle mit Name -->
    <td>25</td> <!-- Tabellenzelle mit Alter -->
  </tr>
</table>
  • Bilder (<img>): Zeigen visuelle Inhalte an. Das alt-Attribut hilft bei der Barrierefreiheit und wird angezeigt, wenn das Bild nicht geladen werden kann.
<img src="bild.jpg" alt="Beschreibung des Bildes"> <!-- Bild mit Beschreibung zur Verbesserung der Barrierefreiheit -->

Block- und Inline-Elemente

  • Block-Elemente: Nehmen die gesamte Breite ein und beginnen in einer neuen Zeile. Sie dienen dazu, größere Abschnitte zu strukturieren (<div>, <p>, <section>).
<div> <!-- Block-Element zur Gruppierung anderer Elemente -->
  <p>Dies ist ein Block-Element.</p> <!-- Absatz, ebenfalls ein Block-Element -->
  <img src="block-element.jpg" alt="Block Element Bild"> <!-- Beispielbild für Block-Element -->
</div>
  • Inline-Elemente: Nehmen nur die notwendige Breite ein und befinden sich innerhalb einer Zeile. Sie sind geeignet für kleinere Teile des Inhalts, wie Text (<span>, <a>, <strong>).
<p>Hier ist ein <span>Inline-Element</span> innerhalb eines Textes.</p> <!-- <span> ist ein Inline-Element, das im Textfluss bleibt -->

Formulare

  • Formulare dienen zur Eingabe von Benutzerdaten und bestehen aus verschiedenen Eingabefeldern, wie <input>, <textarea>, und <select>. Formulare werden verwendet, um Daten zu erfassen und an den Server zu senden.
<form action="/submit" method="post"> <!-- Formular zur Eingabe von Benutzerdaten, das per POST-Methode gesendet wird -->
  <label for="name">Name:</label> <!-- Beschriftung für das Eingabefeld -->
  <input type="text" id="name" name="name"><br> <!-- Textfeld zur Eingabe des Namens -->
  <label for="email">Email:</label> <!-- Beschriftung für das E-Mail-Feld -->
  <input type="email" id="email" name="email"><br> <!-- Eingabefeld für eine E-Mail-Adresse -->
  <input type="submit" value="Absenden"> <!-- Button zum Absenden des Formulars -->
  <img src="formular-bild.jpg" alt="Formular Bild"> <!-- Bild zur Visualisierung des Formulars -->
</form>

Validierung

  • HTML bietet eingebaute Validierungen wie required, type, minlength usw., um sicherzustellen, dass Benutzer korrekte Daten eingeben.
<input type="email" required> <!-- Eingabefeld für E-Mail, das ausgefüllt werden muss -->
<input type="password" minlength="8"> <!-- Passwortfeld, das mindestens 8 Zeichen benötigt -->

Namensgebung von Dokumenten

  • Verwende sprechende Dateinamen (z.B. index.html, kontakt.html) und halte dich an Konventionen wie kleine Buchstaben, keine Leerzeichen oder Sonderzeichen, um die Verwaltung der Dateien zu erleichtern.

CSS Grundlagen

CSS Einbindung

  • Externes Stylesheet: Stylesheets können extern eingebunden werden, um die Trennung von Inhalt und Design zu ermöglichen.
<link rel="stylesheet" href="styles.css"> <!-- Verlinkt eine externe CSS-Datei -->
  • Inline-CSS: Stile können auch direkt in den HTML-Elementen definiert werden, was aber für größere Projekte unübersichtlich wird.
<p style="color: red;">Dieser Text ist rot.</p> <!-- Definiert CSS direkt im HTML-Tag -->
  • Internal Stylesheet: CSS kann innerhalb des <head>-Bereichs im HTML-Dokument hinzugefügt werden.
<style>
  body {
    background-color: lightblue; /* Hintergrundfarbe der Seite setzen */
  }
</style>

Selektoren und Eigenschaften

  • Klassen (.) und IDs (#) ermöglichen das gezielte Ansprechen von HTML-Elementen. Klassen können mehrfach verwendet werden, IDs nur einmal pro Seite.
.klasse { /* Selektor für Elemente mit der Klasse "klasse" */
  color: blue; /* Textfarbe auf Blau setzen */
}
#id { /* Selektor für ein Element mit der ID "id" */
  background-color: yellow; /* Hintergrundfarbe auf Gelb setzen */
}
  • Elementselektoren wählen alle Elemente eines bestimmten Typs aus.
p { /* Wählt alle Absatz-Elemente aus */
  font-size: 16px; /* Schriftgröße auf 16px setzen */
}

  • Attributselektoren ermöglichen das Ansprechen von Elementen basierend auf Attributen, z.B. [type="text"] wählt alle input Felder vom Typ Text aus.

  • Grundlegende CSS-Eigenschaften:

body {
  background-image: url('background.jpg'); /* Hintergrundbild einfügen */
  background-color: #f0f0f0; /* Hintergrundfarbe setzen */
  color: #333; /* Textfarbe setzen */
  margin: 0; /* Außenabstand auf 0 setzen */
  padding: 0; /* Innenabstand auf 0 setzen */
}
.container {
  margin: 20px; /* Außenabstand von 20px */
  padding: 10px; /* Innenabstand von 10px */
  border: 1px solid #ccc; /* Rahmen mit einer Breite von 1px und grauer Farbe */
}

Box-Modell

  • Das Box-Modell beschreibt, wie der Raum eines Elements berechnet wird, inklusive content (Inhalt), padding (Innenabstand), border (Rahmen), und margin (Außenabstand). Das Verständnis des Box-Modells ist entscheidend, um das Layout einer Webseite zu kontrollieren.
.box {
  width: 200px; /* Breite des Inhaltsbereichs */
  padding: 10px; /* Innenabstand zwischen Inhalt und Rahmen */
  border: 1px solid black; /* Rahmen um das Element */
  margin: 20px; /* Abstand zu anderen Elementen */
  background-image: url('box-bild.jpg'); /* Bild zur Box einfügen */
}

Layout-Techniken

  • Flexbox: Ein flexibles Layout-Modell, um Elemente in einer Zeile oder Spalte auszurichten. Flexbox eignet sich besonders für die Erstellung dynamischer Layouts, die auf unterschiedliche Bildschirmgrößen reagieren.
.container {
  display: flex; /* Container als Flexbox definieren */
  flex-direction: row; /* Elemente in einer Zeile anordnen (horizontal) */
  justify-content: center; /* Inhalt horizontal zentrieren */
  align-items: center; /* Inhalt vertikal zentrieren */
}
  • Grid: Ein Rasterlayout, das die Erstellung komplexer Layouts ermöglicht, indem der Raum in Zeilen und Spalten aufgeteilt wird.
.grid-container {
  display: grid; /* Container als Grid definieren */
  grid-template-columns: repeat(3, 1fr); /* Drei gleich breite Spalten erstellen */
  gap: 10px; /* Abstand zwischen den Grid-Elementen */
}
.grid-item {
  background-color: #ccc; /* Hintergrundfarbe der Grid-Elemente */
  padding: 20px; /* Innenabstand der Grid-Elemente */
  text-align: center; /* Zentriert den Text innerhalb der Grid-Elemente */
}

Beispiel für Grid-Nutzung in HTML:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

Responsive Design

  • Media Queries: Media Queries werden verwendet, um das Layout an verschiedene Bildschirmgrößen und Geräte anzupassen. Sie ermöglichen es, unterschiedliche Stile für verschiedene Bildschirmbreiten zu definieren.
@media (max-width: 600px) { /* Wenn die Bildschirmbreite maximal 600px beträgt */
  body {
    font-size: 14px; /* Schriftgröße auf 14px setzen */
  }
  .container {
    flex-direction: column; /* Richtet Elemente untereinander anstatt nebeneinander an */
  }
}

HTML Validierung

HTML bietet verschiedene eingebaute Validierungsmöglichkeiten, um sicherzustellen, dass Benutzer korrekte Daten eingeben. Diese Validierungen helfen, die Qualität der eingegebenen Daten zu verbessern und Fehler zu reduzieren, bevor sie an den Server gesendet werden.

Arten der Validierung

  1. Pflichtfelder (required): Stellt sicher, dass ein Eingabefeld nicht leer gelassen wird.
<input type="text" id="name" name="name" required> <!-- Der Benutzer muss einen Namen eingeben -->
  1. Eingabetyp (type): Definiert den erwarteten Datentyp (z.B. email, number, url).
<input type="email" id="email" name="email" required> <!-- Der Benutzer muss eine gültige E-Mail-Adresse eingeben -->
<input type="number" id="age" name="age" min="1" max="100"> <!-- Der Benutzer muss eine Zahl zwischen 1 und 100 eingeben -->
  1. Längenbeschränkungen (minlength und maxlength): Legt fest, wie viele Zeichen mindestens oder höchstens eingegeben werden dürfen.
<input type="password" id="password" name="password" minlength="8" maxlength="20" required> <!-- Das Passwort muss zwischen 8 und 20 Zeichen lang sein -->
  1. Muster (pattern): Validiert die Eingabe anhand eines regulären Ausdrucks.
<input type="text" id="username" name="username" pattern="[A-Za-z0-9]{5,10}" title="Nur Buchstaben und Zahlen, 5-10 Zeichen"> <!-- Nur alphanumerische Zeichen, 5 bis 10 Zeichen -->
  1. Zahlenbereich (min und max): Definiert einen Zahlenbereich, der zulässig ist.
<input type="number" id="points" name="points" min="0" max="100"> <!-- Der Benutzer muss eine Zahl zwischen 0 und 100 eingeben -->
  1. Schieberegler (step): Definiert die Schrittweite für Eingabewerte.
<input type="range" id="volume" name="volume" min="0" max="100" step="10"> <!-- Werte in 10er-Schritten von 0 bis 100 -->

Benutzerfreundliche Validierung

  • title-Attribut: Kann verwendet werden, um dem Benutzer eine Beschreibung oder eine Anweisung zu geben, wenn die Eingabe nicht den Anforderungen entspricht.
<input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="Bitte eine 5-stellige Postleitzahl eingeben"> <!-- Gibt dem Benutzer eine hilfreiche Nachricht -->

Beispiel für ein Formular mit Validierungen

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br>

  <label for="password">Passwort:</label>
  <input type="password" id="password" name="password" minlength="8" required><br>

  <label for="age">Alter:</label>
  <input type="number" id="age" name="age" min="1" max="100"><br>

  <input type="submit" value="Absenden">
</form>

Zusammenfassung der Validierung

  • Pflichtfelder (required) verhindern leere Eingaben.
  • Eingabetypen (type) stellen sicher, dass der richtige Datentyp eingegeben wird.
  • Längenbeschränkungen (minlength, maxlength) kontrollieren die Länge der Eingabe.
  • Muster (pattern) erlauben eine detaillierte Validierung durch reguläre Ausdrücke.
  • Bereiche (min, max, step) geben numerische Grenzen und Schritte an.

Diese eingebauten Validierungsfunktionen sind hilfreich, um sicherzustellen, dass die Daten vor dem Senden zum Server korrekt und vollständig sind, was sowohl die Benutzererfahrung verbessert als auch die Serverlast durch fehlerhafte Eingaben reduziert.

Erweiterte CSS-Techniken mit SCSS

Einführung in SCSS

  • SCSS (Sassy CSS) ist eine erweiterte Version von CSS, die zusätzliche Funktionen wie Variablen, Verschachtelungen und Mixins bietet, um CSS effizienter zu schreiben.
  • Die Dateiendung für SCSS-Dateien ist .scss.

Beispiel für SCSS

  • Variablen und Verschachtelungen ermöglichen eine einfachere und wiederverwendbare Strukturierung von CSS.
$primary-color: #333; /* Variable für eine Farbe definieren */

body {
  color: $primary-color; /* Textfarbe auf die definierte Variable setzen */
  .container { /* Verschachtelung für ein Kind-Element von body */
    padding: 20px; /* Innenabstand setzen */
    background-image: url('scss-container-bild.jpg'); /* Bild zur Container Box in SCSS einfügen */
  }
}

SCSS Vorteile

  • SCSS hilft dabei, den Code sauberer, besser strukturiert und einfacher zu warten zu machen. Durch Verschachtelung wird der Code lesbarer und durch Variablen können zentrale Werte leicht angepasst werden.