Einführung in HTML
Zur Navigation springen
Zur Suche springen
Einführung in HTML
- Die Hypertext Markup Language (HTML) ist die Standardauszeichnungssprache für Webseiten.
- HTML definiert die Struktur und den Inhalt einer Webseite.
- HTML-Dokumente bestehen aus Elementen, die durch Tags gekennzeichnet sind.
Grundstruktur eines HTML-Dokuments
- Ein einfaches HTML-Dokument besteht aus den folgenden Elementen:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Willkommen auf meiner Webseite</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>
- Wichtige Bestandteile:
- <!DOCTYPE html> – Deklariert das Dokument als HTML5.
- <html> – Wurzelelement des HTML-Dokuments.
- <head> – Enthält Metainformationen über das Dokument.
- <body> – Enthält den sichtbaren Inhalt der Seite.
HTML-Elemente und ihre Bedeutung
- HTML besteht aus verschachtelten Elementen:
''<h1> - <h6>'' – Überschriften unterschiedlicher Größe. ''<p>'' – Absätze. ''<a href="url">'' – Links zu anderen Seiten. ''<img src="bild.jpg">'' – Einbindung von Bildern. ''<ul>, <ol>, <li>'' – Listen (ungeordnet und geordnet). ''<table>, <tr>, <td>'' – Tabellenstruktur. ''<form>, <input>, <button>'' – Formulareingaben.
HTML-Formulare
- Formulare ermöglichen die Eingabe und Übermittlung von Daten:
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Senden</button>
</form>
- Wichtige Attribute:
- action – Gibt die URL an, an die die Daten gesendet werden.
- method – Bestimmt die Übertragungsmethode (GET oder POST).
- input type" – Definiert das Eingabefeld (Text, Passwort, Checkbox etc.).
HTML und CSS
- HTML strukturiert Inhalte, CSS (Cascading Style Sheets) steuert das Design.
- Beispiel für die Verwendung von CSS in HTML:
<head>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: blue; }
</style>
</head>
HTML und JavaScript
- JavaScript ermöglicht interaktive Funktionen in Webseiten.
- Beispiel:
<button onclick="alert('Hallo, Welt!')">Klick mich!</button>
Aufgaben
- Erstelle eine HTML-Seite mit einer Überschrift und einem Absatz.
- Füge ein Bild und einen Link hinzu.
- Erstelle ein einfaches HTML-Formular mit einem Eingabefeld.
Warum ist HTML wichtig?
- Grundlage für jede Webseite.
- Ermöglicht die Strukturierung und Darstellung von Inhalten.
- In Kombination mit CSS und JavaScript bildet es die Basis moderner Webentwicklung.