tinyurl.com/46p33sf2

Geben Sie diese Web-Adresse in einem Web-Browser ein, um die online Version der Übungen zu sehen. Dort können Sie den genannten Verweisen folgen.

HTML Teil 2: HTML-Elemente und Semantik

Übung 1

Grundwissen zu HTML

Lesen Sie den Anfang des folgenden Artikels bis zum Abschnitt "inhaltsleere Elemente":

selfhtml: Element, Tag und Attribut

Beantworten Sie anschließend die folgenden Fragen durch schriftliche Notizen:

  1. Was bedeutet der Begriff "semantisch"?
  2. Was bedeutet der Begriff "Markup"?
  3. Wozu dienen "Tags"?
  4. Mit welchen zwei Arten von Tags werden fast alle HTML-Elemente gebildet?
  5. Wie lautet der einleitende Tag für ein h1 HTML-Element?
  6. Wie lautet der abschließende Tag für ein h1 HTML-Element?

Übung 2

Einige grundlegende Tags

Beschreiben Sie durch kurze schriftliche Notizen, welche semantische Bedeutung jeweils diese HTML-Elemente haben:

  1. h1
  2. h2
  3. p
  4. ul
  5. li

Lesen Sie auch jeweils die folgenden Artikeln:

Übung 3

Mein erstes HTML Dokument

Öffnen Sie den Codepen Online Editor.

Stellen Sie sicher, dass Sie in dem Code-Bereich mit der Überschrift "HTML" (rotes Icon) tippen.

Erstellen Sie dort die folgenden drei HTML-Elemente in dieser Reihenfolge:

Übung 4

Star Wars Fanpage

Öffnen Sie den Codepen Online Editor.

Erstellen Sie ein HTML-Dokument, um die folgende Inhalte korrekt auszuzeichnen. Nutzen Sie dazu die Überschriften erster und zweiter Ordnung, Textabsätze sowie Ungeordnete Listen.

Meine Star Wars Fanpage

Filme

Dies sind meine liebsten Star Wars Filme:

- A New Hope
- The Empire Strikes Back
- Return of the Jedi

Serien

Diese Serien finde ich besonders gut:

- The Mandalorian
- Andor
- Ahsoka

Übung 5

Textauszeichnungen

Informieren Sie sich in den folgenden Artikeln zur Bedeutung und zum Einsatz des em und des strong HTML-Elementes:

Arbeiten Sie weiter an Ihrer Star Wars Fanpage.

Zeichnen Sie die diese Wörter in den beiden Textabschnitten wie folgt aus:

Orientieren Sie sich dabei an diesem Beispiel:

<p>
	Am liebsten lese <em>ich</em> diese <strong>Bücher</strong>:
</p>

Übung 6

Bilder

Informieren Sie sich in dem folgenden Artikeln zur Bedeutung des img HTML-Elementes:

selfhtml: img

Bitte beachten Sie, dass das img HTML-Element eine seltene Ausnahme darstelltet. Es besteht nur aus einem Start-Tag und darf kein Ende-Tag haben.

Arbeiten Sie weiter an Ihrer Star Wars Fanpage.

Fügen Sie ein Bild unterhalb der ersten Überschrift zu der Seite hinzu. Nutzen Sie dazu diese Attribute:

Attribut-Name Attribut-Wert
src https://lumiere-a.akamaihd.net/v1/images/grogu-main_89c92eaa.jpeg
alt Star Wars
width 500

(Sie können die Web-Adressen der Bilder mit der rechten Maustaste anklicken und dann "Adresse kopieren" oder ähnliches wählen. Anschließend können Sie die Web-Adresse in Ihren HTML-Code einfügen)

Orientieren Sie sich an diesem Beispiel:

<img src="https://..." alt="Beispiel" width="300">

Übung 7

Links

Informieren Sie sich in dem folgenden Artikeln zur Bedeutung des a HTML-Elementes:

selfhtml: a

Arbeiten Sie weiter an Ihrer Star Wars Fanpage.

Die Listen der Filme sollen durch Links (Verweise) markiert werden.

Nutzen Sie die folgenden Web-Adressen für das href Attribut.

Filme Web-Adresse
A New Hope https://www.starwars.com/films/star-wars-episode-iv-a-new-hope
The Empire Strikes Back https://www.starwars.com/films/star-wars-episode-v-the-empire-strikes-back
Return of the Jedi https://www.starwars.com/films/star-wars-episode-vi-return-of-the-jedi

(Sie können die Web-Adressen mit der rechten Maustaste anklicken und dann "Adresse kopieren" oder ähnliches wählen. Anschließend können Sie die Web-Adresse in Ihren HTML-Code einfügen)

Orientieren Sie sich an diesem Beispiel:

<li>
	<a href="https://...">
		Beispiel
	</a>
</li>

Übung 8

Weitere Fanpages

Arbeiten Sie weiter an Ihrer Star Wars Fanpage.

Ihre Fanpage soll neben dem Thema Star Wars auch noch Inhalte zu weiteren Vorlieben enthalten. Dazu sollen neben dem eigentliche Hauptinhalt dieser Seite noch weitere Themen als Nebeninhalt gezeigt werden.

Überarbeiten Sie die Struktur Ihrer Fanpage wie folgt