HTML - Steckbrief programmieren

Du erstellst Schritt für Schritt deinen eigenen Steckbrief als HTML-Seite.

Vorbereitung

Öffne den Editor und lösche im linken HTML-Feld des Editors alles und beginne mit dieser Vorlage:

<article>
  <h1>Mein Steckbrief</h1>
  …
</article>

Alles, was du ergänzt, kommt anstelle der … – also zwischen <article> und </article>.

Editor öffnen

Aufgabe 1

Schreib einen kurzen Satz über dich:

<p>Hier steht dein Satz über dich.</p>

Neuer Tag: <p> (paragraph) – ein Absatz/Textblock.

Aufgabe 2

Liste mindestens drei Hobbys auf, die dir wichtig sind. Nutze dafür eine Liste.

<h2>Meine Hobbys</h2>
<ul>
  <li>Hobby 1</li>
  <li>Hobby 2</li>
  <li>Hobby 3</li>
</ul>

Neue Tags:

• <h2> – eine Unterüberschrift, hier für den Abschnitt „Hobbys“.
• <ul> (unordered list) – eine Liste ohne Reihenfolge/Nummerierung.
• <li> (list item) – ein einzelner Punkt in der Liste.

Aufgabe 3

Mach eine Liste deiner Lieblings-Apps oder Webseiten – diesmal aber jeweils verlinkt, damit man draufklicken kann.

<ul>
  <li><a href="https://www.youtube.com">YouTube</a></li>
  <li><a href="https://www.wikipedia.org">Wikipedia</a></li>
</ul>

Neuer Tag: <a> (anchor) – ein Link.

• href="…" gibt die Adresse (URL) an, zu der der Link führt.
• Der Text zwischen <a> und </a> ist das, worauf man klickt.

Aufgabe 4

Füge ein Bild deines Lieblingsessens ein. Du kannst dafür entweder ein Bild aus dem Internet verlinken (Rechtsklick auf ein Bild → Bildadresse kopieren) oder ein eigenes Foto verwenden, das du irgendwo online hochgeladen hast (z. B. in einer Cloud mit öffentlichem Link).

<img src="https://beispiel.de/pizza.jpg" alt="Eine Pizza mit Salami und Käse">

Neuer Tag: <img> (image) – bindet ein Bild ein. <img> hat keinen schließenden Tag.

• src="…" gibt die Bildadresse an.
• alt="…" ist ein Pflicht-Attribut: eine kurze Textbeschreibung des Bildes für Menschen, die das Bild nicht sehen können (z. B. Screenreader) oder wenn das Bild nicht lädt.

Speichern

Wenn du fertig bist, klicke im Editor auf Speichern. Dadurch wird deine Seite als fertige .html-Datei heruntergeladen. Lade die Datei anschließend im Kursnotizbuch hoch.

Zusatzaufgabe (für Schnelle)

• Hebe ein wichtiges Wort in deinem Satz mit <strong> (fett) oder <em> (kursiv) hervor.
• Füge einen weiteren Abschnitt hinzu, z. B. „Meine Lieblingsmusik“ oder „Das will ich noch lernen“, mit eigener <h2>-Überschrift.
• Öffne einen deiner Links mit target="_blank" in einem neuen Tab: <a href="…" target="_blank">Text</a>.

Diese Tags kommen vor

{{TOC}}