Jak do tej pory, definicja waszego obrazu powinna wyglądać mniej więcej tak:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Jednakże img-Elementowi powinny być przypisane (a nawet powinny być) pewne atrybuty. Po pierwsze, jest to atrybut alt. Tekst zdefiniowany tutaj jest wyświetlany przez przeglądarkę, gdy obraz - ze względów technicznych - nie może zostać załadowany.
Niestety, związane z atrybutem alt pojawiają się często nieporozumienia. Atrybut alt faktycznie służy wyłącznie do sytuacji, gdy obraz nie może być wyświetlony. Jednakże niektóre przeglądarki wyświetlają wartość atrybutu alt w oknie tooltip, gdy kursor myszy znajduje się nad obrazem.
To zachowanie jest błędne. W takich przypadkach właściwszy jest atrybut title. Rezultatowa definicja wyglądałaby mniej więcej tak:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo PSD-Tutorials.de" />
W tym przypadku wartość atrybutu title zastępuje wartość atrybutu alt.
Określenie rozmiaru
W HTML obecnie wiele spraw już nie jest rozwiązywanych za pomocą atrybutów, lecz poprzez CSS. Jednakże określenie rozmiaru nie należy do tej kategorii. Wysokość i szerokość są określane bez zmian przez atrybuty width i height. Oto przykładowa definicja:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo PSD-Tutorials.de" width="200" height="150" />
Jeśli nie podano jednostki w przypadku atrybutu width lub height, wartości liczbowe są interpretowane przez przeglądarkę jako liczby pikseli. W poprzednim przykładzie obraz jest więc 200 pikseli szeroki i 150 pikseli wysoki. Możliwe jest także podanie procentowej wartości.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo PSD-Tutorials.de" width="20%" height="15%" />
Wartości procentowe odnoszą się do dostępnego miejsca na wyświetlaczu. Jeśli nie określono rozmiaru, przeglądarki wyświetlają grafiki w ich oryginalnym rozmiarze.
Obrazy i akapity tekstu
Gdy umieszczacie obrazy w połączeniu z tekstem pływającym, musicie być ostrożni.
<p><img src="logo.png" alt="" width="180" height="150" /> Ten tekst jest wyświetlany obok obrazu.</p>
Atrybut img jest tzw. atrybutem inline. Grafiki mogą być umieszczone bezpośrednio w tekście. Jeśli grafika jest wyższa od wysokości wiersza, tekst na stronie jest pod grafiką. Domyślnie tekst jest ustawiony na dole względem grafiki.
Ustalanie wyrównania tekstu w starszych wersjach HTML możliwe było za pomocą atrybutu align. Proszę już go nie używać, ponieważ został on usunięty z standardu HTML5. Zamiast tego korzystajcie z możliwości, jakie daje CSS. Dzięki temu możecie na przykład osadzić obraz w tekście.
Długi opis
HTML oferuje możliwość dodania rozbudowanego opisu do obrazu. Jest to zawsze przydatne, gdy do obrazu faktycznie potrzebne są dodatkowe wyjaśnienia. Możecie przechowywać dodatkowe informacje w różnych miejscach i odnosić się do nich.
Dodatkowe informacje mogą znajdować się w różnych miejscach.
<img src="bild1.png" alt="Diagram 1" title="Diagram 1" longdesc="#diagramm" />
Założono tutaj, że na stronie istnieje obszar o ID diagramm. Najpopularniejszą opcją jest przechowywanie informacji w pliku zewnętrznym.
<img src="bild1.png" alt="Diagram 1" longdesc="diagramm1.htm" />
Niestety, wsparcie przeglądarek wciąż nie jest wystarczające. Dodatkowo, wydaje się, że atrybut ten stawia producentów przeglądarek przed pytaniem, jak można go łatwo zaimplementować.
Ponieważ to na przykładzie Firefoksa nie jest naprawdę piękne i intuicyjne. Przeciętni użytkownicy witryn nie zauważą atrybutu longdesc w pierwszej chwili. Muszą raczej kliknąć na obraz prawym przyciskiem myszy.
W menu kontekstowym zobaczysz opcję Pokazuj długie opisy. Po jej kliknięciu zostanie wyświetlona dodatkowa informacja wpisana w atrybucie longdesc. Jak wspomniałem, działa tak w Firefoksie, ale na pewno nie jest to eleganckie rozwiązanie.
Opera rozwiązała to podobnie. Klikając prawym przyciskiem myszy na obraz w tej przeglądarce, można zobaczyć wpis Długi opis.
Prowadzi to następnie do podanych dodatkowych informacji.
W3C proponuje dodatkowo podanie długiego opisu w postaci adresu URL danych.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
Jeśli nie mieliście jeszcze doświadczenia z adresami URL danych, znajdziecie szczegółowe informacje na stronie http://de.wikipedia.org/wiki/Data-URL.
Definiowanie opisów obrazów
Dotychczas nie było w HTML żadnych możliwości definiowania podpisów i grupowania obrazów. Dokładnie ten aspekt zmienił się w HTML5. Dodano tu nowe elementy figure i figcaption.
By już to zaznaczyć: figura nie jest przeznaczona wyłącznie do użycia w połączeniu z grafikami. Faktycznie, element ten można zastosować do wszystkich elementów, które uzupełniają dokument. Mogą to być oprócz obrazów na przykład wykresy, przykłady kodu i filmy.
Obok figure istnieje również figcaption. Za jego pomocą można dostarczyć alternatywny opis dla treści, które nie są czytelne dla określonych grup użytkowników.
Oto przykład użycia obu elementów figure i figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>To jest nasz nowy logo.</figcaption> </figure>
Spójrzcie na rezultat w przeglądarce, oto co się pojawi:
W jaki sposób przeglądarki obsługują oba te elementy, pozostawione jest ostatecznie im. Ogólnie rzecz biorąc, oczywiście możecie ponownie wpłynąć na wygląd za pomocą CSS.
Wewnątrz elementu figure można dodawać dowolną liczbę obrazów lub innych elementów. Jednak wewnątrz elementu figure może być tylko jeden element figcaption. Ponownie tutaj przykład:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>To jest nasz nowy logo.</figcaption> </figure>
W ten sposób możecie umieścić więcej niż jeden obraz w elemencie figure.
Szczególnie w kontekście logicznej struktury stron internetowych lub treści istnieje w HTML5 wiele nowości. Te nowości poznacie oczywiście w trakcie tego cyklu bardzo szczegółowo.
