Forum Ti - Tek İleti Göster - Adım adım HTML kodlari arsivi html sitenizi kurun

~~staticiation~~ · 24.09.2007

RESİM KULLANMAK
Gelelim web dünyasının en önemli öğelerinden birine, resimlere. HTML dilinde her şey çok kolay olduğu gibi sayfalara resim yerleştirmek de çok kolaydır. Resimler sayfa içerisinde metne göre sağa, sola, aşağı ve yukarı doğru yerleştirilebilirler, ayrıca boyutları sadece belirli değerler değiştirilerek ayarlanabilir.

Dokümanın herhangi bir yerine bir resim yerleştirmek için en sade haliyle <IMG SRC="RESIM.GIF"> tag'ını kullanabilirsiniz. Bu tag'ı kullandığınızda resim hiç bir yere yaslanmayacak, boyutu ayarlanmayacak, metin olarak bir alternatifi olmayacaktır.

Yukarda da belirttiğimiz gibi resimleri kullanırken bir çok seçeneğiniz var, bu seçenekler sayfanın görünümünde kuşkusuz büyük rol oynayacaktır. Seçeneklerden birincisi Internet erişiminin yavaş olduğunu bildiğimiz ülkemizde sayfalarınızı görüntüleyecek olan kişilere biraz yardımcı olmak en azından resim yüklenene kadar kullanıcının meraklarını gidermek için kullanılabilir, bahsettiğimiz takı "ALT" tır. <IMG SRC="RESIM.GIF" ALT="deneme resmi"> satırını yazdığınızda web tarayıcınız RESIM.GIF adlı resmi yüklenmeden önce resmin yerine "deneme resmi" metnini girecektir, böylece kullanıcı resmi görmeden ne olduğunu bilecek ve anında STOP tuşuna basabilecektir. (!)

Seçeneklerden biri de resmin ekranda görünecek boyutlarını ayarlamak için kullanılır bu takı HEIGHT ve WIDTH'tir. Bu takılar bir arada kullanılmalıdır, tek başına kullanıldığında web tarayıcısı takıyı göz ardı edecektir. <IMG SRC="RESIM.GIF" WIDTH=100 HEIGHT=50> satırını yazdığınızda RESIM.GIF isimli resmin boyutu ne olursa olsun 50 piksel yüksekliğe ve 100 piksel genişliğine getirilerek ekranda gösterilecektir. Resim gösterirken işinize yarayacak diğer bir seçenek ise BORDER'dır. Bu takı ileride değineceğimiz "Internet Kısayolları" (Hyper Link) ile ilgili olsa da şimdi birkaç püf noktası vermek gerekir. Başka bir URL'ye kısayol yaratıldığında kısayolun ismi bir alt çizgi ile belirlenir, bu işlem resimlerde resmin mavi bir çerçeve içerisine alınmasıyla belirtilir, Eğer bir resmi başka bir sayfaya kısayol olarak kullanacaksanız ve çerçevenin görünmesini istemiyorsanız BORDER=0 ifadesini kullanmalısınız.

Resimleri kullanırken dikkat etmeniz gerekenler:
* Daha önce de belirttiğimiz gibi Internet'te uzun süredir yer alan kullanıcılar, sitelerdeki büyük resimleri çok işlerine yaramadığı sürece görmek istemeyeceklerdir. Bu yüzden, her zaman resimlerin boyutunu küçük, miktarını az tutmalısınız.

* Eğer büyük resimler kullanacaksanız, (büyük resim derken ekranı kaplayacak kadar büyük değil), bunları JPEG formatına çevirmenizi ve kalitesini düşürmenizi tavsiye ederiz. JPEG resimler her zaman GIF'lerden daha az yer kaplarlar, bu yüzden daha hızlı yüklenirler.

* Resimlere her zaman ALT tag'ını kullanarak alternatif metinler verin, Internet'i kullananların her zaman resim görüntüleyebilecek, browser'ı olan makineler olduğunu varsaymayın. Eğer resimlere alternatif metinler verirseniz terminal ekranı kullanan kullanıcılarda bilgiye erişebilirler.

* GIF'leri kullanırken "Interlaced" haline getirin, bu tip GIF'ler kademe kademe yüklenir ve yavaş yavaş netleşerek resmi daha hızlı yükleniyormuş gibi gösterir.

HTML ve YAZITİPLERİ
Dokümandaki yazıtipini değiştirmek için <FONT> tagı kullanılır, genel kullanımı şöyledir:

<FONT SIZE="x" FACE="[isim] COLOR="#XXXXXX">

* SIZE değişkeni metnin büyüklüğünü ayarlar, bu değişkene -1, +2 gibi değerler verilerek metnin puntosunun bir eksiltilmesini veya iki arttırılmasını sağlayabilir, direkt olarak bir rakam vererek puntoyu tayin edebilirsiniz. HTML sayfalarında SIZE değişkenine verebileceğiniz en büyük değer 5'tir. 5'ten sonra vereceğiniz her değer siz 5 değeri vermişsiniz gibi muamele görecektir. Yazıtipi çok büyük olmamalıdır, büyük yazıtipleri hem kullanıcıların sayfayı okumasını zorlaştırır hem de sayfanın güzelliğini bozar.

* FACE takısını tüm web tarayıcıları desteklemese de bu takı kullanılarak sayfada resim kullanmadan oldukça güzel görüntüler elde edilebilir. Örneğin FACE="Arial Tur" takısı kullanıldığında yazı tipi Türkçe Arial olacaktır. FACE değerine Türkçe desteği olmayan "Comic Sans Ms" gibi yazıtipleri verilmemelidir, verilirse bazı Türkçe karakterler bozuk olarak görülecektir.

* Son olarak COLOR takısı yazıtipinin rengini ayarlamakta kullanılmaktadır. Web tarayıcılarının desteklediği temel renklerden oluşan tablo geçen ay bu bölümde verilmiştir. Tablodan dilediğiniz bir rengi seçerek bu değişkenin karşısına yazdığınızda yazıtipi rengi değişecektir.

