Html & CSS Ordner Verlinken?

Guten Tag Leute,

Ich bin ein frischer anfänger was programmieren angeht. Ich bin dabei Bilder einzufügen und die Bilder sind in ein anderen Ordner. Im Netz wurde gesagt (ordner name img ich will blume.jpg einfügen)

das der Code so ist : <img src="/img/blume.jpg/"> auch ein Code der da war war
<img src="img/blumejpg/">

Ich habe beide codes ausprobiert und beide funktionierten nicht.
Ich freue mich über jede hilfe vorab schonmal danke.

MFG,
Daniel P.

6 Antworten

floppydisk

22.04.2019, 08:14

Du musst den Pfad natürlich entsprechend deines Webservers anpassen.

Daniel0420Angel

Fragesteller

22.04.2019, 08:27

Was ist ein ”Pfad” ich hatte bisher nichts mit einem “Pfad” zu tun. Könntest du bitte ein Beispiel angeben. Danke

IchEntchen

22.04.2019, 08:40

@Daniel0420Angel

Der Pfad sind sozusagen die Ordner wie du sie wahrscheinlich von Windows kennst. Eine Datei "blume.jpg" ist z.B. im Ordner "C:\Bilder\Pflanzen\" gespeichert - das ist der Pfad. In Linuxsystemen hast du statt dem Backslash \ einen normalen Slash /

Der absolute Pfad bei diesem Beispiel wäre also "C:\Bilder\Pflanzen\blume.jpg", wenn du dich schon im Ordner "Bilder" befindest, wäre der relative Pfad "Pflanzen\blume.jpg".

In Linux wäre ein absoluter Pfad z.B. "/home/username/Bilder/Pflanzen/blume.jpg", wenn du dich im "Ordner "/home/username/" befindest wäre der relative Pfad "Bilder/Pflanzen/blume.jpg" - beachte ohne den vorangestellten Slash.

In deinem Fall in HTML brauchst du den relativen Pfad zum Bild ausgehend von dem Ordner wo sich deine HTML-Datei befindet.

Wichtig bei der Programmierung ist außerdem, dass du auf Groß- und Kleinschreibung achtest. Blume.jpg ist unter Linux etwas anderes als blume.jpg und auch was anderes als Blume.JPG

madtomax

22.04.2019, 08:07

Probier es mal mit einem festen Pfad.

Daniel0420Angel

Fragesteller

22.04.2019, 08:27

Was ist ein ”Pfad” ich hatte bisher nichts mit einem “Pfad” zu tun.Könntest du bitte ein Beispiel angeben. Danke

MarekJulien

22.04.2019, 08:46

@Daniel0420Angel

Ein Pfad ist ein genau angegebener Weg ab der Festplatte (ist immer der Buchstabe mit dem Doppelpunkt) also z.b. "C:\User\Desktop\Bilder\Blume.jpg" dann kann der Computer genau wissen, welche Ordner er theoretisch öffnen müsste, um an die Datei, also in deinem Fall das Bild zu gelangen.

Gaskutscher

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

22.04.2019, 09:53

das der Code so ist : <img src="/img/blume.jpg/"> auch ein Code der da war war <img src="img/blumejpg/">

Struktur auf dem Server:

/verzeichnis/datei.txt

/ <- Wurzelverzeichnis (aka "root")

/verzeichnis/ <- Unterverzeichnis

datei.txt <- Dateiname

Wenn deine HTML-Datei im Wurzelverzeichnis liegt, das Bild aber in einem Unterverzeichnis wäre der folgende Aufruf korrekt:

<img src="img/blume.jpg"> (relative Angabe)
<img src="/img/blume.jpg"> (absolute Angabe)

Wenn die HTML-Datei und das Bild im gleichen Verzeichnis liegen (im Beispiel root):

<img src="blume.jpg"> (relative Angabe)
<img src="/blume.jpg"> (absolute Angabe)

Du musst dich mit Pfaden beschäftigen:

https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Referenzieren_in_HTML

Woher ich das weiß:Studium / Ausbildung – Früher Beruf, heute »nur« noch Hobby.

MarekJulien

22.04.2019, 08:50

Du kannst es dir auch einfach machen und bei einfach schreiben src="blume.jpg" und das bild in den selben Ordner kopieren, wie die html datei ist, dann findet geht der das von selbst ;D

LG: Marek

Woher ich das weiß:Hobby – Intensives Hobby Comuter & Technik seit etwa 10 Jahren

NackterGerd

23.04.2019, 06:38

Nicht sehr sinnvoll alles im gleichen Verzeichnis abzulegen

verreisterNutzer

22.04.2019, 08:40

Wenn dir nicht klar ist, was ein Pfad ist, dann solltest du deine Betriebssystem-Grundlagen auffrischen. Höre nicht blind darauf, was das "Netz sagt", da bedarf es schon des eigenen Denkens. Es gibt relative und absolute Pfade, wobei es an dir liegt, dich für den passenden zu entscheiden.

