Wstawianie obrazka

1. Obrazek

   <img src="ścieżka dostępu" alt="Tekst alternatywny" />

   
   

   gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek. Natomiast w miejsce "Tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony (np. jeśli użytkownik wyłączy wyświetlanie grafiki w swojej przeglądarce internetowej).

   W nazwach plików zaleca się nie używać:
   • wielkich liter
   • znaków, np.: \ / : * ? " < > |
   • spacji (jeśli musisz, w zamian używaj podkreślnika "_")
   • polskich liter (ą, ć, ę, ł, ń... itd.)


2. O określonych rozmiarach

   <img src="ścieżka dostępu" alt="Tekst alternatywny" width="x" height="y" />

   
   
   lub
   
   

   <img src="ścieżka dostępu" alt="Tekst alternatywny" width="x%" height="y%" />

   
   
   

   gdzie jako "x" oraz "y" należy wpisać odpowiednio: długość i wysokość obrazka w pikselach.
   Natomiast jako "x%" oraz "y%" należy wpisać odpowiednio: długość i wysokość obrazka w procentach ekranu.
   
   Podawanie rozmiarów obrazków może być przydatne conajmniej z kilku powodów. Jeśli obrazek nie zostanie wczytany, symbol który zajmie jego miejsce będzie miał inne wymiary i może tym samym może zmienić ułożenie innych elementów na stronie. Ponadto, jeśli nie wstawimy rozmiarów grafik na stronie, to podczas wczytywania cała treść będzie się zmieniać położenie. Jeżeli komuś to szczególnie przeszkadza, powinien zawsze określać te atrybuty - to bardzo dobry nawyk. Oczywiście aby obraz nie był zniekształcony, należy podać jego rozmiary w pikselach (można je sprawdzić w dowolnym programie graficznym).

   
   

   Przykład

   To jest obrazek o wymiarach 200 pikseli na 100 pikseli (width="200" height="100").
   
   
   
   
3. Obrazek z obramowaniem

   <img src="ścieżka dostępu" alt="Tekst alternatywny" border="n" />

   
   
   gdzie border="n" oznacza grubość ramki w pikselach

   Przykład

   To jest obrazek z ramką o grubości 5 pikseli (border="5").
   
   
   
   
4. O określonym ustawieniu względem tekstu

   <img src="ścieżka dostępu" alt="Tekst alternatywny" align="rodzaj" />

   
   
   

   gdzie jako "rodzaj" podajemy

• left - obrazek po lewej stronie względem tekstu
• right - obrazek po prawej stronie względem tekstu
• top - tekst na górze obrazka
• middle - tekst ustawiony na średniej wysokości względem obrazka
• bottom - tekst ustawiony na dole obrazka (domyślnie)

Przykład

align="left" - gdzie obrazek powinien być po lewej stronie względem otaczającego go tekstu

tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst,



Przykład

align="right" - gdzie obrazek powinien być po prawej stronie względem otaczającego go tekstu

tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst, tu jest jakis tekst,



Przykład

align="top" - gdzie tekst powinien być na górze obrazka





Przykład

align="top" - gdzie tekst powinien być na środku obrazka





Przykład

align="top" - gdzie tekst powinien być na dole obrazka


5. O określonej odległości od tekstu:

   <img src="ścieżka dostępu" alt="Tekst alternatywny" vspace="x" hspace="y" />

   
   
   gdzie "y" - odległość pozioma w pikselach, a "x" - odległość pionowa (również w pikselach).
   

   Przykład

   Gdzie odległości od obrazka to 120 pikseli w poziomie.
   
   

   Przykład

   Gdzie odległości od obrazka to 120 pikseli w pionie.