HTML
Czyli, jak ruda stronę www tworzyła?

HTML - Osadzanie grafiki

Współczesne strony internetowe z założenia wykorzystują w znacznym stopniu obraz jako środek oddziaływania. Wiele stron wręcz w całości składa się z różnego rodzaju obrazów. Dlatego osadzanie obrazów na stronie jest jednym z podstawowych działań webmastera. Odrębną kwestią jest właściwe ich rozmieszczenie na sronie. Dlatego też możemy umieszczanie grafiki na stronie WWW podzielić na trzy etapy.
- Opracowanie obrazów i ich rozmieszczenia przez grafika
- Osadzenie obrazów na stronie WWW.
- Rozmieszczenie grafik na stronie przy użyciu arkuszy stylów.
Część pierwsza to znaczy tworzenie grafiki oraz graficznego projektu strony wykracza poza ramy tego kursu, a zainteresowanych odsyłam do zajmujących się tym zagadnieniem publikacji.
Trzeci etap tworzenia strony WWW zostanie opisany w części opisującej stosowanie CSS'ów.
Tutaj zajmiemy się sposobami osadzania obrazów na stronie WWW.

Podstawowym znacznikiem odpowiedzialnym za omieszczanie na stronie obrazów jest znacznik ˂img/˃. Oczywiście aby można było przy pomocy tego znacznika umieścić grafikę na stronie konieczna jest sama grafika. Na stronach WWW możemy umieszczać obrazy w formatach:
- *.jpg/jpeg
- *.gif
- *.png
Znacznik ˂img/˃ jak każdy znacznik HTML posiada przypisaną do niego listę atrybutów. Przy czym zestawem atrybutów standardowych nie będziemy sie tu zajmować. Są one omówione w rozdziale "Atrybuty standardowe", oprócz nich znacznik ˂img/˃ posiada jeszcze inne atrybuty odpowiadające za jego szczególne własności, opis tych właśnie atrybutów znajduje się poniżej.

Sam obraz może być umieszczony w zasadzie w dowolnym miejscu, a za odnalezienie go w gąszczu plików odpowiada wymagany atrybut "src", w którym należy podać pełną nazwę pliku wraz z rozszerzeniem i ścieżką dostępu do pliku. Tak więc przykładowe polecenie umieszczające grafikę na naszej stronie będzie miało postać:
˂img scr="nasz_obraz.jpg"/˃ Takie polecenie osadzi na naszej stronie obraz o nazwie "nasz_obraz" i rozszerzeniu "jpg" umieszczony w tym samym katalogu co nasz dokument HTML w którym jest osadzany. Jeżeli obraz znajduje się w innym miejscu sieci to wraz z nazwą obrazu musimy podać ścieżkę dostępu względną lub bezwzględną. Wtedy nasze polecenie przybierze kształt:
˂img scr="./obrazy/nasz_obraz.jpg"/˃ - gdy obraz znajduje się w katalogu podrzędnym o nazwie "obrazy" (adres względny).
˂img scr="../moja_strona/nasz_obraz.jpg"/˃ - gdy obraz znajduje się w katalogu nadrzędnym o nazwie "moja_strona" (adres względny).
˂img scr="http://www.jakas_strona_internetowa/obrazy/nasz_obraz.jpg"/˃ - gdy obraz znajduje się w sieci na "jakiejś_stronie_internetowej" w katalogu obrazy (adres bezwzględny). Widzimy więc, że wartością (value) atrybutu "src" jest nazwa pliku wraz ze ścieżką dostępu.

