Umieszczanie grafiki na stronie WWW cz.1


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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *