HTML/Obrazy

Z Wikibooks, biblioteki wolnych podręczników.

[edytuj] Wstawianie obrazów

Obrazy wstawiamy przez polecenie:

<img src="nazwaobrazka.rozszerzenie">

Jednak HTML nakazuje zakończenie danego znacznika. Prawidłowo jest:

<img src="nazwaobrazka.rozszerzenie" />

Co dziwniejsze, poniższy wiersz także jest dozwolony, lecz nie jest zalecany:

<img src="nazwaobrazka.rozszerzenie"></img>

Kiedy w taki sposób zapiszemy kod, pamiętajmy o tym, by pomiędzy tymi znacznikami nic nie wpisywać.
Przypuśćmy, że mamy obraz o nazwie woda z rozszerzeniem jpg. Wtedy piszemy:

<img src="woda.jpg" />

!Uwaga! Obrazek musi zostać umieszczony w tym samym katalogu wraz ze stroną!

[edytuj] Komentarze do obrazu

Umiesz już wstawiać obrazki. Co się stanie, jeżeli jakaś osoba wyłączy wyświetlanie obrazów na stronie WWW(chociaż to bardzo mało prawdopodobne)? Co się stanie, jeżeli obraz nie zostanie wyświetlony? Właśnie wtedy, możemy wykorzystać komentarze. Komentarz jest to tekst, jaki zostanie wyświetlony po najechaniu kursorem na obraz. W takim razie jak go umieścić? Jest to oczywiście bardzo proste. Służy do tego opcja alt.

<img src="woda.jpg" alt="Ten obraz przedstawia wodę!" />

Efekt możemy zobaczyć, zatrzymując kursor na obrazie. Jednak nie należy w ten sposób tworzyć etykietek/komentarzy pojawiających się przy najechaniu myszką na obraz. Atrybut alt służy do ustalania tekstu wyświetlanego przy wyłączeniu wyświetlania obrazków. Oto poprawny przykład:

<img src="woda.jpg" alt="Ten obraz przedstawia wodę!" title="komentarz" />

[edytuj] Rozmiary

Obraz jest zbyt duży? Chcesz go zmniejszyć? Żaden problem. Służą do tego dwie proste instrukcje:
width - określa szerokość obrazu
height - określa wysokość obrazu
!UWAGA! Rozmiary podajemy w pikselach!
Przypuśćmy, że nasz obraz jest zbyt duży. Ma wymiary 700 pikseli szerokości i 500 pikseli wysokości. Chcemy, by miał 400 pikseli szerokości i 100 pikseli wysokości. Zatem:

<img src="woda.jpg" alt="Ten obraz przedstawia wodę!" width="400" height="100" />

[edytuj] Otwieranie obrazu w nowym oknie

Aby tego dokonać trzeba umieścić obraz w linku. Przypomnijmy, prototyp linku przedstawia się następująco:

<a href="adres">To jest link!</a>

Po kliknięciu na tekst, strona przenosi nas pod podany adres. A teraz zajmijmy się obrazkiem. Instrukcja powinna wyglądać tak:

<a href="woda.jpg><img src="woda.jpg" alt="Ten obraz przedstawia wodę!" 
width="400" height="100" /></a>

Po kliknięciu na obraz, zostaje on wyświetlony w nowym oknie. Ale można zauważyć niechciany efekt: niebieskie obramowanie. Aby je zlikwidować, trzeba dodać instrukcję border = 0. Tak więc całość będzie wyglądała tak:

<a href="woda.jpg><img src="woda.jpg" alt="Ten obraz przedstawia wodę!" 
width="400" height="100" border="0" /></a>