Zakładam oczywiście, że są wszystkim, którzy biorą się za tworzenie jakiegokolwiek oprogramowania w tym także potencjalnym twórcom stron WWW są znane ogólne zasady podawania ścieżek dostępu. Chciałbym jednak zwrócić uwagę na pewien fakt. często będący przyczyną powstawania błędów. Otóż w zależności od użytego oprogramowania różnie mogą być interpretowane nazwy plików i katalogów. Serwery windowsowe nie rozróżniają bowiem wielkości liter zastosowanych w nazwach. Serwery unixowe wręcz odwrotnie. Może to doprowadzić do błędów. Jeżeli na przykład umieścimy dwa obrazy o nazwach odpowiednio:
- Obraz.png
- obraz.png
to serwer unixowy rozpozna te dwa pliki jako różne i będzie możliwe odwołanie się oddzielnie do każdego z nich. Jednak umieszczenie takich plików na serwerze windowsowym w  chwili odwołanie się do któregoś z nich doprowadzi do błędu. I odwrotnie jeżeli umieścimy obraz o nazwie "obraz.png" i spróbujemy się do niego odwołać używając nazwy "Obraz.png" to na serwerze windowsowym taka opcja zadziała, ale na unixowym otrzymamy informację o błędzie. Dlatego też sugeruję używanie nazw wszystkich elementów używanych na naszej stronie w jednorodnej postaci, złożonej z samych małych liter.

Kolejnym ważnym, ale już niewymaganym atrybutem jest atrybut "alt". Napisałem, że jest on niewymagany, ale dobry obyczaj nakazuje jednak jego używanie. Atrybut ten bowiem umieszcza na stronie alternatywną informację o zamieszczonym obrazie, wyświetlaną w momencie gdy z jakiś przyczyn nie można go wyświetlić, w tym także gdy nie można wyświetlić obrazu, który jest umieszczony na różnym od naszego a , aktualnie niedostępnym serwerze. Jest to również informacja dla użytkownika, który używa przeglądarki tekstowej lub z wyłączonym trybem graficznym. W tym kontekście nasze polecenie osadzenia na naszej stronie obrazu zyskuje postać:
˂img scr="./obrazy/nasz_obraz.jpg" alt="Szkoda że nie widzisz mojego obrazu"/˃
Wartością (value) atrybutu "src" jest więc dowolny ciąg znaków i  tylko od nas zależy co się w nim znajdzie.

Następne dwa ważne atrybuty to atrybuty "width" i atrybut "height". Odpowiadające za rozmiar osadzanej grafiki. Umieszczenie tych atrybutów powoduje przeskalowanie odpowiednich boków obrazka do zadanych wymiarów. Należy zwrócić uwagę, że po pierwsze zmieniając rozmiar prezentowanej grafiki musimy mieć na uwadze proporcje obrazka, gdyż atrybuty "width" i "height" skalują odpowiednie boki nie dbając przy tym o proporcje. Łatwo więc możemy doprowadzić do błędów geometrii obrazu.
Jeżeli chcemy uzyskać prawidłowe proporcje tzn. przeskalować obydwa boki w/g tego samego współczynnika proporcji to wystarczy, że podamy jeden z atrybutów, ten na którego wynikowym rozmiarze bardziej nam zależy. Wtedy drugi bok zostanie przeskalowany proporcjonalnie do tego określonego w użytym atrybucie. Wartością (value) atrybutów "width" i "height" jest odpowiedni rozmiar boku obrazka podany w pikselach. I ostatnia uwaga! Skalowanie obrazów przy użyciu atrybutów HTML, lub CSS'ów. obniża jakość prezentowanej grafiki. Dlatego jeżeli chcemy aby nasza strona opierała się na grafice wysokiej jakości, to lepiej jest w programie graficznym przygotować obrazy o z góry ustalonych wymiarach i takie umieszczać na stronie.

