HTML-Befehle – Grundverständnis

HTML besteht aus Elementen. Viele Elemente haben ein öffnendes und ein schließendes Tag. Dazwischen steht der Inhalt. Im öffnenden Tag können Attribute zusätzliche Eigenschaften festlegen.

<p class="hinweis">Hallo Welt!</p>
<img src="bild.jpg" alt="Ein Bild">

HTML beschreibt die Struktur und Bedeutung. CSS legt Farben, Größen und Abstände fest. Nicht jedes Element benötigt ein End-Tag (z. B. <img>, <br>).

Grundstruktur: DOCTYPE, head, body und footer

<!DOCTYPE html> teilt dem Browser mit, dass HTML5 verwendet wird. Im <head> stehen Metadaten und Gestaltung; der <body> enthält den sichtbaren Inhalt. <footer> kennzeichnet einen Fußbereich innerhalb des Body.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine Seite</title>
</head>
<body>
  <h1>Willkommen!</h1>
  <p>Meine erste Webseite.</p>
  <footer>© Schulprojekt</footer>
</body>
</html>

Text, Überschriften und Absätze

HTML beschreibt die Bedeutung von Text. Die optische Gestaltung übernimmt meist CSS.

<h2>Unser Projekt</h2>
<p>Ein <strong>wichtiger</strong>
Hinweis und ein <em>betontes</em> Wort.</p>
<p>Zeile 1<br>Zeile 2</p>
<hr>

<h1> bis <h6>: Überschriften · <p>: Absatz · <strong>: starke Betonung · <em>: Betonung · <br>: Zeilenumbruch.

Tabellen

<table> enthält die Tabelle, <tr> eine Zeile, <th> eine Kopfzelle und <td> eine Datenzelle.

<table>
  <caption>AG-Angebote</caption>
  <tr><th>AG</th><th>Tag</th></tr>
  <tr><td>Robotik</td><td>Mo</td></tr>
  <tr><td colspan="2">Anmeldung im Sekretariat</td></tr>
</table>

colspan="2" verbindet zwei Spalten; rowspan="2" verbindet zwei Zeilen. Für Rahmen, Abstände und Farben verwendet man CSS.

Listen

<h3>Material</h3>
<ul>
  <li>Laptop</li>
  <li>Browser</li>
</ul>
<h3>Ablauf</h3>
<ol start="1">
  <li>Datei speichern</li>
  <li>Im Browser öffnen</li>
</ol>

<ul> = ungeordnete Liste · <ol> = nummerierte Liste · <li> = Listeneintrag · start = Startwert einer nummerierten Liste.

Medien einfügen

Mit src wird die Datei angegeben. Bilddateien benötigen einen sinnvollen Alternativtext (alt). Audio und Video können Bedienelemente erhalten.

<img src="labor.jpg"
     alt="Versuchsaufbau im Labor"
     width="240" height="150">

<audio controls>
  <source src="ton.mp3" type="audio/mpeg">
</audio>

<video controls width="240" poster="vorschau.jpg">
  <source src="film.mp4" type="video/mp4">
</video>

Links und Sprungmarken (Anker)

<a href="https://example.org" target="_blank"
   rel="noopener noreferrer">Externe Seite</a>

<a href="#ziel">Zum Abschnitt springen</a>

<h3 id="ziel">Zielabschnitt</h3>

<a href="mailto:info@example.org">E-Mail schreiben</a>

href = Zieladresse · id = eindeutige Sprungmarke · href="#ziel" = Sprung innerhalb derselben Seite · target="_blank" = neuer Tab.

CSS direkt in der HTML-Datei

Ein interner <style>-Block im <head> gestaltet mehrere Elemente. Alternativ kann das Attribut style direkt an einem HTML-Element stehen. Beide Varianten benötigen keine externe CSS-Datei.

<head>
  <style>
    .karte { background: #e0f2fe;
             padding: 12px;
             border-radius: 10px; }
  </style>
</head>
<body>
  <p class="karte">Eine CSS-Karte</p>
  <p style="color: darkred;">Roter Text</p>
