Tutorial Text mit Bildern

Jimdo bietet das kombinierte Bild-Textmodul, welches aber nur das hinzufügen von einem Bild ermöglicht. Mit dem reinen Textmodul sind aber auch mehrere Bilder im Text möglich.

Um im Textmodul, einem Text Bilder hinzuzufügen, wählt man, im Editor des Moduls, den Html Reiter. Im dortigen Fenster fügt man in der Textpassage, dort wo das Bild erscheinen soll, einen Html Tag ein.

Dieser kann bzw. sollte wie folgt aussehen:

Die Werte hspace und vspace erzeugen den horizontalen und vertikalen Abstand des Bildes zum Text. Der Wert height legt die prozentuale Größe des Bildes fest. Anstelle des prozentualen Werts kann man auch eine Pixelangabe machen, indem man dem Wert ein px anfügt. Dies ist immer dann angebracht, wenn man beide Werte angibt, width und height. Auch kann man dem Wert das Prozentzeichen (%) zufügen Die Breite braucht in diesem Besipiel nicht angegeben zu werden. Align=left lässt den Text rechts um das Bild fließen. Bei alt kann man zwischen " " einen Alterenativnamen des Bildes angeben.

Weitere Html Tags die man benutzen kann:

Bei dieser Variante wird eine Styleanweisung angegeben um das align zu vermeiden, da nicht mehr zeitgemäß.

Durch die Anweisung float und die Richtung right oder left, wird der Text um das Bild herumgeführt.

Hier wird dem Bild ein Rahmen hinzugefügt:

Eine weitere Variante kann wie folgt aussehen:

Hier werden mit width und height die Breite und Höhe in Pixeln angegeben. Zusätzlich erhält das Bild einen Rahmen, wobei solid für einen geschlossene, gerade Linie steht. Man kann auch anstelle von solid dottet (gepunktet), dashed (gestrichelte Linie), groove, ridge,inset,outset (verschiedene 3D Rahmen),sowie double für eine doppelte Linie benutzen. Um keinen Rahmen anzuzeigen benutzt man none.

Noch ein Tipp:

Wenn der Textfluß bei größeren Bildern unterbrochen, aber unter dem Bild fortgesetzt werden soll, so muss an der betreffenden Stelle im Text, noch dieser Html Tag eingefügt werden.

<BR CLEAR=ALL>

Noch eine Variante:

Bei dieser Variante wir auf hspace und vspace zu Gunsten von margin verzichtet. Margin bezeichnet den Abstand. Man kann auch margin-top, margin-bottom, margin-right, margin-left verwenden, um den Abstand in diesen Abschnitten zu erzeugen. Hinter # wird der Hexwert der gewünschten Rahmenfarbe angegeben.

Unten ein Beispiel für diesen Html Tag:

Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Testbild 1

Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne...

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder

Mehrere Bilder in einem Textmodul

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,

fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean

imperdiet. Etiam ultricies nisi vel augue. Curabiturullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel,
luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed

fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,

fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.