* <FONT> ifadesi her zaman bir </FONT> ile sonlanmalıdır. Bu tag unutulursa web tarayıcınız sayfaları yanlış görüntüleyebilir. (Bazen de hiç görüntülemez)

İNTERNET KISAYOLLARI
LINK veya shortcut dediğimiz Internet kısayolları, Internet'te belki de en çok kullanılan özelliklerden biridir. Asli amacı Internet üzerinde herhangi bir sunucuya bağlı bir dosyayla bağlantı kurmak olan kısayollar ayrıca elektronik posta yollamak, Telnet bağlantısı kurmak gibi değişik amaçlar için de kullanılabilir.

<a href=" [Adres] [ort]" >[Görüntü]</a>

Internet kısayollarının kullanımı yukarıdaki gibidir. Adres kısmı bağlanılacak HTML sayfasını, görüntü kısmı ise kısayolun, sayfadaki görüntüsünü belirler. Örneğin yazacağınız

<a href=" http://www.pcmagazine.com.tr" >PC Magazine Online</a>

gibi bir satır ekranda PC Magazine Online olarak görülecek ve sizi doğruca pc magazine Türkiye'nin Web sitesine bağlayacaktır.
Adres kısmı oldukça basit olmasına rağmen, bazı küçük püf noktaları da yok değil. Örneğin, adres kısmını kullanıcının size mail atması için kullanabilirsiniz. Bunu gerçekleştirmek için kişisel e-posta adresinizin önüne mailto: takısını getirmeniz yeterlidir. Örneğin hazırladığınız sayfada kullanıcıların size mail atabilmeleri için
Bana <a href=" mailto:cenk.tarhan@pcmagazine.com.tr" >mail</a> atabilirsiniz.
gibi bir satır kullanabilirsiniz. Kısayollar ayrıca Telnet, FTP, Gopher servislerini de çağırabilirler. Bunları çağırmak için, sizin de tahmin edebileceğiniz gibi ftp://, gopher:// takılarını site isminin önüne getirmek yeterlidir. Genel kullanımda verdiğimiz ort takısının ne işe yaradığını merak edenler için hemen bir açıklama getirelim: Bu takı tüm web servisleri için 80 olup genelde kullanılmalarına gerek yoktur. Hızla gelişen Web teknolojisi çoook eskiden kullanılan ort takısının kullanımını gereksiz bir hale getirmiştir.
Internet kısayolları, Web tarayıcınızın ayarıyla oynamadıkça ve HTML sayfasında aksini belirtmedikçe ekranda mavi altı çizili yazılar olarak görülürler. Siz ilgili linke tıkladığınızda ve işaret ettiği sayfayı izlediğinizde o sayfadaki link maviden mora dönüşür.
Daha önce de belirttiğimiz gibi kısayol renkleri HTML sayfasındaki kodlarla değiştirilebilirler, üstelik siz bunu yaptığınızda kullanıcı web tarayıcısının ayarıyla oynayarak kısayolun rengini kendisine göre tayin edemez. İşte bunun nasıl yapılacağı:
Sayfanızın başında <BODY...> ' tag'ıyla birlikte link=değer vlink=değer takılarını kullanarak ziyaret edilmiş ve edilmemiş kısayol renklerini belirleyebilirsiniz. Her zamanki gibi bunu yapmak için Hex renk kodlarını ve hazır renk adlarını kullanabilirsiniz. Örneğin sayfadaki kısayolların altı sarı çizgili görülmesini, aynı kısayolların ziyaret edilince kırmızıya dönüşmesini istiyorsunuz bunu yapmak için

<BODY BGCOLOR=WHITE LINK=YELLOW VLINK=RED>

satırını kullanabilirsiniz. Mutlaka siz de rastlamışsınızdır: Bazen resimler de bir Internet kısayolu olarak kullanılabiliyor. ' Bunu nasıl yapabilirim?' diyorsanız, hemen çok basit olduğunu belirtelim. Genel kullanım bölümünde verdiğimiz [görüntü] bölümüne önceki örneklerimizde hep yazı yazdık, bir de resim koymayı deneyelim:

<a href=" http://www.pcmagazine.com.tr" ><img src=" PCM.GIF" alt=" PC Magazine Online" ></a>

satırını yazdığınızda PCM.GIF isimli resim PC Magazine Online'a bağlanmak için bir kısayol olarak kullanılacaktır. Burada dikkat etmeniz gereken bir husus var, o da resimlerin link olarak kullanıldığında mavi (ya da link için atadığınız renk neyse) bir çerçeve içine alındığıdır.
Bunu önlemek için resmi yükleyen ' tag'ın sonuna bir border=0 ekini girebilirsiniz. Şöyle:

<a href=" http://www.pcmagazine.com.tr" ><img src=" PCM.GIF" border=0></a>

Dikkat Etmeniz Gerekenler

Bir kısayol oluşturduktan sonra mutlaka ' Acaba bir hata yapmış mıyım?' diyerek kısayolu kontrol edin. Bozuk kısayolların sitenizin ziyaret sayısını ve itibarını zedeleyeceğini unutmayın.
Sonradan doldururum diye kısayolu önceden yerleştirmeyin. Sitenin başına ' inşa aşamasında' yazsanız bile yapmadığınız bölümlerin linklerini koymayın. Bunun yerine hazırladığınız bölümleri kısayol oluşturmaksınız Web sayfasına yerleştirin.
Sitenize bulunduğunuz makineden FTP programıyla uzunca bir shareware yolluyorsunuz diyelim. Shareware'inizin kısayolunu önceden yollamayın, geçen zaman süresince sitenize bağlanıp o program ile ilgilenenler ' 404 Not Found' hatası ile karşılaşırlar.
Internet adresi verirken başına http://, mail adresi verirken başına mailto: koymayı unutmayın. Bunu yapmazsanız verdiğiniz www.pcmagazine.com.tr veya cenk.tarhan@pcmagazine.com.tr gibi bir adres lokal bir dosya olarak görülür ve linkine tıklayınca doğal olarak hata verir.
Internet kısayollarını ve resimlerin kısayollara atanması için nasıl kullanıldığını öğrendik...

