W jaki spos贸b wstawi膰 obrazek (grafik臋, zdj臋cie) na stron臋 WWW?

UWAGA!Znaczniknie posiada w j臋zyku HTML znacznika zamykaj膮cego!

Dla zainteresowanychJe艣li chcesz dowiedzie膰 si臋 wi臋cej na temat dodatkowych mo偶liwo艣ci przy wstawianiu obrazk贸w na stronach internetowych, zobacz rozdzia艂: Multimedia / Obrazek.

Poni偶ej znajdziesz przyk艂ady poprawnych 艣cie偶ek dost臋pu, dla r贸偶nych struktur katalog贸w na dysku. We wszystkich przypadkach naszym zamiarem b臋dzie wstawienie obrazka o nazwie plik.gif do dokumentu strona.html - drog臋 "przej艣cia" zaznaczono kolorem zielonym i strza艂kami. Przy tworzeniu 艣cie偶ki zawsze "startujemy" od strona.html i zmierzamy do plik.gif. Plik index.html stanowi stron臋 g艂贸wn膮, kt贸r膮 si臋 teraz nie zajmujemy.

Jak wida膰 obrazek plik.gif oraz dokument strona.html znajduj膮 si臋 w tym samym katalogu. Nie ma przy tym znaczenia czy oba pliki s膮 w katalogu g艂贸wnym serwisu czy w jakim艣 podkatalogu - 艣cie偶ka dost臋pu jest taka sama. W takim przypadku wystarczy poda膰 nazw臋 pliku bez 偶adnych dodatk贸w. Jest to najprostsza struktura katalog贸w (szczeg贸lnie pierwsza - wszystko w jednym katalogu). Stosuje si臋 j膮 szczeg贸lnie w serwisach sk艂adaj膮cych si臋 z niewielu podstron. Je艣li masz problemy ze swobodnym tworzeniem bardziej skomplikowanych 艣cie偶ek dost臋pu, polecam Ci w艂a艣nie ten model, poniewa偶 mo偶liwo艣膰 pomy艂ki jest tutaj naprawd臋 niewielka.

W przypadku kiedy plik.gif znajduje si臋 w jakim艣 podkatalogu, a dokument strona.html nie, przed nazw膮 pliku trzeba poda膰 nazw臋 tego podkatalogu oraz uko艣nik (zwyk艂y, nie odwr贸cony!). Taka struktura jest stosowana np. gdy mamy du偶o plik贸w (np. zdj臋膰) i dla utrzymania porz膮dku chcemy je trzyma膰 w osobnym podkatalogu.

Sytuacja analogiczna jak poprzednio, lecz teraz plik.gif jest w katalogu g艂贸wnym, a strona.html w podkatalogu. W takim przypadku przed nazw膮 pliku trzeba wstawi膰 ../ co oznacza "wyj艣cie" do katalogu nadrz臋dnego, czyli z katalog/ do www/ Struktura przydatna w przypadku wielu dzia艂贸w w serwisie, z kt贸rych ka偶dy sk艂ada si臋 z du偶ej ilo艣ci podstron umieszczonych w osobnych katalogach.

Jest to nieco zmodyfikowany poprzedni wariant. Teraz r贸wnie偶 plik.gif znajduje si臋 w podkatalogu - podobnie jak strona.html z tym, 偶e s膮 to dwa r贸偶ne katalogi. Budowanie 艣cie偶ki w tym przypadku rozpoczynamy w podkatalogu o nazwie katalog1/, w kt贸rym znajduje si臋 nasza strona.html. Nast臋pnie wychodzimy do katalogu nadrz臋dnego www/ co jest realizowane przez wstawienie ../ na pocz膮tku 艣cie偶ki dost臋pu. Teraz mo偶emy swobodnie wej艣膰 do drugiego podkatalogu katalog2/ (realizuje si臋 to przez podanie jego nazwy), w kt贸rym znajduje si臋 nasz plik.gif, a na ko艅cu - jak zawsze - podajemy nazw臋 pliku. Struktura przydatna w przypadku wielu dzia艂贸w w serwisie oraz du偶ej ilo艣ci plik贸w. Wtedy w katalogu g艂贸wnym znajduje si臋 zazwyczaj jedynie strona g艂贸wna index.html, a wszystkie podstrony oraz pliki s膮 umieszczone w katalogach podrz臋dnych.

