Grafik richtig integrieren und formatieren

[Anton]

Grüß Gott,

ich würde gerne eine Grafik in den Content DIV-Container meiner Webseite einbinden. Hab das bisher nur so gemacht:

<img src="test.jpg" alt="test">

seid ich CSS verwende, weiß ich, dass ich auch direkt über CSS Grafiken in meine Site einbinden kann. Für den Hintergrund z.B. so:

background url(header.jpg)

Wie integriere ich denn die Grafik test.jpg richtig in meine Webseite. Dabei handelt es sich nicht um eine Hintergrundgrafik. Sie soll zwischen zwei Absätzen plaziert werden. Innerhalb des HTML-Codes oder direkt im CSS-Bereich?

Momentan würde ich die Grafik so einbinden:

<p>Absatz vor der Grafik</p>
<p id="grafik"><img src="test.jpg" alt="test"></p>
<p>Absatz nach der Grafik</p>

Anschließend würde ich die Grafik in CSS mit der richtigen Größe und dem Rahmen formatieren ungefähr so:

#grafik{
  [Größe und Rahmen der Grafik festlegen]
}

Wäre das so richig?

[Cheatah]

Hi,

Grüß Gott,

och nö, so hoch wollte ich heute eigentlich nicht mehr hinaus.

seid ich CSS verwende, weiß ich, dass ich auch direkt über CSS Grafiken in meine Site einbinden kann. Für den Hintergrund z.B. so:

CSS dient der Optik und soll keinen Inhalt vermitteln. Daher ist es ideal, über CSS alle Grafiken einzubringen, die der Verzierung dienen. Grafische Inhalte, also beispielsweise Fotos, sind hingegen Sache von HTML.

background url(header.jpg)

(Pssst! Doppelpunkt!)

Wie integriere ich denn die Grafik test.jpg richtig in meine Webseite. Dabei handelt es sich nicht um eine Hintergrundgrafik. Sie soll zwischen zwei Absätzen plaziert werden. Innerhalb des HTML-Codes oder direkt im CSS-Bereich?

Siehe oben. Handelt es sich um einen Inhalt, so ist es das Revier von HTML. Ist es verschönderndes Beiwerk, muss CSS ran.

Momentan würde ich die Grafik so einbinden:
<p id="grafik"><img src="test.jpg" alt="test"></p>

Eine Grafik zählt wohl kaum als Fließtext, daher ist das <p>-Element fehl am Platz. Natürlich kann es sein, dass eine Grafik zum Fließtext _gehört_ und somit innerhalb eines <p>-Elements eingebunden wird - vor, nach oder zwischen dem Text.

Anschließend würde ich die Grafik in CSS mit der richtigen Größe und dem Rahmen formatieren ungefähr so:
#grafik{
  [Größe und Rahmen der Grafik festlegen]
}
Wäre das so richig?

Nicht wirklich, obiger Code würde den Absatz formatieren, nicht die Grafik. Dazu benötigst Du den Nachfahrenselektor " ".

Cheatah

[Anton]

CSS dient der Optik und soll keinen Inhalt vermitteln. Daher ist es ideal, über CSS alle Grafiken einzubringen, die der Verzierung dienen. Grafische Inhalte, also beispielsweise Fotos, sind hingegen Sache von HTML.

Was ist den z.B. mit einen Bild von mir, dass ich auf der Startseite plazieren möchte. Eigentlich dient dieses Bild doch der Verzierung. Demnach würde ich es dann über CSS einbinden. Wäre das so korrekt? Ich glaube nämlich nicht ;-)

Ich weiss nicht so wirklich wo ich am besten die Grenze zwischen den Bildern ziehe die Inhalt vermitteln und denen die nur zur Verzierung da sind. Im Prinzip sind doch alle Bilder zur Verzierung da?

[EKKi]

Mahlzeit Anton,

Was ist den z.B. mit einen Bild von mir, dass ich auf der Startseite plazieren möchte. Eigentlich dient dieses Bild doch der Verzierung.

Jein.

Der Verzierung dienen z.B. Hintergrundbilder, grafische Rahmen, zur Auflockerung gedachte Absatzendebildchen usw. ... ein Foto von Dir gehört - zumindest z.B. in einem Profil oder Lebenslauf - eindeutig zum Inhalt.

Man kann nicht generell für Grafiken sagen, ob sie Verzierung sind oder nicht - es gilt mal wieder die gute alte Juristen-Standardantwort: "Es kommt darauf an." In diesem Fall darauf, was die Grafik darstellt bzw. welche Funktion sie hat. Und das kannst allein Du beantworten.

Demnach würde ich es dann über CSS einbinden. Wäre das so korrekt? Ich glaube nämlich nicht ;-)

Ich auch nicht.

Ich weiss nicht so wirklich wo ich am besten die Grenze zwischen den Bildern ziehe die Inhalt vermitteln und denen die nur zur Verzierung da sind. Im Prinzip sind doch alle Bilder zur Verzierung da?