Ausprobieren schadet nicht, aber wenn man versteht, was man eigentlich macht bzw. machen will, dann wird es auch eher klappen.

Im MDN erfährst du so einiges über die Webentwicklung.

Woher ich das weiß:Berufserfahrung

Ähnliche Fragen

Bilder werden nicht angezeigt?

Ich habe ein Website mit html programmiert und möchte jetzt ein bild anzeigen.

Das bild ist in /bilder/bild.jpg

Mein html code:

...zur Frage

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zur Frage

HTML Editor Bilder verschieben?

hallo, melde mich nochmal auf Grund meiner Website.

Der Code um Bilder darzustellen und seine Größe zu bestimmen ist ja

<img src="Beispiel.jpg" width="100" height="100" border="0"> jedoch kenne ich keinen Befehl um die Position des Bildes auf der Seite zu bestimmen. Kann mir da jemand weiterhelfen?

...zur Frage

wie unterscheidet man bilder in HTML/CSS?

Okay, ich habe auf meine Website nen Bild eingefügt,

ganz normal

und das zweite

<img src="http://t3.gstatic.com/licensed-image?q=tbn:ANd9GcQkZ6w8bYc2wm0VHc6SPTWVPGZogOf5Oseh35yBMeBbl2ByMCnTPoawYRQcuY9M"

height="646" weight="818"

aber jetzt will ich beide an andere positionen mit css verschieben.

aber dann schreibe ich img {

position:relative;

left:0%;

bottom:60%;

}

wie unterscheide ich das jetzt vom zweiten welches ich wo anders hin machen wollte?

falls ich etwas absolut falsch gemacht habe tut es mir leid, ich lerne HTML/CSS seit 2 Tagen

...zur Frage

mit klasse von bild in HTML CSS einbinden?

Moin ich habe folgendes Problem:

Ich bin daran eine Webseite für meine Bewerbung zu schreiben, und ich habe dementsprechend ein Bild von mir mit rein gepackt.

jetzt wollte ich eine Klasse im <img src="blablabla" alt=" "> definieren.

ich weiss nicht wieso aber im CSS Stylesheet erkennt es die Klasse dann nicht, jedenfalls wird auf der Website nichts verändert.

Hier noch die Fotos von meinem Code:

CSS

HTML

Habe ich irgend etwas falsch gemacht oder kann mir sonst jemand helfen?

...zur Frage

Bild taucht nicht auf Website auf was mach ich falsch?

Hi ich habe folgendes Problem mit html5

nehmen wir an meine website heißt website.de

Wenn ich jetzt folgenden code schreibe:

dann klappt das ganze wunderbar LOKAL.

wenn ich aber folgende zeile schreibe:

und natürlich die html speichere und das logo so wie die

html auf den webserver lade, dann erscheint nur der alt text "logo"

d.h. das bild ist nicht zu sehen.

Was mache ich falsch ?

P.S.: ja das logo ist auch im richtigen ordner. es spielt keine rolle ob ich es in den image ordner

meines servers speichere oder direkt in die root.

Vielen Dank im Vorraus !

...zur Frage

HTML/CSS, Bilder werden nicht angezeigt?

