Gazeta Internetowa

HTML - cz. 5. -Grafika

Przechodzimy powoli do części bardziej użytkowej. Teraz będzie grafika. Umieścić można ją na stronie HTML na dwa sposoby
  • jako tło strony HTML - służy do tego znacznik <body..>
  • jako samodzielny obrazek włączony do strony znacznikiem <img src="plik">
Obrazek oczywiście należy sobie przygotować, a więc skanujemy, rysujemy lub kopiujemy i wydawałoby się, że już gotowe. Chwila - stop.
  • należy zastanowić się nad formatem - najczęściej stosowane są GIF i JPEG (JPG). Co decyduje o wyborze:
    • trzeba to sprawdzić doświadczalnie, należy zapisać plik w obu formatach i zobaczyć który daje mniejszą wielkość pliku, chyba że:
    • obrazek jest ruchomy (wtedy tylko GIF)
    • chcemy aby obrazek miał więcej niż 256 kolorów - wtedy JPG
    • chcemy rysunek przeźroczysty - wtedy GIF
  • należy rozplanować położenie rysunku na stronie. Najwłaściwsze jest zapisanie obrazka w wielkości takiej, aby przeglądarka po ściągnięciu nie dokonywała korekcji wielkości. Jeżeli obrazek zapiszemy większy, to ewidentną stratą będzie czas ściągnięcia większego pliku. Przy zwiększeniu rysunku dwukrotnie ilość pikseli rośnie czterokrotnie
  • obrazek należy także wykadrować (odciąć boki), wyciąć niepotrzebne elementy, wyróżnione elementy (np. osoby) wycentrować,
  • niezłe efekty daje ustawienie przeźroczystości koloru tła (daje to GIF)
  • w przypadku rysunków można wykonać animację
  • w przypadku tła, często dobre wrażenie daje rozmycie i rozjaśnienie obrazka. Elementy tła nie powinny kontrastować gdyż przestaje być czytelna.
  • a może obejdziemy się bez grafiki? Grafika zawsze spowalnia szybkość ściągania strony internetowej. Poniżej umieszczam fragment strony internetowej nethasp.htm z serwera firmy Magic Software Enterprise
    • ü Important to know…
    • C Recommendation
    • F Attention !
    Obeszli się bez grafiki, a źródło wygląda następująco: 
      <ul>
    <li><font size="6" face="Wingdings">ü</font>
              <font size="2">Important to know…</font>
    <li><font size="6" face="Wingdings">C</font>
              <font size="2">Recommendation</font>
    <li><font size="6" face="Wingdings">F</font>
              <font size="2">Attention !</font>
  </ul>
    Zastosowano tu czcionkę WingDings dającą piktogramy. Inne czcionki, które można użyć do tego celu to WebDings, Symbol, Signs, Notes, MTExtra, MSOutlook, Monotype, MapSymbols, HolidayPi. Należy uważać aby nie wybierać czcionek zbyt egzotycznych, bo widz może po prostu nie widzieć efektu na swoim komputerze. Znaczniki <ul> i <li> poznamy później. Służą do stworzenia listy z podpunktami.
