9. Dodawanie obraz├│w do stron internetowych

> Dodaj do ulubionych

W poprzednim rozdziale utworzyli┼Ťmy prost─ů stron─Ö internetow─ů o Richardzie Feynmanie. Na razie zawiera ona tylko par─Ö nag┼é├│wk├│w i akapit├│w z podstawowymi informacjami o tym wybitnym naukowcu. Nie wygl─ůda zbyt imponuj─ůco, wi─Öc spr├│bujemy to zmieni─ç. Zaczniemy od ozdobienia jej zdj─Öciem Feynmana, kt├│re od razu nieco o┼╝ywi nasz─ů prezentacj─Ö. Sp├│jrz na poni┼╝szy zrzut ekranu, kt├│ry przedstawia docelowy efekt pracy w tym rozdziale.

Strona o Feynmanie ze zdj─Öciem

Na naszej stronie pojawiło się zdjęcie Richarda Feynmana. Do wstawiania grafik na strony internetowe służy element o nazwie img. Przyjrzymy mu się dokładnie.

Element img

Do wstawiania obraz├│w na strony HTML s┼éu┼╝y element img (ang. image ÔÇô obraz). Jest to pusty element ┼Ťr├│dliniowy, czyli taki, kt├│ry ma tylko znacznik otwieraj─ůcy i nie dodaje z┼éamania wiersza w tre┼Ťci. Jego podstawowa sk┼éadnia wygl─ůda tak:

<img src="┼Ťcie┼╝ka_lub_URL" alt="Opis obrazu" witdh="szeroko┼Ť─ç" height="wysoko┼Ť─ç">

Przeanalizujemy poszczególne składniki tego elementu po kolei.

┼╣r├│d┼éo obrazu ÔÇô atrybut src

Pierwszym atrybutem naszego elementu img jest src. Jest on obowi─ůzkowy, tzn. je┼Ťli go nie zdefiniujemy, to pope┼énimy b┼é─ůd sk┼éadni HTML. Jego nazwa pochodzi od angielskiego s┼éowa source oznaczaj─ůcego ┼║r├│d┼éo, wi─Öc nietrudno si─Ö domy┼Ťli─ç, do czego s┼éu┼╝y ÔÇô warto┼Ťci─ů tego atrybutu musi by─ç ┼Ťcie┼╝ka do pliku graficznego lub jego adres URL, np. src="img/feynman.jpg".

Zanim przejdziemy do opisu nast─Öpnych atrybut├│w, zatrzymamy si─Ö na chwil─Ö przy ┼Ťcie┼╝kach do plik├│w i adresach URL.

Ścieżki do plików

Ścieżka do księżyca

┼Ücie┼╝ka do pliku to rodzaj adresu wskazuj─ůcego po┼éo┼╝enie pliku na dysku komputera lub serwera (serwer to te┼╝ komputer, tylko ze specjalnym oprogramowaniem). Mo┼╝e by─ç bezwzgl─Ödna lub wzgl─Ödna.

Ścieżki bezwzględne

┼Ücie┼╝ka bezwzgl─Ödna okre┼Ťla po┼éo┼╝enie pliku na dysku komputera lub na serwerze w odniesieniu do katalogu g┼é├│wnego. Na serwerach katalog g┼é├│wny oznacza si─Ö znakiem uko┼Ťnika ÔÇô /. Powiedzmy, ┼╝e na naszym serwerze mamy struktur─Ö katalog├│w opisan─ů w rozdziale Kompletne ┼Ťrodowisko pracy, dla przypomnienia pokazan─ů poni┼╝ej:

Ciekawi_ludzie
   css
   js
   img

W tym przypadku nasza cała witryna znajduje się w folderze o nazwie Ciekawi_ludzie, który został umieszczony w katalogu głównym serwera.

Teraz ÔÇ×dodamyÔÇŁ do naszej struktury katalog├│w par─Ö plik├│w, aby na ich przyk┼éadach przeanalizowa─ç r├│┼╝ne rodzaje ┼Ťcie┼╝ek. Wyobra┼║ sobie, ┼╝e teraz nasza struktura katalog├│w wygl─ůda tak:

