2

kurs

html

Lekcja 12: Obrazki

html

Trudno spotkać stronę, na której nie było by obrazków, grafik czy galerii zdjęć. Ten element to niezwykle istotna część strony. Znacznie podnosi atrakcyjność i formę przekazu.

Wstawiamy obrazek na stronę

<img src="ścieżka_do _obrazka" alt="Opis obrazka" title="Tytuł obrazka"/>

W powyższym przykładzie alt sprawi, że na stronie pojawi się opis w przypadku, gdyby obrazek nie został wyświetlony. Z kolei title wyświetli tytuł po najechaniu kursorem na obrazek. Należy pamiętać, że opis powinien być zgodny z obrazkiem.

<img src="../images/logo.png" alt="Logotyp; title="html/css" />
Przykład Logotyp

W przypadku jeśli obrazek jest zbyt duży, możemy zmniejszyć jego rozmiary.

<img src="../images/logo.png" width="100" height="25" />
Przykład

Odsyłacz obrazkowy

<a href="miejsce_w_sieci_do_ktorego_linkujemy"><img src="ścieżka_do _obrazka" /></a>

W poniższym przykładzie kliknięcie na obrazek przeniesie nas do strony głównej kursu.

Przykład

Wstawienie obrazka do tekstu

Dodanie obrazka w dowolnej części tekstu w zależności od tego, w którym miejscu chcemy, aby się pojawił obliguje do zastosowania opływania (float):

<img src="../images/logo.png" style="float: left; margin-right: 20px;" />
<p>To jest tekst, który będzie opływał obrazek z prawej strony.</p>
Przykład

To jest tekst, który będzie opływał obrazek z prawej strony.

comments powered by Disqus

Do góry