BÖLÜM 4
Grafik ve Renkler
Metin düzenlemekte kullanacağımız etiketleri öğrendik. Ancak Web sayfalarının metinden ibaret olmadığını da biliyoruz. İşte bu bölümde sayfa tasarımının bir parçası olan görsel unsurların HTML'deki yerini öğreneceğiz.
HTML'de grafik ve renkler konusuna daha önce kısaca değinmiştik. Web'de kullanabileceğimiz iki (henüz yaygın olmayan ama hızla yaygın hale gelen PNG ve SVG'yi de sayarsak dört ) grafik biçimi olduğunu, bunların birbirlerinden farkını, nerede hangi biçimi kullanacağımızı az çok biliyoruz. Yine renkler konusundaki bilgilerimiz de hafızamızda canlı bir şekilde duruyor olmalı.
Bu bölümde kullanacağınız grafik dosyalarını sabit diskinizde bulunan dosyalardan seçebileceğiniz gibi herhangi bir grafik işleme programı ile de hazırlayabilirsiniz. Usta Web tasarımcılarının gözdesi Photoshop'ı kullanmanız şart değil. Bu program sizde bulunmuyorsa Web grafiği hazırlamak için başka birçok programdan faydalanabilirsiniz. PaintShop Pro bir diğer yaygın kullanılan grafik programıdır. Macromedia Fireworks, Adobe ImageReady ve daha bir çok grafik programını kullanabilirsiniz.
Şimdi Web'de renkler konusuna geçelim. Cevap arayacağımız ilk soru, Web sayfamızda hangi unsurları renklendirebileceğimiz olmalıdır.
Metinlere <font> etiketinin color parametresini kullanarak renk verebiliyoruz. Fakat renk kullanımı elbette metinlerle sınırlı değil; sayfamızın ardalanına (background ) renk verebiliriz; sonraki konularda göreceğimiz tab arı kullanarak sayfada belli alanlar oluşturabilir ve bunların herbirine farklı renkler verebiliriz, bağlantıları (link ), metin satırlarının fonlarını da renklendirmek mümkündür.
Şimdilik sadece sayfamızın arka planının (ardalan, fon ) rengini değiştirmeyi öğrenelim; yeri geldikçe yukarıda bahsettiğimiz diğer unsurlara nasıl renk vereceğimize değineceğiz.
Bir sayfanın tümünün rengini <body> etiketinin bir parametresi olan bgcolor komutu ile atıyoruz. Daha önce <body> etiketini hep yalnız başına kullanmıştık. bgcolor, <body> etiketinde kullanılabilecek birçok parametreden biri. Yine yeri geldikçe bu parametrelere değineceğiz. Şimdi bgcolor'ın kullanımını görelim: kırmızı fon üzerine beyaz yazılar yazalım.
<body bgcolor="#FF0000">
<font color="#FFFFFF" face="garamond" size="5">
<p><b>İstiklal Marşı</b></p>
Dalgalan sen de şafaklar gibi ey şanlı hilâl! <br>
Olsun artık dökülen kanlarımın hepsi helâl. <br>
Ebediyyen sana yok, ırkıma yok izmihlâl: <br>
Hakkıdır, hür yaşamış, bayrağımın hürriyet; <br>
Hakkıdır, Hakk'a tapan, milletimin istiklâl! <br>
</font>
</body>
<ekran_024.tif>
Renk kodunu daha önce öğrendiğimiz diğer yöntemle belirleyebiliriz. Son olarak bir ipucu: bgcolor parametresini iyi ezberleyin renklendirme konusunda oldukça sık kullanacağımız bir komut.
Grafik Etiketi: <img>
İşte yepyeni bir etiket: <img>. ingilizce image kelimesinden bu etiketi aklınıza getirebilirsiniz.
Web sayfalarında kullanacağımız grafik dosyaları Web sayfasını oluşturan kodlara gömülmez. Şimdi burada kafanız biraz karışıyorsa şöyle bir örnekle konuyu açıklayalım. Microsoft Word ile hazırladığınız belgelere grafik ekleyip böylece dosyayı kaydettiğinizde grafikler Word belgesini oluşturan dosyanın kodları arasına yazılır. Bunu iki satırlık bir Word dökümanına kocaman boyutlu bir grafik ekleyip sonra da dosyanın boyutunu kontrol ettiğinizde görebilirsiniz. İşte HTML'de böyle bir durum söz konusu değildir. Web sayfası oluşturan kişinin yapması gereken tek şey grafik dosyasının diskteki yolunu belirten kodu yazmaktır. Bunu da <img src=...> etiketi ile yapıyoruz. Dosya yolunu src (source=kaynak anlamında ) parametresi karşılığına yazıyoruz.
İşte bununla ilgili bir örnek:
<img src="c:\belgelerim\aile.jpg">
Herhalde bu örnekle birlikte birçok şey açıklık kazandı. Bu kodun anlamı "C: adlı sabit diskte, kök dizinde bulunan 'belgelerim' klasörü içindeki 'aile.jpg' dosyasını sayfaya yerleştir!" demektir. (Bu arada bölü işaretinin yönüne dikkat ediniz. )
Fakaat, işler herzaman böyle yürümez. Bedava veya paralı Internet alanı veren bir firmadan aldığımız yerin gerçekte Server'ın hangi sabit diskinin hangi klasöründe durduğunu bilmemiz çok zor hatta neredeyse imkansızdır. Ayrıca Internet'te bir öğeye, bulunduğu sabit disk ve bu diskteki yolla göndermede bulunmak güvenlik açısından da yanlış olur. Bu sebeplerden dolayı <img src=...> etiketini farklı bir şekilde kullanırız. Bu kullanım tarzında dikkat edilmesi gereken nokta o anda çalışan-görüntülenen HTML dosyasının sabit diskteki yerinin esas alındığıdır. Bu ne demek? Şu demek; şayet HTML dosyası ile grafik dosyası aynı dizin içerisindelerse bu grafik dosyasına gönderme şu kodla yapılır:
<img src="resim.gif">
Gayet kolay değil mi? Sabit disk yok, klasör yok, uzun dosya yolları yok; sadece grafik dosyasının adı var. Peki ama henüz herşey bitmedi. Diyelim ki bir otomobil sitesi hazırlıyorsunuz ve elinizde sayfanıza koymak istediğiniz onlarca otomobil resmi var. İstiyorsunuz ki bu onlarca resim dosyası diğer dosyalara karışmadan otomobiller adlı dizinde dursun. Bu dizinde bulunan bmw520i.jpg dosyasına erişmek için kullanacağımız kod şöyle olmalı:
<img src="otomobiller/bmw520i.jpg">
Bu kod, "Şu anda çalışan HTML dosyasının bulunduğu klasörde 'otomobiller' diye bir dizin var; onun içinde de idealim olan otomobilin, bmw520i.jpg isimli bir dosyada resmi var; onu sayfaya koy!" anlamına geliyor. (Browser'ın sizin ideal otomobilinizle ilgilenmesini beklemiyorsunuz, değil mi? )
Bu şekilde içiçe bulunan klasörlerin herbirine ulaşmamız mümkündür.
Şu örnekleri inceleyin:
<img src="otomobiller/bmw/bmw320i.jpg">
<img src="otomobiller/station/renault/toros.jpg">
İstediğimiz grafik dosyasına hangi alt klasörde olursa olsun ulaşabiliyoruz; peki üst klasörlere nasıl erişeceğiz?
Bunun için kullanacağımız kod da 3 karakterden ibaret: "../". Kaynak belirtirken kullandığımız src parametresindeki her bir "../" ifadesi bizi bir üst klasöre götürür. Aynı şekilde istediğimiz kadar üst klasöre bu yolla ulaşabiliriz.
<img src="../otomobiller/volvo.jpg">
Bunun anlamı; "Bir üst dizine çık, orada 'otomobiller' dizinini bul; içindeki volvo.jpg dosyasını al!" demektir. Aynı şekilde;
<img src="../../otomobiller/rover.jpg">
bizi iki dizin üste çıkartır.
Grafiklere, Internet adreslerini kullanarak ulaşmamız da mümkündür. Örneğin Web sayfamızda kullanmak istediğimiz bir sitenin logosunu o siteden almak istersek src parametresi karşılığına grafik dosyasının URL'ini yazarız:
<img src="http://www.webteknikleri.com/logo.gif">
Bu konuyla ilgili bir kullanım şekli daha var. O da doğrudan bölü "/" işaretini kullanmaktır. Bu yöntem bizi doğruca kök dizine (root ) götürür. Tabi eğer dosyalarınız Web Server'da ayrılmış bir klasörde durmuyorsa doğrudan sabit diskin kök dizinine ulaşırsınız. Web Server'da duran dosyalarda ise bu komut bizi sabit diskin değil, sitenin kök dizinine götürür.
Bu farkı şöyle belirtelim;
<img src="/otomobiller/peugeot.jpg">
komutu şayet sizin kendi bilgisayarınızda çalıştırılan bir HTML dosyasında ise c:\otomobiller\peugeot.jpg dosyasına ulaşırsınız. Fakat bu sayfa, gerçek Internet sitesinde ise, Web Server buradaki kök dizini sitenin kök dizini kabul edeceğinden ulaşacağınız dosya sitenize ayrılan dizinde aranır.
KUTU/////////////////////////////////////////////////////////////
Kaynak Yazarken
Ücretli Web Server'larda edindiğimiz site alanları, çoğunlukla c:\Inetpub\wwwroot\ dizininde bizim adımıza açılan bir alt-dizindir. Böyle bir durumda bizim Peugeot resmi, muhtemelen c:\Inetpub\wwwroot\ahmet_in_sitesi\otomobiller\peugeot.jpg gibi bir yere sahip olacaktır. Bedava alan adı veren yerlerde de durum bunun aynısıdır. Mesela http://www.websamba.com/benimsayfam/ bizim kök dizinimizdir. Fakat ücretli veya ücretsiz, gerçek bir Web Server'da bize ayrılan yerin tam yolunu hemen hemen hiç bir zaman bilemeyiz. Bu sebepten dolayı, iyi bir alışkanlık, sayfalarımız kendi sabit diskimizde bile çalışacak olsa, grafik dosyalarına kaynak yazarken göndermeleri göreli olarak belirtmektir.
KUTU BİTTİ////////////////////////////////////////////////////////
Farklı dizinlerde bulunan grafiklere ulaşma konusunu daha iyi kavramak için bilgisayarınızda klasörler oluşturup içlerine kendi grafik dosyalarınızı yerleştirin, sonra farklı klasörler içinde oluşturacağınız HTML dosyaları ile bu grafiklere ulaşmaya çalışın. İhtiyacınız olan tüm bilgi üst satırlarda. Yapmanız gereken şey bol bol pratik.
Grafik Dosyasının Ebatları
Artık herhangi bir yerdeki herhangi bir Web grafiğine HTML ile nasıl ulaşacağımızı biliyoruz, ama herşey bununla bitmiyor. <img> etiketinin birçok parametresi var; src bunlardan sadece biri.
Diğer iki parametre, grafik dosyasının piksel cinsinden ebatlarını belirten width (genişlik ) ve height (yükseklik ) ölçüleridir. Biraz önceki örneklerimizde bu iki parametreyi kullanmadık. Çünkü sayfalarımızdaki resimlerin ebadını belirtmemiz şart değil. Öyleyse bu parametreler ne işe yarıyor? Web sitelerini dolaşırken dikkatinizi çekmiş olmalı. Bazı sayfalar yüklenme aşamasındayken sayfada oynamalar, kaymalar, yer değiştirmeler olur. İşte bunun başlıca nedeni bu iki parametrenin kullanılmamasıdır. Yüklenme aşamasında Browser sayfaya yerleştirilecek grafiğin ebatlarını bilemediğinden kendisi varsayılan yükseklik ve genişlikte geçici bir alan açar. Yüklenme önceliği metinlere ait olduğundan, grafikler yüklendikçe ve kendileri için ayrılan geçici alana sığamadıklarında bu yer değiştirme ve oynamalar gerçekleşir. İşte bahsettiğimiz bu iki parametre Browser'a bu alanı varsayılan değil, bizim belirttiğimiz değerlerle açmasını bildirir. Böylece yüklenme sırasında bahsettiğimiz durum ortaya çıkmaz. Hepsi bu kadar. Öğrendiklerimizle ilgili örneklere geçelim.
<img src="manzara/yayla.jpg" width="150" height="80">
Bu kodla, yüklenecek resmin 150 piksel genişliğinde, 80 piksel yüksekliğinde olduğunu önceden Browser'a belirtmiş olduk. Peki bu değerleri nereden öğrenebiliriz? Elbette kullandığımız grafik editöründen. Başka bir yol da şöyle; komutu önce width ve height parametreleri kullanmadan verin. Sonra Browser'da bu dosyayı açıp Mouse imlecini grafiğin üzerindeyken sağ tıklayıp özellikler/properties' i seçin. Açılan pencerede resmin ebatlarını görebilirsiniz. 150 x 80 ifadesi width="150" height="80" anlamına gelir.
<ekran_025.tif>
KUTU/////////////////////////////////////////////////////////////
Resmin Gerçek ve Görüntülenen Ebadı
<img src="manzara/yayla.jpg" width="150" height="80"> komutuyla, gerçek ebadı sözgelimi 300x160 olan bir resmi, sayfamızda yüzde 50 küçültülmüş olarak görüntüleyebiliriz. Başka bir ifade ile <img src="..." width="..." height="..."> komutu Browser'a, gelmekte olan grafiğe ayıracağı yeri bildirirken, gelen resmi gerçek ebadı ne olursa olsun, enini-boyunu bu yere göre değiştirmesini de bildirebilir. Bir resmin en/boy orantısını bozacak bir ebada küçültülmesinin estetik sakıncalarını deneyerek görmek en doğru yol olsa gerek. Ancak büyük ebadda bir grafiği ziyaretçinin Browser'ına aktardıktan sonra, bunu daha küçük bir boyutta görüntületmenin Web tekniği açısından anlamı yoktur: büyük resmin ziyaretçiye aktarılması, mutlaka görüntülenen ebaddaki daha küçük resmin aktarılmasından çok daha uzun zaman alacaktır. Bir başka deyişle ziyaretçiyi büyük resmin bilgisayarına aktarılması için boş yere bekletmiş olacağız.
Bir grafiği, kendi boyutlarından daha büyük olarak görüntülemeye çalışmanın da sakıncaları vardır. Bu durumda Browser, elinde mevcut resim bilgisini, bir takım aritmetik hesaplarla değiştirecek ve resmi büyütmeye çalışacaktır. Bunun birinci etkisi, resmin düz çizgilerinin basamaklı hale gelmesi, tonlar arasındaki aşamalı geçişlerin kaybolması ve resmin görsel değerinin azalması olacaktır. Bunun bir diğer sakıncası ise Browser'ın bu hesabı yaparken, sayfayı görüntüleme işlemine son vermesi ve uzunca bir süre, ziyaretçinin bilgisayarının adeta donmasıdır. Bu, bir çok ziyaretçinin bir daha bizim sitemize gelmemesi sonucunu ortaya çıkartır.
Sonuç olarak, iyi bir Web tasarımcısı daima grafiklerini, sayfada yer vereceği boyutlarda kaydeder. Bütün grafik editing programları, bir resmi istediğiniz boyuta indirme imkanına sahiptir.
KUTU BİTTİ////////////////////////////////////////////////////////
Şimdi hazır Mouse imlecini resmin üzerine getirmişken yeni bir parametre ile tanışalım: alt. Bu parametre grafiğe alternatif metin vermeye yarar ve etkisi iki şekilde görülür. Grafik, Server tarafından ziyaretçinin bilgisayarına gönderilmeden önce alt ile verdiğimiz metin grafiğe ayrılan alanda görüntülenir. Grafik yüklendikten sonra ise Mouse imleci grafik üzerine getirildiğinde küçük sarı bir pencere içinde bu metni görürüz.
<img src="deniz.jpg" width="150" height="80" alt="Denizde akşam güneşi">
<ekran_026.tif>
Milattan önceki devirlerde yani Browser'lar en fazla 16 renk görüntüleyebilirken, kullanıcılar sayfanın daha hızlı yüklenmesi için Browser'ının resim gösterme seçeneğini kapatırdı. Zira amaç cıvıl cıvıl reklam banner'larıyla donatılmış bir sayfaya erişmek değil, büyük olasılıkla bir üniversitenin sitesindeki araştırma tezini filan incelemekti. Şayet Browser ayarlarından, grafik gösterme seçeneği kapatılmışsa bile verilen alternatif metin ile grafik hakkında kullanıcının bir fikri olması sağlanabilirdi. Bu kadar tarih bilgisinden sonra diğer parametrelerimize geçelim.
Resimleri Hizalama
Metinler konusunda gördüğümüz align parametresini hatırladınız, değil mi? Tüm hizalamalarda olduğu gibi resimlerin hizalanmasında da bu parametreyi kullanıyoruz.
align = absbottom | absmiddle | baseline | bottom | center | left | middle | right | texttop | top
Görüldüğü gibi bu parametrenin <img> etiketi ile kullanımında alabileceği değerler oldukça fazla. Herbirinin ne işe yaradığını aşağıdaki örneği inceleyerek öğrenebilirsiniz; burada kullandığımız grafik dosyaları yerine siz kendi grafiklerinizden herhangi ikisini kullanabilirsiniz. Yalnız bu grafiklerden biri diğerine göre daha büyük ebatlarda olmalı.
<img src="fax.gif"> Metin <img src="disket.gif">
<p>Hizalama parametresi kullanmadan iki grafik ve metin bu şekilde görüntülendi.</p>
<hr>
<img src="fax.gif" align="top"> <img src="disket.gif">
<p><b>align="top"</b> - Grafikler üst kenara dayalı olarak görüntüleniyor. (üst kenar sınırı, burada büyük resme göre belirleniyor )</p>
<hr>
<img src="fax.gif" align="middle"> Metin <img src="disket.gif">
<p><b>align="middle"</b> - Diğer nesnelerin (ikinci grafik ve metin ) alt sınırı birinci resmin orta noktasına denk düşecek şekilde ayarlandı.</p>
<hr>
<img src="fax.gif" align="bottom"> Metin <img src="disket.gif">
<p><b>align="bottom"</b> - Tüm nesneler aynı taban hizasına sahip olacak şekilde görüntülendi. Bu aynı zamanda varsayılan (default ) değerdir. Hizalama parametresi kullanmadan elde ettiğimiz görüntüyle bu örneği kıyaslayın.</p>
<hr>
<img src="fax.gif" align="absmiddle"> Metin
<p><b>align="absmiddle"</b> Resmin orta kenar hizası, metin satır hizasının (metin satır hizası ile metin hizası farklı şeylerdir. Mouse imleci ile metni tarayın oluşan seçili alan metin satırıdır. ) orta noktası ile kesişiyor. absmiddle'ın middle'dan farkı; middle'da metnin orta noktası esas alınırken absmiddle'da metin satırının orta noktası esas alınır.</p>
<hr>
<img src="fax.gif" align="absbottom"> Metin
<p><b>align="absbottom"</b> Resmin alt kenarı ile metin satırı alt kenarı aynı hizada görüntülenir. Bu örneği daha iyi anlayabilmek için sayfayı seçili hale getirin (Ctrl+A ) metin satırı ile resim alt kenarı aynı hizadalar, tüm sayfa seçili iken align="bottom" örneğini incelerseniz, burada esas alınanın metin satırı değil metnin kendisi olduğunu görebilirsiniz.</p>
<hr>
<img src="fax.gif" align="texttop"> Metin <img src="disket.gif">
<p><b>align="texttop"</b> Resim ve metin satırının üst kenarları aynı hizaya sahip, metinden sonra gelen ikinci resim ise metinle aynı alt kenar hizasına sahip olacak şekilde görüntülendi.</p>
<hr>
<img src="fax.gif" align="baseline"> Metin <img src="disket.gif">
<p><b>align="baseline"</b> Tüm nesnelerin taban hizaları aynı seviyede görüntüleniyor, </p>
<hr>
<img src="fax.gif" align="center"> Metin <img src="disket.gif">
<p><b>align="center"</b> middle değeri ile aynı neticeyi veriyor, </p>
<hr>
<img src="fax.gif" align="left"> <p>Metin</p>
<br clear="left">
<br>
<p><b>align="left"</b> Resmi sola dayadı ve paragraf etiketi kullanmamıza rağmen metin yeni satırda başlamadı, fakat metnin üzerinde bir satırlık boşluk oluştu. Böylece tablo kullanmadan grafik ve resimleri iki sütun halinde kullanmak mümkün olmaktadır.</p>
<hr>
<img src="fax.gif" align="right"> <p>Metin</p>
<br clear="right">
<br>
<p><b>align="right"</b> Resmi sağa dayadı. left parametresi ile oluşturulan etkinin aynısını burada da görüyoruz. Tek fark left ile resim sola dayanırken right değerinde sağa dayanıyor.</p>
<ekran_027.tif>
Hizalama parametresinin alabileceği değerlerin çokluğu aklınızı karıştırmasın, çoğu zaman bu değerlerden left, right ve middle gibi ikisini-üçünü kullanırız. Bir Web sayfasına yapısal istikrar kazandırmak için hizalamaları çok daha etkin biçimde tabar yardımıyla yapmayı ileri konularda göreceğiz.
Burada önem kazanan bir önemli etiket, kodların arasında gördüğünüz <br clear="..."> etiketi. Left ve right gibi değerlerle resmi hizaladığımız zaman oluşturduğumuz sütun etkisini bu etiketle kaldırıyoruz. Bu parametre üç değerle kullanılabilir:
clear = left | right | all
Left ve right, align parametresinde kullandığımız değere göre etki gösterirken all değeri her ikisini de kapsar.
hspace - vspace Parametreleri
Bu parametreler resmin sağ-sol-üst ve altında belirtilen piksel boyutunda boşluklar bırakır. Özellikle align parametresi ile resim ve metinleri birlikte kullandığımızda hspace ve vspace'den yararlanabiliriz.
<img src="disket.gif" align="left">Resim ile metin normal aralıkta.
<br><br><br><br>
<img src="disket.gif" align="left" hspace="25">Resmin sağında ve solunda 25'er piksel boşluk oluştu.
<ekran_028.tif>
<img src="disket.gif" valign="top" vspace="30">Resmin üstünde ve altında 30'ar piksel boşluk oluştu.
<br><br><br><br>
<img src="disket.gif" valign="top">Resim ile metin normal aralıkta.
<ekran_029.tif>
border Parametresi
Bağlantı kurulmuş bir resme border değeri verilmediği taktirde resmin etrafında varsayılan olarak mavi renkte bir çerçeve oluşur. Bu, çoğu tasarımcının istemediği bir etkidir ve bu çerçeveyi yok etmek için border parametresine "sıfır" değeri verilir.
Bağlantılar konusuna ileride değineceğiz fakat burada anlatmak istediğimiz etkiyi oluşturmak için bağlantı verilmiş bir resim kullanalım:
<a href="#"><img src="disket.gif"></a>
Dosyayı Browser'da açtığınızda mavi çerçeveyi farketmiş olmalısınız. Şimdi çerçeveyi yok edelim:
<a href="#"><img src=" disket.gif" border="0"></a>
border parametresi, aslında çerçeveyi yok etmeye değil çerçeve kalınlığını belirlemeye yarıyor. Tabi sıfır değeri verildiğinde çerçeve yok oluyor. Başka değerler vererek de bu parametreyi kullanabiliriz.
<a href="#"><img src="disket.gif" border="5"></a>
<ekran_030.tif>
Sayfa Fonunda Resim Kullanmak
En çok merak edilen konulardan bir diğeri sayfa fonunda resim kullanmak olsa gerek. Bunun için gerekli kod <img src="..."> etiketinden daha farklı. <body> etiketinin background parametresini kullanıyoruz.
<body background="fonresmi.jpg">
Verdiğimiz fon resminin sayfa boyunca tekrar ettiğini göreceksiniz. Bunu engellemek için tüm sayfayı kaplayan bir artalan resmi kullanmak da pek akıllıca değil. Eğer fon resminin tekrar etmesini istemiyorsak bunun için kullanabileceğimiz bir kod var: bgproperties="fixed"
<body background="fonresmi.jpg" bgproperties="fixed">
Ama bu kodun yalnızca Internet Explorer'da çalıştığını belirtelim. Netscape'de fon tekrarı devam edecektir. Peki bir dezavantaj gibi görünen bu durumu avantaja çeviremez miyiz? Düşünün: 2x2 piksellik bir grafikle pekala güzel background'lar hazırlanabilir. 2 piksel'in yarısı açık tonlu yarısı daha koyu tonlu bir grafik sayfa boyunca tekrar ettiğinde hoş bir görünüm oluşabilir. Veya 1024 piksel genişlik ve 2 piksel yüksekliğinde bir grafik de bu amaçla kullanılabilir. Soldan ilk 120-150 piksel'i renklendirip geri kalan kısmı beyaz bırakarak Web'de birçok sayfada örneğini gördüğümüz türde sayfalar hazırlayabiliriz. Üstelik bu küçük ebatlardaki grafikler dosya boyutu itibariyle de sayfa yüklenmesine pek yük getirmez.
<ekran_031.tif>
<ekran_032.tif>
|
