Skip to content

Latest commit

 

History

History
83 lines (61 loc) · 9.03 KB

01c_html-dom_basics.adoc

File metadata and controls

83 lines (61 loc) · 9.03 KB

Übungsaufgabe zu Modul 1c (HTML und DOM: Grundlagen)

In dieser Übungsaufgabe werden die Grundlagen für die Erstellung von HTML-Dokumenten geübt. Die Übung dient dazu, sich mit einigen der grundlegenden HTML-Tags vertraut zu machen.

Sie arbeiten für diese Übung in der Datei index.html und erarbeiten deren Inhalt anhand der Teilaufgaben. Für jeden der Arbeitsschritte gibt es einen Testfall, der Ihnen anzeigt, ob Ihre Umsetzung korrekt ist. Diese Tests können Sie durch Öffnen der Datei test/test.html im Browser durchführen. Wenn Sie wie empfohlen mit Stackblitz arbeiten und die Entwicklungsumgebung über den Link aus <initial-ide> öffnen, ist alles voreingestellt.

Aufgabenbeschreibung

Nachfolgend sind die Teilaufgaben beschrieben. Versuche Sie, diese eigenständig umzusetzen. Anhand der Tests sehen Sie, ob Ihre Umsetzung korrekt ist. Für den Fall, dass Sie selbst nicht weiterwissen, finden Sie weiter unten eine detaillierte Anleitung. Zudem ist ein Lösungsbeispiel verlinkt.

  1. Erstellen Sie das Grundgerüst eines validen HTML-Dokuments (HTML 5), bestehend aus dem Root-Tag html sowie den beiden Bereichen, die durch die Tags head und body ausgezeichnet werden. Denken Sie auch an ggf. notwendige Zusatzangaben und Attribute. Wenn alles korrekt angegeben ist, sind alle Tests in der Gruppe "part 1: structure" erfolgreich.

  2. Befüllen Sie nun den Bereich head so, dass der Titel als "Basics" angegeben ist und geben Sie als Autor bzw. Autorin Ihren eigenen Namen an. Wenn alles korrekt angegeben ist, sind alle Tests in der Gruppe "part 2: metadata" erfolgreich.

  3. Erstellen Sie im Bereich body eine Überschrift erster Ordnung mit dem Text "Grundlagen der Web-Programmierung". Wenn alles korrekt angegeben ist, sind alle Tests in der Gruppe "part 3: content" erfolgreich.

  4. Erstellen Sie im Bereich body unter der Überschrift erster Ordnung eine Überschrift zweiter Ordnung mit dem Text "Inhalte". Als Erklärungstext erstellen Sie darunter einen Absatz mit dem Text "Im Bereich der Grundlagen werden verschiedene Themengebiete beleuchtet, die für das Verständnis der Web-Programmierung unbedingt erforderlich sind.". Erstellen Sie dann eine nummerierte Liste mit den Elementen "HTML", "CSS" und "Javascript". Wenn alles korrekt angegeben ist, sind alle Tests in der Gruppe "part 4: content" erfolgreich.

  5. Erstellen Sie im Bereich body unterhalb der zuvor erstellten Elemente eine Überschrift zweiter Ordnung mit dem Text "Versionen". Darunter erstellen Sie eine Tabelle mit den Spaltenbezeichnungen "Version", "Datum" und "Autor" in der Kopfzeilenspalte. Fügen Sie der Tabelle eine Zeile hinzu, die als Werte "v1", "13.09.2024" und "Andreas Rehmann" enthält. Wenn alles korrekt angegeben ist, sind alle Tests in der Gruppe "part 5: content" erfolgreich.

  6. Erstellen Sie im Bereich body unterhalb der zuvor erstellten Elemente eine Überschrift zweiter Ordnung mit dem Text "Hochschule". Erstellen Sie außerdem Bild, das als Quelle auf https://www.dhbw-vs.de/files/img/logo_mobile.png verweist und als Alternativtext "DHBW Logo" angibt. Bei Klick auf das Bild soll sich die Website https://www.dhbw-vs.de in einem neuen Tab öffnen. Wenn alles korrekt angegeben ist, sind alle Tests in der Gruppe "part 6: content" erfolgreich.

Anleitung

