Willkommen

Hier geht es um Programmierung. Zum Einstieg erst einmal HTML und CSS, später etwas Javascript mit dem Ziel auch mal etwas in Pascal (der alten Zeiten willen) und Python zu machen.

! ! ! S E I T E I M A U F B A U ! ! !

1. HTML

1.1. Ein Bild in eine Webseite einbinden

Ein Bild wir in ein HTML mi Hilfe des img Elements eingefügt. Nach dem Attribut src wird die URL zum gewünschten Bild angegeben. Das ist üblicherseite ein Ordner "neben" den HTML Dateien. Das alt-Attribut beinhaltet Informationen zum Bild. Diese werden gewöhnlich nur angezeigt, wenn mit dem laden des Bildes etwas schief gelaufen ist. Wichtiger sind diese Angaben für Screnreader.

So sieht der Befehl aus:

<img src="" alt="">

Ein konkretes Beispiel dann so:

<img src="pics\Strandbild.JPG" alt="Bild vom Strand in der Abenddaemmerung." > [und so sieht es aus; "klicken"]

Auf Mobilgeräten mit kleinerem Bildschirm (oder in Webbrowsern am PC im entsprechendem Modus (Beispiel: Firefox Strg + Umschalttaste + M)) wird nur ein Ausschnitt des Bildes dargestellt. Mit dem width-Attribut können wir die Breite festlegen. Entweder auf eine fixe Breite, das löst aber unser Problem mit dem kleinen Bildschirm nicht, oder flexibel.

Das geht mit width=100% height="100%". Hier ein Beispiel. Heute wird das allerdings bevorzugt mit CSS umgesetzt.

Jetzt stehen die Bilder natürlich etwas einsam auf der Seite. Dem kann mit einer Beschriftung abgeholfen werden. Dabei wird das Bild einfach in ein figure Element eingebettet.

Funktioniert so:

Die Bildunterschrift wird mit <figcaption>Leuchtturm in Hirtshals / Dänemark (2022)</figcaption > erzeugt. Und das Ganze wieder mit </figure> abgeschlossen.