HTML – Wstawianie grafiki (ścieżka względna)

Jednym z podstawowych znaczników jest znacznik img. Znacznik jest o tyle charakterystyczny, że nie posiada znacznika zamykającego.

<img src="ścieżka dostępu" />

Najłatwiejszym sposobem wyświetlania obrazka jest podawanie pełnego adresu internetowego gdzie się on znajduje.

<img src="http://zstzbaszynek.pl/wp-content/uploads/2013/09/switch-300x225.jpg" />

I to mogłoby nam zamknąć sprawę z linkowaniem obrazków. Niestety w takim linkowaniu obrazków powstaję jeden, ale za to bardzo ważny problem: co stanie się jak zmienimy adres naszej strony? Niestety musielibyśmy wtedy zmienić wartość src w każdym naszym obrazku.

Gdy chcemy by linkowanie grafiki nie zależało od adresu naszej witryny musimy użyć linkowanie względnego, czyli takiego, które zależy od struktury katalogów naszej strony.

Najprostszym przykładem wstawiania grafiki na stronę jest taki, w którym grafiki i plik html znajdują się w tym samym miejscu. Wtedy w parametrze src wystarczy podać tylko nazwę pliku wraz z rozszerzeniem.

<img src="mojplik.jpg" />

 PAMIĘTAJ!

  1. Zawsze podajesz nazwę pliku wraz z rozszerzeniem,
  2. WIELKOŚĆ liter ma znaczenie.
  3. Unikaj polskich znaków dialektycznych (ążźćół) w nazwach plików. „Ułatwi ci to życie” w przyszłości.

Tworzenie strony gdzie wszystkie pliki znajdują się w tym samym katalogu, nawet gdy jest to mała stroną, może powodować duży nieporządek w naszych plikach.

Załóżmy, że mamy plik:

http://www.mojastrona.pl/grafika/obrazek.jpg

Nasz plik html znajduje się w katalogu głownym:

http://www.mojastrona.pl/plik.html

w takim przypadku wystarczy przed plikiem podać nazwę katalog w którym się znajduje:

<img src="grafika/obrazek.jpg" />

Przykład 2:

http://www.mojastrona.pl/obrazek.jpg

Nasz plik html znajduje się w katalogu katalog:

http://www.mojastrona.pl/katalog/plik.html

w tym przypadku należy użyć „..”:

<img src="../obrazek.jpg" />

Co oznaczają „..” ?

Ten zapis oznacza cofnij się o jeden katalog. Jeżeli jesteśmy w katalogu „katalog” to wracamy do katalogu głównego, tam gdzie znajduje się nasz plik „obrazek.jpg”.

Przykład 3:

http://www.mojastrona.pl/obrazek.jpg
http://www.mojastrona.pl/katalog1/katalog2/plik.html
<img src="../../obrazek.jpg" />

Używamy 2x „../” czyli cofamy się o dwa katalogi.

Przykład 4:

http://www.mojastrona.pl/grafika/obrazek.jpg
http://www.mojastrona.pl/katalog/plik.html
<img src="../grafika/obrazek.jpg" />

Cofamy się o jeden katalog i „wchodzimy” do katalog „grafika”.

Przykład 5:

http://www.mojastrona.pl/grafika/obrazek.jpg

Wyobraźmy sobie teraz ze mamy dwa pliki html:

http://www.mojastrona.pl/katalog/plik.html
http://www.mojastrona.pl/katalog1/katalog2/plik2.html

Czy jest możliwość tak podlinkowania obrazka by działało to w dwóch miejscach? Tak o ile damy na początku „/”. „/” oznacza początek drzewa katalogu jest to zaczerpnięte z SO Linux.

<img src="/grafika/obrazek.jpg" />

Oznacza to tylko tyle: „cofnij się do samego początku i wejdź do katalogu „grafika” gdzie znajduje się plik „obrazek.jpg”.

Zadanie:

  1. Zaloguj się na swoje konto FTP
  2. Pobierz archiwum: img – ścieżka względna
  3. Przekopiuj cały katalog na swoje konto ftp
  4. Odnajdź 3 pliki z zadaniami (zad1.html, zad2.html, zad3.html)
  5. Otwórz je przy pomocy Notepad++
  6. Rozwiąż zadania znajdujące się w komentarzach  tych plików.
  7. Wrzuć pliki na serwer (cały katalog img/ http://twojlogin.8hp.pl/img/ )
  8. Stwórz posta i zamieść tam treść zadania, w tekście preferowanym treść rozwiązania i zamieść linki do rozwiązanych zadań na serwerze.

Treść zadań z poszczególnych plików:

  1. zad1.html
    1. Wstaw do tego pliku obrazek skretka.jpg znajdujący się w tym samym katalogu co ten plik index.html
    2. Wstaw do tego pliku obrazek Email.JPG znajdujący się w tym samym katalogu co ten plik zad1.html
    3. Sprawdź czy używając nazwy pliku email.JPG, Email.jpg lub email.jpg plik się wyświetli
  2. zad2.html
    1. Wstaw do tego pliku obrazek skretka.jpg znajdujący się katalogu głównym.
    2. Wstaw do tego pliku obrazek laptop.jpg znajdujący się katalogu gfx.
    3. Wstaw do tego pliku obrazek website.png znajdujący się katalogu gfx/fotki/.
  3. zad3.html
    1. Wstaw do tego pliku obrazek skretka.jpg znajdujący się katalogu głównym.
    2. Wstaw do tego pliku obrazek website.png znajdujący się katalogu gfx/fotki/.
    3. Napisz kod, który użyty we wszystkich 3 plikach z zadaniami (zad1.html, zad2.html, zad3.html) umożliwi wyświetlenie obrazka laptop.jpg znajdujący się katalogu gfx.

Struktura plików:

  • img/
    • folder/
      • katalog/
        • zad3.html
      • zad2.html
    • gfx/
      • fotki/
        • website.png
      • laptop.jpg
    • Email.JPG
    • internet_explorer.png
    • skretka.jpg
    • switch.Jpg
    • www.jpg.jpg
    • zad1.html