Umieszczanie grafiki na stronie WWW cz.2


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.
tmpf054-1Z 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.

Dodaj komentarz

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