Ciekawi_ludzie
  css
    style.css
  js
  img
    feynman.jpg
feynman.html

Wyobra┼║ sobie, ┼╝e otwierasz plik feynman.html, znajduj─ůcy si─Ö w katalogu Ciekawi_ludzie, i chcesz do niego doda─ç obraz feynman.jpg z folderu img. Je┼Ťli postanowisz u┼╝y─ç ┼Ťcie┼╝ki bezwzgl─Ödnej, to b─Ödzie ona mia┼éa nast─Öpuj─ůc─ů posta─ç:

/Ciekawi_ludzie/img/feynman.jpg

W tej ┼Ťcie┼╝ce pierwszy uko┼Ťnik / oznacza katalog g┼é├│wny serwera, a nast─Öpne elementy rozdzielone kolejnymi uko┼Ťnikami wskazuj─ů ÔÇ×drog─ÖÔÇŁ do samego interesuj─ůcego nas pliku przez struktur─Ö folder├│w. Czyli powy┼╝sza ┼Ťcie┼╝ka dla przegl─ůdarki stanowi nast─Öpuj─ůc─ů informacj─Ö: ÔÇ×Plik o nazwie feynman.jpg znajduje si─Ö w folderze img, kt├│ry znajduje si─Ö w folderze Ciekawi_ludzie umieszczonym w katalogu g┼é├│wnymÔÇŁ.

Ścieżki względne

┼Ücie┼╝ka wzgl─Ödna wygl─ůda bardzo podobnie do bezwzgl─Ödnej, ale nie zaczyna si─Ö od uko┼Ťnika / oznaczaj─ůcego katalog g┼é├│wny, tylko od nazwy pierwszego folderu, w kt├│rym przegl─ůdarka ma zacz─ů─ç szukanie pliku.

W naszym przyk┼éadzie ┼Ťcie┼╝ka wzgl─Ödna do pliku feynman.jpg w pliku feynman.html wygl─ůda┼éaby tak:

img/feynman-z-bebnami.jpg

┼Ücie┼╝ka wzgl─Ödna odnosi si─Ö do katalogu zawieraj─ůcego plik HTML, w kt├│rym zosta┼éa u┼╝yta. W naszym przyk┼éadzie ÔÇ×znajdujemy si─ÖÔÇŁ w folderze Ciekawi_ludzie , wi─Öc nie musimy podawa─ç jego nazwy. Za pomoc─ů powy┼╝szej ┼Ťcie┼╝ki informujemy przegl─ůdark─Ö, aby zacz─Ö┼éa poszukiwanie pliku od folderu img. W tym przypadku poszukiwania trwaj─ů kr├│tko, poniewa┼╝ szukany plik znajduje si─Ö w┼éa┼Ťnie w tym folderze.

Ruch w dół struktury katalogów

Ręka z palcem skierowanym w dół

A teraz wyobra┼║ sobie, ┼╝e ju┼╝ sprawnie pos┼éugujesz si─Ö technologi─ů CSS i umiesz ustawia─ç obrazy w tle element├│w na stronie. W zwi─ůzku z tym otwierasz plik css/style.css i wpisujesz w nim odpowiedni─ů regu┼é─Ö CSS odnosz─ůc─ů si─Ö do pliku feynman.jpg, aby ustawi─ç ten obraz jako t┼éo na przyk┼éad akapitu.

Problem w tym, ┼╝e ÔÇ×jeste┼ŤmyÔÇŁ w folderze css, przez co nie mo┼╝emy wpisa─ç ┼Ťcie┼╝ki /css/img/feynman.jpg, poniewa┼╝ w folderze css nie ma folderu img z jakimkolwiek plikiem. W takim przypadku musimy ÔÇ×si─Ö cofn─ů─çÔÇŁ w strukturze katalog├│w, czyli przej┼Ť─ç do katalogu nadrz─Ödnego.

ÔÇ×Krok wsteczÔÇŁ w strukturze katalog├│w w ┼Ťcie┼╝ce oznaczamy za pomoc─ů dw├│ch kropek, np.: ../img/feynman.jpg. Ta ┼Ťcie┼╝ka ma dla przegl─ůdarki nast─Öpuj─ůce znaczenie: cofnij si─Ö do poprzedniego folderu, nast─Öpnie przejd┼║ do folderu img, po czym wybierz plik feynman.jpg.