A więc do ataku. Robimy stronę reklamową firmy ABC. Programem Paint robimy prosty rysuneczek i zapisujemy jako p1.bmp. Otwieramy PaintShopPro, Microsoft Photo Editor lub jakikolwiek inny program do przeglądania plików graficznych. Ładujemy plik i zapisujemy w dwóch wersjach: jako gif i jpg (p1.gif i p1.jpg). W tym przypadku mniejszy rozmiar daje gif (zazwyczaj jest mniejszy przy rysunkach i schematach. Możemy teraz załadować stronę na której znajdują się oba rysunki Przykład 1. Dobrze je wcześniej pooglądać, bo być może jeden z formatów wypada w przeglądarkach dużo gorzej.

Przed rozplanowaniem rysunku na stronie należy zrobić schematyczny rysunek strony i zastanowić się jak zdjęcie będzie w nim leżeć. Najbardziej rozpowszechniona rozdzielczość monitora to 800x600. Jeżeli więc planujemy, że rysunek ma zajmować ćwiartkę ekranu to wypadałoby zrobić go o wymiarach 400x300. W dalszej treści poznamy metody aby obrazy się nie rozjechały przy zmianie rozdzielczości ekranu. Jeżeli źródłem obrazka jest skaner - najlepiej stosownie do parametrów obrazka ustawić rozdzielczość skanera.
Z problemem wielkości obrazka wiąże się taka ciekawostka. Kolega zrobił edytorem HTML stronę swojej firmy. U góry koło siebie cztery zdjęcia koleżanek. Powiedział żebym zobaczył efekt. Uruchomiłem przeglądarkę i widzę. Cztery zdjęcia, każde innej wielkości i nierówne. Na drugi dzień zwróciłem mu na to uwagę. On uruchomił komputer i widzę cztery panienki (przepraszam - mężatki) ładnie i równo w szeregu. Zdziwiło mnie to. Popatrzyłem na źródło HTML, a tam pierwsze zdjęcie bez parametrów, drugie - edytor wstawił rozmiar w pikselach, trzecie w procentach, czwarte w pikselach. On zdjęcia rozciągał myszą po ekranie, a program nadążał i kombinował. Dostosował do rozdzielczości jego monitora. Ja miałem inną. Dlatego wolę strony tworzyć notepadem. Przy każdym zdjęciu można było dać szerokość 20% (ekranu) i byłoby po problemie.
W przykładzie 2 ten sam obrazek został sztucznie dopasowany do szerokości równej połowie szerokości strony przeglądarki.

Przykład 3 pokazuje nasz przykładowy rysunek wykadrowany. Kadrowanie jest dosyć popularną funkcją w programach graficznych. Należy wybrać funkcję zaznacz obszar (select), wycinamy kursorem prostokąt, następnie menu edit / copy i edit / paste as new image . PaintShopPro i Microsoft Photo Editor mają taką właśnie funkcję.

Przykład 4 ilustruje nasz obrazek z zapisaną funkcją przeźroczystości tła. Postać taką mogą mieć obrazki zapisane w formacie GIF. W PaintShopPro należy wybrać File / SaveAs i podać format zapisu jako GIF. Pod przyciskiem Options jest możliwość wybrania jednego z czterech:

  • pozostaw oryginalne informacje o przeźroczystości
  • nie zapisuj informacji o przeźroczystości
  • ustaw jako kolor przeźroczystości kolor tła
  • podaj numer palety do przeźroczystości
Należy pamiętać, że w przypadku PSP kolorem tła jest kolor drugiego prostokąciku i należy go ustawić ręcznie.
Przeźroczystość szczególnie dobrze wychodzi przy rysunkach i grafikach. Oczywiście sens ma tylko wtedy gdy dokument ma inny kolor tła niż biały lub tło jest rysunkiem.

Ładnym i efektownym efektem jest obrazek ruchomy. Najczęściej stosowana jest w reklamach na znanych portalach internetowych. Jak najwięcej reklam na jak najmniejszej powierzchni. Jest to technika, którą wykonać można z obrazkami w standardzie GIF. Należy przygotować serię obrazków (może to być obrazek ruchomy, seria zdjęć). Potrzebny jest też program, niestety ale takie są bardzo rzadkie. Animacja pokazana w przykładzie 5 wykonana została programem Gif Construction Set.

Ostatni z zasygnalizowanych problemów to "rozmycie" obrazka. Przykład 6 to strona użyta z obrazkiem p1.gif. Przykład 7 jest bardziej przyjazny.

Znacznik <img>

Po tym długim opisie dotyczącym rysunków opis zastosowania znacznika powinien być łatwy do zrozumienia. Znacznik jest nieparzysty. Może mieć następujące parametry:
  • src to najważniejszy parametr, wskazuje na nazwę pliku obrazka
  • lowsrc to wskazanie na mały rysunek, który jest ładowany przed duży rysunkiem właściwym. Stosowane w celu pokazania obserwatorowi, że jest na co czekać,
  • align ten parametr poznaliśmy już wcześniej przy formatowaniu tekstu. W przypadku użycia tego parametru tekst formatowany jest obok rysunku - zobacz przykład 8. Jeżeli tekst ma nie oblewać obrazka najlepiej obrazek od tekstu oddzielić znacznikiem <p> zobacz przykład 9.
  • alt jest to wskazanie tekstu wyświetlającego się zamiast obrazka (np. jak użytkownik wyłączył wyświetlanie obrazków) - zobacz przykład 10
  • border zdefiniowanie ramki wokół obrazu zobacz przykład 11
  • controls pokazuje pasek z przyciskami, jeżeli obrazek jest sekwencją video
  • dynsrc adres wideoklipu
  • height podanie wysokości obrazka - służy do wyskalowania zdjęcia, alternatywnie można użyć width. Drugi z parametrów zostanie automatycznie dobrany. Jeżeli podano znak % to wielkość podana jest w procentach. przykład 3, przykład 8 .
    Szczególnym przypadkiem może być przykład 12. Obrazek został rozciągnięty na długą linię poziomą. Odwrotnie linia pionowa znajduje się w przykładzie 13
  • width szerokość
  • hspace odstęp o bocznej krawędzi
  • vspace odstęp o górnej krawędzi
  • loop ilość pętli (przy filmie)
  • usemap służy do wskazania, że rysunek jest mapą. jest to osobny rozdział, omówię później.
W szczególnym przypadku znacznik może wyglądać następująco: 
  <img  src="abc.gif"  lowsrc="maleabc.gif"  align="right"
    alt="tu jest logo"  border=1  height=50%>

stoler@kr.onet.pl

[spis treści]

Nie masz możliwości wysłania e-maila ? Skorzystaj z serwisu 'szybki e-mail' na stronie WWW Gazety Internetowej ! www.gazeta.sky.pl/mailer.htm