|
| 1 | +--- |
| 2 | +title: Übungsaufgabe HTML |
| 3 | +date: 2026-02-03 |
| 4 | +lang: de-DE |
| 5 | +author: "Silas Schnurr" |
| 6 | +... |
| 7 | + |
| 8 | +# Übungsaufgabe HTML |
| 9 | + |
| 10 | +In dieser Übung erstellen Sie eine einfache Nachrichten-Webseite, um die Grundlagen von HTML zu festigen und den Umgang mit grundlegenden HTML-Elementen zu üben. |
| 11 | + |
| 12 | +## Projekt erstellen |
| 13 | + |
| 14 | +1. Erstellen Sie einen neuen Projektordner und legen Sie darin eine Datei namens `index.html` an. |
| 15 | +2. Öffnen Sie die Datei index.html in einem Texteditor (z. B. Visual Studio Code oder Notepad++) und in einem Browser. |
| 16 | + |
| 17 | +## Einfache Nachrichten-Seite mit bekannten Mitteln erstellen |
| 18 | + |
| 19 | +Erstellen Sie eine kleine Nachrichten-Webseite mit den Ihnen bekannten HTML-Elementen. Orientieren Sie sich dabei an folgenden Anforderungen: |
| 20 | + |
| 21 | +### Teil 1: Übersichtsseite |
| 22 | + |
| 23 | +Fügen Sie in der index.html folgende Elemente ein: |
| 24 | + |
| 25 | +- Eine Hauptüberschrift mit dem Titel der Seite (z. B. “Meine Nachrichten”). |
| 26 | +- Eine unsortierte Liste, in der jeder Eintrag ein Hyperlink zu einem Artikel ist. Nutzen Sie relative Links, z. B. `artikel1.html`, für die Verknüpfungen. |
| 27 | +- Geben Sie jedem Listeneintrag einen Titel für einen Artikel |
| 28 | + |
| 29 | +### Teil 2: Artikel-Seite |
| 30 | + |
| 31 | +- Erstellen Sie mindestens eine zweite Datei z. B. `artikel1.html`. |
| 32 | +- Fügen Sie folgende Inhalte in die Datei ein: |
| 33 | + - Eine Überschrift, die den Titel des Artikels wiedergibt. |
| 34 | + - Eine Unterüberschrift mit einer kurzen Zusammenfassung |
| 35 | + - Einen Absatz mit einem Beispieltext. |
| 36 | + - Ein Bild, auf welches man klicken kann, um zurück zur index.html Seite zu gelangen. |
| 37 | + |
| 38 | +### Teil 3: Stilisieren Sie den Inhalt mit zusätzlichen Elementen |
| 39 | + |
| 40 | +Ergänzen Sie in beiden Dateien: |
| 41 | + |
| 42 | +- Hervorhebungen im Text. |
| 43 | +- Einen horizontalen Trenner zwischen verschiedenen Abschnitten. |
| 44 | +- Eine nummerierte Liste, die thematisch zum Artikel passt |
| 45 | +- Fügen Sie in der `artikel1.html` eine Tabelle mit Rahmen hinzu |
| 46 | + |
| 47 | +### Teil 4: Theoretische Fragen |
| 48 | + |
| 49 | +- Welche Technologie kann man nutzen, wenn man möchte, dass neue Artikel auf der Seite automatisch erscheinen? |
| 50 | +- Die Buchsteben _HT_ in HTML und HTTP stehen für **H**yper**t**ext. In welchem Bezug stehen HTML und HTTP? |
| 51 | +- Was sind mögliche Folgen, wenn man das charset nicht im `<head>` der HTML-Datei angibt? |
| 52 | +- Informieren Sie sich über das `alt`-Attribut des `img`-Elements. Warum ist es sinnvoll, das `alt`-Attribut zu verwenden? |
| 53 | + |
| 54 | +## Hinweise |
| 55 | + |
| 56 | +- Sie können den Lorem Ipsum Generator zur Erstellung von Beispieltext nutzen: [loremipsum.de](https://loremipsum.de/) |
| 57 | +- Testen Sie regelmäßig Ihre Seite im Browser, um sicherzustellen, dass alle Links und Inhalte korrekt angezeigt werden. |
0 commit comments