Adresy URL

Listonosz wrzucaj─ůcy list do skorzynki

URL to specjalny format adresu u┼╝ywany w internecie i innych rodzajach sieci. Skr├│t URL pochodzi od angielskich s┼é├│w Uniform Resource Locator oznaczaj─ůcych jednolity lokalizator zasob├│w. Jest to wi─Öc rodzaj adresu u┼╝ywany do lokalizacji plik├│w (ka┼╝dego typu, czyli zar├│wno .html, jak i .css i innych) w internecie i sieciach lokalnych.

To w┼éa┼Ťnie adresem URL jest to, co potocznie nazywamy adresem strony internetowej i wpisujemy w pasku adresu przegl─ůdarki. Na przyk┼éad adres strony, kt├│r─ů czytasz to https://shebang.pl/html/dodawanie-obrazow-do-stron-internetowych. Cho─ç nie ma na jego ko┼äcu rozszerzenia, to odnosi si─Ö on do wygenerowanego przez serwer pliku HTML o nazwie dodawanie-obrazow-do-stron-internetowych (jeszcze wr├│cimy do kwestii serwerowych, na razie to dla nas nieistotne).

Adres URL sk┼éada si─Ö z pi─Öciu cz─Ö┼Ťci:

  • protoko┼éu ÔÇô w przypadku stron internetowych jest to http lub https
  • nazwy domeny (hosta) ÔÇô np. shebang.pl
  • ┼Ťcie┼╝ki do pliku ÔÇô /html/dodawanie-obrazow-do-stron-internetowych
  • dodatkowych parametr├│w umieszczanych po znaku zapytania ÔÇô np. ?s=html
  • kotwicy (fragmentu) ÔÇô np. #sciezki-do-plikow

Sp├│jrz na poni┼╝szy schemat. Dla uproszczenia cz─Ö┼Ť─ç dodawanie-obrazow-do-stron-internetowych zosta┼éa skr├│cona do postaci dodawanie-obrazow.

Schemat budowy adresu URL

Poni┼╝ej znajduje si─Ö opis dw├│ch pierwszych element├│w z tej listy. ┼Ücie┼╝ki ju┼╝ znasz. Parametry s─ů wykorzystywane w technologiach serwerowych, np. PHP, wi─Öc na razie nas nie interesuj─ů. Natomiast o kotwicach wi─Öcej powiemy sobie w rozdziale po┼Ťwi─Öconym ┼é─ůczom. S─ů to fragmenty adres├│w URL odnosz─ůce si─Ö do okre┼Ťlonego miejsca na bie┼╝─ůcej stronie (przyk┼éad ┼é─ůcza wykorzystuj─ůcego kotwic─Ö znajduje si─Ö w drugim zdaniu tego akapitu).

Protokół

Protok├│┼é to, najpro┼Ťciej m├│wi─ůc, metoda komunikacji mi─Ödzy serwerem i przegl─ůdark─ů. Do przesy┼éania stron HTML, a tak┼╝e obraz├│w graficznych i innych typ├│w plik├│w, jest wykorzystywany protok├│┼é HTTP (ang. Hypertext Transfer Protocol ÔÇô protok├│┼é przesy┼éania hipertekstu) lub protok├│┼é HTTPS (ang. Hypertext Transfer Protocol Secure ÔÇô bezpieczny protok├│┼é przesy┼éania hipertekstu).

HTTP to prosty protok├│┼é oparty na ┼╝─ůdaniach i odpowiedziach, tzn. przegl─ůdarka wysy┼éa do serwera (za pomoc─ů adresu URL) ┼╝─ůdanie okre┼Ťlonego pliku, a serwer wysy┼éa jej w odpowiedzi ten plik wraz z kodem oznaczaj─ůcym stan operacji. Je┼Ťli dany plik znajduje si─Ö na serwerze i jest dost─Öpny, to serwer zwraca kod 200 oznaczaj─ůcy, ┼╝e wszystko jest w porz─ůdku, i przesy┼éa ten plik do przegl─ůdarki. Innym zwracanym przez serwery kodem, kt├│ry widzieli chyba wszyscy, jest kod 404, oznaczaj─ůcy ┼╝e na serwerze nie znaleziono ┼╝─ůdanego pliku.

Innym protoko┼éem, kt├│ry powinna zna─ç osoba ucz─ůca si─Ö tworzy─ç strony internetowe, jest FTP (ang. File Transfer Protocol ÔÇô protok├│┼é przesy┼éania plik├│w). Jest on wykorzystywany przez tzw. klient├│w FTP, czyli programy s┼éu┼╝─ůce do wysy┼éania plik├│w z dysku komputera na serwer. Wi─Öcej na ten temat dowiesz si─Ö w dalszej cz─Ö┼Ťci kursu.

Domena

Nazwa domeny (ang. domain name) lub po prostu domena, to ┼éatwa do zapami─Ötania i niepowtarzalna nazwa, pod kt├│r─ů nasza witryna figuruje w internecie (na przyk┼éad domen─ů tej witryny jest shebang.pl). Jest ona powi─ůzana z adresem IP serwera, kt├│ry ma posta─ç ci─ůgu czterech grup cyfr rozdzielonych kropkami. Gdyby nie by┼éo domen, w pasku adresu przegl─ůdarki musieliby┼Ťmy wpisywa─ç w┼éa┼Ťnie adresy IP. Domeny s─ů o wiele ┼éatwiejsze do zapami─Ötania.

Opis alternatywny ÔÇô atrybut alt

Atrybut alt zawiera tekstowy opis obrazu reprezentowanego przez element img. Normalnie tego opisu nie wida─ç na stronie, ale jest on wy┼Ťwietlany przez przegl─ůdark─Ö, gdy grafika z jakiego┼Ť powodu nie zostanie wczytana, oraz u┼╝ywaj─ů go czytniki ekranu wykorzystywane przez osoby z wadami wzroku.

W naszym przyk┼éadzie mo┼╝emy zdefiniowa─ç atrybut alt w taki spos├│b: alt="Richard Feynman ze swoimi b─Öbnami". Je┼Ťli obraz nie zostanie wczytany, na stronie zostanie wy┼Ťwietlony napis ÔÇ×Richard Feynman ze swoimi b─ÖbnamiÔÇŁ. Sp├│jrz na poni┼╝szy zrzut ekranu.

Strona z niewczytanym zdj─Öciem Feynmana

Atrybut alt nie jest obowi─ůzkowy. Jego brak oznacza, ┼╝e obraz jest wa┼╝n─ů cz─Ö┼Ťci─ů tre┼Ťci, ale nie ma dla niego tekstowego odpowiednika, natomiast pusta warto┼Ť─ç (alt="") oznacza, ┼╝e obraz nie jest kluczow─ů cz─Ö┼Ťci─ů tre┼Ťci.

Co to znaczy, ┼╝e obraz nie jest kluczow─ů cz─Ö┼Ťci─ů tre┼Ťci? Nie ka┼╝da grafika u┼╝yta na stronie internetowej przedstawia co┼Ť istotnego z punktu widzenia odbiorcy. Na stronach znajduj─ů si─Ö r├│┼╝ne elementy ÔÇ×konstrukcyjneÔÇŁ, takie jak strza┼éki w postaci grafik, ikony uatrakcyjniaj─ůce szat─Ö wizualn─ů itp. Takie w┼éa┼Ťnie obrazy nie s─ů ÔÇ×kluczow─ů cz─Ö┼Ťci─ů tre┼ŤciÔÇŁ.

Wymiary obrazu ÔÇô atrybuty width i height

Atrybuty width i height okre┼Ťlaj─ů odpowiednio szeroko┼Ť─ç i wysoko┼Ť─ç grafiki w pikselach. W tym przypadku bardzo wa┼╝ne jest s┼éowo ÔÇ×okre┼Ťlaj─ůÔÇŁ. Tych dw├│ch atrybut├│w powinno si─Ö u┼╝ywa─ç w┼éa┼Ťnie do okre┼Ťlania, a nie do ustawiania wymiar├│w obrazu.