İşte bize en çok sorulan sorulardan biri:

' Web projem bir klasörde duruyor, lokal olarak çalışıyorum ve bir alt veya üst klasördeki dosyayı bulunduğum sayfadan çağırmak istiyorum. Nasıl yapacağım?'

Üzerinde çalıştığınız HTML sayfası C:\PROJE\1 klasöründe olsun, sizin de C:\PROJE klasöründeki DENEME.HTM sayfasını çağırmak istediğinizi varsayalım. Bu dosyayı çağırmak için şöyle bir satır kullanmalısınız:

<A HREF=" ../DENEME.HTM" >KISAYOL DENEME.HTM</A>

../ ifadesini istediğiniz kadar kullanabilirsiniz. İki alt klasördeki dosyayı çağırmak için ../../DENEME.HTM gibi bir ifade kullanabilirsiniz. Bir üst klasördeki (C:\PROJE\1\BASKA\SAYFA.HTM gibi) dosyayı çağırmak için ise şöyle bir yol izlemelisiniz:

<A HREF=" BASKA/SAYFA.HTM" >KISAYOL</A>

Eğer bir Web sunucusu üzerinde çalışıyorsanız ve sabit diskinizin tümü veya bir alt dizinini Web sayfalarınız için tanımlanmışsa kök dizine inmek ve buradan başka bir klasöre geçmek için / karakterini kullanabilirsiniz. Örneğin
<a href=" /GIRIS.HTM" >GIRIS</a> satırı sizi web için ayrılan bölümün en dibine kadar indirecek ve GIRIS.HTM dosyasına kısayol oluşturacaktır. Bunun gibi resimler dizinindeki bir resmi çağırmak için
<img src=" /resimler/pcmagazine.gif" > gibi bir ifade kullanmalısınız.

LİSTE KULLANMAK
HTML tag'ları kullanarak sayfa içerisinde otomatik olarak numaralandırılan ve sıralandırılan listeler hazırlamak çok kolaydır, bunun için öncelikle metnin ne biçimde listeleneceğini seçmelisiniz. Liste hazırlarken en çok rastlananları tipler <OL> ve <UL> dir. <UL> tag'ını listeye ait olan her satırın başına bir nokta koymak için kullanabilirsiniz. <OL> tag'ı ise her bir satırı isteğe göre numaralandırmanızı veya harflendirmenizi sağlar. Bu tag'lar ayrıca bir paragrafı diğer paragraflardan biraz ileriye itmek için de kullanılabilir. Liste tipini belirlemek için yukarıdaki iki seçeneği kullanıyoruz; peki liste seçeneklerini birbirinden ayırmak için nasıl bir yol izleyeceğiz. Listenin her bir öğesini belirtmek için ise <LI> tag'ı kullanılır. Bu karakterleri herhangi bir satırın önüne yerleştirdiğinizde web tarayıcınız bu satırı anında yeni bir liste öğesi olarak kabul edecektir.

Birinci Satır
İkinci Satır
Üçüncü Satır
HTML dokümanınızda yukarıdaki gibi bir görüntü elde etmek istiyorsanız aşağıdaki gibi kodlar kullanmalısınız:

<UL>
<LI>Birinci Satır
<LI>İkinci Satır
<LI>Üçüncü Satır
</UL>

Listeyi oluşturmak için <OL> kullanacaksanız bu tag'ın yanına TYPE=X takısını girerek liste biçimini belirleyebilirsiniz. Liste öğelerini sıralatmak için büyük harfleri kullanmak istiyorsanız X yerine A, küçük harflerle sıralamak için a, büyük Roma karakterleri ile sıralamak için I, küçük Roma karakterleri ile sıralamak için I, numaralarla sıralamak için ise L karakterini kullanabilirsiniz.

Büyük harflerle ayrılan bir liste aşağıdaki gibi bir koda sahip olacaktır:

<ol type=A>
<li>Birinci Satır
<li>İkinci Satır
<li>Üçüncü Satır
</ol>

Herhangi bir liste içerisinde değişik veya aynı tipte bir liste daha açmak mümkündür. Bunun için <UL> veya <OL> tag'ını kapatmadan tekrar bir <OL> veya <UL> girmek yeterlidir. Açılan tüm liste tag'larının kapatılması unutulmamalıdır. Unutulduğu takdirde HTML sayfası düzgün görünmeyecektir.

TABLOLAR
Tablolar, HTML sayfasında listeler ve şablonlar hazırlamak dışında, resimleri ve metinleri sayfa içerisinde istenilen bölgelere yerleştirmek ve bunun gibi bir çok alanda kullanılırlar. HTML 3.2 ile birlikte pek çok yeni özelliğe kavuşan ve daha görsel hale getirilen tablolar konusunu iyi öğrenen bir webmaster, hayalgücü ile tasarladığı "TÜM" sayfaları tablolar yardımı ile oluşturabilir.
<TR>,<TD>,<TH> ve bunları kapatma taglarıyla birlikte kullanılan <TABLE...> tag'ının genel kullanımı şöyledir:

<TABLE BORDER=X CELLPADDING=X CELLSPACING=X WIDTH=[% veya X] HEIGHT=[% veya X] BGCOLOR=X BACKGROUND="X">

BORDER değişkenine verilecek 0 veya daha üstü bir değer tablonun kalınlığını belirler. CELLPADDING değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi, CELLSPACING ise hücreler arasındaki mesafeyi belirler.
WIDTH ve HEIGHT değişkenleri bir yüzde değeri veya bir sayı olabilir. WIDTH=590 değeri verildiğinde 640*480 çözünürlükte ekranın tüm genişliğini kaplayacak bir tablo oluşturulur. WIDTH=%50 değerini verildiğinizde ise Web tarayıcınız o tablonun her zaman ekran genişliğinin yarısını kaplamasını sağlar.
<TABLE> tag'ının içerisinde kullanılan BGCOLOR değişkeni tablonun fon rengini tayin eder. X değeri geçen aylarda değindiğimiz HEX kodlarından (#FFFF00) veya renk isimlerinden (white, olive...) biri olmalıdır. Tablonuz daha canlı ve profesyonel görünsün istiyorsanız, arka fonuna bir GIF veya JPG resmini de BACKGROUND ekini kullanarak döşetebilirsiniz.
Gelelim tablonun oluşturulmasına. Genel prensip şudur: <TABLE> tag'ıyla tabloya başladıktan sonra her satırı oluşturmak için <TR>, her sütunu oluşturmak için ise <TD> tag'ını kullanmalısınız. Aman bu tagları kullanıyorsanız her satırın sonuna </TR> ve her sütunun sonuna </TD> tag'larının koymayı unutmayın!
Bir diğer durum da, herhangi bir hücrenin yanındaki iki ya da daha çok hücreyi enine ya da boyuna doğru içine almasıdır ki bu işlemi yapmak için <TD [COLSPAN=X, ROWSPAN=X]> veya <TR [COLSPAN=X, ROWSPAN=X]> ekleri kullanılır. Örneğin 2 satır ve 2 sütunlu 1.tablonun oluşturulması için aşağıdaki kodlara ihtiyaç vardır, bu kodlar aynı zamanda COLSPAN ve ROWSPAN eklerini de anlatmaktadır.

<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=3>

<TR><TH COLSPAN=2> 

Tablo Örneği

</TR></TD><TR><TD>
deneme1
</TD><TD> 
deneme2
</TR></TD><TR><TD>
deneme3
</TD><TD> 
deneme4
</TD></TR></TABLE> 

Eğer renkli tablolar elde etmek isteseydik <TABLE .... ifadesinin yanına BGCOLOR="#FFFF80", <TD.. ifadesinin yanına ise BGCOLOR="#000080" eklerini girmeniz gerekecekti.

SAYFA İÇİNDE AÇIKLAMA YAPMAK
Her programlama dilinde programcının hatırlatma veya açıklama yapabilmesi için gerekli bir komut vardır, HTML standartlarını koyanlar bunu da unutmamış ve HTML sayfalarına açıklama koyabilmek için bir yol bulmuşlar. Bir sayfaya açıklama koymak ya da belirli bir aralıkta kalan HTML kodlarını geçici olarak iptal etmek için ünlem işareti kullanılır. Aşağıdaki ilk satır bir açıklama satırıdır ve HTML dokümanı içerisinde görünmeyecektir, ikinci satır ise bir komutu iptal etmek için kullanılmıştır.




FRAME KULLANMAK
Frame'ler web tarayıcınızın penceresini birbirine yapışık parçalara ayırarak her bir parçanın ayrı bir içerik sergilemesine izin verir. Yüklenen basit bir sayfayla yapılan pencereyi ayırma işlemi, her pencere için HTML standartlarına uygun bir sayfanın yüklenmesiyle tamamlanır. Frame'ler bulunan bir sayfa oluşturmak için herhangi bir HTML editörüne gerek yoktur. Tek ihtiyacınız olan basit bir metin editörü ve kafanızda tasarladığınız çerçeve stilini gerçekleştirmek için biraz düşünmek.

Sayfanızda frame uygulamasına geçmeden önce hemen bu özelliğinin HTML 3.0 standartlarında bulunmadığını fakat en yeni web tarayıcıları tarafından desteklendiğini belirtelim. Netscape Navigator'ın 2.0 ve Microsoft Internet Explorer'ın 3.0 ve daha üstü sürümleri frameleri destekliyor.

Frame'leri destekleyen bir sayfa oluşturuyorsanız mutlaka sayfanın, bu özelliği desteklemeyen web tarayıcıları için bir alternatifini oluşturmalısınız, aksi takdirde sitenize terminal ekranından veya eski bir web tarayıcıyla bağlanan kimseler içerikten faydalanamayacak ve sayfa ziyaret sayınıza katkıda bulunmayacaklardır (!) Frame'lere nasıl alternatif oluşturulduğunu yazımızın ilerki bölümlerinde anlatacağız. Başlamadan önce herkesin yaptığı gibi frame'ler konusunda 1-2 örnek verip sadece TAG'ları açıklamayacağımızı belirtelim, aynı zamanda kendi özgün çerçevelerinizi oluşturmanız için işin mantığına da değineceğiz.

Frame'ler ne zaman kullanılmalıdır?

Hiç gereği olmadığı halde web sayfanızda frame'lerden faydalanmak hem sayfanızın işlevselliğini yok edip kullanıcının kafasını karıştıracak hem de sayfanın yüklenmesini zorlayacaktır, web tarayıcınız bir web sayfasının yüklenmesi için sunucudan komutlar aldığından en az iki sayfadan oluşacak çerçeveli bir sayfayı yüklemek için ana sayfa da içinde olmak üzere üç sayfa için ayrı ayrı sunucudan bilgi alacaktır. Sayfa içerisinde, yüklenmesi uzun süre alacak, büyük bir resim, menü gibi değişmeyen öğeleri her seferinde tekrar yüklememek için bu bölümler ayrı bir pencere olarak tanımlanabilir.

Sayfa içerisinde ilişkilendirmeler oluşturmak, sayfanın değişik alanlarına tıklandığında bağımsız bir yerde bir içerik oluşturmak frame'ler sayesinde çok kolaydır.

Nasıl oluyor da oluyor?

Frame'lere sahip bir sayfa oluşturmaya başlamadan önce web tarayıcılarında bu teknolojiyi destekleyen iki rakip firmanın ortak olarak kullandığı komutları açıklayalım.

<FRAMESET>

