Wyświetlanie obrazka

Do wyświetlania obrazków na stronie służy tagimg. Jego nazwa to skrót od image, czyliobraz.

Nie posiada on znacznika zamykającego.

Tag img posiada atrybut src (ang source-żródło)

Adres ten może być bezwzględny, czyli wskazujący na dowolny obrazek z internetu, lub względny, czyli wyrażony względem naszego pliku html jeśli plik jest na tym samym serwerze co plik html

Musisz uważać podczas korzystania z zewnętrznych adresów. Pamiętaj, że na przykład strona Wikipedii może się zmienić bez Twojej wiedzy, a wtedy może się okazać, że link nie jest już poprawny. Pamiętaj również o prawach autorskich.

Można używać plików w formatach PNG, JPEG i GIF. Jednak gdy chemy umieścic na swojej stronie jakiś obrazek, to powinieneś zadbać o jego odpowiednią rozdzielczość. Zbyt duże pliki będą się długo ładować, natomiast zbyt małe, będą brzydko wyglądać.

Tekst alternatywny

Sam obraz, nawet jeśli jest wspaniały, to za mało. Jako twórca strony, musisz pomyśleć o tym, co zostanie pokazane w przypadku, gdy obrazek nie może zostać poprawnie wyświetlony. Taka sytuacja może mieć miejsce np. gdy użytkownik korzysta wyłącznie z tekstowej przeglądarki, obrazek nie został załadowany ze względu na problemy z połączeniem, użytkownik jest osobą niewidomą i korzysta z narzędzi czytających zawartość strony internetowej lub w sytuacji gdy twoja strona jest analizowana przez wyszukiwarkę taką jak Google.

Aby dobrze obsłużyć opisane powyżej sytuacje, należy skorzystać z tekstu alternatywnego. Informuje on użytkownika o treści obrazka, w sytuacji gdy przeglądarka z jakiś powodów go nie wyświetla. Co prawda taka strona bez obrazków traci część swojego uroku, jednak dzięki tekstowi alternatywnemu informacje zostają zachowane.

Aby go dodać, należy użyć atrybutualtelementuimg. Nazwaalt_jest skrótem od_alternate text, czylitekst alternatywny.

Poniżej znajduje się przykład użycia tekstu alternatywnego. Jeśli chcesz, to możesz ustawić błędny adres obrazka, w takim przypadku zostanie wyświetlony właśnie tekst alternatywny.

Wymiary obrazka

Standardowo obrazki na stronie są wyświetlane w takich wymiarach, jakie posiada plik. Najlepszym rozwiązaniem byłoby dopasowanie rozdzielczości pliku do wymiarów w jakich chcemy go wyświetlać, jednak nie zawsze mamy taką możliwość. Na szczęście możemy ustawić wymiary, w jakich ma być wyświetlany obrazek, bezpośrednio w kodzie HTML. Służą do tego atrybutywidth(szerokość) iheight(wysokość). Jako ich wartości przekazujemy liczby, które wyrażają dany wymiar w pikselach.

Uruchom przykład

Jeśli uruchomiłeś powyższy przykład, to na pewno zauważyłeś, że obrazek został nienaturalnie zwężony. Wysokość jest za duża w stosunku do szerokości. Wynika to z faktu, że naturalne wymiary obrazka (wymiary pliku), są równe 529px x 529px, czyli ich stosunek to 1:1, obrazek jest kwadratem. Poprzez nadanie mu wymiarów 100px x 200px, których stosunek szerokości do wysokości jest równy 1:2, obrazek został nienaturalnie rozciągnięty.

Podczas umieszczania zdjęć na stronie i ustalania ich wymiarów musisz zawsze pamiętać o odpowiednim dopasowaniu wymiarów. Uniknąć problemu, który widziałeś w poprzednim przykładzie, możemy na dwa sposoby. Po pierwsze można ustalić takie wymiary, aby ich stosunek był równy stosunkowi wymiarów, jaką posiada oryginalny plik. W naszym przypadku wysokość i szerokość muszą być sobie równe.