Krawi─Öc bior─ůcy miar─Ö od m─Ö┼╝czyzny

Kiedy przegl─ůdarka wczytuje stron─Ö internetow─ů, to najpierw analizuje jej kod ┼║r├│d┼éowy i oblicza ilo┼Ť─ç miejsca potrzebn─ů dla poszczeg├│lnych element├│w. Dopiero p├│┼║niej pobiera i wstawia dodatkowe zasoby, takie jak grafiki. Je┼Ťli wi─Öc okre┼Ťlimy wymiary obrazu za pomoc─ů atrybut├│w width i height, to przegl─ůdarka od razu zarezerwuje dla niego odpowiedni─ů powierzchni─Ö, a nast─Öpnie go tam wstawi po jego pobraniu. Je┼Ťli nie zdefiniujemy tych atrybut├│w, to przegl─ůdarka nie zarezerwuje miejsca dla naszego obrazu zawczasu, tylko poczeka a┼╝ go pobierze, sprawdzi jego wymiary, a nast─Öpnie skoryguje wygl─ůd strony.

Czasami da si─Ö zaobserwowa─ç ten efekt. Mo┼╝e zdarzy┼éo Ci si─Ö kiedy┼Ť wej┼Ť─ç na jak─ů┼Ť stron─Ö internetow─ů, kt├│ra po wy┼Ťwietleniu jakby ÔÇ×drgn─Ö┼éaÔÇŁ jeszcze na koniec, zmieniaj─ůc odrobin─Ö sw├│j uk┼éad. Mog┼éo to by─ç spowodowane w┼éa┼Ťnie dodaniem obrazu lub obraz├│w o nieznanych wcze┼Ťniej wymiarach.

Oczywi┼Ťcie za pomoc─ů atrybut├│w width i height mo┼╝na te┼╝ ustawia─ç wymiary grafik. Je┼Ťli na przyk┼éad obraz, kt├│ry wstawiasz na stron─Ö, ma 1000 pikseli wysoko┼Ťci i 800 pikseli szeroko┼Ťci, to za pomoc─ů tych atrybut├│w mo┼╝esz go ÔÇ×zmniejszy─çÔÇŁ albo powi─Ökszy─ç do dowolnych innych wymiar├│w.

Je┼Ťli zdefiniujesz zar├│wno atrybut width, jak i height, to wymiary obrazu zostan─ů ustawione dok┼éadnie na te warto┼Ťci bez wzgl─Ödu na jego proporcje, co mo┼╝e spowodowa─ç jego zniekszta┼écenie. Poni┼╝ej jest pokazane zdj─Öcie Feynmana, kt├│re normalnie mia┼éo wymiary 300 ├Ś 241 pikseli, ale za pomoc─ů atrybut├│w width i height zosta┼éo przeskalowane do wymiar├│w 100 ├Ś 241 pikseli.

Zniekształcone zdjęcie Feynmana

Je┼╝eli chcemy unikn─ů─ç zniekszta┼écenia proporcji obrazu, mo┼╝emy zdefiniowa─ç tylko jeden z atrybut├│w width i height. W├│wczas warto┼Ť─ç drugiego zostanie proporcjonalnie obliczona przez przegl─ůdark─Ö.

Cho─ç jest taka mo┼╝liwo┼Ť─ç, nie nale┼╝y zmniejsza─ç obraz├│w w ten spos├│b, poniewa┼╝ jest to niekorzystne pod wzgl─Ödem ilo┼Ťci przesy┼éanych danych. Im obraz jest wi─Ökszy, tym ma wi─Ökszy rozmiar w bajtach, czyli tym d┼éu┼╝ej jest pobierany z internetu, co z kolei oznacza, ┼╝e strona ┼éaduje si─Ö d┼éu┼╝ej.

Nie ma wi─Öc sensu dodawa─ç do strony du┼╝ego obrazu, a nast─Öpnie ÔÇ×zmniejsza─çÔÇŁ go w taki sztuczny spos├│b. Lepiej jest po prostu przyci─ů─ç obraz do ┼╝─ůdanych wymiar├│w w programie do obr├│bki grafiki, po czym wstawi─ç go na stron─Ö, a w atrybutach width i height wpisa─ç jego rzeczywiste wymiary.

