Vorlagen

Vorlage (normal)
Vorlage (Bootstrap)

Aufgabensammlung Grundlagen HTML

100 Arbeitsblatt: Einführung in HTML
102 Arbeitsblatt: Hyperlinks in HTML

Aufgabe 1 Grundlagen HTML

• Erstelle eine HTML-Seite mit einer Überschrift (h1) und einem Absatz (p).
• Füge dem Absatz einen roten Hintergrund hinzu.
• Gib der Überschrift eine Schriftgröße von 36 Pixeln und eine grüne Schriftfarbe.
• Erstelle eine Tabelle mit zwei Spalten und mindestens zwei Zeilen.
• Gestalte die Tabelle mit Bootstrap-Klassen, um abwechselnde Hintergrundfarben für die Zeilen zu haben.
• Erstelle ein <div>-Element mit einer Umrandung von 2 Pixeln und einer roten Farbe.
• Erstelle ein weiteres <div>-Element mit einem doppelten Rahmen von 3 Pixeln und einer blauen Farbe.

Aufgabe 2 Grundlagen HTML

• Erstelle eine HTML-Seite mit einer Überschrift (h1) und einem Absatz (p).
• Erstelle eine HTML-Seite mit einer Überschrift.
  Hinweis: Verwende das <h1>-Element für die Überschrift.
• Erstelle eine HTML-Seite mit einem Absatztext.
  Hinweis: Verwende das <p>-Element für den Absatztext.
• Erstelle eine HTML-Seite mit einem fett gedruckten Text.
  Hinweis: Verwende das <strong>-Element, um den Text fett zu formatieren.
• Erstelle eine HTML-Seite mit kursivem Text.
  Hinweis: Verwende das <em>-Element, um den Text kursiv zu formatieren.
• Erstelle eine HTML-Seite mit einer nummerierten Liste.
  Hinweis: Verwende das <ol>-Element für die nummerierte Liste und das <li>-Element für jeden Listeneintrag.
• Erstelle eine HTML-Seite mit einer Aufzählungsliste.
  Hinweis: Verwende das <ul>-Element für die Aufzählungsliste und das <li>-Element für jeden Listeneintrag.
• Erstelle eine HTML-Seite mit einem Link zu einer externen Website.
  Hinweis: Verwende das <a>-Element mit dem href-Attribut, um einen Link zu erstellen.
• Erstelle eine HTML-Seite mit einem Bild aus dem Internet allerdings mit einer URL.
  Hinweis: Verwende das <img>-Element mit dem src-Attribut, um ein Bild einzufügen.
• Erstellen eine HTML-Seite mit einer Tabelle mit vier verschiedenen Spalten.
  Hinweis: Verwende das <table>-Element, das <tr>-Element für eine Tabellenzeile, das <th>-Element für eine Tabellenüberschrift und das <td>-Element für eine Zelle.
• Erstelle eine HTML-Seite mit einem Formular und einem Texteingabefeld.
  Hinweis: Verwende das <form>-Element und das <input>-Element mit dem type="text"-Attribut, um ein Texteingabefeld zu erstellen.

Aufgabe 3 Grundlagen HTML

• Grundlegende Hyperlink-Syntax: Erstelle einen einfachen Hyperlink zu einer externen Webseite (z. B. https://www.example.com) und benenne ihn "Besuche die Beispiel-Webseite". Füge außerdem eine Beschreibung hinzu, die beim Überfahren des Links angezeigt wird.
• Verlinkung zu einer internen Seite Angenommen, du hast eine Webseite mit dem Namen "about.html" im gleichen Ordner wie deine aktuelle HTML-Datei. Erstelle einen Hyperlink zu dieser internen Seite und benenne ihn "Über uns". Füge auch eine Beschreibung für den Link hinzu.
• Verlinkung zu einem Bild Stelle dir vor, du hast ein Bild namens "bild.jpg" im Unterordner "bilder". Erstelle einen Hyperlink, der dieses Bild öffnet, und benenne ihn "Bild ansehen". Vergiss nicht, eine passende Beschreibung hinzuzufügen.
• Verlinkung in einem Unterordner Angenommen, du hast eine Webseite mit dem Namen "services.html" im Unterordner "unterordner". Erstelle einen Hyperlink zu dieser Seite und benenne ihn "Unsere Services". Füge eine passende Beschreibung für den Link hinzu.
• Verlinkung in einem übergeordneten Ordner Angenommen, du hast eine weitere HTML-Datei mit dem Namen "index.html" im übergeordneten Ordner. Erstelle einen Hyperlink zu dieser Seite und benenne ihn "Zur Startseite zurückkehren". Füge auch hier eine passende Beschreibung hinzu.
• Mailto-Link Erstelle einen Mailto-Link, der eine E-Mail an "deine.email@example.com" sendet. Benenne den Link "Kontaktiere mich per E-Mail" und füge eine passende Beschreibung hinzu.