Uruchom przykład

W powyższym przykładzie logo HTML prezentuje się już dobrze. To rozwiązanie ma jednak pewną wadę. Załóżmy że obrazek ma wymiary 580x400 i chcemy go wyświetlić tak, aby jego szerokość wynosiła 350px. Poprawne obliczenie drugiego wymiaru może się w takich sytuacjach okazać kłopotliwe, z tego właśnie powodu istnieje drugi, wygodniejszy sposób określenia wymiarów. Polega on na tym, że podajemy tylko jeden z nich, a drugi zostanie automatycznie dopasowany przez przeglądarkę tak, aby stosunek wymiarów pozostał odpowiedni, czyli tak, aby obrazek był poprawnie wyświetlany.

Uruchom przykład

Zadanie 3

Ustaw wysokość obrazka na 100px. Zadbaj o to, aby proporcje zostały zachowane.

Rozwiąż zadanie

Obramowanie

Z obramowaniem miałeś okazję się już spotkać w lekcji poświęconej tabelom. W ich przypadku określaliśmy obramowanie poprzez atrybutborder, do którego należy przypisać szerokość obramowania wyrażoną w pikselach. Co ciekawe, w ten sam sposób możemy przypisać obramowanie do obrazków wyświetlanych przez tagimg.

Uruchom przykład

Położenie

Na stronach internetowych obrazki często znajdują się w tekście. Aby umieścić obrazek wewnątrz akapitu, możesz po prostu użyć elementuimgwewnątrzp.

Uruchom przykład

W powyższym przykładzie obrazek został umieszczony dokładnie w tym miejscu, w którym znajduje się w kodzie HTML. Mamy możliwość zmiany jego położenia dzięki atrybutowialign(pl.wyrównanie).

W następnym przykładzie obrazek jest wyświetlany zawsze przy lewej krawędzie elementu w którym został umieszczony, czyli po lewej stronie akapitu.

Uruchom przykład

Atrybutalignmoże przyjąć następujące wartości. Sprawdź je samodzielnie, poprzez użycie ich w poprzednim przykładzie.

• left- wyrównanie do lewej;

• right- wyrównanie do prawej;

• middle- wyśrodkowanie na osi pionowej;

• top- wyrównanie do góry;

• bottom- wyrównanie do dołu, jest to wartość domyślna.

Obrazek będący linkiem

Obrazki będące jednocześnie linkami są bardzo popularne na wielu stronach. Często logo wyświetlane na górze strony jest jednocześnie linkiem, który kieruje nas na stronę główną. Tak też jest w przypadku strony codequack.com.

Dodanie takiego obrazka stronę jest właściwie bardzo proste i wiesz już wszystko co konieczne, aby to zrobić. Do tej pory jako zawartości znacznikaatworzącego linki, używaliśmy tekstu, jednak nic nie stoi na przeszkodzie aby użyć w tym miejscu taguimg. Może to wyglądać następująco:

Uruchom przykład

Podsumowanie

W tej lekcji zajęliśmy się tematem, dzięki któremu możemy znacznie upiększyć nasze strony, czyli wyświetlaniem obrazków. Na początek zajęliśmy się prostym wyświetlaniem zdjęcia, miałeś okazję poznać tagimg. Następnie dowiedziałeś się czym jest tekst alternatywny, jak go dodać i dlaczego należy to robić. Kolejną część lekcji poświęciliśmy wymiarom obrazków oraz obramowaniu. Na koniec zajęliśmy się położeniem wyświetlanych grafik oraz dowiedziałeś się jak stworzyć obrazek będący jednocześnie linkiem.

Można powiedzieć, że całą lekcję zajmowaliśmy się jednym tagiemimg, jednak dzięki jego różnym atrybutom, mieliśmy całkiem sporo materiału do poznania.