Nein, s.o. Die Grenze musst aber Du selbst ziehen, das kann Dir keiner hier abnehmen. Nur Du - in Deiner Eigenschaft als Seitenautor - weißt, welche Grafik welche Funktion hat, was sie vermitteln soll, ob sie wichtig für den Inhalt ist oder nicht. Weitere Beispiele gefällig?

• In einem wissenschaftlichen Artikel gibt es Grafiken, die z.B. Diagramme von Messergebnissen darstellen: eindeutig Inhalt, also per HTML.

• Bei einer Kurzgeschichte sollen die Anfangsbuchstaben der Kapitel als Grafiken dargestellt werden, so wie man es aus alten Büchern kennt: eindeutig Verzierung, also CSS.

• Ein Bericht wird mit mehreren Fotos versehen, auf die im Text bezug genommen wird: eindeutig Inhalt, also HTML.

• In einem Blog sollen die einzelnen Einträge nicht durch eine langweilige einfarbige, horizontale Linie optisch getrennt werden, sondern durch eine Art Tribal-Grafik: eindeutig Verzierung, also CSS.

MfG,
EKKi

[Gunnar Bittersmann]

@@EKKi:

• Bei einer Kurzgeschichte sollen die Anfangsbuchstaben der Kapitel als Grafiken dargestellt werden, so wie man es aus alten Büchern kennt: eindeutig Verzierung, also CSS.

Nein, eindeutig Inhalt, also HTML. Alternativtext (eben der Buchstabe der Textgrafik) sollte vorhanden sein, ansonsten fehlte ja ohne Bildanzeige ein Buchstabe.

Daran lässt sich entscheiden, was in den Hintergrund und was zum Inhalt gehört:

(1) Was passiert ohne Anzeige von Bildern? Soll Alternativtext angezeigt werden? Wenn ja, gehört es zum Inhalt, also ins HTML.

(2) Was passiert ohne Interpretation von Stylesheets? Soll das Bild dann angezeigt werden? Wenn ja, gehört es zum Inhalt, also ins HTML.

Live long and prosper,
Gunnar

[ChrisB]

Hi,

• Bei einer Kurzgeschichte sollen die Anfangsbuchstaben der Kapitel als Grafiken dargestellt werden, so wie man es aus alten Büchern kennt: eindeutig Verzierung, also CSS.

Nein, eindeutig Inhalt, also HTML. Alternativtext (eben der Buchstabe der Textgrafik) sollte vorhanden sein, ansonsten fehlte ja ohne Bildanzeige ein Buchstabe.

Das kommt auf die Umsetzung an.

(2) Was passiert ohne Interpretation von Stylesheets? Soll das Bild dann angezeigt werden? Wenn ja, gehört es zum Inhalt, also ins HTML.

Wenn ich das Dokument gaenzlich "unformatiert" betrachtet, dann moechte ich nicht, dass von der normalen Formatierung ausschliesslich ein paar verschnoerkelte Buchstaben am Anfang jedes Absatzes uebrig bleiben, weil diese Verzierung dummerweise auch ins HTML gepackt wurde.

MfG ChrisB

[Cheatah]

Hi,

grundsätzlich: Siehe EKKis Antwort.

Ich weiss nicht so wirklich wo ich am besten die Grenze zwischen den Bildern ziehe die Inhalt vermitteln und denen die nur zur Verzierung da sind.

Diese Grenze ist fließend. Ein schönes Beispiel ist das Firmenlogo: Es ist (meistens) auf jeder Seite zu sehen, den Nutzer interessiert es nicht wirklich, es wird als optisches Beiwerk wahrgenommen. Ergo Verzierung. Genauso gut kann man aber argumentieren, dass es _die_ Identifikation der Firma ist und somit inhaltliche Bedeutung hat. Meiner Ansicht nach ist das Firmenlogo ein klassischer Fall von "entscheide pragmatisch".

Im Prinzip sind doch alle Bilder zur Verzierung da?

Das dürfte der Anbieter einer Fotogalerie anders sehen. Auch im bereits genannten Lebenslauf ist das eigene Foto ganz klassischer Inhalt. Jemand, der seine gemalten Kunstwerke verkaufen will, wird ihre Abbildungen ebenso wenig als Verzierung ansehen, wie es Amazon bei seinen Produktbildern oder der Comiczeichner bei seinen Werken tut. Auch Nachrichtenanbieter werden oft meinen, dass ein Bild mehr als tausend Worte sagt, oder eine grafische Statistik den Inhalt hervorragend ergänzt. Auch wenn das ästhetische Empfinden dies - sofern es richtig gemacht wird - als optisch ansprechend klassifizieren wird, fallen derlei Dinge nicht mehr in die Kategorie der Verzierung.

Cheatah

[ChrisB]

Hi,

Was ist den z.B. mit einen Bild von mir, dass ich auf der Startseite plazieren möchte. Eigentlich dient dieses Bild doch der Verzierung.

Das haengt zunaechst mal von deinem aeusseren Erscheinungsbild ab.

SCNR ChrisB