Wreszcie ostatnie dwa atrybuty:
- "ismap"
- "usemap"
Atrybut "ismap" definiuje współrzędne dodawane do adresu odnośnika, jeżeli element jest podlinkowany. Oto przykładowy kod:
˂a href="/moja_strona.php"˃ ˂img src="obrazek.png" alt="Obrazek którego nie widzisz jest odnośnikiem do strony moja_strona.php" ismap="ismap" /˃˂/a˃
Atrybut "ismap" nie nie musi mieć podanej wartości. Dlatego też prawidłowo będzie również działać następująca linia programu:
˂a href="/moja_strona.php"˃ ˂img src="obrazek.png" alt="Obrazek którego nie widzisz jest odnośnikiem do strony moja_strona.php" ismap /˃˂/a˃
Atrybut "usermap" umożliwia wykorzystanie osadzonej grafiki jako zbioru odnośników których kształt i wielkość są definiowane przy użyciu pary znaczników ˂map˃ ˂/map˃. Przykładowy kod wygląda następująco:
˂img src="Wybor.png" alt="To jest mapa odnośników - niestety wtrybie tekstowym mało atrakcyjna" usemap="#krzyz"/˃
˂map name="krzyz"˃
  ˂area href="www1/ms_01/index.html" shape="polygon" coords=" 93, 77, 195, 18, 293, 77, 293, 177, 195,
  235, 93, 177" alt="Przepisy"˃
  ˂area href="www1/ms_03/PR-wstep.html" shape="polygon" coords="343, 77, 445, 18, 543, 77, 543, 177, 445,
  235, 343, 177" alt="Tworzenie stron WWW"˃
  ˂area href="www1/ms_05/PO-wstep.html" shape="polygon" coords="593, 77, 695, 18, 793, 77, 793, 177, 695,
  235, 593, 177" alt="Porady IT"˃
  ˂area href="www1/ms_02/start.html" shape="polygon" coords=" 93, 327, 195, 268, 293, 327, 293, 427,
  195, 485, 93, 427" alt="Na wesoło"˃
  ˂area href="www1/ms_06/G-wstep.html" shape="polygon" coords="343, 327, 445, 268, 543, 327, 543, 427,
  445, 485, 343, 427" alt="Galerie"˃
  ˂area href="www1/szkola/SZ-wstep.html" shape="polygon" coords="593, 327, 695, 268, 793, 327, 793, 427,
  695, 485, 593, 427" alt="Szkoła"˃
˂/map˃

Powyższy kod jest fragmentem kodu strony startowej niniejszego portalu.

[CC] Jacek Wojciechowski

Osadzanie grafiki

Współczesne strony internetowe z założenia wykorzystują w znacznym stopniu obraz jako środek oddziaływania. Wiele stron wręcz w całości składa się z różnego rodzaju obrazów. Dlatego osadzanie obrazów na stronie jest jednym z podstawowych działań webmastera. Odrębną kwestią jest właściwe ich rozmieszczenie na sronie. Dlatego też możemy umieszczanie grafiki na stronie WWW podzielić na trzy etapy.
- Opracowanie obrazów i ich rozmieszczenia przez grafika
- Osadzenie obrazów na stronie WWW.
- Rozmieszczenie grafik na stronie przy użyciu arkuszy stylów CSS.
Część pierwsza to znaczy tworzenie grafiki oraz graficznego projektu strony wykracza poza ramy tego kursu, a zainteresowanych odsyłam do zajmujących się tym zagadnieniem publikacji. To jedna z przykładowych stron poświęcona tworzeniu layout'ów.
Trzeci etap tworzenia strony WWW zostanie opisany w części opisującej stosowanie CSS'ów.
Tutaj zajmiemy się sposobami osadzania obrazów na stronie WWW.

Podstawowym znacznikiem odpowiedzialnym za omieszczanie na stronie obrazów jest znacznik ˂img/˃. Oczywiście aby można było przy pomocy tego znacznika umieścić grafikę na stronie konieczna jest sama grafika. Na stronach WWW możemy umieszczać obrazy w formatach:
- *.jpg/jpeg
- *.gif
- *.png
Znacznik ˂img/˃ jak każdy znacznik HTML posiada przypisaną do niego listę atrybutów. Przy czym zestawem atrybutów standardowych nie będziemy sie tu zajmować. Są one omówione w rozdziale "Atrybuty standardowe", oprócz nich znacznik ˂img/˃ posiada jeszcze inne atrybuty odpowiadające za jego szczególne własności, opis tych właśnie atrybutów znajduje się poniżej.

