``
Znacznik służy do wyświetlania obrazków.
Sposób użycia
Po wpisaniu:
Otrzymamy mniej więcej taki wynik:
<img src="http://4programmers.net/bin/coyote.jpg" width="57" height="90" alt="coyote" />
<h3>Zamykanie tagu</h3>
W języku HTML tag `<img>` nie ma wcale zakończenia. W XHTML-u natomiast należy go zakończyć tak:
<code class="html4strict"><img src="obrazek.gif" alt="obrazek" />
Użycie obrazka jako tła
Tag `` nie najlepiej nadaje się do ustalania tła obrazkowego dla innych elementów strony, w tym celu lepiej zastosować style [[CSS]] - [[CSS/background-image]] lub [[CSS/background]], np:
</p>
<h2>Atrybuty</h2>
* src (wymagany) - URI obrazka
* [[(X)HTML/Atrybuty/alt]] (wymagany) - tekst alternatywny; pojawia się, jeśli obrazek nie mógł być wyświetlony. <strong>Nie jest</strong> to tekst, który ma się pojawić w dymku po zatrzymaniu kursora nad obrazkiem.
* [[(X)HTML/Atrybuty/Id]] - identyfikator
* [[(X)HTML/Atrybuty/Class]] - klasa CSS
* [[(X)HTML/Atrybuty/Style]] - przypisany styl CSS
* [[(X)HTML/Atrybuty/longdesc]] - URI dłuższego opisu obrazka
* name (pozostawiony dla kompatybilności wstecz) - określa identyfikator obrazka w dokumencie
* [[(X)HTML/Atrybuty/title]]
* [[(X)HTML/Atrybuty/lang]]
* [[(X)HTML/Atrybuty/width]]
* [[(X)HTML/Atrybuty/height]]
* [[(X)HTML/Atrybuty/ismap]] (pusty)
* [[(X)HTML/Atrybuty/usemap]] - URI [[(X)HTML/map|mapy]]
* xml:lang (XHTML)
<h3>width i height</h3>
Atrybuty width i height znaczników [[(X)HTML/img]] oraz [[(X)HTML/object]] nie są [[(X)HTML/Deprecated|przestarzałe]] - przeciwnie, ich stosowanie jest zalecane. Niektórzy mogą tym być zdziwieni - przecież to atrybuty wizualne, a miało być tak łebdwazerowo i semantycznie. Otóż atrybuty te zostawiono po to, by przeglądarki mogły zarezerwować miejsce na obrazki zanim się załadują. Brak tych atrybutów może być niekiedy dość irytujący.
Zobacz: http://riddle.jogger.pl/2006/04/15/wymiary-dla-obrazkow-podane-w-kodzie/
<h3>[[(X)HTML/Atrybuty/ismap]]</h3>
Standard opisuje ten atrybut następująco:
> Server-side image maps may be interesting in cases where the image map is too complicated for a client-side image map.
>
> It is only possible to define a server-side image map for the IMG and INPUT elements. In the case of IMG, the IMG must be inside an A element and the boolean attribute ismap ([CI]) must be set. In the case of INPUT, the INPUT must be of type "image".
>
> When the user activates the link by clicking on the image, the screen coordinates are sent directly to the server where the document resides. Screen coordinates are expressed as screen pixel values relative to the image. [...]
> [...]
>
> The location clicked is passed to the server as follows. The user agent derives a new URI from the URI specified by the href attribute of the A element, by appending `?' followed by the x and y coordinates, separated by a comma. The link is then followed using the new URI. [...]
>
> User agents that do not offer the user a means to select specific coordinates (e.g., non-graphical user agents that rely on keyboard input, speech-based user agents, etc.) should send the coordinates "0,0" to the server when the link is activated.
<<a href="http://www.w3.org/TR/html401/struct/objects.html#h-13.6.2">http://www.w3.org/TR/html401/struct/objects.html#h-13.6.2</a>>
Oznacza to mniej więcej tyle, że jeśli znacznik img z tym arybutem znajduje się wewnątrz [[(X)HTML/a|łącza]], oraz gdy użytkownik kliknie na obrazek opisany tym znacznikiem, do adresu URI łącza dopisywany jest ciąg składający się ze znaku zapytania i współrzędnych kursora w pikselach rozdzielonych przecinkiem. Niewizualne przeglądarki powinny dopisać ciąg „?0,0”.
<h2>Zdarzenia</h2>
* [[(X)HTML/Zdarzenia/onclick]]
* [[(X)HTML/Zdarzenia/ondblclick]]
* [[(X)HTML/Zdarzenia/onmousedown]]
* [[(X)HTML/Zdarzenia/onmouseup]]
* [[(X)HTML/Zdarzenia/onmouseover]]
* [[(X)HTML/Zdarzenia/onmousemove]]
* [[(X)HTML/Zdarzenia/onmouseout]]
* [[(X)HTML/Zdarzenia/onkeypress]]
* [[(X)HTML/Zdarzenia/onkeydown]]
* [[(X)HTML/Zdarzenia/onkeyup]]
Poprawiłem...
Ale wiesz co Ktoś.. teraz zrobie taka tabelke jak na w3scools jakie tagi sa w danej wersji języka (html, xhtml strict, translational, frameset) to powinno ułatwić troche prace nad tym działem :)
Do wstawiania atrybutów i zdarzeń stosuj szablony: Template:Atrybuty_dla_CSS (Id, Class, Style) i Template:Zdarzenia_HTML
Atrybuty i zdarzenia powinny być w kategoriach (X)HTML/Atrybuty i (X)HTML/Zdarzenia
Ale miło, że ktoś oprócz mnie chce coś pisać w dziale (X)HTML :)