</body>

Diese gesamte Lernseite nutzt einen internen <style>-Block. Über das linke Menü erreichst du die Abschnitte mittels href="#..." und id="...".

CSS 1 · HTML und CSS verstehen

HTML legt Inhalte und ihre Bedeutung fest. CSS gestaltet diese Inhalte. CSS besteht aus Selektor, Eigenschaft und Wert.

selektor {
  eigenschaft: wert;
}

<p style="color:blue">Ein blauer Text</p>

Merke: style ist ein HTML-Attribut; color ist eine CSS-Eigenschaft. Ein Semikolon trennt CSS-Deklarationen.

CSS 2 · CSS direkt im HTML-Tag

Das Attribut style enthält eine oder mehrere CSS-Deklarationen. Die Formatierung gilt für genau dieses Element.

<tag style="eigenschaft: wert; weitere-eigenschaft: wert;">Inhalt</tag>

<p style="color: blue; font-size: 20px;">Ich lerne CSS!</p>

CSS 3 · Schrift und Text

Schriftgröße, Schriftart, Schriftschnitt, Textfarbe und Ausrichtung lassen sich einzeln einstellen.

<p style="color: wert; font-size: wert; font-family: wert; font-weight: wert; text-align: wert;">Text</p>

<p style="color:darkblue; font-size:22px; font-weight:bold; text-align:center;">Überschrift</p>

CSS 4 · Farben, Flächen und Rahmen

Mit background-color, border und border-radius werden Flächen und Rahmen gestaltet.

<div style="background-color: farbe; border: dicke art farbe; border-radius: radius;">Inhalt</div>

<div style="background-color:#dbeafe; border:2px solid #2563eb; border-radius:10px; padding:12px;">Hinweis</div>

CSS 5 · Abstände und Größen

margin bezeichnet den Außenabstand, padding den Innenabstand. width und height steuern Breite und Höhe.

<div style="margin: 10px; padding: 16px; width: 220px;">Inhalt</div>

<div style="margin:10px; padding:16px; width:220px; background:#d1fae5;">Innenabstand</div>

CSS 6 · Bilder, Listen und Tabellen

Die gleichen CSS-Eigenschaften können unterschiedliche HTML-Elemente gestalten.

<img style="width: 120px; border-radius: 8px;" src="bild.jpg" alt="Bild">
<ul style="list-style-type: square;">...</ul>
<table style="border-collapse: collapse;">...</table>

<ul style="list-style-type:square;"><li>HTML</li><li>CSS</li></ul>
<table style="border-collapse:collapse;"><tr><td style="border:1px solid #555;padding:8px;">Zelle</td></tr></table>

Bei Bildern muss die angegebene Bilddatei vorhanden sein. alt beschreibt den Bildinhalt als Alternativtext.

CSS 7 · CSS im style-Bereich

Regeln im style-Element des head gelten für alle passenden Elemente der Seite. Klassen beginnen im CSS-Selektor mit einem Punkt.

<head>
  <style>
    p { color: navy; }
    .hinweis { font-weight: bold; }
  </style>
</head>

<style>
  .hinweis { color: darkgreen; font-weight: bold; }
</style>
<p class="hinweis">Wichtiger Hinweis</p>

Unterschied: Inline-CSS steht direkt im HTML-Element. Interne CSS-Regeln stehen gesammelt im <style>-Bereich.

CSS 8 · Eine eigene styles.css erstellen

Zum Abschluss wird die Gestaltung in eine zweite Datei ausgelagert. HTML und CSS müssen im gleichen Ordner liegen, wenn href="styles.css" verwendet wird.

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

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine Webseite</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Meine erste CSS-Webseite</h1>
  <p>HTML und CSS arbeiten zusammen.</p>
</body>
</html>

body {
  background-color: #eef4fa;
  font-family: Arial, sans-serif;
}
h1 {
  color: darkblue;
  text-align: center;
}
p {
  color: #333333;
  font-size: 18px;
}