Wiesz ju┼╝ wszystko, czego potrzebujesz, aby wstawi─ç obraz na swoj─ů stron─Ö. Poni┼╝ej znajduje si─Ö wi─Öc gotowy element img z przyk┼éadowej strony przedstawionej na pocz─ůtku tego rozdzia┼éu.

<img src="img/feynman.jpg" alt="Richard Feynman ze swoimi b─Öbnami" width="300" height="241">

Musisz go wypr├│bowa─ç.

Wstawianie obrazu na stron─Ö

Pora umie┼Ťci─ç zdj─Öcie na naszej stronie. Kliknij poni┼╝sz─ů miniatur─Ö ┼Ťrodkowym przyciskiem myszy (k├│┼ékiem), aby otworzy─ç obraz w pe┼énym rozmiarze w nowej karcie. Przejd┼║ na t─Ö now─ů kart─Ö i naci┼Ťnij kombinacj─Ö klawiszy Ctrl+S, aby zapisa─ç obraz na swoim dysku. Umie┼Ť─ç go w folderze img swojego serwisu. Potem wr├│─ç na kart─Ö z t─ů stron─ů.

Feynman z b─Öbnami - miniatura z linkiem do du┼╝ego pliku

Uruchom edytor Visual Studio Code i otw├│rz w nim nasz plik strony feynman.html. Kliknij za zamykaj─ůcym znacznikiem </h1> i naci┼Ťnij klawisz Enter, aby przej┼Ť─ç do nowego wiersza. Wpisz poni┼╝szy element img (na razie bez atrybut├│w width i height).

<img src="img/feynman.jpg" alt="Richard Feynman ze swoimi b─Öbnami">

Zapisz zmiany i otw├│rz stron─Ö w przegl─ůdarce. Powinna wygl─ůda─ç mniej wi─Öcej tak, jak na poni┼╝szym zrzucie ekranu.

Strona z za du┼╝ym zdj─Öciem Feynmana

To nie wygl─ůda zbyt dobrze. Przyczyn─ů jest to, ┼╝e pobrali┼Ťmy obraz o du┼╝ym rozmiarze i nie przygotowali┼Ťmy go w odpowiedni spos├│b do publikacji na naszej stronie.

Innymi słowy, umiesz już wstawiać obrazy na strony, ale nie umiesz jeszcze ich przygotowywać do publikacji. Nauczysz się tego w następnym rozdziale.

Podsumowanie

Sum
  • Do wstawiania obraz├│w na strony internetowe s┼éu┼╝y element img.
  • Element img ma obowi─ůzkowy atrybut src wskazuj─ůcy po┼éo┼╝enie obrazu.
  • Po┼éo┼╝enie obrazu mo┼╝na okre┼Ťli─ç za pomoc─ů ┼Ťcie┼╝ki wzgl─Ödnej lub bezwzgl─Ödnej albo za pomoc─ů adresu URL.
  • W ┼Ťcie┼╝kach do plik├│w na serwerze znak / na pocz─ůtku reprezentuje katalog g┼é├│wny.
  • Dwie kropki (..) w ┼Ťcie┼╝kach do plik├│w oznaczaj─ů przej┼Ťcie do katalogu nadrz─Ödnego.
  • Strony internetowe s─ů przesy┼éane mi─Ödzy przegl─ůdark─ů a serwerem za po┼Ťrednictwem protoko┼éu HTTP lub HTTPS.
  • Domena to nazwa, pod kt├│r─ů witryna jest dost─Öpna w internecie.
  • Atrybuty width i height elementu img s┼éu┼╝─ů do okre┼Ťlania wymiar├│w wstawianego obrazu. Powinny wskazywa─ç jego rzeczywiste wymiary.
  • W atrybucie alt elementu img nale┼╝y wpisa─ç alternatywny opis grafiki na wypadek, gdyby z jakiego┼Ť powodu nie zosta┼éa wczytana.