Ten przyk艂ad jest ju偶 do艣膰 zaawansowany. Je艣li go zrozumiesz, mo偶esz powiedzie膰, 偶e 艣cie偶ki dost臋pu "masz w ma艂ym palcu" 🙂"Znajdujemy si臋" w katalogu: katalog1a/ (bo tutaj jest nasza strona, na kt贸rej chcemy wstawi膰 obrazek). Pierwsze dwie kropki w 艣cie偶ce dost臋pu powoduj膮 wyj艣cie o jeden poziom wy偶ej - czyli do katalogu: katalog1/. Kolejne dwie kropki odpowiadaj膮 za wyj艣cie o nast臋pny poziom wy偶ej, czyli do katalogu: www/. Teraz mo偶emy ju偶 wej艣膰 do katalogu podrz臋dnego: katalog2/, a potem do: katalog2a/, kt贸ry znajduje si臋 wewn膮trz niego. Na ko艅cu wystarczy poda膰 nazw臋 pliku.

Powy偶sze sposoby podawania 艣cie偶ki dost臋pu obowi膮zuj膮 dla wszystkich rodzaj贸w plik贸w - r贸wnie偶 dla podstron. Cz臋stym b艂臋dem pope艂nianym przez osoby pocz膮tkuj膮ce, jest podanie bezwzgl臋dnej 艣cie偶ki dost臋pu, np.:

