ZASYSACZ: Wstawianie grafiki

Grafika
jest bardzo ważną częścią niejednej strony WWW. Jak to ktoś kiedyś powiedział, "Jeden obraz wart jest tysiąca słów". Jest to prawda - np. dane które zostaną przedstawione w postaci wykresu w większości przypadków bardzo trudno jest w sposób dokładny opisać słownie tak, aby oddać wszystkie informacje które można odczytać z wykresu. Grafika pełni także bardzo ważną rolę dekoracyjną na stronach WWW, począwszy od bycia tłem strony, poprzez różne ozdobniki, jak fantazyjne linie czy "kulki" jako punktu w różnych listach po wstawione fotografie. Obrazki mogą być też odnośnikami do innych stron - to zagadnienie jest opisane dokładnie w lekcji Linki (odsyłacze).
Wstawianie obrazków - podstawy

Do wstawiania obrazków służy znacznik <img>. Znacznik ten nie jest zamykany w HTML, dlatego jeżeli tworzysz swoją stronę WWW w XHTML, pamiętaj aby go zamknąć.
Lokalizację obrazka podaje się za pomocą parametru src. Oto jak się wstawia obrazek na stronę (pierwszy przykład w HTML, drugi w XHTML):
<img src="odie.gif" alt="Piesek">

<img src="odie.gif" alt="Piesek" />

Podany parametr src jest wymagany i zawiera adres pliku z obrazkiem. W powyższym przykładzie pojawił się też parametr alt zawierający opis obrazka - on też jest wymagany. Więcej na jego temat będzie dalej.
Plik z obrazkiem powinien być w formacie GIF, JPEG lub PNG - te formaty plików są powszechnie obsługiwane w przeglądarkach internetowych.

Adres pliku z obrazkiem można podać na kilka sposobów:
jeżeli plik jest w tym samym katalogu co strona, to najprościej podać samą nazwę pliku, czyli plik.gif. Przypominam tu też o tym, iż w Internecie zazwyczaj ważna jest wielkość znaków, tak więc najlepiej wszystkie nazwy plików podawać małymi literami, i stosować wyłącznie znaki alfabetu łacińskiego (czyli bez polskich "krzaczków"), cyfry, minus i znak podkreślenia "_"

