Grundlagen - Images in CSS

Barcelino · 18.07.2015

Hallo,

ich setzt mich gerade mit der Thematik auseinander HTML und CSS zu lernen, da ich mir eine Template gekauft habe und das nun nach meinen Wünschen ändern möchte.

Kann mir jemand ein Tutorial empfehlen, was sich dazu empfiehlt?

Im Grunde suche ich eine Funktion, wie ich in eine bestehende Site ein Bild (Logo) einfügen kann. Ob nun in HTML oder CSS. Eigentlich wird das ja im Quellcode der "index"-Datei geschrieben und mit der "style.css" definiert. Nur habe ich das Prinzip noch nicht ganz verstanden, wie ich das mache.

Für Vorschläge und Tipps bin Euch dankbar

PS:

Ich werde erstmal die Tutorials hier abgrasen

owieortho · 18.07.2015

Prinzipiell wird ein Bild über den img-tag im HTML eingebunden. Erläuterungen dazu findest Du hier und den anderen usual suspects (SelfHTML, W3Schools, etc. pp.).

Du wirst hier dann auch immer wieder den Rat hören - und solltest ihn auch befolgen - dass zur konkreten Hilfestellung ein Einblick in den betreffenden Quellcode, welcher Sprache auch immer, mindestens hilfreich ist.

Viel Erfolg
O.

patrick_l · 18.07.2015

Ein immer wieder zu empfehlendes OpenBook wäre wohl das HTML5 Handbuch von Stefan Münz. Das Buch kann kostenlose online gelesen werden. Jedoch ist auch die gebundene Print-Version jeden Euro wert.

- HTML5 Handbuch - Webkompetenz (Stefan Münz)

Auch hier findest du eine große Sammlung an Tutorials zum Thema. Wenn es etwas kosten darf, solltest du mal im PSD-Tutorials Shop rein schauen. Dort gibt es einige Werke, die dir den Einstieg erleichtern werden.

Liebe Grüße, Patrick

Gelöschtes Mitglied 633957 · 19.07.2015

patrick_l schrieb:
Ein immer wieder zu empfehlendes OpenBook wäre wohl das HTML5 Handbuch von Stefan Münz.

Kannte ich noch nicht und werde es wohl hin und wieder empfehlen, danke!

Barcelino schrieb:
Nur habe ich das Prinzip noch nicht ganz verstanden, wie ich das mache.

Ich denke, Du bist der englischen Sprache mächtig und somit ist das kein Problem:
Der title-Tag wird leider unterschlagen und auch "alt" ist nicht wirklich erforderlich, aber egal!

EDIT: Habe gerade die schöne 12-Minuten-Serie von Jake Wright entdeckt, die für einen Anfänger sehr geeignet ist!

HTML in 12 Minuten

Mehr HTML in 12 Minuten

CSS in 12 Minuten

JAVASCRIPT in 12 Minuten

Hoffe, ich konnte helfen!

patrick_l · 19.07.2015

tynick schrieb:
Kannte ich noch nicht und werde es wohl hin und wieder empfehlen, danke!

Stefan Münz gehört zu Mitbegründern (Autoren) der bekannten SelfHTML Dokumentation. Die Dokumentation selbst, ist schon länger veraltet. Lediglich dessen Wiki sollte noch als Hilfe herangezogen werden. Das HTML5 Handbuch kann man also als Nachfolger ansehen. Habe mittlerweile auch die gebundene Version im Regal stehen.

tynick schrieb:
Der title-Tag wird leider unterschlagen und auch "alt" ist nicht wirklich erforderlich, aber egal!

Was den title-Tag angeht, dir soweit zustimme. Bezüglich des alt-Tag dir jedoch widerspreche und ein Veto einlege. Der Usability wegen und aus SEO Gründen der Alt-Tag genutzt werden sollte.

Liebe Grüße, Patrick

Gelöschtes Mitglied 633957 · 19.07.2015

patrick_l schrieb:
Bezüglich des alt-Tag dir jedoch widerspreche

Tue ich auch!
Bezüglich dem Anfänger-sein, ist das "erforderliche" alt-Attribut, nicht erforderlich um eine Grafik anzuzeigen... Selbst aus SEO-Sicht, sind Suchmachinen mittlerweile auf die wildesten Fehler getrimmt!
Denkt man allein an Barrierefreiheit, so sind sowohl die alt-, als auch die title-Attribute (noch) unabdingbar!
"alt" ist zwar erforderlich, aber nicht erforderlich für eine Aktion!

Was ich eigentlich sagen will:
DU HAST RECHT - ICH ABER NICHT UNRECHT - oder so...

Greetz,Ty

EDIT: Serie vervollständigen; 15-Minuten-PHP:

owieortho · 19.07.2015

Wie schnell hat sich eine Gewohnheit geformt.... Daher kann ich nr empfehlen, sich die Verwendung des alt-Attribtes gleich von Anfang an anzgewöhnen. Z leicht fällt das sonst später nter den Tisch - es fnktioniert ja ach ohne, zmindest solange ich keinen Screenreader benötige. Ich wollte einst ach später das mitverwenden, aber jetzt fehlt immer die Zeit nd es geht ja ach so

Schönen Sonntag noch
O.

Barcelino · 19.07.2015

also, mir gehts ja hauptsächlich nur um eine Sache.
Nämlich das Logo austauschen und mehr eigentlich nicht.
Das Problem liegt aber darin, dass es nicht auf dem Wege den ich kenne, eingebunden wurde, sondern mit der Methode "Before/After".
Hätte nicht gedacht, dass es solche Ausmaße annimmt...

Das Template basiert nämlich auf einem propietären Grid-Layout, so sagte man mir...

patrick_l · 19.07.2015

Barcelino schrieb:
Das Template basiert nämlich auf einem propietären Grid-Layout, so sagte man mir...

Dann solltest du uns dein Markup, sprich den Quellcode deines Layouts oder zumindest den entscheidenden Teil in dem das Logo eingefügt wurde zeigen. Daher poste doch bitte dein Markup inkl. Stylesheet.

Barcelino schrieb:
Das Problem liegt aber darin, dass es nicht auf dem Wege den ich kenne, eingebunden wurde, sondern mit der Methode "Before/After".

Bei before und after handelt es sich um Pseudo-Elemente. Diese werden entweder vor oder nach einem Element eingefügt. Dafür wird der relevante Selektor im CSS notiert. Durch einen Doppelpunkt (CSS3) gefolgt von after und before wird ein Pseudo-Element definiert. Die Syntax sieht dann wie folgt aus:

CSS:

/* --| Vor dem Selektor einfügen |----- */
selector::before {content:"";}
/* --| Nach dem Selektor einfügen |---- */
selector::after {content:"";}

Hier noch zwei Links zum Nachlesen:
- Mozilla Developer Network - ::before

before)
- Mediaevent: CSS ::before und ::after content - Inhalte durch CSS generieren

Liebe Grüße, Patrick

Jamye · 20.07.2015

tynick schrieb:
Tue ich auch!
Selbst aus SEO-Sicht, sind Suchmachinen mittlerweile auf die wildesten Fehler getrimmt!
Denkt man allein an Barrierefreiheit, so sind sowohl die alt-, als auch die title-Attribute (noch) unabdingbar!

So weit ich weiß, kann man das Alt Tag dazu verwenden die Wörter, die auf deiner Seite stark gewichtet und bei Google vorrangig als Schlagwort gelten sollen dort einbauen.
In so fern halte ich das Alt Attribut aus seo Sicht als unabdingbar.

Edit: Ich habe "abdingbar" gelesen... Somit hat sich meine Antwort ja schon erübrigt...

Myhar · 20.07.2015

Jamye schrieb:
So weit ich weiß

Dann weißt du falsch. Das alt-Attribut soll das Bild beschreiben, damit Leute, die sich keine Bilder anzeigen lassen können, bzw. screenreader verwenden müssen, wissen können, was das Bild darstellt. Für SEO-Keyword-Spam kann man das auch verwenden, aber das wird wohl eher negative Auswirkungen haben.

Jamye · 21.07.2015

Myhar schrieb:
Dann weißt du falsch. Das alt-Attribut soll das Bild beschreiben, damit Leute, die sich keine Bilder anzeigen lassen können, bzw. screenreader verwenden müssen, wissen können, was das Bild darstellt. Für SEO-Keyword-Spam kann man das auch verwenden, aber das wird wohl eher negative Auswirkungen haben.

Wozu das Alt Attribut da ist weiß ich schon.
Zum einen sorgt das Setzen des Alt Attributs für Barrierefreiheit, was einem schon in den Rankings angerechnet wird und zum anderen muss man ja nicht gleich Spammen.
Erstelle ich beispielsweise eine Website für eine Zahnarztpraxis und möchte das Wort "Zahnarzt" sowie das Wort "Berlin" gewichten, bietet es sich mir an diese Wörter nach Möglichkeit mit in das Alt Attribut einzubauen.

Habe ich ein Bild auf dem die Zahnarztpraxis von außen zu sehen ist, schreibe ich dann beispielsweise alt="Zahnarztpraxis in Berlin von außen" und auf einem Bild, welches den Zahnarzt zeigt, schreibe ich alt="Zahnarzt Max Mustermann"

Wäre mir neu, dass einem so etwas negativ angerechnet wird. Kommt aber natürlich auch immer darauf an, ob man es mit den Keywords übertreibt...

Myhar · 21.07.2015

Man muss nicht nur nicht spammen, man soll auch nicht spammen. Hat man eine Galerie mit 10 Bildern, dann freut sich der User mit Screenreader bestimmt, 10 mal das Wort Zahnarzt und Zahnarztpraxis zu hören. Und 10 Bilder ist ja noch eine kleine Galerie.

Redundanz erhöht hier sicher nicht die Reihung bei Suchmaschinen. Das man Sitchwörter auch verwenden kann, wenn es passt, dagegen spricht nichts. Aber die Formulierung, dass man Vorrangig Stichwörter, die bei Google gefunden werden sollen, in das alt-Attribut einbaut, ist einfach falsch. Ein alt Attribut ist nur dazu da, um das Bild zu beschreiben.

Jamye · 21.07.2015

Mit "nicht übertreiben" meinte ich genau den Fall, den du jetzt geschildert hast.
10 mal oder häufiger das Wort "Zahnarzt" in die Alt Tags zu integrieren wäre natürlich nicht gut. Hin und wieder aber mal so ein Stichwort einzusetzen, soweit es sinnvoll verwendet werden kann, ist förderlich für das Ranking.
Das man bei der Methode darauf achten muss, Leute mit Screenreader dabei nicht zu benachteiligen ist klar.

Um jetzt aber nochmal auf den Kern meiner Aussage zurückzukehren:

Ich halte es sinnvoll, sich als Anfänger gleich daran zu halten, einem Image Tag ein Alt Attribut mitzugeben.
Sei es wegen der Förderung der Barrierefreiheit, des Rankings in Suchmaschinen oder aber einfach nur der Richtigkeit halber.

owieortho · 22.07.2015

Jamye schrieb:
Zum einen sorgt das Setzen des Alt Attributs für Barrierefreiheit...

Die Nutzung des alt-Attributes ist ein Mosaiksteinchen auf dem Pfad zur Barrierefreiheit. Mag sein, dass Du das schon weisst, aber im Post kam das nicht so deutlich zum Vorschein.

Gruß
O.

Lobster1956 · 26.07.2015

vielleicht einfach nochmal grundsätzlich folgendes allgemeines zu SEO...
letztlich ist alles was dem Menschen dient (also dem Seitenbesucher) auch gut für SEO, denn als Ziel haben Suchmaschinen immer, die für die Suchenden bestmöglichen Seiten zu liefern, und da wird mittlerweile sehr gut auf zuwenig oder zuviel an Infos reagiert...
Also neben einem sonstigen sauberen semantischen Aufbau gilt für Bilder halt immer:

ein prägnanter beschreibender Dateiname und Pfad ist immer sinnvoll
im title Tag eine inhaltliche Kurzbeschreibung des Bildes (ist ja im Zweifelsfall ja auch der MouseOver Text)
im alt Tag dann eine optische Kurzbeschreibung als Ersatz für das Sehen des Bildes
wenn man will, kann man auch noch das longdesc Tag einbauen für die URL zu einer Datei mit der Langbeschreibung, was aber leider kaum unterstützt wird...
falls man dann noch Zusatzauszeichnungen wie z.B. nach http://schema.org/ oder ähnlichem einbauen möchte, steht das natürlich noch jedem optional frei, aber 1.-3. sind halt die Mindestanforderungen, die man eigentlich immer erfüllen sollte...