pad in root map met of zonder slash

Als "afbeeldingen/plaatje.png" gebruikt en je bijvoorbeeld op de pagina: "http://host.nl/" zit dan word de link dus:
"http://host.nl/afbeeldingen/plaatje.png"

En wanneer je "/afbeeldingen/plaatje.png" dan word je link : http://host.nl//afbeeldingen/plaatje.png
En dit vind ik zelf ook minder mooi, het kan trouwens ook zo zijn dat het bij sommige host niet werkt. Omdat hij er dan vanuit gaat dat er tussen // nog een directory zit die er niet is. En dan kan hij het plaatje niet vinden.

En misschien maar dat weet ik niet zeker is "http://host.nl//afbeeldingen/plaatje.png" langzamer. Omdat hij // ziet staan en dat kent hij niet dus moet hij er iets van maken en dit kost iets tijd.

Ik zelf gebruik altijd "<img src="afbeeldingen/plaatje.png">" omdat ik vaak genoeg gehad heb dat mijn host het bestand anders niet kan vinden.

Ik gebruik daarintegen juist /afbeeldingen/plaatje.png. Dit doe ik omdat als een browser iets als directory herkent, het plaatje niet gevonden wordt. Dus als je op host.nl/downloads/ denkt de browser dat het plaatje staat op host.nl/downloads/afbeeldingen/plaatje.png terwijl hij gewoon staat op host.nl/afbeeldingen/plaatje.png. Daf kan je dus aanroepen met /host/plaatje.png. Oftewel, een slash ervoor betekent dat de browser zoekt in de root van je domein, dus relatief naar host.nl.

Bas, de url wordt echt niet host.nl//afbeelding hij wordt dan gewoon host.nl/afbeelding. Het verschil is dat de 1 relatief is en de ander absoluut. Ik hou meer van de absolute, dan weet je zeker dat hij altijd goed is, waar je het HTML bestandje ook naartoe verschuift.

plus...als je in www.host.nl/downloads/info/ zit....en de plaatjes zitten in /downloads/afbeeldingen/....kun je met ../ een stapje terug... je hebt ook nog ./ om het pad relatief te maken zodat ie weet dat je toch echt www.host.nl/downloads/afbeeldingen/afbeelding.png bedoeld... en niet www.host.nl/afbeeldingen/afbeelding.png

Beetje off-topic maar voor de volledigheid: de Google HTML/CSS Style Guide adviseert om het protocol weg te laten bij verwijzingen naar afbeeldingen en andere mediabestanden.

<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

/* Not recommended */
.example {
  background: url(http://www.google.com/images/example);
}

/* Recommended */
.example {
  background: url(//www.google.com/images/example);
}

No One op 16/01/2013 11:04:52

je hebt ook nog ./ om het pad relatief te maken

Hoer werkt dat met "./" ?

Ward van der Put op 16/01/2013 12:41:25

Beetje off-topic maar voor de volledigheid: de Google HTML/CSS Style Guide adviseert om het protocol weg te laten bij verwijzingen naar afbeeldingen en andere mediabestanden.

<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

/* Not recommended */
.example {
  background: url(http://www.google.com/images/example);
}

/* Recommended */
.example {
  background: url(//www.google.com/images/example);
}

Ik denk dat dat is omdat de browser dan zelf aanvult met http of https. Dit zou je echter in PHP kunnen ondervangen in je html bestanden. In de css wordt dat lastig.

Is dit:

.example {
  background: url('http://www.mijnsite.nl/afbeeldingen/plaatje.jpg');
}

eigenlijk hetzelfde als dit:

.example {
  background: url('/afbeeldingen/plaatje.jpg');
}

Ozzie PHP op 16/01/2013 14:17:39

Is dit:

.example {
  background: url('http://www.mijnsite.nl/afbeeldingen/plaatje.jpg');
}

eigenlijk hetzelfde als dit:

.example {
  background: url('/afbeeldingen/plaatje.jpg');
}

Als één host meerdere domeinnamen heeft, kan de tweede URL verwijzen naar bijvoorbeeld http://www.example.com/afbeeldingen/plaatje.jpg. En zoals je zelf al terecht opmerkt: de eerste URL gaat bij https:// problemen geven.

Afbeeldingen die in CSS worden gebruikt, plaats ik zelf liever in dezelfde directory, zodat paden en protocol helemaal niet in de weg zitten. Bovendien kun je dan voor CSS-bestand en bijbehorende afbeeldingen gemakkelijker dezelfde caching instellen.

.example {
  background: url('plaatje.jpg');
}

Oké, maar als je met submappen werkt... zoiets

.../public_html/afbeeldingen/plaatje.jpg
               /css

Maakt het dan nog iets uit of je dit...

.example {
  background: url('http://www.mijnsite.nl/afbeeldingen/plaatje.jpg');
}

dit...

.example {
  background: url('/afbeeldingen/plaatje.jpg');
}

of dit doet?

.example {
  background: url('../afbeeldingen/plaatje.jpg');
}

Is het een sneller / beter dan het ander? Ik denk dat optie 2 de beste is?

Of ik mis een truukje, of mijn theorie is niet meer up to date..

Hebben we het hier over een Windows systeem of Linux?

Want doorgaans is het bij een Linux systeem zo dat: /path/afbeelding.png meestal niet daar staan.
Althans ik heb mijn plaatjes niet in / staan.

dus logisch gezien is het ../path/plaatje.png wat wil zeggen 2 stapjes terug. Of ./path/plaatje.png wat zegt 1 stapje terug.

Wil je zeker ervan zijn url/path/plaatje.png
Maar /map/plaatje.png lijkt me niet goed.

Toevoeging op 16/01/2013 14:55:25:

Of ik mis een truukje, of mijn theorie is niet meer up to date..

Hebben we het hier over een Windows systeem of Linux?

Want doorgaans is het bij een Linux systeem zo dat: /path/afbeelding.png meestal niet daar staan.
Althans ik heb mijn plaatjes niet in / staan.

dus logisch gezien is het ../path/plaatje.png wat wil zeggen 2 stapjes terug. Of ./path/plaatje.png wat zegt 1 stapje terug.

Wil je zeker ervan zijn url/path/plaatje.png
Maar /map/plaatje.png lijkt me niet goed.

Stel ik heb het volledige pad: http://www.example.com/examples/index.php
De link /images/somepicture.png is dan eigenlijk http://www.example.com/images/somepicture.png, dus relatief naar de root van de website
images/somepicture.png is relatief naar de map waar index.php instaat