2. Webseite: Über Dich

Vorbereitung

• Erstelle eine neue Textdatei.
• Schreibe drei, vier Absätze über dich, schreibe einen Titel und Zwischentitel. Was macht dich besonder, was interessiert dich, wieso hast du die IMD-Lehre gewählt?
• Suche 3,4 Bilder heraus die dich beschreiben (das neueste aus deinem Smartphone, ein passendes Gif etc.)
• Speichere die Datei in einem neuen Ordner. Lege die Bilder in demselben Ordner ab.

  Dein Text sollte nun unformatiert so aussehen ( der Screenshot ist aus einem Artikel des Tages bei Wikipedia ).

HTML

Speichere die Datei als HTML-Datei ab (.html) und schau sie dir im Browser an. Was ist passiert?

(Falls Sonderzeichen falsch dargestellt werden, beachte es erstmal nicht, dazu kommen wir später noch.)

Zeichne nun die verschiedenen Textblöcke mit HTML aus. Verlinke ein Wort oder einen Abschnitt.

Die HTML-Elemente die du dafür benötigst:

• h1, h2, h3, h4, h5, h6
• p
• a

Bilder

Binde die Bilder ein. Dafür benötigst du das img-Tag (von Image, Bild). Dieses musst du mit einigen Attributen versehen, damit das Bild angezeigt wird. Ausserdem benötigst du kein schliessendes Tag, das img-Tag ist standalone.

Das scr-Attribut enthält den Dateipfad des Bildes (src für Source, Quelle). Nur ein Dateiname bedeutet, dass die Grafikdatei im selben Ordner liegt wie die Webseite.

Zu jedem Bild gehört ein alt-Text. Dieser wird angezeigt wenn das Bild noch nicht geladen wurde (man kann schon erahnen was da kommt) oder er wird vorgelesen, wenn jemand einen Screenreader benutzt.

Hinweis zu Dateinamen:
Es empfiehlt sich bei der Vergabe von Dateinamen für Dateien im Web etwas einzuschränken. Wer folgende Regeln befolgt, spart sich viel Kopfzerbrechen: keine Leerstellen, keine Umlaute und wenn möglich Kleinschreibung.

Das sieht dann z.B. so aus:

<img src="mdn-logo-sm.png" alt="MDN">