Lekcja 38

Temat:Wstawianie grafiki HTML.

Wstawianie grafik na stronę html

 

<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ąć!