2.14.6 Grafik und Text

• 1 Grafiken ausrichten
  • a) Grafik zum umgebenden Text ausrichten
  • b) Text um Grafik fließen lassen
  • c) Grafik und andere Inhalte ausrichten mit Tabellen
  • d) Grafiken ausrichten mit CSS
• 2 Grafik fliessend in den Text einbinden (float)
  • a) Bild ohne Rahmen, rechts vom Text
  • b) Bild mit punktiertem Rahmen, rechts vom Text
  • c) Bild mit Rahmen, rechts vom Text und eingefügter Bildlegende (caption)
  • d) Das Bild ist im Text und vertikal ausgerichtet
  • e) Der erste Buchstabe "schwimmt" links oben vom Abschnitt
• 3 Grafik mit Text in Tabellen

-

⇧ 1 Grafiken ausrichten

• a) Grafik zum umgebenden Text ausrichten
• b) Text um Grafik fließen lassen
• c) Grafik und andere Inhalte ausrichten mit Tabellen
• d) Grafiken ausrichten mit CSS

• SELFHTML de Grafiken ausrichten

-

↑ a) Grafik zum umgebenden Text ausrichten

• SELFHTML de Grafik zum umgebenden Text ausrichten
  SELFHTML de Beispiel: Woran der Denker denkt

• Bachmann (via Wayback) de Grafik und Text

-

↑ b) Text um Grafik fließen lassen

• SELFHTML de Text um Grafik fließen lassen
  SELFHTML de Beispiel: Ein Text

-

↑ c) Grafik und andere Inhalte ausrichten mit Tabellen

• SELFHTML de Grafik und andere Inhalte ausrichten mit Tabellen
  SELFHTML de Beispiel: Schadenfreude ...

-

↑ d) Grafiken ausrichten mit CSS

• SELFHTML de Grafiken ausrichten mit CSS
  SELFHTML de Beispiel: Woran der Denker denkt

-

⇧ 2 Grafik fliessend in den Text einbinden (float)

• a) Bild ohne Rahmen, rechts vom Text
• b) Bild mit punktiertem Rahmen, rechts vom Text
• c) Bild mit Rahmen, rechts vom Text und eingefügter Bildlegende (caption)
• d) Das Bild ist im Text und vertikal ausgerichtet
• e) Der erste Buchstabe "schwimmt" links oben vom Abschnitt

HTML: Position: float

-

↑ a) Bild ohne Rahmen, rechts vom Text

• W3Schools: en Beispiel: A simple use of the float property

-

↑ b) Bild mit punktiertem Rahmen, rechts vom Text

• W3Schools:
  en Beispiel: An image with border and margins that floats to the right in a paragraph

-

↑ c) Bild mit Rahmen, rechts vom Text und eingefügter Bildlegende (caption)

• W3Schools: en Beispiel: An image with a caption that floats to the right

-

↑ d) Das Bild ist im Text und vertikal ausgerichtet

• W3Schools: en Beispiel: Vertical align an image

-

↑ e) Der erste Buchstabe "schwimmt" links oben vom Abschnitt

• W3Schools: en Beispiel: Let the first letter of a paragraph float to the left

-

⇧ 3 Grafik mit Text in Tabellen

• Bachmann (via Wayback) de Grafik mit Text in Tabellen

↑