Einführung in HTML

Aus Xinux Wiki
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:

-

– Überschriften unterschiedlicher Größe.

– Absätze. <a href="url"> – Links zu anderen Seiten. <img src="bild.jpg"> – Einbindung von Bildern.

    ,
      ,
    1. – Listen (ungeordnet und geordnet). , ,
      – 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.