Grundlagen der Webprogrammierung: Meine erste Website

Bilder einbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Durch das Einbinden verschiedener Bilder können Sie Ihre Webseite für Ihre Besucher ansprechender gestalten.
08:48

Transkript

Ich habe jetzt zwar schon ein Hintergrundbild, nämlich das Bild vom Weg, wenn ich aber noch mehr mit Bildern arbeiten möchte, zum Beispiel indem ich auch im HTML selbst ein Bild unterbringe, dann muss ich noch zwei, drei Kleinigkeiten beachten. Aber zuerst sehen wir uns einmal an, was wir tun müssen, damit wir auf einer anderen Seite auch ein anderes Hintergrundbild bekommen, denn immerhin haben wir das Hintergrundbild dem "body"-Tag selbst mitgegeben. Und da ist der Weg relativ einfach. Wenn ich zum Beispiel auf der Seite "Gedanken" ein anderes Hintergrundbild haben möchte, dann reicht es völlig, wenn ich diesem speziellen Body eine eigene ID mitgebe. Ich kann also sagen, "id", ich möchte in diesem Fall ein Winterbild haben, also sage ich die ID sei "winter" und speichere dieses, gehe zurück in meine CSS-Datei und habe jetzt hier den Body und kann den Body nochmal spezifizieren, indem ich jetzt mithilfe von "#" und dem Bezeichner "winter" eine neue Regel aufstellen kann. Diese neue Regel bezieht sich nur auf das Hintergrundbild, also "background-image". Es soll wieder mit einer URL versehen werden, das heißt zwei Punkte, um aus meinem Ordner herauszukommen, dann in den "img"-Ordner hinein. Und da möchte ich als Hintergrundbild jetzt dieses Winterbild haben. Mit einem Strichpunkt schließe ich meine Eingabe ab und muss eigentlich gar nichts mehr tun. Ich kann das schon speichern, denn die anderen Werte, was jetzt dieses Nicht-wiederholen des Bildes betrifft oder das Zentrieren, das wird trotzdem von "body" mit übernommen, denn "winter" ist quasi nur eine Verfeinerung einer dieser bereits aufgestellten Regeln. Das ist eben das, was man unter Kaskadieren versteht, das heißt alles, was jetzt spezieller noch ist, kann zwar das Bestehende überschreiben, aber nur eben diese eine Regel davon, nicht alles. So, sehen wir uns mal an, wie gut das funktioniert hat, das heißt, ich werde hier die Seite neu laden. Und wenn ich hier jetzt auf "Gedanken" gehe, kommt eben ein anderes Hintergrundbild, aber nur auf "Gedanken", auf "Ausflug" und auch auf den anderen Seiten bleibt alles so, wie es ist. Es ist also leicht, ein anderes Hintergrundbild zu machen. Sehen wir uns jetzt an, wie das Einfügen eines Bildes funktioniert. Ich möchte also hier bei "Ausflug" auf der linken Seite ein Bild haben und um das umzusetzen, gehe ich als allererstes Mal in meine Index-Datei und werde im Bereich meines Artikels einen neuen Container erzeugen, also ein "div", und dieses "div" bekommt eine Klasse mitgegeben. Die Klasse nenne ich "inTextBild", so. Und innerhalb dieses Containers kommt jetzt das Bild hinein. Ein Bild lasse ich mir anzeigen, indem ich den "img"-Tag verwende. Und dieser "img"-Tag braucht jetzt noch mehrere Attribute mit. Zu allererst müssen wir erstmal sagen, wo unser Bild liegt. Das mache ich mit "src=" und dann kann ich eben sagen: "Es ist "img" und ich möchte das Bild "gatter" haben." Das wäre schon fast alles, aber bei Bildern tun Sie sich und allen Suchmaschinen, inklusive Lesegeräten, was Gutes, wenn Sie noch einen Alternativtext angeben. Sie sagen also "alt=" und jetzt vergeben Sie eine Beschreibung des Bildes. Ich sage jetzt hier "Alm mit Gatter", mache hier noch einfach der besseren Lesbarkeit halber einen Abstand und muss jetzt meinen Tag noch schließen. Es reicht für einen "img"-Tag, dass er wieder mit einer spitzen Klammer geschlossen wird, man muss nicht nochmal extra ein schließendes Tag mit anhängen. So, das war jetzt mal mein Teil innerhalb von meinem HTML. Nur, wenn ich jetzt das Bild anzeigen lasse, dann ist es die genauen 1000 Pixel groß, die es nun mal gerade groß ist. Um das zu ändern, wechsle ich jetzt in meine CSS und werde hier ganz herunten meine Regeln bezüglich Bildern aufstellen. Die allererste Regel, die ich aufstelle, betrifft alle Bilder. Und das mag jetzt seltsam erscheinen, denn ich lege eine Weite von 100% fest und eine automatische Höhe, damit mein Bild nicht verzerrt. Und dieses allgemeine Vorgehen sorgt dafür, dass Bilder, die ich jetzt dann verwenden werde, responsiv sind, das heißt, sie können sich dann ganz gut den unterschiedlichen, gegebenen Größenverhältnissen anpassen. So, und jetzt wird es Zeit, dass ich mich eben um meinen Container kümmere. Mein Container ist eine Klasse, kriegt also einen Punkt, und heißt "inTextBild". Und dieser Container bekommt jetzt eine Weite, und zwar eine Weite von, sagen wir mal, 25%. Um die Höhe muss ich mich nicht kümmern, die wird automatisch entstehen. Dann möchte ich, dass dieser Container einen Float bekommt, nämlich "float:left". Und dann werde ich ihm noch etwas Luft verschaffen, indem ich einen Margin-Wert beziehungsweise mehrere Margin-Werte vergebe. Sie können jetzt entweder für "margin-top", "margin-bottom", links und rechts eigene Werte setzen und eigene Zeilen dafür schreiben oder Sie geben diesem Margin alle Werte auf einmal mit. Und dann ist das Vorgehen wie im Uhrzeigersinn, das heißt, wenn ich jetzt Luft nach oben von 1 em möchte -- fange ich mit einem "Em" an, das steht für "Oben", jetzt kommt dann der Wert für die rechte Seite, da sage ich "0,5em". Dann für den unteren Bereich sage ich auch "0,5em". Und für den Bereich links brauche ich eigentlich nichts, da sage ich "0". Dazu brauche ich auch kein "em", weil 0 bleibt 0, egal, mit welcher Maßeinheit. Gut, das wären so die Voraussetzungen gewesen. Ich speichere und lasse mir meine Anzeige erneuern. Und das sieht schon mal ganz manierlich aus, ein nettes, kleines Bild. Und wenn ich meine Anzeige vergrößere, vergrößert sich auch das Bild. Jetzt merke ich, dass ich hier noch was mit meinem Link machen muss, denn im Moment, dadurch dass er als Block-Element gesetzt ist, entzieht er sich dieser ganzen Runde. Das kann ich aber ändern, indem ich noch eine kleine Umstellung mache, nämlich erstens werde ich hier meinem Button das "display: block" wegnehmen. Und damit die Anzeige dann trotzdem passt, werde ich dieses Anker-Element aus dem Paragrafen herausnehmen und extra setzen. Mit "Strg+X" schneide ich es aus und mit "Strg+V" füge ich es jetzt hier wieder ein, also noch innerhalb des gesamten Artikelkomplexes, aber nach dem Paragrafen. So, ich speichere meine Anzeige, lasse sie hier erneuern. Da merkt man jetzt noch nicht sehr viel Unterschied, außer dass es aufgeräumter wirkt. Wenn ich aber jetzt mir die volle Breite anzeigen lasse, dann sehen Sie, dass das Element hier mit in den Bereich hineingerutscht ist. Und das sieht jetzt eigentlich sehr ansprechend aus. Ähnlich können Sie dann auch für andere Bilder oder für andere Teile vorgehen. Wichtig ist eben, dass Sie auf die Positionierungen der einzelnen Elemente achten und auf die Größenverhältnisse, dass Sie also so oft wie möglich Bildern keine absolute Größe mitgeben, sondern lieber mit umfassenden Containern arbeiten und denen dann die Größe mitgeben.

Grundlagen der Webprogrammierung: Meine erste Website

Gestalten Sie in wenigen Stunden Ihre erste Website und lassen Sie sich dabei von der Idee über die Auswahl der Werkzeuge bis zur Veröffentlichung Ihrer Web-Präsenz begleiten.

2 Std. 53 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!