Grafika#

Wyświetlanie blokowe#

Zdjęcia wstawiane za pomocą elementu img zaliczane są do elementów liniowych, tzn. domyślnie wyświetlane są w tej samej linii co pozostałe elementy liniowe. Osadzenie kilku zdjęć obok siebie zaowocuje wyświetleniem ich w jednym wierszu:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<img src="../../pliki/html/grafika/wyswietlanieblokowe/nasolituratus1.jpg" alt="Naso Lituratus 1" width="150" height="150" />
<img src="../../pliki/html/grafika/wyswietlanieblokowe/nasolituratus2.jpg" alt="Naso Lituratus 2" width="150" height="150" />
<img src="../../pliki/html/grafika/wyswietlanieblokowe/nasolituratus3.jpg" alt="Naso Lituratus 3" width="150" height="150" />
<img src="../../pliki/html/grafika/wyswietlanieblokowe/nasolituratus4.jpg" alt="Naso Lituratus 4" width="150" height="150" />
<em>Dowolny tekst.</em>

Efekt:

Naso Lituratus 1 Naso Lituratus 2 Naso Lituratus 3 Naso Lituratus 4 Dowolny tekst.

Oczywiście istnieją sposoby, pozwalające traktować zdjęcia jak elementy blokowe. Najprostszym z nich jest umieszczenie elementu img w innym elemencie blokowym, np. div. Blok grupujący możemy wówczas dowolnie pozycjonować (z całą jego zawartością). Bardzo często technika ta stosowana jest do wstawiania zdjęć razem z podpisami:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<div style="text-align: center;">
	<img src="../../pliki/html/grafika/wyswietlanieblokowe/nasolituratus5.jpg" alt="Naso Lituratus 5" width="250" height="167" />
	<p>Rys.1 Zdjęcie przedstawia Naso Lituratus</p>
</div>

Efekt:

Naso Lituratus 5

Rys.1 Zdjęcie przedstawia Naso Lituratus

Można także nadać grafice blokowy charakter, jawnie zmieniając domyślny sposób jej wyświetlania, korzystając z CSS (display:block), przykładowo:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<img src="../../pliki/html/grafika/wyswietlanieblokowe/nasolituratus6.jpg" alt="Naso Lituratus 6" width="150" height="150" />
<em>Dowolny tekst.</em>
<img src="../../pliki/html/grafika/wyswietlanieblokowe/nasolituratus7.jpg" alt="Naso Lituratus 7" style="display: block;" width="150" height="150" />

Efekt:

Naso Lituratus 6 Dowolny tekst. Naso Lituratus 7
Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Grafika (H1) Wyświetlanie blokowe (H2)