Sam obraz może być umieszczony w zasadzie w dowolnym miejscu, a za odnalezienie go w gąszczu plików odpowiada wymagany atrybut "src", w którym należy podać pełną nazwę pliku wraz z rozszerzeniem i ścieżką dostępu do pliku. Tak więc przykładowe polecenie umieszczające grafikę na naszej stronie będzie miało postać:
˂img scr="nasz_obraz.jpg"/˃ Takie polecenie osadzi na naszej stronie obraz o nazwie "nasz_obraz" i rozszerzeniu "jpg" umieszczony w tym samym katalogu co nasz dokument HTML w którym jest osadzany. Jeżeli obraz znajduje się w innym miejscu sieci to wraz z nazwą obrazu musimy podać ścieżkę dostępu względną lub bezwzględną. Wtedy nasze polecenie przybierze kształt:
˂img scr="./obrazy/nasz_obraz.jpg"/˃ - gdy obraz znajduje się w katalogu podrzędnym o nazwie "obrazy" (adres względny).
˂img scr="../moja_strona/nasz_obraz.jpg"/˃ - gdy obraz znajduje się w katalogu nadrzędnym o nazwie "moja_strona" (adres względny).
˂img scr="http://www.jakas_strona_internetowa/obrazy/nasz_obraz.jpg"/˃ - gdy obraz znajduje się w sieci na "jakiejś_stronie_internetowej" w katalogu obrazy (adres bezwzględny). Widzimy więc, że wartością (value) atrybutu "src" jest nazwa pliku wraz ze ścieżką dostępu.

Zakładam oczywiście, że są wszystkim, którzy biorą się za tworzenie jakiegokolwiek oprogramowania w tym także potencjalnym twórcom stron WWW są znane ogólne zasady podawania ścieżek dostępu. Chciałbym jednak zwrócić uwagę na pewien fakt. często będący przyczyną powstawania błędów. Otóż w zależności od użytego oprogramowania różnie mogą być interpretowane nazwy plików i katalogów. Serwery windowsowe nie rozróżniają bowiem wielkości liter zastosowanych w nazwach. Serwery unixowe wręcz odwrotnie. Może to doprowadzić do błędów. Jeżeli na przykład umieścimy dwa obrazy o nazwach odpowiednio:
- Obraz.png
- obraz.png
to serwer unixowy rozpozna te dwa pliki jako różne i będzie możliwe odwołanie się oddzielnie do każdego z nich. Jednak umieszczenie takich plików na serwerze windowsowym w  chwili odwołanie się do któregoś z nich doprowadzi do błędu. I odwrotnie jeżeli umieścimy obraz o nazwie "obraz.png" i spróbujemy się do niego odwołać używając nazwy "Obraz.png" to na serwerze windowsowym taka opcja zadziała, ale na unixowym otrzymamy informację o błędzie. Dlatego też sugeruję używanie nazw wszystkich elementów używanych na naszej stronie w jednorodnej postaci, złożonej z samych małych liter.

Kolejnym ważnym, ale już niewymaganym atrybutem jest atrybut "alt". Napisałem, że jest on niewymagany, ale dobry obyczaj nakazuje jednak jego używanie. Atrybut ten bowiem umieszcza na stronie alternatywną informację o zamieszczonym obrazie, wyświetlaną w momencie gdy z jakiś przyczyn nie można go wyświetlić, w tym także gdy nie można wyświetlić obrazu, który jest umieszczony na różnym od naszego a , aktualnie niedostępnym serwerze. Jest to również informacja dla użytkownika, który używa przeglądarki tekstowej lub z wyłączonym trybem graficznym. W tym kontekście nasze polecenie osadzenia na naszej stronie obrazu zyskuje postać:
˂img scr="./obrazy/nasz_obraz.jpg" alt="Szkoda że nie widzisz mojego obrazu"/˃
Wartością (value) atrybutu "src" jest więc dowolny ciąg znaków i  tylko od nas zależy co się w nim znajdzie.

