Spójrz na jakąkolwiek stronę internetową dzisiaj, a zauważysz, że mają pewne wspólne cechy. Jedną z tych wspólnych cech są obrazy. Odpowiednie obrazy wnoszą tak wiele do prezentacji witryny. Niektóre z tych obrazów, takie jak logo firmy, pomagają w brandowaniu witryny i łączeniu tego cyfrowego podmiotu z fizyczną firmą.
Aby dodać obraz, ikonę lub grafikę do swojej strony internetowej, musisz użyć tego znacznika w kodzie HTML strony. Umieszczasz IMG umieść tag w kodzie HTML dokładnie tam, gdzie chcesz wyświetlić grafikę. Przeglądarka, która wyświetla kod strony, zastąpi ten tag odpowiednią grafiką po wyświetleniu strony. Wracając do przykładu logo naszej firmy, możesz dodać ten obraz do swojej witryny:
Atrybuty obrazu
Patrząc na powyższy kod HTML, zobaczysz, że element zawiera dwa atrybuty. Każdy z nich jest wymagany do obrazu.
Pierwszym atrybutem jest "src". Jest to dosłownie plik obrazu, który chcesz wyświetlić na stronie. W naszym przykładzie używamy pliku o nazwie "logo.png". Jest to grafika, którą wyświetlałaby przeglądarka po wyrenderowaniu witryny.
Zauważysz również, że przed tą nazwą pliku dodaliśmy kilka dodatkowych informacji "/ images /". To jest ścieżka do pliku. Początkowy ukośnik informuje serwer, aby zajrzał do katalogu głównego katalogu. Następnie wyszuka folder o nazwie "images", a na końcu plik o nazwie "logo.png". Używanie folderu o nazwie "obrazy" do przechowywania całej grafiki witryny jest dość powszechną praktyką, ale ścieżka do pliku zostanie zmieniona na to, co jest istotne dla Twojej witryny.
Drugim wymaganym atrybutem jest tekst "alt". Jest to "tekst alternatywny", który jest wyświetlany, jeśli obraz nie może się załadować z jakiegoś powodu. Ten tekst, który w naszym przykładzie brzmi "Logo firmy", byłby wyświetlany, gdyby obraz się nie załadował. Dlaczego tak się stało? Z różnych powodów:
- Niepoprawna ścieżka pliku
- Nieprawidłowa nazwa pliku lub błąd pisowni
- Błąd transmisji
- Plik został usunięty z serwera
To tylko kilka możliwości, dla których brakuje określonego obrazu. W takich przypadkach zamiast tego wyświetli się nasz tekst alternatywny.
Tekst alternatywny jest również używany przez oprogramowanie czytnika ekranu do "odczytu" obrazu dla osoby, która ma problemy z widzeniem. Ponieważ nie widzą obrazu tak jak my, ten tekst pozwala im poznać, czym jest sam obraz. Właśnie dlatego tekst alternatywny jest wymagany i dlaczego powinien jasno określać, czym jest obraz!
Powszechne nieporozumienie dotyczące tekstu alternatywnego polega na tym, że jest on przeznaczony do celów wyszukiwarki. To nie jest prawda. Podczas gdy Google i inne wyszukiwarki czytają ten tekst, aby określić, czym jest obraz (pamiętaj, że nie mogą "zobaczyć" twojego obrazu), nie powinieneś pisać tekstu alternatywnego, aby odwoływać się wyłącznie do wyszukiwarek. Twórz wyraźny tekst alternatywny przeznaczony dla ludzi. Jeśli możesz dodać słowa kluczowe do tagu odwołującego się do wyszukiwarek, to dobrze, ale zawsze upewnij się, że tekst alternatywny służy pierwotnemu celowi, określając, jaki obraz jest dla każdego, kto nie widzi pliku graficznego.
Inne atrybuty
The IMG Tag ma również dwa inne atrybuty, które możesz zobaczyć podczas umieszczania grafiki na stronie internetowej - szerokość i wysokość. Na przykład, jeśli używasz edytora WYSIWYG, takiego jak Dreamweaver, automatycznie dodaje on te informacje. Oto przykład:
The SZEROKOŚĆ i WYSOKOŚĆ atrybuty informują przeglądarkę o wielkości obrazu. Przeglądarka wie dokładnie, ile miejsca w układzie można przydzielić, i może przejść do następnego elementu na stronie podczas pobierania obrazu. Problem z wykorzystaniem tych informacji w kodzie HTML polega na tym, że nie zawsze chcesz, aby obraz był wyświetlany w tym samym rozmiarze. Jeśli na przykład masz responsywną witrynę internetową, której zmiany rozmiaru zmieniają się na podstawie ekranu użytkownika i rozmiaru urządzenia, chcesz też, aby Twoje zdjęcia były elastyczne. Jeśli określisz w kodzie HTML, jaki jest stały rozmiar, bardzo trudno będzie zastąpić go responsywnymi zapytaniami o media CSS. Z tego powodu i aby zachować oddzielenie stylu (CSS) od struktury (HTML), zaleca się, aby NIE dodawać atrybutów width i height do kodu HTML.
Jedna uwaga: jeśli zostawisz te instrukcje wymiarowania wyłączone i nie określisz rozmiaru w CSS, przeglądarka wyświetli obraz w domyślnym, natywnym rozmiarze.
Edytowane przez Jeremy'ego Girarda
