Umieszczanie grafiki na stronie WWW

Wprowadzenie możliwości publikacji na stronie WWW elementów graficznych (zdjęć, wykresów, przycisków oraz innych) było momentem przełomowym w działaniu sieci. Stało się tak z dwóch powodów.

Pierwszym był dynamiczny rozwój stron. Stały się one znacznie ciekawsze pod względem wizualnym. Dotychczas bowiem publikowano jedynie tekst oraz używano list czy też kilku innych, bardzo prostych efektów.

Oczywiście nie ma róży bez kolców i z chwilą wprowadzenia grafiki na strony WWW ruch w sieci drastycznie wzrósł, grożąc całkowitym jej zablokowaniem. Na szczęście szybko sobie z tym poradzono, modyfikując szkielety sieci, dzięki czemu internet znowu stał się wydajnym i szybkim nośnikiem informacji.

Dzisiaj na stronie możesz umieścić obrazki w następujących formatach: jpg, gif oraz png. Znajdziesz tam informacje o sposobach kompresji, przygotowania do umieszczania oraz poznasz alternatywne metody publikacji elementów graficznych na stronie, takie jak Adobe Flash czy SVG.

Założyłem, że posiadasz dowolny obrazek, który sam przygotowałeś lub pobrałeś z jakieś strony w internecie. Pamiętaj jednak o prawach autorskich — pożyczonego zdjęcia możesz używać do testów i nauki, ale wyniki Twojej pracy nie powinny wyjść poza Twój komputer. Moim zdaniem własnoręczne przygotowanie elementów graficznych strony daje dużo więcej satysfakcji niż ich „pożyczanie” od innych twórców.Dalej nauczysz się tworzyć kilka prostych elementów, które z powodzeniem możesz wykorzystać na swojej stronie WWW.

Wspominałem, że grafika na stronie może być jej uzupełnieniem, ale może także stanowić podstawowy składnik strony. Zobacz zatem, jak publikować i stosować elementy graficzne.

Do umieszczenia elementu graficznego na stronie służy znacznik <img/>, który posiada atrybuty src oraz alt. Src określa źródło, czyli obrazek, jaki chcemy wstawić, alt natomiast definiuje alternatywny tekst dla przeglądarek nieobsługujących grafiki, m.in. przeglądarek tekstowych, np. LYNX, bądź dla przeglądarek, w których użytkownik wyłączył wyświetlanie grafiki. Przykład użycia znacznika <img /> podaję poniżej.

<img src=“obrazek.gif” alt=”to jest nasz obrazek” />

W tym miejscu pojawia się bardzo ważna kwestia, związana z wielkością liter używanych przy wpisywaniu znaczników oraz atrybutów. Na początku napisałem, że w przypadku stron korzystających z języka HTML wielkość liter w znacznikach oraz atrybutach nie ma znaczenia, natomiast kod XHTML wymaga stosowania wyłącznie małych liter. To oczywiście prawda, jednak od tej zasady istnieje pewne odstępstwo. Mam tutaj na myśli sytuację, w której znacznik zawiera odwołanie do oddzielnego pliku. W moim przykładzie atrybut SRC zawiera informacje o pliku obrazka i w takim przypadku sprawą kluczową jest wpisanie nazwy obrazka dokładnie tak samo, jak nazwano plik.

Chodzi o to, że systemy rodziny MS Windows nie rozróżniają wielkości liter i dla nich plik.gif oraz Plik.gif to jeden i ten sam plik. Natomiast systemy uniksowe są czułe na wielkość liter i przykładowe pliki to dwa zupełnie różne pliki. Mając na uwadze fakt, że niemal 95% serwerów internetowych to maszyny uniksowe, musisz wpisywać nazwy dokładnie, z uwzględnieniem wielkości liter.

Warto, byś pamiętał również o tym, że nazwy plików (każdy typ używany na stronie) nie powinny zawierać polskich liter oraz znaków spacji. Jeżeli plik ma składać się z nazwy dwuczłonowej, to zamiast przerwy użyj znaku podkreślenia

W przypadku języka HTML za pomocą kolejnych atrybutów możemy określić wielkość naszego obrazka. Odpowiadają za to atrybuty width i height. Ich używanie przy powiększaniu naszego obrazka powoduje znaczne pogorszenie jego jakości, lepiej więc lepiej od razu przygotować obrazek w zamierzonej wielkości, niż potem dokonywać korekty wielkości za pomocą width i height.

<img src=”stronawww.gif” alt=”Obrazek oryginalny” height=”64″ width=”94″ />
<img src=”stronawww.gif” alt=”Obrazek dwa razy większy” height=”128″ width=”188″ />
<img src=”stronawww.gif” alt=”Obrazek trzy razy większy” height=“192″ width=”282″ />

Skalowanie obrazka za pomocą atrybutów języka HTML powoduje pogorszenie jego jakości, a dodatkowo — w przypadku zmniejszania oryginału nie zmniejsza wielkości samego pliku.

Podczas pomniejszania obrazek traci na jakości, choć do pewnego momentu jest ona do zaakceptowania. Musisz jednak pamiętać, że rozmiar pliku pozostaje bez zmian. Dlatego warto od razu przygotować obrazek tak, by nie wymagał modyfikacji za pomocą atrybutów języka HTML lub poleceń kaskadowych arkuszy stylów.

Obrazek umieszczony na stronie może zostać oblany za pomocą tekstu. Proces ten możesz kontrolować z poziomu języka HTML lub przy użyciu kaskadowych arkuszy stylów. Skoro projektujemy zgodnie ze wszystkimi zaleceniami specyfikacji, to oblewanie obrazków pozostawmy kaskadowym arkuszom stylów Jednak ze względu na następny przykład musisz wiedzieć, że za oblewanie tekstem obrazków w języku HTML odpowiada atrybut align, który jest umieszczony w znaczniku <img />.

<img src=”obrazek.jpg” alt=”Obrazek oblany z prawej strony” align=”left” />

Atrybut align może przybrać następujące wartości: left, right, middle, top i bottom.
Z pewnością po dokładniejszej analizie przykładu widocznego na rysunku nasunęła Ci się myśl, że przecież taki kawałek strony można wykonać, używając tabeli. Oczywiście, zgadzam się z Tobą, jednak pamiętaj, że jeszcze nie znamy tabel. Dlatego przeanalizujmy kod odpowiedzialny za stworzenie takiego elementu strony WWW.

<body>
<img src=” l.jpg” alt=”Pierwszy obrazek” align=”left” />
<p><strong>Magazyn 3D.</strong> Czasopismo poświęcone zagadnieniom związanym z grafiką 3D. Na łamach Magazynu można znaleźć przegląd najnowszego oprogramowania, doskonałe tutoriale i najlepsze grafiki.</p>
<hr>
<img src=”2.jpg” alt=”Drugi obrazek” align=”left” />
<p><strong>CAD Magazyn.</strong> Czasopismo poświęcone zagadnieniom CAD/CAM/CAE; przeznaczone dla inżynierów, mechaników i konstruktorów, poświęcone także architektom i budowlańcom, czyli branży AEC. Można w nim znaleźć artykuły opisujące konkretne programy, porady doświadczonych użytkowników i opisy wdrożeń w polskich realiach.</p>
</body>

Każdy element graficzny może być tłem dokumentu XHTML/HTML — Twojej strony. Jednak najwygodniejszym sposobem definicji takiego tła są kaskadowe arkusze stylów; w związku z tym, jeżeli szukasz informacji na temat dodawania tła do strony, musisz udać się do następnego rozdziału.