Bu tag, yatay ve dikey pencerelerin tanımına "başlamak" için kullanılır. Tag ile birlikte kullanılabilecek iki adet takı vardır ki bu takılar oluţturulacak pencerelerin cinsini belirler.

COL takısı dikey nitelikte ROW takısı yatay nitelikte bir pencere oluşturmak için kullanılır.

<FRAMESET COL="100,50,*> komutu bundan sonra üç sayfanın tanımı yapılacağını, bu sayfaların kolon nitelikli olacağını, bunlardan iki tanesinin sabit uzunluklu, üçüncüsünün uzunluğunun ise değişebilir olduğunu gösterir. Tırnak içinde sabit bir sayı ve yıldız kullanabileceğiniz gibi "%30,%70" bir yüzde değer de belirtebilirsiniz, bu durumda frame'in boyutu sayfanın boyutu göz önüne alınarak otomatik olarak ayarlanır. <FRAMESET> takısı </FRAMESET> ile bitirilmeden önce iç içe kullanılarak komplike pencere tanımları yapmanıza izin verir.

<FRAME>

Bu tag ise <frameset> ile başlayacağınızı belirttiğiniz sayfaları oluşturmakta kullanılır ve sayfanın genel yapısını belirler. <frame> takısının iki web tarayıcısının da desteklediği 6 adet takısı vardır.

SRC="URL/DOSYA_ADI" Pencere içerisine yüklenecek dosyayı seçmek için kullanılır. Bu değer sunucu içinde herhangi bir dosya olduğu gibi değişik bir Internet adresi de içerebilir.

NAME="FRAME_ADI" Daha sonra sayfayı çağırmak için referans olarak kullanılacak isim bu değere atanmalıdır.

MARGINWIDTH="DEĞER" Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler.

MARGINHEIGHT="DEĞER " Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler.

SCROLL=AUTO/YES/NO Kaydırma çubuklarının durumunu belirler.

NORESIZE Pencerenin fare yardımıyla genişletilip daraltılamamasını sağlar.

<NOFRAME>

Bu takı iki çerçeveyi oluşturacak sayfada kullanılır ve frame'leri desteklemeyen web tarayıcısında sayfanın görünümünü oluşturur. Web tasarımcısı <noframe> ve </noframe> takıları arasına <HTML>, <BODY> tag'larını barındıran tam bir HTML sayfası girebilir.

Son olarak frame'leri tanımlayan sayfada bulunmayan fakat frame'in tanımladığı sayfaya koyabileceğiniz bir tag daha vardır. <BASE TARGET="pencere"> tagı o pencere içerisinden bir link'e tıklandığında kaynağın hangi pencerede açılacağını belirler.

Nelere dikkat etmeli ?

Frame'lerin kullanımını ve komutlarını anlatırken dikkat etmeniz gereken unsurların bir kısmındanbahsettik, ama yine de Internet üzerinde rastladığımız sayfalarda sık yapılan hataları belirtelim. Böylece siz de ilk deneyimlerinizde bu hatalardan kaçınabilirsiniz.

Frame içindeki bir sayfada dışarıya bir referans bulunuyorsa <A HREF="… ile başlattığınız tag içinde mutlaka TARGET="_TOP" veya TARGET="_BLANK" takılarını kullanın. Bunu yapmazsanız frame'li sayfanız içinda başka bir frame'li sayfa açılması veya küçücük pencerenize sığmayacak bir sitenin yüklenmesi kaçınılmaz olur.

Frame'inizi tasarlarken kaydırma çubuklarının otomatik olmasına özen gösterin. Sayfanın içerisinde yeterince içerik olmasa bile sayfa kenarlarında kaydırma çubuklarının bulunması kullanıcıya rahatsızlık verecektir.

Frame'lerin içeriğini her zaman iyi kontrol edin. Çerçevelerden birini menü olarak kullanıyorsanız o çerçeve içerisinde yanlışlıkla başka bir sayfanın açılmasına mahal vermeyin.

Pencerelerden bir tanesini "kaydırılamaz" olarak atıyorsanız ya bu frame'in genişliğini ve yüksekliğini sabit olarak atayın ya da sayfayı 640*480 çözünürlüğe uygun olarak tasarlayın. Bunu uygulamazsanız

640*480 çözünürlükte frame'in içeriğinin bir kısmının görülmesi kullanıcı ne yaparsa yapsın mümkün olmayacaktır.

Değişik çerçeve stilleri için kaynak kodlar

<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAME SRC="2.htm" NAME="2">
</FRAMESET>

---------------

<FRAMESET ROWS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAME SRC="2.htm" NAME="2">
</FRAMESET>

--------------------------

<FRAMESET ROWS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET COLS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
</FRAMESET>
</FRAMESET>

---------------

<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
</FRAMESET>
</FRAMESET>

-------------

<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
<FRAME SRC="4.htm" NAME="3">
</FRAMESET>
</FRAMESET>
--------------------------------------------------------------
KAYAN YAZILAR
KAYAN, yuvarlanan, ters parende atarak ekrandan kaybolan yazılar insanların ilgisini daha çok çeker. Microsoft bunu düşünerek, benim vatandaşlarım da kayan yazılardan faydalanabilsin demiş ve <MARQUEE> tag'ını web tarayıcısının yorumlayıcısına eklemiş... Netscape ise Explorer 2.0'dan beri var olan bu tag'ı web tarayıcısına koymayı düşünmüyor. Yine de tag'ı kullandığınızda içerisinde var olan yazıların Netscape kullanıcıları tarafından 'normal yazı' olarak görüneceğini belirtelim.

<MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n>

BEHAVIOR=tip: Metnin ekranda nasıl hareket edeceğini belirten bu ek SCROLL, SLIDE, ALTERNATE değerlerinden birini alabilir. Ek kullanılmadığında SCROLL değeri varsayılan olarak kabul edilir ve yazı, sınırın bir köşesinden belirerek diğer köşeden kayarak kaybolur. SLIDE eki ise yazının bir köşeden başlayarak diğer köşede donmasını sağlar. Metnin iki köşe arasında gidip gelmesi ise ALTERNATE ekiyle gerçekleştirilebilir.

BGCOLOR=renk: Kayan yazının arkasındaki rengi belirler. ' renk' değeri 16'lık sayı düzeninde bir değer olabileceği gibi ' red' ,' blue' gibi renk isimlerinden biri de olabilir.

DIRECTION=yön: Yazının kayma yönünü belirler. DIRECTION eki, LEFT veya RIGHT değerlerinden birini almalıdır. LEFT değeri yazının soldan sağa doğru kaymasını, RIGHT ise bunun tersini sağlar.

HEIGHT=n: Kayan yazının sınırlarından ' yüksekliği' sağlar. N değeri sabit bir piksel sayısı olduğu gibi aynı zamanda bir pencere oranı olabilir. Oran değeri % işareti ile belirtilmelidir.

HSPACE=n: Kayan yazının sınırlara ne oranda yaklaşacağını belirler. Bu ek özellikle arka plana bir renk verildiğinde daha da belirginleşir.

LOOP=n: Yazıya verilen hareketin sınırlar içerisinde kaç kere tekrarlanacağını belirler. N değerine ' -1' veya ' INFINITE' verildiğinde hareket sınırsız olarak tekrarlanır. Tip olarak ' SLIDE' kullanıldığında bu işlem tek bir kez gerçekleşeceğinden LOOP ekini kullanmaya gerek yoktur.

SCROLLAMOUNT, Kayan yazının bir defada kaç piksel hareket edeceğini, SCROLLDELAY ise yazının her bir hareketi arasında kaç milisaniye bekleyeceğini belirler. Yazının üst ve alt sınırdan ne kadar uzakta kalacağını VSPACE ile, yazının kayacağı toplam uzunluğu ise WIDTH ile ayarlayabilirsiniz. WIDTH değeri HEIGHT gibi bir yüzde alabilir.

Örnek Kullanım:
<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200>Bu kayan bir yazıdır... </MARQUEE>

Örneğin Görünümü:
Bu kayan bir yazıdır...

Multimedia Öğeleri
HTML etkileşimli ve çarpıcı dokümanlar oluşturmak için mükemmel bir ortamdır. Ses ve video görüntülerinin HTML sayfalarında kullanılabilmesi bu ortamı daha da çekici bir konuma getirir.

Bu öğeleri kullanmak sadece 2-3 tane kilit komut bağlı. İşte bunları veriyoruz;
Seçiminize göre geri planda WAV, .AU veya MIDI ses dosyalarından birini çalmak için Internet Explorer'da BGSOUND tag'ını kullanabilirsiniz.

<BGSOUND SRC=' deneme.mid' LOOP=5>

komutunu kullandığınızda ' deneme.mid' adlı MIDI dosyası sayfa yüklendiğinde 5 defa tekrarlanacak ve sonra duracaktır. Bir AVI veya MOV dosyasını oynatmak için ise yine sadece Explorer'da işe yarayacak DYNSRC komutunu kullanmalısınız.

Deneme.Avi adlı bir video görüntüsünü ekrana yerleştirmek için aşağıdaki gibi bir komut kullanmalısınız. Deneme.Gif dosyası görüntü yüklenene kadar sayfada yer kaplayacaktır.

<IMG DYNSRC=' deneme.avi' SRC=' deneme.gif' LOOP=INFINITE >

Daha önce de belirttiğimiz gibi yukarıdaki komutlar sadece Explorer'da işe yarıyor. Peki çokluortam dosyaları
Netscape'de nasıl gösterilir? Onunda yolu var fakat görsel açıdan Explorer'daki kadar başarılı olmuyor.

EMBED komutuyla Netscape penceresine ' gömülen' dosyalar beraberinde çerçeve kaydırma çubuğunu da birlikte getiriyor. Yine de öğrenmek isteyenler için komutumuz şöyle:

<EMBED SRC=' deneme.avi' >

İlkel Bir 'Client Pull'
POINTCAST'i hepiniz bilirsiniz. Kullanıcı bu servisin sağladığı arabirimde bir takım seçenekleri işaretler ve bu seçenekler doğrultusunda masaüstüne bilgiler gelir. <META> tag'ının yaptığı iş de bundan pek farklı değildir. Kullanıcıya ulaşan web sayfası bu tag sayesinde kendini belirli aralıklarla tekrar yükler veya kullanıcıyı başka bir web sayfasına ışınlar. ' Sayfayı isteme' işi kullanıcı tarafından sunucuya yollandığından bu komut ' client pull' işlemini başarıyor diyebiliriz. Bu tag ile birlikte aşağıdaki ekler kullanılmaktadır.

HTTP-EQUIV=' REFRESH' : Saniyelerle belirlenen aralıklarla dokümanın kullanıcıya tekrar ulaşmasını sağlar.

CONTENT=' n; URL=url' : Web tarayıcıya sayfanın ne aralıklarla tekrar yükleneceğini belirler. CONTENT eki içinde ayrıca URL ifadesi kullanılmışsa belirtilen zaman aralığından sonra hangi sayfanın yükleneceği de belirtilebilir.

Aşağıda, mutlaka <HEAD> - </HEAD> aralığında kullanılması gereken <META> tag'ının iki örneğini veriyoruz. 1. örnek, bulunulan sayfayı her iki saniyede bir tekrar yükleyecek, 2. örnek ise açıldıktan 5 saniye sonra www.pcmagazine. com.tr adresli PC Magazine Online'ın web sitesine bağlanacaktır.

ÖRNEK - 1
<HTML>
<HEAD>
<META HTTP-EQUIV=' REFRESH' CONTENT=2>
<TITLE>Tekrar Yükleme</TITLE>
</HEAD>
<P>Bu sayfa 2 saniyede bir tekrar yüklenecektir.
</HTML>

--------------------------------------------------------------------------------

ÖRNEK - 2
<HTML>
<HEAD>
<META HTTP-EQUIV=' REFRESH' CONTENT=' 5; URL=http://www.pcmagazine.com.tr' >
<TITLE>İkinci Dokümanı Yükle...</TITLE>
</HEAD>
<BODY>
<P>Bu sayfa 5 saniye sonra PC Magazine Online'ın web sitesine bağlanacaktır.
</BODY>
</HTML>

--------------------------------------------------------------------------------

RASTGELE İŞLEMLER
WEB dersanesi sayfalarımızda zaman zaman faydalı Java Script kodları bulabilirsiniz. İşte bunlardan bir tanesi; kodlarımız bulunulan saniyeyi okuyarak her saniyede değişik bir Murphy kuralını ekrana getiriyor. ' AR' değişkeniyle kaç adet kural olduğu tanımlandıktan sonra, kural Getmessge fonksiyonuna atanıyor ve fonksiyon <BODY...> tag'ının içerisinden çağrılıyor. Kendi vecizelerinizi bu script'e eklemek için öncelikle ' Array(3)' değerini daha sonra ' ar[sec % 4])' değerini yükselmeli ve vecizeyi yeni bir ' ar[x] =' satırına eklemelisiniz.

<HTML>
<HEAD>
<TITLE>Rastgele Vecizeler</TITLE>
<SCRIPT LANGUAGE=' JavaScript' >

</SCRIPT>
</HEAD>
<BODY onLoad=' getMessage()' >
</BODY>
</HTML>

TRANSPARAN GİF’ LER
Internet üzerinde gezinirken, resimlerin arka plan ve arka renkler ile uyum içinde olduğunu, resmin kare olmasına rağmen arka planın resmin boşluklarından görünebildiğine şahit olursunuz. Eğer web sayfanızda bir resim kullanıyor ve resmin boş taraflarından arkaplanın görünmemesinden ve resmin sayfa üzerinde yama gibi görünmesinden yakınıyorsanız bu bölümü dikkatle okuyun.

Bu bölümde resmi transparan hale getirirken en çok kullanılan shareware grafik editörlerinden biri olan Paint Shop Pro'nun 3.12 sürümünü kullanacağız. PSP 4.0 sahipleri de yaptıklarımızı aynen kendi programlarında uygulayabilirler. Öncelikle Paint Shop'u açın ve transparan yapmak istediğiniz GIF dosyasını yükleyin, unutmayın transparan dosyalar sadece GIF formatında ve 256 renkte olabilirler.
"Select" araç kutusundan aşağıdaki resimde de seçili olan "Color Picker"ı seçin ve resim üzerinde transparan yapmak istediğiniz, yani yaprak ve dünyanın dışında kalan alanın üzerine götürün. Fareyi bu bölgeden ayırmadan durum çubuğunun sağ bölmesinde I: değerinin yanındaki değeri aklınızın bir kenarına kaydedin.

"File" menüsünden "Save As..." komutunu çalıştırın ve format olarak GIF89a - Interlaced'i seçin. Diyalog kutusunun sağ tarafında bulunan Options butonuna bastığınızda GIF Transparency Options Diyalog kutusu karşınıza gelecektir. Bu kutucukta "Set Transparency Value to:" seçeneğini işaretleyip karşısındaki metin kutusuna "I:"nın karşısında okuduğunuz değeri (yani yalnız bu resim için 215'i) yazarsanız GIF dosyasının
renk seçici ile seçtiğiniz rengi transparan olacak böylece arkaplanlar bu bölgeden görülebilecektir. Resimler her zaman başarılı olarak transparan yapılamazlar, bunun sebebi bazen resmin istemediğiniz alanlarında transparan yaptığınız renge ait parçacıkların kalmasıdır. Bunu önlemek için resmi yüksek renge getirdikten sonra resim ile alakası olmayan bir renk seçip transparan yapmak istediğiniz alanı bu renk ile boyamalı ve resmi tekrar 256 renge getirerek bu rengin indeksini okuyup transparan hale getirmelisiniz. Bir transparan GIF'in hikayesi kısaca böyle, "Benim işim gücüm var, bu kadar işle uğraşamam" diyorsanız, Internet üzerinde yüzlerce GIF dönüştürme seti bulabilirsiniz, hızlı olmalarına rağmen insan elinin yerini tutmaz ama olsun.

JPEG Mİ GIF Mİ?
Web sayfalarında resim kullanırken en çok sorulan sorulardan biri şudur:
' Madem JPEG dosyaları aynı ölçülerdeki GIF'lerden daha az yer tutuyor neden GIF dosyalarını kullanayım?'
Bu sorunun cevabı çok basit, GIF dosyaları sayfa üzerinde JPEG dosyalarından daha keskin ve canlı görünürler, bunun sebebi JPEG formatının ' kayıplı' bir grafik formatı olmasıdır. JPEG dosyalarının kullanılması ayrıca, sade beyaz alanlarda yüksek renk çözünürlüğünde görülmeyen fakat 256 renkte göze batan küçük noktacıkların oluşmasına neden olur. JPEG formatı, daha çok büyük ve az bir beyaz alana sahip grafik dosyaları üzerine uygulanmalıdır.

Bu konu hakkında daha çok bilgi için Soner Demircilerin hazırladığı "Web Sayfalarında Grafik Kullanımı" adlı yazıyı okuyabilirsiniz.

Web Sayfalarında Grafik Kullanımı

Başarılı bir Web sitesine sahip olmak için sayfa tasarımını iyi bilmeniz, kısacası sanatsal görüş açısına sahip olmanız gerekir. İşte bu işin püf noktaları...

PEK çok şirket ve kurum Internet'te yeralmak için yarışıyor. Rakiplerinin Web sitelerinin olması kaygısı, modaya uymak gibi nedenlerle kendi Web sitelerini hazırlıyorlar veya hazırlatıyorlar. Şundan emin olun ki, bir süre sonra şöyle diyecekler: ' İyi, güzel bir Web sitemiz var ama bunun bize getirisi ne oldu? Pek uğrayan yok. bir Web adresi edinmek için ödediğimiz paraya değiyor mu?