jeżeli plik jest w katalogu będącym podkatalogiem katalogu gdzie jest strona, to podać należy także katalog(i) które należy "przejść" aby dotrzeć do pliku, np. obrazki/kasia/plik.gif. Tutaj od razu umieszczę uwagę - w Internecie do rozdzielania nazw katalogów w ścieżce dostępu używa się wyłącznie znaku slash "/". Nawet jeżeli używasz systemu w którym do tego celu używa się innego znaku (np. backslash "\" w DOS i Windows), to używaj slash, gdyż przeglądarka Internetowa sobie z tym poradzi zamieniając podczas wyświetlania strony ten znak na taki jaki jest używany w danym systemie, a Ty za to nie będziesz musiał(a) zamieniać tych znaków w momencie gdy stronę będziesz umieszczał(a) na serwerze w Internecie;

jeżeli plik z grafiką znajduje się w katalogu będącym "wyżej" w strukturze katalogów niż strona na której on ma być użyty, to do do tego celu stosuje się symbol .. (dwie kropki) dla oznaczenia każdego katalogu będącego "powyżej" przez który się "przechodzi", np. ../../plik.gif, lub ../obrazki/plik.gif jeżeli na końcu potrzebne jest jeszcze wejście do jakiegoś podkatalogu;

powyższe przykłady podawały lokalizację pliku jako względną (i taka jest zalecana - mniej jest problemów gdy stronę wraz z powiązanymi z nią plikami trzeba przenieść do innego katalogu). Niekiedy jednak konieczne może być podanie pełnej ścieżki dostępu do pliku względem katalogu głównego serwera (tzw. ścieżka bezwzględna na serwerze). Ścieżkę taką należy rozpocząć od znaku "/", i następnie podać wszystkie katalogi które należy "przejść" aby dotrzeć do pliku, np. /pliki/grafika/plik.gif. Uwaga: jeżeli posiadasz konto na serwerze, gdzie adresem strony głównej Twojego serwisu jest np. www.serwer.pl/~tomek/, to na początku ścieżki musisz umieścić /~tomek/, np. /~tomek/pliki/grafika/plik.gif;

adres można w końcu podać także jako bezwzględny w Internecie, podając przed ścieżką także adres serwera poprzedzony oznaczeniem protokołu (zwykle http://), np. http://www.serwer.com.pl/grafika/plik.gif. Tu od razu też uprzedzę, że jeżeli w ten sposób chcesz wykorzystać obrazek znajdujący się w serwisie którego nie jesteś właścicielem, powinieneś(aś) poprosić najpierw o zgodę właściciela tego serwisu, gdyż w innym przypadku możesz mieć problemy gdyż naruszysz prawa autorskie, lub narazisz właściciela serwisu na dodatkowe koszta, gdy posiadane przez niego konto na serwerze płaci w zależności od ilości przesłanych danych (czyli w zależności od tego ile danych odwiedzający ściągną do siebie).

Parametry dla wstawionego obrazka

Dla obrazka wstawionego na stronę WWW można zdefiniować wiele parametrów:
szerokość - za pomocą parametru width, i wysokość - za pomocą parametru height:

<img src="odie.gif" width="72" height="84" alt="Piesek">

Można podać tylko jeden parametr, ale nie jest to zalecane - gdy podana jest zarówno wysokość, jak i szerokość, to wtedy podczas wczytywania strony przeglądarka może od razu zarezerwować odpowiednią ilość miejsca na wyświetlenie obrazka. Jeżeli tego się nie zrobi, to w miarę jak kolejne obrazki się będą wczytywać, przeglądarka będzie zmuszona do zmiany pozycji innych elementów strony w zależności od rozmiarów obrazka, co powoduje iż niemożliwe staje się przeglądanie strony w momencie gdy ona się wczytuje, gdyż co chwilę tekst się przesuwa w inne miejsce.

Za pomocą podanych parametrów można także przeskalować obrazek, podając nowy rozmiar w pikselach lub w procentach szerokości ekranu (lub elementu blokowego w którym obrazek się znajduje). Jeżeli poda się tylko jeden rozmiar, to przeglądarka dobierze drugi tak aby zachować proporcje obrazka:

<img src="odie.gif" width="50%" alt="Piesek"> <img src="odie.gif" height="168" alt="Piesek"> <img src="odie.gif" width="144" alt="Piesek">

Podając obydwa parametry, można te proporcje zniekształcić:

<img src="odie.gif" width="200" height="50" alt="Piesek" /> <img src="odie.gif" width="50" height="200" alt="Piesek" />

szerokość ramki otaczającej obrazek - za pomocą parametru border. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS::

<img src="odie.gif" width="72" height="84" alt="Piesek" border="5" />

<img src="odie.gif" width="72" height="84" alt="Piesek" style="border-width: 5px; border-style: solid" />

alternatywny tekst dla obrazka, czyli tekst wyświetlany podczas gdy obrazek się wczytuje. Ten tekst jest też wyświetlany przez niektóre przeglądarki w momencie gdy kursor myszki zatrzyma się na dłużej nad obrazkiem. Jest też on wyświetlany przez przeglądarki tekstowe oraz indeksowany przez wyszukiwarki internetowe. Do ustawienia tekstu alternatywnego służy parametr alt:

<img src="odie.gif" width="72" height="84" alt="To jest opis tego obrazka">

Aby ten tekst pojawiał się po najechaniu myszką na obrazek we wszystkich przeglądarkach, należy dodatkowo dodać parametr title z tym samym tekstem:

<img src="odie.gif" width="72" height="84" alt="Opis tego obrazka" title="Opis tego obrazka">

Parametr ten jest wymagany. Co prawda przeglądarki poradzą sobie jeżeli go nie będzie, ale polecam go podać. Przyda się on nie tylko osobom korzystającym z przeglądarek tekstowych lub wyłączającym wyświetlanie grafiki aby przyśpieszyć wyświetlanie się strony, ale także wyszukiwarkom internetowym które jak na razie nie potrafią jeszcze analizować treści obrazków. Także w przypadku gdy obrazki nie wczytają się np. z uwagi na problemy z połączeniem, ten opis będzie bardzo pomocny dla osoby oglądającej stronę;

odstęp od tekstu w poziomie - służy do tego parametr hspace. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS::

obrazek odsunięty od tekstu <img src="odie.gif" width="72" height="84" alt="piesek" hspace="30"> o 30 pikseli w poziomie

obrazek odsunięty od tekstu <img src="odie.gif" width="72" height="84" alt="piesek" style="margin-left: 30px; margin-right: 30px"> o 30 pikseli w poziomie
obrazek odsunięty od tekstu

o 30 pikseli w poziomie

odstęp od tekstu w pionie - do tego służy parametr vspace. Ten atrybut też nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:

obrazek odsunięty od tekstu <img src="odie.gif" width="72" height="84" alt="piesek" vspace="30"> o 30 pikseli w pionie

obrazek odsunięty od tekstu <img src="odie.gif" width="72" height="84" alt="piesek" style="margin-top: 30px; margin-bottom: 30px"> o 30 pikseli w pionie
obrazek odsunięty od tekstu

o 30 pikseli w pionie

położenie obrazka względem oblewającego go tekstu - służy do tego parametr align. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenia kaskadowych arkuszy stylów CSS.

Atrybut ten może przyjmować następujące wartości:

left - obrazek po lewej stronie, wiele wierszy tekstu obok niego

<img src="dog.gif" width="35" height="35" alt="piesek" align="left"> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
<img src="dog.gif" width="35" height="35" alt="piesek" style="float: left"> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

right - obrazek po lewej stronie, wiele wierszy tekstu obok niego

<img src="dog.gif" width="35" height="35" alt="piesek" align="right"> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
<img src="dog.gif" width="35" height="35" alt="piesek" style="float: right"> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

top - obrazek po lewej stronie, pojedynczy wiersz tekstu wyrównany do góry obrazka, pozostałe wiersze pod obrazkiem

<img src="dog.gif" width="35" height="35" alt="piesek" align="top"> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
<img src="dog.gif" width="35" height="35" alt="piesek" style="vertical-align: top"> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

middle - obrazek po lewej stronie, pojedynczy wiersz tekstu wyrównany do środka obrazka, pozostałe wiersze pod obrazkiem

<img src="dog.gif" width="35" height="35" alt="piesek" align="middle"> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
<img src="dog.gif" width="35" height="35" alt="piesek" style="vertical-align: middle"> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

bottom - obrazek po lewej stronie, pojedynczy wiersz tekstu wyrównany do dołu obrazka, pozostałe wiersze pod obrazkiem

<img src="dog.gif" width="35" height="35" alt="piesek" align="bottom"> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
<img src="dog.gif" width="35" height="35" alt="piesek" style="vertical-align: baseline"> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

Tutaj warto także wspomnieć o parametrze clear znacznika  , którego zastosowanie pozwana na "przerzucenie" tekstu w odpowiednim momencie pod obrazek. Atrybut ten też nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS.
Atrybut ten może przyjmować następujące wartości:
none (wartość domyślna) - tekst po przełamaniu jest kontynuowany obok obrazka (a dokładniej obiektu - można bowiem podobnie "oblewać" tekstem tabele)

<img src="dog.gif" width="35" height="35" alt="piesek" align="left"> tekst tekst tekst tekst tekst tekst
<img src="dog.gif" width="35" height="35" alt="piesek" style="float: left"> tekst tekst tekst tekst tekst tekst

tekst tekst
tekst tekst
tekst tekst

left - tekst po przełamaniu jest kontynuowany poniżej dolnej krawędzi pierwszego od lewej obiektu

right - kontynuacja jest poniżej krawędzi pierwszego od prawej obiektu

all - tekst jest kontynuowany poniżej dolnej krawędzi wszystkich obiektów w danej linii

<img src="dog.gif" width="35" height="35" alt="piesek" align="left"> tekst tekst tekst tekst
<img src="dog.gif" width="35" height="35" alt="piesek" style="float: left"> tekst tekst tekst tekst

tekst tekst
tekst tekst

Za pomocą znacznika <img> można na stronę wstawić także animację zapisaną jako plik w formacie GIF - format ten ma takie możliwości. Może to wyglądać następująco:
<img src="sheepcom.gif" width="120" height="120" alt="owieczka">

Inną kwestią związaną z wstawianiem grafiki jest zmiana tła strony. Można to wykonać na dwa sposoby:
ustawić kolor tła strony za pomocą parametru bgcolor znacznika <body>, jako jego wartość podając nazwę lub kod szesnastkowy koloru. Parametr ten jest nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:

<body bgcolor="green">

<body style="background-color: green">

Przykładową stronę na której znajduje się powyższy kod zobaczysz klikając tutaj.

wstawić plik graficzny jako tło - do tego celu można wykorzystać parametr background znacznika <body>. Jako parametr podaje się położenie pliku którego chcemy użyć jako tło. Tutaj uwaga: pliki gif można używać, jednakże w przypadku gdy zawiera on animację, wyświetlana będzie jedynie pierwsza klatka. W przypadku gdy wskazany obrazek będzie miał mniejszy rozmiar niż aktualny rozmiar okna przeglądarki, przeglądarka wyświetli go tyle razy obok siebie aby wypełnić cały obszar okna przeglądarki - z tego powodu należy zadbać aby grafika używana jako tło została odpowiednio przygotowana, aby miejsca gdzie będą stykać się brzegi obrazków pozostały niewidoczne.

Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS. Przykład jak to zrobić znajdziesz poniżej.

Przy używaniu tego znacznika warto także ustawić kolor tła za pomocą parametru bgcolor (lub polecenia CSS background-color) na kolor zbliżony do koloru obrazka - dzięki temu osoba odwiedzająca stronę będzie mogła się zapoznawać z jej treścią w momencie gdy tło nie zostało wczytane z uwagi np. na powolność łącza lub wyłączenie grafiki. Nieustawienie tego parametru może spowodować iż strona będzie w takim przypadku nieczytelna, gdyż np. ustawiony zostanie biały kolor znaków, a grafika będąca tłem będzie czarna , to wtedy tekst nie będzie widoczny gdy tło graficzne nie będzie wyświetlane, gdyż domyślnym kolor tła jest kolor biały.

<body bgcolor="#BDB5AD" background="tlo.gif">

<body style="background-color: #BDB5AD; background: url(tlo.gif)">

Przykład strony zawierającej powyższy kod zobaczysz klikając tutaj.

ZASYSACZ

DODOX

wtorek, 19 kwietnia 2011

Wstawianie grafiki - HTML kody

Grafika

Wstawianie obrazków - podstawy

Parametry dla wstawionego obrazka

Brak komentarzy:

Prześlij komentarz