HTML Schnellstart / HTML Schnellstart Modul 1 – HTML 5 einfach verstehen
0%
In Bearbeitung

Coding-Challenge: Deine erste HTML Seite

Du kennst jetzt bereits die Elemente p, b, i, img, div, h1 - h6 und die Attribute src und title.

Wie funktioniert diese Challenge?

  1. Diese Coding-Challenge besteht aus 5 verschiedenen Aufgaben.
  2. Jede Aufgabe wird einzeln gelöst und in den untenstehenden Code-Editor eingegeben.

Probleme? Wenn du eine Aufgabe nicht lösen kannst, klicke auf die jeweilige Code-Lösung unter der Aufgabe. Den Code dieser fertigen Lösung kannst du dann kopieren und in den Code-Editor einfügen.

Aber bitte nicht schummeln. Versuche zunächst die Aufgaben selbständig zu lösen 😉

Starten wir mit der ersten Aufgabe:

1. Überschrift der Webseite formatieren

Füge folgenden Text als Überschrift (h1-Element) ein: "Herzlich Willkommen auf meiner ersten HTML-Webseite!"

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<h1>Herzlich Willkommen auf meiner ersten HTML-Webseite!</h1>

[/lp_spoiler]

2. Text als Absatz markieren

Füge folgende Sätze als Absätze (p-Element) ein:

"Ich habe es geschafft! Ich habe auf lerneProgrammieren.de meine erste Webseite gebaut. "

"Mit meinem neuen Wissen kann ich HTML-Dokumente lesen und schreiben. Ich verstehe Elemente und Attribute und wie Elemente miteinander verschachtelt sein können."

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<p>Ich habe es geschafft! Ich habe auf lerneProgrammieren.de meine erste Webseite gebaut.</p>
<p>Mit meinem neuen Wissen kann ich HTML-Dokumente lesen und schreiben. Ich verstehe Elemente und Attribute und wie Elemente miteinander verschachtelt sein können.</p>

[/lp_spoiler]

3. Bild einfügen

Füge ein Bild (img-Element) mit der URL "/assets/img/lptup.jpg" ein.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<img src="/assets/img/lptup.jpg">

[/lp_spoiler]

4. Text fett markieren

Füge folgenden Satz ein (p-Element) und formatiere diesen fett (b-Element): "EINFACH GROßARTIG"

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<p><b>EINFACH GROßARTIG</b></p>

[/lp_spoiler]

5. Text kursiv markieren

Füge folgenden Satz mit deinem Namen ein (p-Element) und formatiere diesen kursiv (i-Element): "Liebe Grüße ... "

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<p><i>Liebe Grüße Arek</i></p>

[/lp_spoiler]

Fertig! Damit hast du deine erste Webseite erstellt!