Yoksa sadece kartvizitlerimize bir Web adresi eklemek için mi yaptık tüm bunları?' Bu sorular neden sorulur? Çünkü Web üzerine bir stratejiniz yoktur, amaçlar belirlenmemeştir, siteniz pek kimsenin ilgisini çekmeyen kuru bilgiyle doludur, sektördeki gelişmeler yansıtılmıyordur, grafik ara yüzey değiştirilmiyordur, web teknolojisindeki gelişmeler izlenmiyordur. Bu tür pek çok neden sayabiliriz.

Kısacası, kullanıcının bir daha buraya uğramaması için herşey yapılmıştır. Web tasarımı şu anda teknik bir konu. Çoğunlukla servis sağlayıcıların kendi içlerinde kurdukları birimler aracılığıyla yürütülüyor ve genel olarak HTML bilgisi, biraz da Photoshop yeterli görünüyor. Kendi Web sayfalarını tasarlayan amatör kullanıcılar ise her ay yayınladığımız Web Okulu sayfalarından ve diğer kaynaklardan edindikleri, HTML ve grafik programları konusundaki bilgileri çerçevesinde uyguluyorlar. Bu ay bunun dışına çıkalım ve başarılı bir Web site si hazırlamak için profesyonellere yönelik püf noktaları verelim istedik.

KAĞIT ÜZERİNDE HERŞEY BİTMİŞ OLSUN
WEB sitesi tasarımı klasik sayfa tasarımından oldukça farklıdır. Artık A4 sayfa, santimetre, mega bytelar büyüklüğünde TIFF dosyaları, CMYK modu yoktur. Bunların yerini yüklenme zamanı, bant genişliği, transparan GIF, piksel, Java gibi kavramlar almıştır. Ölçütler ve öncelikler değişmiştir. Bu ortamı anlayabilmek için çok fazla site gezmek gerekir. Ancak belli bir doygunluğa ve deneyime erişince iyi bir site tasarlanabilir. İşte size profesyonel bir Web sitesi tasarımına yönelik ipuçları:

• Çok iyi bulduğunuz siteleri ayrıntılı olarak gezin, neden başarılı olduğunu anlamaya çalışın. Aynı biçimde çok kötü hazırlanmış siteleri de dolaşarak buralardan nelerden kaçınmak gerektiği görülebilir.

• Profesyonel Web tasarımı büyük bir ekibin işidir. Editör, grafiker, yönetmen, animatör, programcı, web master gibi farklı niteliklere sahip insanların ortak çalışmasıyla iyi bir site hazırlanabilir. Yalnızca uyum yetmez, bunun ötesinde bu kişilerin tek tek diğer alanlarda da bir miktar bilgiye sahip olmaları gerekir. Programcının resim formatları üzerine ya da içeriğin zenginleştirilmesi üzerine bilgisi ekip çalışmasını daha verimli kılar. Aynı biçimde editörün de yeni teknolojiler konusundaki bilgisi, içeriğin sunumu konusunda daha zengin seçenekler sunar.

• Ekipte hangi durumda olursanız olun diğer konularda yeterli bilgiye sahip olmaya çalışın. Bir Web sitesi kurmaya girişmeden önce ayrıntılı bir haritasını çıkarın. Hangi sayfada hangi bilgilerin yeralacağı burada görülsün. Yine grafik olarak da hangi bölümün nasıl olacağı burada yer alsın. Her sayfa için bir ' storyboard' hazırlayın, bu size ya da operatöre ne yapacağını açık olarak anlatsın. Bundan sonrası sizin grafik programlardaki becerinize kalmıştır.

• Bazen büyükçe bir sitenin içinde gezerken hala aynı sitenin içinde olup olmadığımızı bilemeyiz, kendi içinde bütünlüğü yoktur. Alt bölümlerde her biri ayrı ellerden çıkmış gibidir. Sürekliliği sağlamak için her sayfada tekrarlanan standart bir gezinti çubuğu (' navigasyon bar' ) ya da standart bir zemin resmini kullanmak kısmi bir çözümdür. Renk, font ve resim kullanımı bu konuda yardımcı olabilir. Bu öğelerin başarılı bir biçimde uygulanması hem sürekliliği sağlarken, hem de değişik tasarımlar yapmanıza olanak verir.

• Tüm sayfaların aynı biçime sahip olması oldukça sıkıcı bir durumdur. Sitenin ruhunu koruyarak her sayfada kullanıcıyı şaşırtacak, ilgisini çekecek değişiklikler yapmak gerekir.

• Kullanıcıların büyük bölümü AltaVista, Yahoo gibi arama makinaları yardımıyla sitenize gelmektedir, ve büyük olasılıkla ön sayfadada değil, aradıkları bilginin olduğu alt sayfalardan birindedirler. Burada sorun nerede olduğunu ve site içerisinde nerelere gidebileceğini açık bir biçimde göstermektir. Bunun için en basit yöntem bir gezinti çubuğunu her alt sayfaya koymaktır. Çeşitli Web sitelerinde sık sık gördüğümüz, sayfada yatay ya da dikey olarak kullanılan alt bölümlerin yeraldığı bu çubuklar, sitenin içeriği hakkında genel bir fikir vermektedir. Yine bu çubuklar üzerinde, içinde bulunan alt bölüm grafiksel olarak diğerlerinden farklı kılınırsa kullanıcı hangi alt bölümde olduğunu anlayabilecektir.
• Gezinti çubuğu simgeler ile daha kullanışlı olabilir veya dilden bağımsız bir anlatım biçimine sahip olabilir. Ancak her konuda anlamı herkesçe açık simgeler yaratılamayabilir. Bu durumda zorlayarak simge oluşturmak gereksizdir; ayrıca yanlış anlamaya yol açabilir.