Następne dwa ważne atrybuty to atrybuty "width" i atrybut "height". Odpowiadające za rozmiar osadzanej grafiki. Umieszczenie tych atrybutów powoduje przeskalowanie odpowiednich boków obrazka do zadanych wymiarów. Należy zwrócić uwagę, że po pierwsze zmieniając rozmiar prezentowanej grafiki musimy mieć na uwadze proporcje obrazka, gdyż atrybuty "width" i "height" skalują odpowiednie boki nie dbając przy tym o proporcje. Łatwo więc możemy doprowadzić do błędów geometrii obrazu.
Jeżeli chcemy uzyskać prawidłowe proporcje tzn. przeskalować obydwa boki w/g tego samego współczynnika proporcji to wystarczy, że podamy jeden z atrybutów, ten na którego wynikowym rozmiarze bardziej nam zależy. Wtedy drugi bok zostanie przeskalowany proporcjonalnie do tego określonego w użytym atrybucie. Wartością (value) atrybutów "width" i "height" jest odpowiedni rozmiar boku obrazka podany w pikselach. I ostatnia uwaga! Skalowanie obrazów przy użyciu atrybutów HTML, lub CSS'ów. obniża jakość prezentowanej grafiki. Dlatego jeżeli chcemy aby nasza strona opierała się na grafice wysokiej jakości, to lepiej jest w programie graficznym przygotować obrazy o z góry ustalonych wymiarach i takie umieszczać na stronie.

Wreszcie ostatnie dwa atrybuty:
- "ismap"
- "usemap"
Atrybut "ismap" definiuje współrzędne dodawane do adresu odnośnika, jeżeli element jest podlinkowany. Oto przykładowy kod:
˂a href="/moja_strona.php"˃ ˂img src="obrazek.png" alt="Obrazek którego nie widzisz jest odnośnikiem do strony moja_strona.php" ismap="ismap" /˃˂/a˃
Atrybut "ismap" nie nie musi mieć podanej wartości. Dlatego też prawidłowo będzie również działać następująca linia programu:
˂a href="/moja_strona.php"˃ ˂img src="obrazek.png" alt="Obrazek którego nie widzisz jest odnośnikiem do strony moja_strona.php" ismap /˃˂/a˃
Atrybut "usermap" umożliwia wykorzystanie osadzonej grafiki jako zbioru odnośników których kształt i wielkość są definiowane przy użyciu pary znaczników ˂map˃ ˂/map˃. Przykładowy kod wygląda następująco:
˂img src="Wybor.png" alt="To jest mapa odnośników - niestety wtrybie tekstowym mało atrakcyjna" usemap="#krzyz"/˃
˂map name="krzyz"˃
  ˂area href="www1/ms_01/index.html" shape="polygon" coords=" 93, 77, 195, 18, 293, 77, 293, 177, 195,
  235, 93, 177" alt="Przepisy"˃
  ˂area href="www1/ms_03/PR-wstep.html" shape="polygon" coords="343, 77, 445, 18, 543, 77, 543, 177, 445,
  235, 343, 177" alt="Tworzenie stron WWW"˃
  ˂area href="www1/ms_05/PO-wstep.html" shape="polygon" coords="593, 77, 695, 18, 793, 77, 793, 177, 695,
  235, 593, 177" alt="Porady IT"˃
  ˂area href="www1/ms_02/start.html" shape="polygon" coords=" 93, 327, 195, 268, 293, 327, 293, 427,
  195, 485, 93, 427" alt="Na wesoło"˃
  ˂area href="www1/ms_06/G-wstep.html" shape="polygon" coords="343, 327, 445, 268, 543, 327, 543, 427, 445,
  485, 343, 427" alt="Galerie"˃
  ˂area href="www1/szkola/SZ-wstep.html" shape="polygon" coords="593, 327, 695, 268, 793, 327, 793, 427,
  695, 485, 593, 427" alt="Szkoła"˃
˂/map˃

Powyższy kod jest fragmentem kodu strony startowej niniejszego portalu.