Wpisy otagowane ‘img’

Wstawianie grafiki na stronę HTML

sobota, 15 Marzec 2008

Aby wstawić grafikę na stronę HTML najprościej jest użyć znacznika <img>:

<img src="obrazek.jpg" width="400" height="200" alt="Mój obrazek" title="Mój obrazek">

Znacznik <img> posiada kilka atrybutów  które należy podać:

  • src – wskazuje on adres obrazka do wstawienia na stronę WWW;
  • width – wysokość obrazka w pikselach;  ten parametr jest opcjonalny;
  • height – szerokość obrazka w pikselach;  ten parametr jest opcjonalny;
  • alt i title – tekst alternatywny, który pojawi się po najechaniu myszką na obrazek.

Atrybut alt jest zalecany przez standard, ale nie powoduje wyświetlenia tekstu po najechaniu myszką na obrazek w przeglądarce Firefox, i dlatego trzeba dodać jeszcze atrybut title aby to działało wszędzie.

Atrybuty width i height są co prawda opcjonalne, ale polecam je jednak podać. Dzięki temu przeglądarka będzie wiedzieć ile miejsca na stronie zajmie obrazek po wczytani, i dzięki temu zarezerwuje odpowiednio dużo miejsca na niego. Dzięki temu strona będzie się wczytywać bez charakterystycznego „skakania” treści, co się dzieje gdy nie poda się rozmiarów obrazka.

Jak wstawić grafikę w CSS

sobota, 15 Marzec 2008

Wstawianie grafiki w CSS polega na umieszczeniu jej jako tła wybranego elementu. Robi się to następująco za pomocą komendy background-image:

div
{
	background-image: url(obrazek.jpg)
}

Adres obrazka który jest podawany wewnątrz nawiasów po słowie kluczowym url jest podawany tak jak zwykle, czyli jest zwykłym adresem URL. W szczególności może on też prowadzić do innego serwera. Pamiętaj jednak że linkowanie obrazków z innych serwisów bez zgody ich właścicieli jest źle widziane. Możesz np. dowiedzieć się od kogoś odwiedzającego Twoją stronę że zamiast obrazka który tam wstawiłeś wyświetla się coś innego, coś czego sam osobiście byś tam nigdy nie wstawił.