html5 - obrazki

Wstawianie grafik na stronę html

logo html5 zdziwiony wilk

<img>

Do wstawienia obrazka na stronę internetową służy znacznik <img>.

Nie trzeba go zamykać. Musi zawierać minimum te 2 atrybuty: src oraz alt.

Podstawowa konstrukcja wygląda następująco:

<img src="link do pliku graficznego" alt="nazwa grafiki">

Zobacz jak to działa

Tak naprawdę grafika nie jest umieszczona na Twojej stronie. Znacznik img tworzy na niej miejsce, w którym grafika ma być wyświetlona. Atrybut src zawiera informację o lokalizacji obrazka - stamtąd jest pobierany i wyświetlany na stronie.


Najczęściej używane atrybuty znacznika <img>

  • src
  • Musi wystąpić. Zawiera informację o lokalizacji pliku graficznego.

    Przykład: <img src="grafika/szkola.jpg">

  • alt
  • Musi wystąpić (choć znacznik <img> może zadziałać bez niego). Zawiera informację, jaka będzie wyświetlona w przypadku, gdy link do obrazka będzie nieprawidłowy.

    Atrybut alt jest także bardzo ważny dla czytników treści - używanych np. przez osoby niepełnosprawne. Taki czytnik przeczyta np. osobie niewidomej tekst zawarty w wartości atrybutu alt. Dzięki temu będzie ona mogła skorzystać ze zbudowanej przez Ciebie strony

    Przykład: <img src="grafika/szkola.jpg" alt="logo szkoły">

  • height
  • Za jego pomocą możemy dokładnie określić wysokość obrazka (w pikselach). (Lepiej jest używać atrybutu style)

    Przykład: <img src="grafika/szkola.jpg" alt="logo szkoły" height="50">

  • width
  • Za jego pomocą możemy dokładnie określić szerokość obrazka (w pikselach). (Lepiej jest używać atrybutu style)

    Przykład: <img src="grafika/szkola.jpg" alt="logo szkoły" height="50" width="50">


Wstawianie obrazów z różnych lokalizacji

Grafiki, jakie chcesz umieścić na swojej stronie, mogą być zapisane w folderze na dysku bądź serwerze - tam, gdzie Twoja strona, lub gdzieś na innej stronie internetowej. W zależności od tego, skąd pobierasz obrazek do wyświetlenia, inaczej opiszesz wartość atrybutu src.

  • grafiki z danego folderu
  • Podajemy (w wartości atrybutu src) ścieżkę dostępu - od miejsca, w którym jest umieszczony plik html

    Przykład: <img src="grafika/szkola.jpg" alt="logo szkoły">

  • grafiki z lokalizacji internetowej.
  • Podajemy (w wartości atrybutu src) dokładny adres internetowy (najlepiej skopiowany z przeglądarki) do lokalizacji, w którym jest umieszczony plik z grafiką.

    Przykład: <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="logo szkoły">

Sprawdź jak to działa

TUTAJ znajdziesz więcej informacji o podawaniu adresu względnego i bezwzględnego. Naprawdę warto kliknąć!

Powrót na górę