Wstawienie obrazka

<img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" />

Zamiast tekstu: "Tu podaj względną ścieżkę dostępu do obrazka", należy podać miejsce na dysku, gdzie znajduje się nasz obrazek, który chcemy umieścić na stronie. Jeżeli obrazek znajduje się w tym samym katalogu co strona, na której chcemy go wstawić, wystarczy wpisać tutaj samą nazwę pliku obrazka, nie zapominając przy tym o podaniu rozszerzenia (".jpg" lub ".gif").
Natomiast w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony (np. jeśli użytkownik wyłączy wyświetlanie grafiki w swojej przeglądarce internetowej).

UWAGA!
Znacznik <img /> nie posiada w jezyku HTML znacznika zamykającego!

Przykład:



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 czerwonym 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.

Poprawnie: plik.gif
Niepoprawnie: C:\www\plik.gif, plik.GIF, plik



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.

Poprawnie: katalog/plik.gif
Niepoprawnie: C:\www\katalog\plik.gif, katalog\plik.gif, katalog/plik.GIF, katalog/plik



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.

Poprawnie: ../plik.gif
Niepoprawnie: C:\www\plik.gif, katalog/plik.gif, ..\plik.gif, ../plik.GIF, ../plik



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.

Poprawnie: ../katalog2/plik.gif
Niepoprawnie: C:\www\katalog2\plik.gif, katalog2/plik.gif, ..\katalog2\plik.gif, ../katalog2/plik.GIF, ../katalog2/plik



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.

Poprawnie: ../../katalog2/katalog2a/plik.gif
Niepoprawnie: C:\www\katalog2\katalog2a\plik.gif, katalog2/katalog2a/plik.gif, ../katalog2/katalog2a/plik.gif



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.:

C:\www\katalog2\katalog2a\plik.gif     (BŁĄD!)
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.
UWAGA!
Bardzo ważne: w nazwach plików lepiej nie używać:
wielkich liter
znaków, np.: \ / : * ? " < > |
spacji (jeśli musisz, w zamian używaj podkreślnika "_")
polskich liter (ą, ć, ę, ł, ń... itd.)
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)!


--------------------------------------------------------------------------------

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:

GIF - dla rysunków składających się z mniej niż 256 kolorów, np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten obsługuje przezroczystość.
JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości.
PNG - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki jak i zdjęcia. Obsługuje kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość. Niestety zwłaszcza ta ostatnia własność może nie być interpretowana przez starsze przeglądarki (np. MSIE 6.0).
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ć.