| img | |
Wstawienie grafiki na stronę. Grafika wstawiana na stronę musi być zapisana osobno, nie jest włączana w html. Wyjątkiem jest tutaj plik Flasha (SWF), który może mieścić wszystko prawie w jednym dokumencie: teksty, rysunki, muzykę, obsługę myszy, przyciski, gry i wiele innych. Zazwyczaj jednak rozdziela się te rzeczy i zapisuje osobno.
Mamy więc już przygotowane grafiki w plikach gif, jpg, png, swf, zapisane np. w katalogu obrazki. Wystarczy teraz zapisać w pliku html informacje, jakie zdjęcie ma być wstawione, w którym miejscu, czy ma posiadać kontur, jakie ma wymiary itd. A więc do dzieła!
W najprostszej postaci wygląda to następująco:
<img src="img/plik.gif" border=0>
Poszczególne elementy języka html oznaczają:
<img>
wstaw obrazek, inaczej mówiąc: "tutaj będzie obrazek" (img to skrót z j. angielskiego od Image-obraz)
src="img/plik.gif"
SRC, skrót od słowa w j. angielskim (Source - źródło), informacja o położeniu grafiki na dysku, może być też zapisane w pełnej postaci np. tak:
<img src="http:\\www.ti.osno.com.pl/img/plik.gif">
border=0
(Border-obrys) grubość ramki wokół wyświetlanej grafiki, tutaj bez ramki, ale może być też z ramką np. tak:
border=2 (wstawia ramkę o grubości 2 pikseli)
Najlepiej jest jeszcze podawać rozmiary obrazka, jak poniżej. Jeżeli podamy rozmiary obrazka, to wyszukiwarka zarezerwuje miejsce na obrazek, tekst podczas wczytywania nie rozjeżdża się i internauta może już naszą stronę czytać, nawet jeżeli cała strona się jeszcze nie załadowała.
<src="img/rysunek.gif" height=129 width=129 border=2>
podając wymiary obrazka:
height=129 (wysokość=129)
i width=129 (szerokość=129)
Trzeba uważać jak się stawia rozmiar rysunku, czy podajemy poprawny rozmiar rysunku. Może się okazać, że przy bardzo małym błędzie, wynik wyświetlania będzie fatalny jak w przykładzie poniżej. Kropki wyglądaja jakby były źle wygładzone.
|
| Wyrównanie | |
Jak już wiemy, można wyrównywać wstawiany obrazek do lewej, do prawej i do środka przy pomocy poznanego już parametru align (zobacz tabele).
align=left do lewej
align=center wyśrodkowanie
align=right do prawej
UWAGA
Rysunki formatowane przy pomocy parametru align "pływają" w tekście!
Przykład 1.
Wstawiamy obrazek i wyrównujemy go do prawej. Dodatkowo zostały użyte parametry vspace=15 hspace=10 określające wolną przestrzeń wokół obrazka po 15 pikseli z góry i z dołu i 10 pikseli z prawej i z lewej (Space-przestrzeń, H jak horyzontalnie, czyli poziomo, V jak wertykalnie, czyli pionowo). Zachęta do grania w kości jest tylko wypełniaczem ;-). Gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi dziadowie, gramy w kości, jak grali nasi dziadowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie, gramy w kości, jak grali nasi przodkowie.
Zapis w całości wygląda następująco:
<img src="img/rysunek.gif" border=2 height=129 width=129 align="right" vspace=15 hspace=10>
Jeżeli chcemy złamać tekst i wstawić obrazek bez tekstu wokoło, wykorzystajmy znacznik końca wiersza <br> z parametrem clear np. pisząc <br clear="all"> już po obrazku.
|
| Alt | |
Alt to alternatywny napis dla tych, którzy nie przeglądają rysunków, bo szukają wyłącznie tekstów; również dla osób niewidzących, a serfujących po internecie przy użyciu programów czytających z ekranu. Warto więc dla nich wstawiać ten parametr.
Napis pojawia się w miejscu rysunku zanim rysunek się załaduje ze strony, a po załadowaniu rysunku napis jest dostępny po ustawieniu kursora nad rysunkiem. Sprawdź to.
Przykład
<img src="fotelwzor25.jpg" alt="Fotel bujany bukowy">
|
| BACKGROUND | |
Ustawmy tło strony albo tło tabeli przy użyciu parametru background="img/tlo.gif", np.:
<body background="img/tlo.gif"> ustawia rysunek jako tło strony.
<table background="img/tlo.gif"> ustawia rysunek jako tło tabeli.
|
|
|