Jest to karygodny b艂膮d!!! Po wprowadzeniu strony do Internetu, zostaje ona zapisana na dysku komputera-serwera (nie na Twoim). Struktura (wygl膮d) drzewa katalog贸w b臋dzie tam z ca艂膮 pewno艣ci膮 inna ni偶 na Twoim dysku lokalnym. Dlatego podana 艣cie偶ka bezwzgl臋dna tam nie istnieje. Co gorsze, b艂臋du mo偶esz nie wykry膰 od razu, poniewa偶 na Twoim komputerze obrazek wczyta si臋 poprawnie, ale ju偶 znajomy nic nie zobaczy! Zauwa偶 r贸wnie偶, 偶e w 艣cie偶kach u偶ywamy uko艣nik贸w ("/"), a nie odwr贸conych uko艣nik贸w ("\").

Jest jeszcze jeden rodzaj powa偶nego b艂臋du:

Obie 艣cie偶ki wygl膮daj膮 poprawnie, ale s膮 absolutnie niedopuszczalne! Nie wolno wstawia膰 do dokumentu plik贸w z innego dysku. W og贸le nie mo偶na si臋 odwo艂ywa膰 do plik贸w, kt贸re znajduj膮 si臋 "powy偶ej" katalogu g艂贸wnego serwisu - u nas jest to www/ (katalog g艂贸wny serwisu mo偶na rozpozna膰 po tym, 偶e bezpo艣rednio w nim znajduje si臋 strona g艂贸wna index.html).

Pami臋taj: stosuj zawsze wzgl臋dne, a nie bezwzgl臋dne 艣cie偶ki dost臋pu! U偶ywaj r贸wnie偶 zwyk艂ych, a nie odwr贸conych uko艣nik贸w. Wszystkie pliki Twojej strony powinny znajdowa膰 si臋 w obr臋bie katalogu g艂贸wnego serwisu, w 偶adnym razie powy偶ej niego!

Niekt贸re edytory HTML umo偶liwiaj膮 automatyczne wstawienie wzgl臋dnej 艣cie偶ki dost臋pu (dopiero po zapisaniu strony na dysku), poprzez wybranie pliku w specjalnym selektorze. Dzi臋ki temu tworzenie zawi艂ych 艣cie偶ek, mo偶e by膰 du偶o 艂atwiejsze.

Przy okazji zwracam uwag臋, 偶e strona startowa index.html (patrz powy偶ej) musi znajdowa膰 si臋 w g艂贸wnym katalogu publicznym na serwerze. Podczas umieszczania strony w Internecie, na serwer wysy艂amy wszystkie pliki znajduj膮ce si臋 w katalogu www/, ale nie sam katalog. index.html musi bezwzgl臋dnie znajdowa膰 si臋 w katalogu g艂贸wnym na Twoim koncie WWW, w przeciwnym razie Twoja strona w og贸le si臋 nie wy艣wietli! Podczas umieszczania strony w Internecie, nie zapomnij przekopiowa膰 na serwer r贸wnie偶 wszystkich plik贸w obrazk贸w!

Je艣li nie zastosujesz si臋 do tych zalece艅, mo偶e si臋 okaza膰, 偶e po wprowadzeniu strony do Internetu, pliki takie nie wczytaj膮 si臋 (nawet je艣li na Twoim komputerze wszystko jest w porz膮dku)!

Jak wstawi膰 obrazek (grafik臋, zdj臋cie, fotografi臋, ilustracj臋) na stron臋 WWW?

Na koniec jeszcze jedna rada: obrazki wstawione na stron臋, wydatnie zwi臋kszaj膮 jej obj臋to艣膰, a co za tym idzie, wyd艂u偶aj膮 czas wczytywania strony. Je艣li na Twoim dysku lokalnym strona wczytuje si臋 b艂yskawicznie, nie my艣l, 偶e b臋dzie tak samo po wprowadzeniu jej do Internetu. Oczywi艣cie im wi臋kszy jest obrazek, tym wi臋cej miejsca zajmuje na dysku. Poza tym zbyt wiele nieprzemy艣lanej grafiki tylko zaciemnia tre艣膰. Dlatego staraj si臋 z tym nie przesadza膰. Nale偶y r贸wnie偶 pami臋ta膰, aby najlepiej wszystkie obrazki by艂y zapisane w jednym z trzech format贸w:

W 偶adnym wypadku nie nale偶y stosowa膰 formatu BMP, gdy偶 nie posiada on 偶adnej lub bardzo s艂ab膮 kompresj臋 i w zwi膮zku z tym grafika zapisana w tym formacie ma du偶o wi臋ksz膮 obj臋to艣膰.

Grafik臋 przydatn膮 dla stron WWW mo偶esz znale藕膰 bezpo艣rednio w Internecie. Istnieje wiele serwis贸w internetowych dla webmaster贸w, oferuj膮cych darmowo gotowe przyciski menu i inne przydatne dodatki. Wystarczy troch臋 poszuka膰.

W jaki spos贸b ustawi膰 obrazek (grafik臋, zdj臋cie) lub inne elementy na 艣rodku ekranu (wy艣rodkowanie, centrowanie)?

Na przyk艂ad je艣li plik nazywa si臋 "obrazek.jpg" i znajduje si臋 w tym samym katalogu na dysku komputera co dokument *.html, w kt贸rym chcemy wstawi膰 zdj臋cie, mo偶na si臋 pos艂u偶y膰 nast臋puj膮cym znacznikiem: . Tekst "Tu wpisz kr贸tki opis obrazka" normalnie nie pojawi si臋 na stronie, ale zaleca si臋 go nie pomija膰. Mo偶e on zosta膰 pokazany, je艣li z jakiego艣 powodu przegl膮darka nie b臋dzie mog艂a wy艣wietli膰 zdj臋cia. Jest r贸wnie偶 przydatny osobom niewidomym, kt贸re korzystaj膮 ze stron internetowych zwykle za pomoc膮 specjalnych syntezator贸w mowy.

Najcz臋stszym powodem niewy艣wietlania si臋 zdj臋膰 wstawionych na stronie internetowej s膮 b艂臋dy literowe w nazwach plik贸w obrazk贸w albo niepoprawnie skonstruowana 艣cie偶ka dost臋pu. Innym powodem mo偶e by膰 pomini臋cie rozszerzenia nazwy pliku. Mimo i偶 w niekt贸rych systemach operacyjnych (np. Windows) rozszerzenia nazw plik贸w mog膮 by膰 ukrywane, podczas wstawiania obrazka na stronie internetowej zawsze trzeba go poda膰. Przyczyn膮 niewy艣wietlania si臋 zdj臋膰 mo偶e by膰 r贸wnie偶 u偶ycie niedozwolonych znak贸w w nazwie pliku - np. polskich znak贸w diakrytycznych albo znaku spacji. Zaleca si臋 tak偶e nie u偶ywa膰 wielkich liter.

📅 28.06.2024 | ★★★★★ 5/5 (865)

Aby kontynuowa膰 kurs, przejd藕 do poprzedniego lub nast臋pnego artyku艂u:

W jaki spos贸b wstawi膰 na stronie internetowej obrazek (grafik臋, zdj臋cie, fotografi臋, ilustracj臋), kt贸ry automatycznie dopasowuje si臋 do wielko艣ci ekranu?

W jaki spos贸b nie op贸藕nia膰 wy艣wietlania strony podczas 艂adowania du偶ych obrazk贸w?

W jaki spos贸b przyspieszy膰 艂adowanie zewn臋trznych zasob贸w (plik贸w): zdj臋膰, film贸w wideo, d藕wi臋ku audio, arkuszy styl贸w CSS, czcionek, skrypt贸w?

Tematy: obrazek (33), grafika (23), zdj臋cie (22), fotografia (22), plik (17), GIF (3), JPG (4), PNG (4), BMP (3)

Zobacz wi臋cej komentarzy