Ich habe im <body> mehrere divs, in denen abwechselnd divs und Texte untereinander angezeigt werden sollen. Die Bilder sollen auf voller Höhe sein (height: 100vh;). Wenn ich die Bilder mit <img src=""> im HTML Code im div einfüge, wird es angezeigt. Will ich es aber in meiner CSS Datei als background-image vom div einfügen, wird der Bereich, wo das Bild sein sollte, einfach nur grau. Die style.css ist richtig in der HTML-Datei angegeben, da andere Styles funktionieren. Der Pfad ist ebenfalls richtig angegeben. Hat jemand Ideen, was ich falsch mache? :(

...zur Frage

was bedeutet hart codiert oder Content type?

Hallo! Ich arbeite normalerweise als Grafikerin, da ich mich aber mit HTML und CSS auch ein bisschen auskenne, hat mich ein Kunde gebeten, ein von ihm gekauftes Template nur mit seinen Farben/Texten/Bildern anzupassen. So weit so gut, mit dem bin ich fertig. Jetzt wollte ich ihn fragen, ob er mir die Bilder von seinen Klienten schickt, dass ich sie auch gleich in die Seite einbetten kann.

Er will das lieber selber machen und hat mir nun eine Frage gestellt, wo ich echt nicht weiß, was das bedeuten könnte und auch im Internet finde ich nichts passendes:

"Sind die hardcodiert oder gibt’s für die Bilder einen ContentType?"

Zu den Bildern: Das ist eine Reihe von ausgegrauten Logos, die von einem dünnen grauen Rahmen umgeben sind - demnach hat jedes Logo einen einzelnen Container, alle Logos wiederum sind gemeinsam in einem einzelnen Container, also:

<div class="alle logos">
      <div class="col-lg-2">
        <img src="Template/img-temp/Xx74/img1.png">
      </div>
      <div class="col-lg-2">
        <img src="Template/img-temp/Xx74/img1.png">
      </div>
      <div class="col-lg-2">
        <img src="Template/img-temp/Xx74/img1.png">
      </div>
      <div class="col-lg-2">
        <img src="Template/img-temp/Xx74/img1.png">
      </div>
<div>

(soweit das für die Beantwortung der Frage relevant ist, ich habe echt keine Ahnung was er damit meint)

Danke schonmaaal!

...zur Frage

HTML Code funktioniert nicht Bild wir mit Platzhalter ersetzt?

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>LIHI Haircuts</title>
 </head>
 <body>
  <img src="/Bilder/Salon.jpg">
 </body>
</html>

Das ist der Code bis jetzt und angezeigt wird mir nur ein Platzhalter. Ich haben einen Ordner namens "Haircut Seite" auf dem Desktop angelegt. Darin befindet sich die ".html" Datei und ein weiter Ordner Namens "Bilder", dort sind dann die Bilder die ich für die Website nutzen möchte. Die Bilder sind auch alle .jpg Dateien. Weiß jemand weiter ?

...zur Frage

Bootstrap Column Anordnung ändern (mobile)?

Hallo liebe Community,

ich arbeite gerade an einem Webshop und erstelle die Startseite selbst mit HTML und CSS und dem Bootstrap Grid Layout. Nun habe ich Bilder und Texte welche auf dem Desktop jeweils abwechselnd und untereinander kommen.

Also jeweils Bild und Text in einer "row" und dann entweder der Text oder das Bild als erstes. So ergibt sich in der Reihenfolge: Text-Bild, Bild-Text.

Für die Desktopansicht ist das auch genau so gewünscht, allerdings hätte ich gerne wenn die Columns beim Smartphone untereinander rutschen, dass nicht zwei Bilder nacheinander kommen, sondern: Text-Bild, Text-Bild.

Wie lässt sich das realisieren?

Hier mal ein bisschen Code, sehr reduziert.

Doppelter Content und ein/ausblenden über "hidden" ist für mich nicht möglich aus SEO-Gründen.

Danke :)

  <div class="container">

    <div class="row">
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor.</p>
      </div>
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor sit.</p>
      </div>
    </div>

  </div>

...zur Frage

HTML Code CSGO Case Oepning?

Hallo,

ich suche einen HTML,CSS, Java Code der ein CSGO Case Opening animiert. Also man fügt Bilder ein und man klickt auf einen Roll Button und die Animation spinnt dann auf ein Bild.

...zur Frage

Bilder auf gleiche Höhe in HTML/CSS?

Hallo,

ich habe nochmal eine Frage zu meiner Website.

Kann mir jemand sagen, wie ich die beiden linken Bilder auf die gleiche Höhe wie das rechte Bild bringen kann? Ich finde bei Google nichts und weiß nicht weiter.

Hier der Ausschnitt meines Codes:

HTML:

<div id="bilder">
  <div id=bild1>
    <img src="bild1.jpg" alt="Wir bei der Arbeit">
  </div>
  <div id=bild2>
    <img src="bild2.jpg" alt="Wir bei der Arbeit">
  </div>
  <div id=bild3>
    <img src="bild3.png" alt="Holzschränke"
  </div>

CSS:

#bild1 {
  display: inline;
  margin-left: 500px;
}

#bild2 {
  display: inline;
  margin-left: 50px;
}

#bild3 {
  display: inline;
  margin-left: 50px;
}

...zur Frage

CSS-Bild-Text?

Hallo, wie lautet der Befehl, wenn ein Text und ein Bild auf der gleichen Linie stehen?

<div class="räderContainer">
                    <h3 class="h41">Text</h3>
                    <img class="rad" src="zahnrad.png">
                </div>

...zur Frage

Informatik HTML/CSS Bildlink Umrandung entfernen?

Im Rahmen des Informatikunterrichts sollten wir eine Website mit HTML erstellen.Fürs Layout sollten wir eine externe CSS-Datei nutzen. Ich habe mich dazu entschieden die Website der Schule in dem Logo zu verlinken <a href="..."><img src="logo.img" alt= "Schule"></a>. Im internen Broser von HTML Phase 5 Editor wird um den Link die eingestellt Linkfarbe Blau dargestellt (eingestellt für die ganze Website). Wie schaffe ich es die Farbe bei dem Bild/ die Umrandung zu entfernen/anpassen ohne das die anderen Links auch keine Farbe mehr hatten. Dies soll in der CSS-Datei geschehen.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen