HTML-Kurzreferenz
Willkommen, angehende Web-Entwickler! Heute tauchen wir in die Welt der HTML ein, die Grundlage jedes besuchten Webs. Als jemand, der HTML seit über einem Jahrzehnt unterrichtet, kann ich Ihnen sagen, dass es nicht so Einschüchternd ist, wie es auf den ersten Blick scheint. Tatsächlich mag ich HTML lieber als die Lego-Steine des Internets - einfache Teile, die, wenn sie zusammengefügt werden, etwas Herausragendes schaffen können!
Inhaltsverzeichnis
Bevor wir unsere Reise beginnen, werfen wir einen kurzen Blick auf das, was wir abdecken werden:
- Grundlegende Tags
- Body-Attribute
- Text-Tags
- Links
- Formatierung
- Listen
- Grafische Elemente
- Formulare
- Tabellen
- Tabellen-Attribute
- HTML5 input-Tag-Attribute
- HTML-Editor und Formatierer
Nun, lasst uns die Ärmel hochwerren und anfangen zu bauen!
Grundlegende Tags
Jedes HTML-Dokument beginnt mit ein paar notwendigen Tags. Denkt daran, dass dies die Grundlage eurer Webseite ist:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
Hallo, Welt!
</body>
</html>Lassen wir das auseinanderbrechen:
-
<!DOCTYPE html>teilt dem Browser mit, dass es sich um ein HTML5-Dokument handelt. -
<html>ist das Wurzelelement der Seite. -
<head>enthält Metainformationen über das Dokument. -
<title>gibt einen Titel für das Dokument an. -
<body>definiert den Körper des Dokuments, wo der gesamte sichtbare Inhalt hingeht.
Body-Attribute
Das <body>-Tag kann verschiedene Attribute haben, um das Anzeigen des Inhalts zu steuern. Hier sind einige häufige:
| Attribut | Beschreibung |
|---|---|
| bgcolor | Setzt die Hintergrundfarbe |
| background | Setzt ein Hintergrundbild |
| text | Setzt die Textfarbe |
Beispiel:
<body bgcolor="hellblau" text="marineblau">
Willkommen in meiner blauen Welt!
</body>Dies erstellt eine Seite mit einem hellblauen Hintergrund und marineblauem Text. Es ist, als würde man sein Zimmer bemalen, aber für Webseiten!
Text-Tags
HTML bietet mehrere Tags zum Formatieren von Text. Hier sind einige der häufigsten:
| Tag | Beschreibung |
|---|---|
<h1> bis <h6>
|
Überschriften (h1 ist die größte, h6 die kleinste) |
<p> |
Absatz |
<br> |
Zeilenumbruch |
<strong> |
Fettgedruckter Text |
<em> |
Kursiver Text |
Beispiel:
<h1>Willkommen auf meiner Webseite</h1>
<p>Dies ist eine <strong>fette</strong> Aussage.</p>
<p>Dies ist ein <em>betonter</em> Punkt.</p>Links
Links sind das, was das Web zu einem Netz macht! Hier ist, wie man sie erstellt:
<a href="https://www.beispiel.com">Klicke mich!</a>Das href-Attribut gibt die URL der Seite an, auf die der Link zeigt. Du kannst auch zu bestimmten Teilen einer Seite verlinken, indem du IDs verwendest:
<h2 id="abschnitt2">Abschnitt 2</h2>
<a href="#abschnitt2">Gehe zu Abschnitt 2</a>Formatierung
HTML bietet verschiedene Möglichkeiten, deinen Text zu formatieren, neben nur fett und kursiv. Hier sind einige mehr:
| Tag | Beschreibung |
|---|---|
<sup> |
Hochgestellter Text |
<sub> |
Tiefgestellter Text |
<pre> |
Vorformatierter Text |
<code> |
Code-Snippet |
Beispiel:
<p>H<sub>2</sub>O ist Wasser.</p>
<p>2<sup>3</sup> equals 8.</p>
<pre>
Dieser Text
ist vorformatiert.
</pre>
<p>Hier ist etwas <code>inline code</code>.</p>Listen
Listen helfen dabei, Informationen zu organisieren. Es gibt drei Typen in HTML:
- Unsortierte Listen (
<ul>) - Sortierte Listen (
<ol>) - Definitionslisten (
<dl>)
Beispiel:
<ul>
<li>Äpfel</li>
<li>Bananen</li>
<li>Erdbeeren</li>
</ul>
<ol>
<li>Erster Schritt</li>
<li>Zweiter Schritt</li>
<li>Dritter Schritt</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>Grafische Elemente
Bilder können deine Webseite lebendig machen. Hier ist, wie man sie hinzufügt:
<img src="katze.jpg" alt="Eine süße Katze" width="300" height="200">Das src-Attribut gibt die Bilddatei an, alt bietet eine alternative Textbeschreibung für Screen-Reader oder wenn das Bild nicht geladen wird, und width und height setzen die Abmessungen.
Formulare
Formulare ermöglichen es Benutzern, Daten einzugeben. Hier ist ein einfaches Formular:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Absenden">
</form>Dies erstellt ein Formular mit Name- und E-Mail-Feldern sowie einem Senden-Button.
Tabellen
Tabellen werden verwendet, um Daten in Zeilen und Spalten anzuzeigen:
<table border="1">
<tr>
<th>Kopfzeile 1</th>
<th>Kopfzeile 2</th>
</tr>
<tr>
<td>Zeile 1, Zelle 1</td>
<td>Zeile 1, Zelle 2</td>
</tr>
<tr>
<td>Zeile 2, Zelle 1</td>
<td>Zeile 2, Zelle 2</td>
</tr>
</table>Tabellen-Attribute
Tabellen können mit verschiedenen Attributen angepasst werden:
| Attribut | Beschreibung |
|---|---|
| border | Setzt die Dicke des Rahmens |
| cellpadding | Setzt den Abstand zwischen Zellinhalt und Rahmen |
| cellspacing | Setzt den Abstand zwischen Zellen |
| width | Setzt die Breite der Tabelle |
HTML5 input-Tag-Attribute
HTML5 führte neue input-Typen und Attribute ein:
| Typ/Attribut | Beschreibung |
|---|---|
| type="email" | Für E-Mail-Adressen |
| type="date" | Für Datumswähler |
| type="number" | Für numerische Eingaben |
| placeholder | Hinweistext im Eingabefeld |
| required | Macht das Feld erforderlich |
Beispiel:
<input type="email" placeholder="Gib deine E-Mail ein" required>
<input type="date" name="geburtstag">
<input type="number" min="1" max="100">HTML-Editor und Formatierer
Obwohl man HTML in jedem Texteditor schreiben kann, kann ein dedizierter HTML-Editor das Leben einfacher machen. Einige beliebte Optionen sind:
- Visual Studio Code
- Sublime Text
- Atom
Diese Editoren bieten Funktionen wie Syntaxhervorhebung und Autovervollständigung, die euch viel Zeit und Kopfschmerzen ersparen können!
Schlussfolgerung
Und da habt ihr es, Leute! Diese HTML-Kurzreferenz deckt die Grundlagen ab, die ihr braucht, um eure eigenen Webseiten zu erstellen. Denkt daran, HTML ist nur der Anfang. Wenn ihr weitergeht, wollt ihr CSS für das Styling und JavaScript für die Interaktivität lernen.
Das Lernen von HTML ist wie das Lernen einer neuen Sprache - es erfordert Übung. Haltet euch nicht von Experimenten und Fehlern ab. Das ist, wie wir alle lernen! Und wer weiß? Vielleicht wird die nächste große Webseite von dir gebaut!
Frohes Coden und möge eure Tags stets korrekt geschlossen sein!
Credits: Image by storyset