Die nachfolgende Anleitung führt Sie Schritt für Schritt durch die Umsetzung der Aufgaben aus dem vorhergehenden Kapitel.

  1. Erstellen Sie das Grundgerüst eines validen HTML-Dokuments (HTML 5), bestehend aus dem Root-Tag html sowie den beiden Bereichen, die durch die Tags head und body ausgezeichnet werden. Denken Sie auch an ggf. notwendige Zusatzangaben und Attribute. Wenn alles korrekt angegeben ist, sind alle Tests in der Gruppe "part 1: structure" erfolgreich.

    1. Geben Sie den DOCTYPE als html an.

    2. Fügen Sie dem Dokument das Element html mit Start- und End-Tag hinzu.

    3. Ergänzen Sie das Attribut lang mit dem Wert de am vorher erstellen Element html.

    4. Fügen Sie das Element head mit Start- und End-Tag innerhalb des Elements html ein.

    5. Fügen Sie das Element body mit Start- und End-Tag innerhalb des Elements html ein.

  2. Befüllen Sie nun den Bereich head so, dass der Titel als "Basics" angegeben ist und geben Sie als Autor bzw. Autorin Ihren eigenen Namen an. Wenn alles korrekt angegeben ist, sind alle Tests in der Gruppe "part 2: metadata" erfolgreich.

    1. Erstellen Sie innerhalb des Elements head den Tag title und hinterlegen Sie den Wert Basics.

    2. Erstellen Sie innerhalb des Elements head den Tag meta. Erstellen Sie das Attribut name mit dem Wert author und ein weiteres Attribut content, das Sie als Wert mit Ihrem eigenen Namen belegen.

  3. Erstellen Sie im Bereich body eine Überschrift erster Ordnung mit dem Text "Grundlagen der Web-Programmierung". Wenn alles korrekt angegeben ist, sind alle Tests in der Gruppe "part 3: content" erfolgreich.

    1. Erstellen Sie innerhalb des Elements body den Tag h1.

    2. Hinterlegen Sie für das neue Element den Wert Grundlagen der Web-Programmierung.

  4. Erstellen Sie im Bereich body unter der Überschrift erster Ordnung eine Überschrift zweiter Ordnung mit dem Text "Inhalte". Als Erklärungstext erstellen Sie darunter einen Absatz mit dem Text "Im Bereich der Grundlagen werden verschiedene Themengebiete beleuchtet, die für das Verständnis der Web-Programmierung unbedingt erforderlich sind.". Erstellen Sie dann eine nummerierte Liste mit den Elementen "HTML", "CSS" und "Javascript". Wenn alles korrekt angegeben ist, sind alle Tests in der Gruppe "part 4: content" erfolgreich.

    1. Erstellen Sie unter den zuvor erstellten Elementen den Tag h2 und hinterlegen Sie den Wert Inhalte.

    2. Erstellen Sie darunter den Tag p und hinterlegen Sie den Wert Im Bereich der Grundlagen werden verschiedene Themengebiete beleuchtet, die für das Verständnis der Web-Programmierung unbedingt erforderlich sind.. Ersetzen Sie im Text Umlaute durch die entsprechenden HTML-Entities.

    3. Erstellen Sie darunter den Tag ol und als darin geschachtelte Elemente je ein li für jeden der Werte HTML, CSS und Javascript.

  5. Erstellen Sie im Bereich body unterhalb der zuvor erstellten Elemente eine Überschrift zweiter Ordnung mit dem Text "Versionen". Darunter erstellen Sie eine Tabelle mit den Spaltenbezeichnungen "Version", "Datum" und "Autor" in der Kopfzeilenspalte. Fügen Sie der Tabelle eine Zeile hinzu, die als Werte "v1", "13.09.2024" und "Andreas Rehmann" enthält. Wenn alles korrekt angegeben ist, sind alle Tests in der Gruppe "part 5: content" erfolgreich.

    1. Erstellen Sie unter den zuvor erstellten Elementen den Tag h2 und hinterlegen Sie den Wert Versionen.

    2. Erstellen Sie ein Element table.

    3. Im zuvor erstellen Element table erstellen Sie ein Element tr mit je einem Element th für jeden der Werte Version, Datum und Autor.

    4. Im zuvor erstellen Element table erstellen Sie ein weiteres Element tr mit je einem Element td für jeden der Werte v1, 13.09.2024 und Andreas Rehmann.

  6. Erstellen Sie im Bereich body unterhalb der zuvor erstellten Elemente eine Überschrift zweiter Ordnung mit dem Text "Hochschule". Erstellen Sie außerdem Bild, das als Quelle auf https://www.dhbw-vs.de/files/img/logo_mobile.png verweist und als Alternativtext "DHBW Logo" angibt. Bei Klick auf das Bild soll sich die Website https://www.dhbw-vs.de in einem neuen Tab öffnen. Wenn alles korrekt angegeben ist, sind alle Tests in der Gruppe "part 6: content" erfolgreich.

    1. Erstellen Sie unter den zuvor erstellten Elementen den Tag h2 und hinterlegen Sie den Wert Hochschule.

    2. Erstellen Sie darunter einen Tag a. Weisen Sie dem Attribut href den Wert https://www.dhbw-vs.de und dem Attribut target den Wert _blank zu.

    3. Erstellen Sie innerhalb des zuvor erstellten Tags den Tag img. Weisen Sie dem Attribut src den Wert https://www.dhbw-vs.de/files/img/logo_mobile.png und dem Attribut alt den Wert DHBW Logo zu.