🛠️Aufgabe "Über mich"

Erstelle eine Webseite über dich:

  1. Erstelle auf deinem Rechner einen Modul-Ordner (m101) für all deine kommenden Aufgaben, darin einen Ordner /uebungen.

  2. Erstelle darin eine Datei about-me.html mit dem HTML-Grundgerüst.

  3. Setze im Bereich <head> den Inhalt des <title>-Elementes auf "Über xy" (xy = dein Name).

  4. Füge innerhalb des <body> folgende Angaben zu dir mit sinnvoller HTML-Auszeichnungssprache ein:

    • Überschrift 1, Inhalt wie im <title>-Element

    • Einen "Slogan" zu dir, ein kurzer Satz, der zu dir passt. Falls dir nichts einfällt, gib deinen Namen auf sloganizer.net ein und schau, was raus kommt. :-)

    • Überschrift 2 "Adresse", gefolgt von zwei Absätzen: Deine Wohn-Adresse: Fett gedruckt "Wohnadresse", danach mit Zeilenumbrüchen eine Adresse. Deine Arbeits- oder Schuladresse analog der Wohn-Adresse.

    • 3 Hobbys als Liste mit Aufzählungszeichen

    • Eine Tabelle mit 3 Büchern oder Filmen, welche du spannend findest: Titel, Autor oder Regisseur, Jahr, Seitenzahl, 1 Satz zum Inhalt. Verlinke die Titel mit einer entsprechenden externen Seite, wo die Werke beschreben werden. Erstelle Spaltenüberschriften und danach je Buch / Film eine Zeile in der Tabelle. Styling: Das folgt später mit CSS!

  5. Erstelle ein Foto von dir oder finde ein Foto, welches zu dir passt und speichere es im Aufgaben-Ordner. Verkleinere es auf die Grösse, in der es auf der Webseite erscheinen soll (siehe Tools), z.B. auf 300px, und füge es nach der Überschift 1 ein.

  6. Unterschreibe auf einem weissen Blatt Papier und fotografiere die Unterschrift mit deinem Handy und speichere das Foto in deinen Aufgabenordner. Verkleinere es auf 200px Breite und füge es am Ende deiner Seite ein.

  7. Füge am Ende auf einer Zeile 2-3 Links zu deinen Social-Media-Profilen ein, falls du welche hast, z.B. Instagram | Youtube | Discord - Alternativ kannst du auch auf 1-2 beliebige Websites verlinken.

  8. Kopiere den Code anschliessend in den HTML-Validator und korrigiere allfällige Fehler.

Last updated

Was this helpful?