Spójrz na cokolwiek Strona internetowa online dzisiaj, a zauważysz, że mają wspólne pewne cechy. Jedną z tych wspólnych cech są obrazy. Odpowiednie obrazy dodają tak wiele do prezentacji witryny. Niektóre z tych obrazów, takie jak logo firmy, pomagają znakować witrynę i łączą tę cyfrową jednostkę z fizyczną firmą.
Jak dodać obraz do strony internetowej za pomocą HTML
Aby dodać obraz, ikonę lub grafikę do swojej strony internetowej, musisz użyć tagu w kodzie HTML strony. Umieszczasz.
IMGtag w swoim. HTML dokładnie tam, gdzie ma być wyświetlana grafika. Przeglądarka, która renderuje kod strony, zastąpi ten tag odpowiednią grafiką po wyświetleniu strony. Wracając do przykładu logo naszej firmy, oto jak możesz dodać ten obraz do swojej witryny:
Atrybut SRC
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 wyświetlana przez przeglądarkę internetową podczas renderowania witryny.
Zauważysz również, że przed tą nazwą pliku dodaliśmy dodatkowe informacje, "/images/". To jest ścieżka do pliku. Początkowy ukośnik mówi serwerowi, aby zajrzał do katalogu głównego. Następnie wyszuka folder o nazwie „images” i wreszcie plik o nazwie „logo.png”. Używanie folderu o nazwie „images” do przechowywania wszystkich grafik witryny jest dość powszechną praktyką, ale ścieżka pliku zostanie zmieniona na taką, która jest odpowiednia dla Twojej witryny.
Atrybut Alt
Drugim wymaganym atrybutem jest tekst „alt”. Jest to „tekst alternatywny”, który jest wyświetlany, jeśli z jakiegoś powodu obraz nie zostanie załadowany. Ten tekst, który w naszym przykładzie brzmi „Logo firmy”, zostanie wyświetlony, jeśli obraz się nie załaduje. Dlaczego tak się stało? Z różnych powodów:
- Nieprawidłowa ścieżka pliku file
- Nieprawidłowa nazwa pliku lub błędna pisownia
- Błąd transmisji
- Plik został usunięty z serwera
To tylko kilka powodów, dla których może brakować naszego określonego obrazu. W takich przypadkach zamiast tego zostanie wyświetlony nasz tekst alternatywny.
Do czego służy tekst alternatywny?
Tekst alternatywny jest również używany przez oprogramowanie czytnika ekranu do „odczytywania” obrazu osobie niedowidzącej. Ponieważ nie mogą zobaczyć obrazu tak jak my, ten tekst pozwala im dowiedzieć się, czym jest sam obraz. Dlatego tekst alternatywny jest wymagany i powinien jasno określać, czym jest obraz!
Częstym niezrozumieniem tekstu alternatywnego jest to, że jest on przeznaczony do celów wyszukiwarek. To nie jest prawda. Chociaż Google i inne wyszukiwarki czytają ten tekst, aby określić, czym jest obraz (pamiętaj, nie "widzą" twojego obrazu), nie powinieneś pisać tekstu alternatywnego, aby odwoływać się wyłącznie do wyszukiwania silniki. Autor czystego tekstu alternatywnego, który jest przeznaczony dla ludzi. Jeśli możesz również dodać do tagu kilka słów kluczowych, które przemawiają do wyszukiwarek, to w porządku, ale zawsze upewnij się tekst alternatywny służy swojemu głównemu celowi, określając, czym jest obraz dla każdego, kto nie widzi grafiki plik.
Inne atrybuty obrazu
.
IMG.
tag ma również dwa inne atrybuty, które możesz zobaczyć, gdy umieścisz grafikę na swojej stronie internetowej — szerokość i wysokość. Na przykład, jeśli używasz edytora WYSIWYG, takiego jak Dreamweaver, automatycznie dodaje on te informacje za Ciebie. Oto przykład:
.
SZEROKOŚĆ.
i.
WYSOKOŚĆ.
atrybuty informują przeglądarkę o rozmiarze obrazu. Przeglądarka wie wtedy dokładnie, ile miejsca w układzie ma 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 dokładnie takim rozmiarze. Na przykład, jeśli masz.
responsywna strona internetowa
których rozmiar zmienia się w zależności od ekranu odwiedzających i rozmiaru urządzenia, chcesz również, aby Twoje obrazy były elastyczne. Jeśli określisz w swoim kodzie HTML, jaki jest stały rozmiar, bardzo trudno będzie Ci go zastąpić responsywnym.
Zapytania o media CSS
. Z tego powodu oraz w celu zachowania separacji stylu (CSS) i struktury (HTML) zaleca się NIE dodawać do kodu HTML atrybutów szerokości i wysokości.
Jedna uwaga: jeśli pozostawisz te instrukcje dotyczące rozmiaru wyłączone i nie określisz rozmiaru w CSS, przeglądarka i tak wyświetli obraz w domyślnym rozmiarze.
Edytowane przez Jeremy'ego Girarda