HTML kodlari arsivi html sitenizi kurun

devidoff

Katılımcı Üye
22 Ara 2006
458
14
Turquie
Tasarımın Temelleri
Internet'te sörf yapmakla yetinmeyin. Bir Web sunucusunda yer edinme ve kendi Web sayfalarınızı tasarlama şansınız var. İşte bu işin sırları..



INTERNET açılalı beri* PC Magazine Online'a koyduğumuz Misafir Defteri'ne bıraktığınız mesajlar* kendi Web sitenizi tasarlamaya ne kadar hevesli olduğunuzu açıkça gösteriyor. Bizi aradınız* mesajlar bıraktınız* deneyimlerimizden yararlanarak kendi Web sayfalarınızı tasarlamakta yardımcı olacak bilgiler istediniz.

İşte biz de isteklerinizi kırmıyor ve bu sayıdan itibaren bir Internet gezgininin kendi sayfalarını tasarlayarak Web'de nasıl aktif rol alabileceğini açıklayan yazılarımıza başlıyoruz.

Bir Web sayfası tasarlamanın yolu HTML dilini bilmekten geçiyor. Elbette Microsoft'un Ofis programları için geliştirdiği Internet Asistanları* Web sayfası tasarlamak için onlarca pratik program var* ancak HTML kodlarını bilmiyorsanız* herhangi bir tasarım problemi ile karşılaşınca takılıp kalabilirsiniz. Tabii* Java* Java Script* ActiveX* PERL gibi ileri seviye Web programcılığına yönelik araçlar da var.

Bu sayfalarda temelden başlayarak hepsi hakkında bilgiler vereceğiz. Bunların arasında grafik tasarımlarınızı verimli ve etkin bir biçimde yapmanızı* sayfalarınıza erişim hızınızı yükseltmek için grafikleri küçültmenizi sağlayacak püf noktaları da olacak. HTML kodlarına ve diğer teknik detaylara girmeden önce* Internet üzerinde bir Web sayfası nasıl edineceğinizi anlatarak yazımıza başlamak istiyoruz.

WEB'DE NASIL YER ALIRIM?
İNSANIN dünyada bir mekanı ve World Wide Web'de benim diyeceği* küçük de olsa bir alanı olmalı. Bunu sağlamak için iki seçeneğiniz var. Bunlardan birincisi başka birine (muhtemelen bir ISS'ye ait) Web sunucusundan belirli bir sabit disk alanı kiralamak. Türkiye'deki servis sağlayıcılar bu tür hizmetler veriyor. Hatta bazı ISS'lerde Internet hesabı açtırdığınızda size küçük de olsa ücretsiz bir Web sayfası alanı sağlıyorlar. Ama hazırlayacağınız Web sayfalarını ticari amaçlarla kullanacaksanız* örneğin firmanızın ürünlerini Web sayfalarınızda tanıtmak ve pazarlamak istiyorsanız belirli bir ücret ödemek zorundasınız.

İkinci seçenek yine genelde firmalara yönelik. Yani* Türk Telekom'a başvurup bir kiralık hat (leased line) aracılığı ile Web sayfalarınızı kendi Web sunucunuz üzerinden yayınlamak veya Web sunucunuzu bir ISS'ye yerleştirip buradan yayın yapmak. Kuşkusuz bu seçenekler içinde bir ISS'nin sunucusundan - kiraladığınız yerin MB cinsinden büyüklüğüne göre ücret ödeyerek - yer kiralamak en ucuzu. Bunun karşılığında Web sayfalarınıza karşılık gelecek bir Web adresi (URL) ediniyorsunuz. Bu adres ISS'nizin ismi ile başlayıp kendi sitenizin ismi ile devam edebileceği gibi (örneğin http://www.iss.com.tr/benimsitem)* ISS'nizle yaptığınız anlaşmaya göre tamamen kendi verdiğiniz isim de olabilir

(örneğin http://www.benimsitem.com.tr)/http://www.benimsitem.com.tr)[/URL].

Elbette ISS'ler belirli bir ücret karşılığı Web sayfalarınızı tasarlayabilirler* ancak burada amacımız kendi Web sayfalarınızı tasarlamayı öğretmek olduğuna göre sayfalarınızı kendinizin tasarlayacağınızı ve ISS'nizin sunucusuna yaptığınız anlaşmaya göre belirli zamanlarda modem ile ' upload' edeceğinizi varsayıyoruz. Buraya kadar ticari anlamda bir Web sitesi kurmak için neler yapabileceğinizi açıkladık* ancak yazımız daha çok amatörlere yönelik olduğu için size ücretsiz alternatiflerden haberdar etmek de boynumuzun borcu. Türkiye'de bazı ISS'lerin Internet erişimi için hesap açtırdığınızda size ücretsiz bir Web sayfası alanı sağladıklarını söylemiştik. Yurtdışında hesabı olsun olmasın herkese Web sayfalarını yayınlamak için ücretsiz belirli bir alan açan ISS'ler de var.

Örneğin ABD'de faaliyet gösteren Geocities ( http://www.geocities.com/homestead/) herkese 2MB'lık bir Web sayfası alanı açıyor. Internet'te sörf yaparken kuşkusuz bu tür başka promosyonlarla da karşılaşabilirsiniz. Hazırladığınız sayfaları bir FTP client programı ile (örneğin ws_ftp) bu sitelere ' upload' edebiliyorsunuz. Yine de bu hizmetin sürekliliği konusunda emin olamazsınız. Bu yüzden Web sunucusunda yer açan bir ISS bulmanızı öneririz.

WEB SAYFASI TASARIMIN TEMELLERİ
EVET* nihayet bir Web sunucusunda kendinize ait bir alan elde ettiniz ve Web aracılığı ile başkalarına söyleyecek çok şeyiniz var. Peki bir Web sayfasını tasarlamaya nereden başlamalı? Öğrenmeniz gereken temel dilin HTML (Hypertext Mark-up Language) olduğunu belirtmiştik. Bu dil aslında* normal metni* hypertext adı verilen ve web browser'larla görüntülenmeye uygun metin haline dönüştüren bir kodlar silsilesi. Diğer bir deyişle HTML* basit bir belgeyi alıp içine bu belgenin sayfa düzeni ve metin biçimleri ile ilgili bilgiler yerleştirmenin ve bu belgeyi diğer metin (ve/veya grafik) içerikli belgelerle ilişkilendirmenin yoludur.

Web'de yayınlanmak üzere belgeler hazırlarken* HTML kodları ile metinlerinize vereceğiniz biçimler belirteç (İngilizce adı ile mark-up veya tag) adını taşır. Bunlar metnin çeşitli yerlerinde* ' <' ve ' >' şeklindeki parantezlerin arasına yerleştirilen kodlardır. Bunlar arasında diğer Internet sayfalarına (veya URL'lere) geçişi sağlayan ‘link'ler de bulunabilir.HTML bir dil olarak adlandırılsa da* HTML belgelerinin (kısaca Web sayfalarının) hazırlanması klasik bilgisayar dilleri ile programlama yapmaya pek benzemez. Daha çok kelime işlemcilerle çalışmaya benzer. Ancak burada yazıtipi büyüklüğünü ayarlamak* bir metni kalın veya italik yapmak için menü komutlarını kullanmaz* bunları metnin başına ve sonuna koyduğunuz kodlarla belirlersiniz. (WordPerfect ile çalışanlar bunu kolayca anlayacaktır* çünkü bu kelime işlemcide yazdığınız metinlerin biçim kodlarını da Reveal Codes komutu ile görüntüleyebilirsiniz.) Metni ve bu kodları nerede yazacağız diyorsanız* başlangıçta (hatta PC Magazine Online'nın webmaster'larına sorarsanız her zaman) Windows'un Not Defteri fazlasıyla yeterli olacaktır.

Bu kısa girişten sonra bir örnek ile HTML kodlarını kullanmaya başlayalım. Diyelim ki elimizde şöyle bir metin var:

Düşünde bile göremez işler*
Düşlerin gördüğü işleri.
Bu metni HTML kodları ile şöyle yazarsak:

<B>Düşünde</B> bile göremez*
<B>işler</B>*<BR><B>Düşlerin</B> gördüğü <B>işleri</B>.<BR>

Web browser'da aşağıdaki gibi bir görüntü elde ederiz:
Düşünde bile göremez işler*

Düşlerin gördüğü işleri.

Bu örnekte <B> ve </B> belirteçleri Web browser'a aralarındaki metni kalın (bold) göstermesini söyler. <BR> belirteci ise satır başı verilmesi gerektiğini. Bunlar gibi başka pek çok belirteç var ama güzel bir Web sayfası tasarlamak için başlangıçta öğrenmeniz gereken belirteç sayısı 30-40 kadardır. Profesyonelleştikçe yeni belirteçler kullanmaya başlayabilirsiniz.

Bir de yazdıklarınızın düzgün görünmesi için her html dosyasının başında:<html> <head> <title> </title> </head><body>

sonunda:

</body></html>

belirteçlerinin bulunmasına dikkat edin. Bunlar sayfanın başını sonunu belirlemek için gerekli belirteçlerdir. Koymazsanız* Web browser'ınızda metin belirteçleri ile birlikte görünebilir.Bu örnekteki belirteçleri kendiniz denemek istiyorsanız* Not Defteri'ne istediğiniz metni bu belirteçleri kullanarak girin. Belgeye bir isim ve htm soyadını (Windows 95'te html soyadını da kullanabilirsiniz) vererek kaydedin. Sisteminize bir Web browser yüklü ise htm soyadlı bu belgenin üzerine çift tıkladığınızda browser açılacak ve metniniz biçimlendirilmiş haliyle ekrana geelcek.

HAYDİ BİR WEB SAYFASI YAPALIM
HTML dilini öğrenmenin en kolay yolu* deneme yanılma ile web sayfaları hazırlayarak bu sayfaları web tarayıcısı ile kontrol etmek* hataları düzelterek ilerlemektir. Ayrıca bilmediğiniz kodların nasıl kullanıldığını öğrenmek için Internet bağlantınız varsa varolan HTML sayfalarını web tarayıcınızın kaydetme seçeneğini kullanarak sabit diske kaydedip herhangi bir metin editörü kullanarak açıp inceleyebilirsiniz. Şimdi adım adım bir web sayfası hazırlayalım.



1. Adım: Pencere Başlığının* arka planın belirlenmesi ve renkler.

Her web sayfasının bir başlığı olmalıdır. Bu başlık web tarayıcısının başlık çubuğunda görüntülenecektir. Bu iş için <title> tag'ı kullanılır.

<title> ve </title>

tag'ları arasına yazacağınız metin web sayfasının başlığı olarak görüntülenecektir. <title> tag'ı aşağıdaki gibi kullanılır. <title>Bu benim ilk denemem!</title>Web sayfalarının arka planını da istediğiniz gibi ayarlayabilirsiniz. Bu aşamada iki adet seçeneğiniz var. Birincisi boş bir arka plan kullanarak bu arka planın rengini ayarlamak* ikincisi ise bir resim dosyasındaki resmi alıp web sayfasının arka planına ' döşemek'. Bu işlemi aynen Windows 95'in masaüstündeki duvar kağıdına benzetebiliriz. Önce boş bir arka planı renklendirmeyi görelim. Web sayfasının arka planının rengi <body> tag'ını kullanarak değiştirilir. Default arka plan rengi gridir. Arka plan rengini örneğin beyaz yapmak için body tag'ını

<body bgcolor='white'>veya <body bgcolor='#FFFFFF'>

şeklinde kullanabilirsiniz. Birinci seçenekte rengin İngilizce ismi* ikinci seçenekte ise aynı rengin RGB cinsinden renk kodu hexadecimal (onaltılı sayı sistemi) olarak verilmektedir. Eski tarihli browser'lar renk isimlerini algılayamazlar* bu yüzden sayfalarınızda renklerin onaltılı sayı sistemi kodlarını kullanmak daha hayırlıdır. Yan tarafta gördüğünüz tabloda* web sayfalarının arka planlarında kullanılabilecek olan temel renkler isim ve sayı kodu olarak listelenmiştir. Onaltılı sayıların RGB kombinasyonları ile oynayarak istediğiniz rengi web sayfası arka plan rengi olarak belirleyebilirsiniz.

Bir Web sayfasının arka planına bir resim döşeyebilirsiniz. Bu işlem için ilk önce elinizde bir resim dosyası olması gerekir. Web sayfalarında kullanılabilecek bütün resimler JPG veya GIF formatında olmalıdır. Web okulunu hazırlarken elinizde bir resim düzenleme programının olduğunu ve JPG veya GIF formatındaki dosyalarla çalışmayı bildiğinizi varsayıyoruz. Örneğin elimizde arka.gif diye bir resim olsun. Bu resmi web sayfasının arka planına döşemek için yine <body> tag'ını kullanacağız. ARKA.GIF adındaki bir resmi web sayfasının arkasına döşemek için <body> tag'ını aşağıdaki gibi

<body background=' arka.gif'>

kullanmalısınız. Bu aşamada ARKA.GIF dosyasının* HTM dosyası ile aynı klasörde yer alması gereklidir. Örnek bir resim döşemesi aşağıdaki resimde gösterilmiştir. Bu aşamada bir web sayfasının arka planında bir resim döşediğinizde* arka plan rengi kullanmaya gerek kalmadığı gibi bir hisse kapılırsınız* yanılırsınız. Genelde Internet yavaş bir şey olduğu için* çoğu kullanıcı sörf yaparken resimleri kapatma yoluna gidiyorlar. Böyle olunca arka plana döşenmiş resimler görünmeyecek* arka plan rengi de default olarak gri olduğu için sizin hiç düşünmediğiniz bir web sayfası ortaya çıkabilecektir. Bu yüzden size tavsiyemiz* arka plan grafiği kullandığınızda arka planda kullandığınız resme uygun bir arka plan rengini de <body> tag'ının içinde belirtmenizdir. İki belirteç bir tag içerisinde kullanılabilir. Ve resmiler kapatıldığında web tarayıcısı otomatik olarak belirtilen arka plan rengini web sayfasına uygulayacaktır. Sarı içerikli bir arka plan resmi ile kullanılması gereken <body> tag'ı aşağıda gösterilmiştir.

<body background=' arka.gif' bgcolor='#ffff00'>



2. Adım: Web sayfasının metin içeriği.

Web sayfalarında aynen kitap veya dergi sayfalarında olduğu gibi metinler ve resimler kullanılabilir. 2. Adımda web sayfalarında metinlerin kullanımına değineceğiz. Web sayfalarında metinler aynen Word veya benzeri bir kelime işlemci programda olduğu gibi bold* italik vs.. şeklinde formatlanabilir* font tipi* rengi ve boyutu ayarlanabilir. Web sayfasının içerisine yazdığınız metin web tarayıcısının genişliği boyunca yazılır* artan kısım otomatik olarak alt satıra atılır. Örneğin aşağıdaki gibi bir metnimiz olsun.

Merhaba. Bu benim ilk web sayfası denemem. Yazdığım metni bold* italik* veya altçizgili olarak görüntülemek istiyorum.

Bu metni web sayfasına girdiğinizde aşağıdaki gibi bir ekran görüntüsü ile karşılaşacaksınız. Şimdi bu metni formatlamaya başlayalım. Öncelikle merhaba kısmını büyük yapmak lazım. Bunun için de <hx> tag'ını kullanacağız. Bu tag'da x yerine birden 6'ya kadar numara verebilirsiniz. 1 en büyük boyut* 6 en küçük boyuttur. Denemeyle sabittir* 1 ile 4 arasında rakamlar kullanmak en iyisidir. Şimdi merhaba yazısını büyütmek için onu <h1> tag'ına alalım.

<h1>Merhaba</h1>

Burada* <h1> ile </h1> arasındaki metin* büyültülecektir. Aşağıdaki resimde merhaba tag'ı değişik <hx> boyutlarında kullanılmıştır. Böylece merhaba yazısını istediğimiz gibi büyüttük. <hx> tag'ını kullanırken öğrendiğimiz bir ikinci şey ise metin formatlamasının nasıl yapıldığı. Demek ki* bir tag'ın formatlaması iki tag arasına (<h1> ile açılış* </h1> ile kapanış) aldığımız metne uygulanıyor. Şimdi hızlı bir biçimde diğer metin tag'larını inceleyelelim.

<b> </b> aradaki metni bold (kalın) yapar

<i> </i> aradaki metni italik yapar

<u> </u> aradaki metnin altını çizer

Bu tür metin formatlama tag'ları birbirlerinin içinde kullanılabilirler. Örneğin bir metin parçasını hem bold hem de italik yapmak için <b><i> ..... </i></b>

formatlamasını kullanmak gerekecektir. Özgün metnimize geri dönelim. Bu metinde adı geçen formatlamaları uyguladığımızda HTML sayfamızdaki metin aşağıdaki gibi olacaktır.

<h1>Merhaba. </h1>Bu benim ilk web sayfası denemem. Yazdığım metni <b>bold</b>* <i>italik</i>* veya <u>altçizgili</u> olarak görüntülemek istiyorum.

Böyle bir formatlama yapıldığında elde edilecek olan web sayfası görüntüsü aşağıdaki gibidir. Metin parçalarını web sayfasında görüntülerken paragraf başı ve satır sonunu da elle işaretlemek zorundasınız yoksa metin otomatik olarak alta kaydırılacaktır. Burada karşımıza iki adet tag çıkıyor. Bunlardan birincisi <br>* ikincisi de <p> tag'ı. Birincisi satır sonu* ikincisi ise paragraf başı anlamına geliyor. Söz konusu metinde ' Bu benim ilk web sayfası denemem' yazısından sonra bir satır sonu yani <enter> verelim. Ayrıca paragraf başını denemek için de ' bold* italik* veya altçizgili' metnini yeni bir paragraftan başlatalım. Bu durumda kullanacağımız formatlama aşağıdaki gibi olacaktır. <h1>Merhaba. </h1>Bu benim ilk web sayfası denemem. <br>Yazdığım metni <p><b>bold</b>* <i>italik</i>* veya <u>altçizgili</u> <p>olarak görüntülemek istiyorum.Dikkat ederseniz* <p> yani paragraf başı tag'ının kullanıldığı yerlerde <br> yani satır sonu kullanmıyoruz. Çünkü paragraf başı tag'ı zaten satır sonunu da belirlemektedir. Yukarıdaki örnekte kullanılan tag'lamanın ekranda göstereceği sonuç aşağıdadır. Son olarak HTML sayfalarında enter tuşunu kullanmanın web sayfasının görünümüne bir etkisi olmadığını söyleyelim. Web sayfalarının ekranda görünümünde satır sonları* satır araları ve paragraf başları tamamen tag'lar ile belirlenir. Bu yüzden metin dosyasında enter kullanmanın web sayfasına herhangi bir etkisi yoktur. Ancak web sayfasını düzenlerken her şeyin derli toplu gözükebilmesi için bu tür bir enter'lama yapabilirsiniz. Gelecek sayımızda metin formatlarken renk ve font kullanmayı* <pre> tag'ının ne işe yaradığını* metinlerin bir liste halinde nasıl alt alta sıralanacağını görecek ve web sayfalarında resim kullanımına giriş yapacağız.
---------------------------------------------------------------
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:[email protected]" >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://*/http://*[/URL] mail adresi verirken başına mailto: koymayı unutmayın. Bunu yapmazsanız verdiğiniz www.pcmagazine.com.tr veya www.pcmagazine[/URL]. com.tr adresli PC Magazine Online'ın web sitesine bağlanacaktır.

ÖRNEK - 1
<HTML>
<HEAD>
<**** 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>
<**** 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' >
<!--
function getMessage() {
var ar = new Array(3)
ar[0] = ' Hiç bir iş göründüğü kadar kolay değildir.'
ar[1] = ' Her iş tahmin ettiğinizden çok vakit alır.'
ar[2] = ' Yanlış gitme olasılığı olan her iş yanlış gider.'
ar[3] = ' Bir takım işlerin yanlış gitme olasılığı varsa size en çok zarar verecek olanı yanlış gider.'
var now = new Date()
var sec = now.getSeconds()
alert(' Murphy Kanunu:\r' + ar[sec % 4])
}
//-->
</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.

İÇERİĞE UYGUN TASARIM
• İÇERİK çok sık güncellenecekse buna uygun tasarım yapın. Yeni bir alt bölümü* resmi* metni* ' link'i ekleyip çıkarması son derece kolay olsun. Ön sayfanın tek bir görüntüden (imagemap) ibaret olduğu bir tasarım çok kullanışsızdır böyle bir durumda. Benzer biçimde statik bir atmosfer yaratan derin gölgeler atılmış düğmeler ya da resimler kullanmak da böyle bir içerikle bağdaşmaz. Yoğun olarak metin kullanmak gerekebilir* bu durumda metin renkleriyle oynayın* sayfayı sütunlara ayırın.

• Ön sayfada eğer tek bir nesne resmi* figür ya da portre kullanıyorsanız bunu büyük kullanın. Büyük kullanılmış bir resim her zaman çarpıcıdır.

• Fontlarla deneme yapın* içeriğe en uygun düşecek fontu bulmaya çalışın. Ve gerekmedikçe çok farklı fontlar kullanmayın* çoğu durumda tek bir font ailesi yeterlidir. Gerek grafiklerle gerekse HTML uygulamasını kullanarak birbirleri ile ilişkilerini gözden kaçırmadan yazı büyüklükleriyle oynayın. Canlılık sağlamak ve okunurluğu arttırmak için bold* italik yazı kullanın.

• Aşağıya doğru çok fazla sarkan sayfalardan kaçının. Çok uzun sayfalar hem yüklenme zamanı hem de okunulabilirlik açısından kötü bir uygulamadır. Bunun yerine içeriği fazla sayıda alt sayfalara dağıtın. Böylelikle kullanıcı görmek istemediği sayfa için beklemek zorunda kalmayacaktır.

• Kullanıcıların büyük bölümü 14 inch monitörde 256 renk görebilmektedir. Çalıştığınız bilgisayar ne olursa olsun kullanıcının göreceği koşullarda test edin sayfalarınızı. Farklı işletim sistemlerinde resimler farklı görünmektedir. Bazı durumlarda * özellikle de hareketli GIF görüntülerde* büyük kayıplar görülür. Eğer Macintosh'ta çalışıyorsanız son aşamada grafiklerinizin parlaklığını biraz arttırın. Ayni grafik PC'de* Mac'de olduğundan daha koyu görünmektedir.

• Sayfalarınızı ayrı ayrı tarayıcılarla test edin. Bu hem kullanılan renk paletleri hem de desteklediği HTML özellikleri açısından önemlidir. En yaygın iki tarayıcının da desteklediği özellikleri kullanmaya çalışın.

• Sitenizi ortalama kullanıcıyla test edin. Aranılan bir bilgiye ne kadar zamanda ulaşıldığı önemli bir sorundur. Sonuca göre sitenizin hiyerarşisinde değişikliklere gidin. Aranılan bilgi sezgisel olarak ulaşılabilir olsun. En alt bölümlerden bile diğer bir bölüme ulaşmanın kolay ve hızlı olmasına dikkat edin. PC Magazine Online uzunca bir deneme süresinden ve kullanıcı testlerinden sonra hizmete açılmıştır.

JPG Mİ GIF Mİ?
• DAHA sonra ayrıntılı değineceğiz ama* işte size bir resmi GIF formatında mı yoksa JPG formatında mı kaydedeciğiniz konusunda basit bir çözüm: Resmi hem GIF hem de JPG olarak ayrı ayrı kaydedin. Sonra büyüklüklerine bakın* daha küçük hangisi ise onu kullanın. Bu her zaman olmasa da çoğu zaman hangi formatın kullanılması gerektiği konusunda doğru sonuç verir. Resmi grafik programda değil tarayıcıya yükleyerek görüntü kalitesine bakın. Photoshop ile Internet Explorer ya da Netscape
Navigator'da resimler farklı görünmektedir.

• Siyah ve beyazın Web'de önemli bir avantajı vardır: Tüm işletim sistemlerinde ve bilgisayarlarda siyah ve beyaz bizim istediğimiz biçimdedir. Yani renkte sistem farklılığı ve ayarlardan kaynaklanan kaymalar yoktur* siyah siyahtır beyaz da beyaz. Bu iki rengi sonra nasıl görüneceği endişesine kapılmadan sık sık kullanabilirsiniz. Ayrıca zemin rengi olarak kullanmak etkileyici sonuçlar verebilir.

• Son olarak aslolan içeriktir! Tam bir kuru bilgi yığınına dönüşen Internet'te sitenizi bir konu üzerinde odaklayın ve sık sık güncelleyin. CNN'in başarısı yalnızca güncelleme için 160 kişinin çalışmasında olsa gerek.

KİMLİK SAYFASI
Pek çok sitede görmüşsünüzdür: Gezinti çubuğunun yer aldığı indeks sayfasından önce* kimliğin vurgulandığı bir ana sayfa vardır (' splash page' ). Buraya tıklayarak ya da doğrudan indeks sayfasına geçersiniz (' navigation page' ). Bu iki açıdan önemlidir: Birincisi kimliğe* prestije yönelik bir vurgu yapabilirsiniz; ikincisi de çokça kullanılacak indeks sayfasının yükünü azaltabilirsiniz. Ama şu da açık ki* çok fazla hit alan bir site için uygun bir çözüm değildir. Bu uygulama ile indeks sayfasında daha rahat davranma şansınız olur. Hem gezinti çubuğunun hem logonun hem de güncel bilgilerin yer alacağı bir sayfa yerine* yalnızca güncel uygulamalara yönelik bir sayfa tasarlayabilirsiniz. Diğer yandan verdiğimiz iki örnekte de siyah zeminin kullanılmış olması dikkatinizi çekmiştir. Daha önce belirttiğimiz gibi siyah ve beyazın doğru kullanımı gerçekten etkileyici sonuçlar vermektedir.
WEB SAYFALARINDA FORM KULLANIMI
FORMLAR* Web sayfası tasarlayan kişi veya şirketlerle Internet kullanıcıları arasındaki veri alışverişini sağlamak için ideal bir araçtır. HTML 2.0 standartlarının konmasıyla tanıştığımız formlar bir çok sitede kullanıcıların da bilgi göndermesine olanak tanıyarak etkileşimli bir ortam oluşturmaktadır.

Formlar iki yönlü olarak çalışır; Web tarayıcı tarafından ekranda oluşturulan görüntü* kullanıcı tarafından doldurulduktan sonra gönderilir ve Web tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Program bilgileri değerlendirdikten sonra gerekli işlemleri yapar.

FORM NASIL DEĞERLENDİRİLECEK?

WEB üzerinden herhangi bir formu göndermek için sunucunuzun tipine göre bir ek programa ihtiyaç duyacaksınız. Peki bu programı nereden bulacaksınız? İşte pc magazine Türkiye size daha önce hiç bir gazetenin sunmadığı bir fırsat sunuyor ve " beleş" bir form değerlendirici bulabileceğiniz adresi size veriyor. [URL="https://tik.lat/lOh7P"] http://www.nt-tools.com/mailform/[/URL] adresinden indirebileceğiniz Mail Form isimli programı web sitenize yerleştirerek kendi formlarınızı başkalarının göndermesini sağlayabilirsiniz.


Bir form oluşturmak için <FORM></FORM> tag"ları arasına istenilen kontroller INPUT tag"ı sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği FORM tag"ının içinde gösterilir. FORM ve INPUT tag"larının kullanımını inceledikten sonra örnek olarak verdiğimiz kodlara bakarak bu kodların nasıl bir görüntü oluşturduğunu görebilirsiniz.

FORM TAG'I
Genel kullanım: <FORM ACTION=url METHOD=get-post TARGET=pencere>

ACTION=url
Formun gönderildiğinde hangi program tarafından değerlendirileceğini belirtir.

METHOD=get-post
Bilgilerin sunucuya hangi yolla gönderileceğini belirtir. GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST değeri ise form içeriğini direkt olarak derleyici programa yönlendirir.

TARGET=window
Netscape tarafından getirilen bu tag form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir. Pencere isimleri FRAME konumuzu işlerken gösterdiğimiz " _blank" * " _top" gibi değerlerden biri olabilir.

INPUT TAG'I
Genel kullanım: <INPUT ALIGN=tip [CHECKED|] MAXLENGTH=uzunluk
NAME=isim SIZE=boyut SRC=adres TYPE=tip VALUE=değer>

ALIGN=tip
TYPE değeri bir resim olarak atandığında bir sonraki satırın resme göre nasıl yerleştirileceğini belirtir. TOP* MIDDLE veya BOTTOM değerlerinden birini alabilir.

CHECKED
Kontrol olarak bir işaretleme veya seçim kutusu kullanıldığında CHECKED değeri bu kutuların işaretlenmiş olarak karşımıza gelmesini sağlar.

MAXLENGTH=uzunluk
Metin kutusuna kullanıcının maksimum kaç karakter girebileceğini belirler.

NAME=isim
Kontrole bir isim verir

SIZE=boyut
Kontrolün boyutlarını karakter cinsinden belirlemenizi sağlar. TEXTAREA kontrolü kullanıldığında ' en*boy' gibi bir ifade kullanılarak kontrolün hem eni hem de yüksekliği belirtilebilir.

SRC=adres
Kontrol olarak resim seçildiğinde resmin bulunduğu adresi taşır.

TYPE=tip
Kontrolün cinsini belirler ve şu değerlerden biri olabilir:

CHECKBOX: Bir işaretleme kutusu görüntüler ve sadece doğru veya yanlış değerlerini alabilir.
HIDDEN: Web tarayıcısının penceresinde görünmez fakat içerdiği değer gönderilen form ile web sunucusuna ulaşır.
IMAGE Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar. Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi x ve y noktalarına dokunduğu öğrenilebilir. Bu tag SRC ile birlikte kullanılır ve SRC komutu resmin bulunduğu URL'yi göstermelidir.
PASSWORD TEXT kontrolü ile aynı özellikleri taşır fakat kullanıcının girdiği karakterler bu kontrolde yıldız olarak görülür.
RADIO Kullanıcının bir çok seçenek içerisinden bir tanesini seçebilmesine olanak tanır. Grup içindeki RADIO kontolleri her zaman aynı ismi taşımalı kontrollerin değerleri VALUE değerine atanmalıdır.
RESET Tıklandığında form içeriğini temizler. Kullanıcının form'u tekrar doldurmasını sağlar.
SUBMIT Form içeriğini sunucuya yollar. VALUE değeri kullanılarak üzerindeki yazı değiştirilebilir.
TEXT Kullanıcıdan tek satırlık veri alınmasına olanak tanır. SIZE ve MAXLENGTH takıları* bu kontrolle birlikte kullanılabilir



İşte size bir örnek: resimde görmüş olduğunuz ve bizim
hazırladığımız formu kendiniz oluşturmak için...



<HTML><title>Web Okulu - Form Denemesi</title><body bgcolor=' #c0c0c0' >
<h2>Tüm Form Öğelerinin Kullanımı</h2>
<FORM ACTION=' http://internet/form' METHOD=POST>
<P>İsim<BR><INPUT NAME=' CONTROL1' TYPE=TEXT VALUE=' İsim Girecek' >
<P>Şifre<BR><INPUT TYPE=' PASSWORD' NAME=' CONTROL2' >
<P>Renk<BR><INPUT TYPE=' RADIO' NAME=' CONTROL3' VALUE=' 0' CHECKED>Kırmızı
<INPUT TYPE=' RADIO' NAME=' CONTROL3' VALUE=' 1' >Yeşil
<INPUT TYPE=' RADIO' NAME=' CONTROL3' VALUE=' 2' >Mavi
<P>Görüşleriniz<BR><INPUT TYPE=' TEXTAREA' NAME=' CONTROL4' SIZE=' 20*5' MAXLENGTH=' 250' >
<P><INPUT NAME=' CONTROL5' TYPE=CHECKBOX CHECKED>Beni Email Listenizene Kaydedin
<P><INPUT TYPE=' SUBMIT' VALUE=' Gönder' ><INPUT TYPE=' RESET' VALUE=' Temizle' >
</FORM></body></HTML>

Resimlerinizin Haritasını Çıkartın
IMAGE map'ler kullanıcının belirli bir resmin değişik alanlarına tıkladığında farklı adreslere gidebilmesine olanak tanır. İki şekilde hazırlanabilecek Image Map'ler isteğe göre HTML sayfasına veya sunucu üzerindeki başka bir dosyaya yerleştirilebilir. Biz bu konumuzda HTML sayfalarına yerleştirilen Image Map'leri inceleyecek Paint Shop Pro yardımıyla bir resmin haritasının nasıl çıkarılacağını göstereceğiz.

<MAP NAME="map1"><!-- Örnek resmin HTML kodları -->
<AREA SHAPE="RECT" COORDS=' 7* 7* 119* 74' HREF="http://www.pcmagazine.com.tr">
<AREA SHAPE="CIRCLE" COORDS=' 178* 41* 35' href="http://www.idg.com.tr">
</MAP>

Öncelikle HTML sayfasında yukarıdaki gibi kodlar kullanır ve istediğimiz resimde hangi noktalara tıklandığında hangi adreslere bağlanılacağını belirtiriz. Daha sonra <IMG SRC=' map1.gif' USEMAP=' #map1' > gibi bir ifade kullanılarak haritasının çıkarılmasını istediğimiz resmi sayfaya yerleştirir ve bu resim için ' map1' isimli haritanın kullanılacağını belirtiriz.

MAP TAG'I <MAP NAME='deneme' > AREA takılarıyla tanımlanan haritaya başlangıç yapar ve bir isim verir.

AREA TAG'I
<AREA COORDS=koordinatlar SHAPE=tip HREF=url TARGET=pencere>

COORDS
Tanımlanan şekle göre değişik koordinatlar girebilmenizi sağlar

SHAPE=tip
Tip RECTANGLE* CIRCLE* POLYGON seçeneklerinden biri olabilir. RECTANGLE Bir kare tanımlar ve ' x1* y1* x2* y2' değerleri kullanılır. CIRCLE Bir çember tanımlar ve ' OrtaX* OrtaY* Yarıçap' değerleri kullanılır. POLYGON Bir poligon tanımlar. Birçok noktadan oluşabilir.

HREF
Şekle tıklandığında hangi adrese gidileceğini belirler.

TARGET
Gidilecek adresin hangi pencerede açılacağını belirler

Peki tanımladığımız şekillerin koordinatlarını nasıl bulacağız? Bu da çok basit* en büyük yardımcımız olan Paint Shop Pro'yu kullanarak istediğimiz bir noktadaki koordinatları bulabiliriz. Örneğin bir karenin sınırlarını öğrenmek istiyorsunuz* hemen resmi açın ve tanımlamak istediğiniz karenin üst sol noktasına gidin. X1 ve Y1 noktalarını durum çubuğundan öğrenip bir kenara not ettikten sonra sol alt sınıra gidin ve X2* Y2 noktalarını öğrenin. İşte bu kadar basit.

FLOATING FRAME KULLANIMI
HTML sayfalarında sık kullanılmayan bir unsur olsa da HTML 3.2 standartlarına giren Floating Frame özelliğini anlatmakta fayda görüyoruz. Sayfa içerisinde başka bir HTML sayfasını göstermek istiyor ve bu sayfanın dilediğiniz sınırlar dışına taşmasına engel olmak istiyorsunuz. O zaman Floating Frame'leri kullanabilirsiniz. Aşağıda gördüğünüz örnek satırı HTML sayfanıza girdiğinizde 200x200 piksel ebatlarında bir pencere açılacak ve DENEME.HTM sayfası bu pencerenin içerisine yüklenecek.

<IFRAME SRC="deneme.htm" width=200 height=200></IFRAME>

SRC= ifadesinin karşısına HTML dosyasının adını vererek kullanabileceğiniz gibi [URL="https://tik.lat/tdhkR"] http://www.altavista.digital.com[/URL] benzeri bir adres de kullanarak bir ' Web sitesinin' pencere sınırlarınız içerisinde açılmasını sağlayabilirsiniz

SAYFA NE ZAMAN DEĞİŞTİRİLMİŞ?
BİR siteyi cazip kılan özelliklerden biride güncellemedir. Sayfanıza bağlanan kullanıcıların ilgili sayfanın en son ne zaman güncellendiğini bilmesini istiyorsanız aşağıdaki Java Script'i* kullanabilirsiniz. Bu script'i sayfanıza bir kez ekleyip varlığını unutabilirsiniz* çünkü aşağıdaki akıllı kodlar HTML sayfasının tarihine bakarak bunu sayfa açıldığında otomatik olarak görüntülüyorlar. Böylece küçük değişiklikler yapsanız bile sayfadaki tarihi her defasında tekrar girmek zorunda kalmıyorsunuz.

<SCRIPT LANGUAGE=JavaScript>
<!--
var mod=document.lastModified.split("");
document.writeln("Bu sayfanın son güncellenme tarihi:" + mod[0]);
-->
</SCRIPT>

SAYFANIZDA BAŞKA BİR SAYFA
BAZI Web sitelerinde görürsünüz* güncel olaylar bir pencere içerisinde yukarıdan aşağıya veya tersi yönde sayfanın bir köşesinde kaydırılır ve bu işlem genellikle bir Java programcığıyla yapılır. İşte size bunu hiç zahmet harcamadan yapmanın yolunu gösteriyoruz. Aşağıdaki kodları sayfa içerisinde kullandığınızda deneme.htm dosyası bir pencere içerisinde açılacak ve devamlı olarak yukarı doğru kaydırılacak.

<OBJECT ALIGN=CENTER CLASSID="clsid:1a4da620-6217-11cf-be62-0080c72edd2d"
WIDTH=200 HEIGHT=200 BORDER=1 HSPACE=5 ID=marquee>
<PARAM NAME="ScrollStyleX" VALUE="Circular">
<PARAM NAME="ScrollStyleY" VALUE="Circular">
<PARAM NAME="szURL" VALUE="deneme.htm">
<PARAM NAME="ScrollDelay" VALUE=60>
<PARAM NAME="LoopsX" VALUE=-1>
<PARAM NAME="LoopsY" VALUE=-1>
<PARAM NAME="ScrollPixelsX" VALUE=0>
<PARAM NAME="ScrollPixelsY" VALUE=-3>
<PARAM NAME="DrawImmediately" VALUE=0>
<PARAM NAME="Whitespace" VALUE=0>
<PARAM NAME="PageFlippingOn" VALUE=0>
<PARAM NAME="Zoom" VALUE=100>
<PARAM NAME="WidthOfPage" VALUE=400>
</OBJECT>

STYLE SHEET KULLANIMI
WEB tarayıcı geliştiren firmalar bir yandan yeni teknolojileri tarayıcılarına adapte ederken diğer bir yandan HTML dilinin getirdiği sınırlamaları ortadan kaldırmak için kendilerine göre yollar buluyorlar. İşte ilk olarak Microsoft'un ortaya attığı* günümüzde pek yaygın olarak kullanılmasa da Active HTML'ye dahil edilen Style Sheet'ler. Ne işe mi yarıyor? Yaptığı iş çok basit: Sayfa içerisinde kullanılan paragraf* başlık* kısayol gibi nesneleri önceden tanımlayarak sizi* bunları her defasında tekrar tanımlama zahmetinden kurtarıyor. Şu anda W3C'nin de (World Wide Web Consortium) kabul ettiği bu HTML 3.2 standardını bir nevi ' şablon' olarak niteleyebiliriz. Öyle ki bir defa şablonunuzu tanımladığınızda bu şablonu diğer sayfalarınızdan da kolayca çağırabiliyorsunuz. Örnek için aşağıdaki kodları inceleyip nasıl bir görüntü oluşturduğunu resimden görebilirsiniz.

<HTML>
<title>Style Sheet Kullanımı</title>
<STYLE>
BODY {background: white;}
H1 {font: 24pt Arial bold}
P {background: yellow;}
A {text-decoration: none; color: blue}
</STYLE>
<BODY>
<H1>Bu bir başlık! 24 punto* Arial ve Kalın.</H1>
<p>Üzeri sarı işaretleyici ile çizilmiş alelade bir yazı.</p>
<a href="deneme.htm">Link'lerin altının çizilmemesini bu yolla sağlayabilirsiniz.</a>
</BODY>
</HTML>

Style Sheet konusunu merak edenler için bu konuyla ilgili geniş bilgi edinebilecekleri adresi verelim: [URL="https://tik.lat/pPFAO"] http://www.w3.org[/URL]
----------------------------------------------------------------
ARAMA MOTORLARINA YARDIMCI OLUN
GECENİZİ gündüzünüze kattınız ve bir site hazırladınız. Şimdi insanların sitenizin varlığından haberdar olmasını istiyorsunuz. Ne yapacaksınız? Tabii ki sitenizi bilinen arama motorlarına kayıt edeceksiniz. İşte bu noktada bir püf noktasına ihtiyacınız var. Arama motorlarının kullandığı ' ajan' programlar sitenize geldiklerinde ilk baktıkları şey bir takım tanımlardır. Aşağıda bu tanımları oluşturmak için gereken satırları göreceksiniz. Bu satırları <HEAD>...</HEAD> ifadeleri arasına girerseniz hedef kullanıcıya ulaşmanız daha kolay olacaktır.
<**** name="description" content="Sitenizin amacı* kısa açıklaması* sloganı">
<**** name="keywords" content="sitenizdeki bölümler* anahtar kelimeler" >
<**** name="copyright" content="Telif sınırlamaları ve tanımları" >

Animasyonlu "gif" oluşturalım
Web sayfalarının vazgeçilmez unsurlarından biri tabii ki animasyonlu GIF dosyaları. Bir seri GIF dosyasının üst üste getirilerek oynatılmasından oluşan animasyonlu GIF'ler web sayfasında aktif içeriği sağlamak için kullanılabilecek ilgi çekici ve basit bir teknik. Peki Animasyonlu GIF yapmak için neye ihtiyacınız var? Kullanabileceğiniz programlar neler?

Animasyonlu GIF yapmak için önünüzde bir çok seçenek var. Animagic* GIF Constructor* Animator Pro* Microsoft GIF Animator gibi programlar bunlardan sadece birkaç tanesi. Şimdi bu programlardan [URL="https://tik.lat/f6Rgf"] http://www.microsoft.com/imagecompos...or/gifanin.htm[/URL] adresinden indirebileceğiniz Microsoft GIF animatorı tanıtacak ücretsiz ve kullanımı basit olan bu program ile bir animasyonu nasıl oluşturacağınızı anlatacağız…

Programı çalıştırdığınızda ve bir GIF dosyasını açtığınızda karşınıza her bir kareyi görebileceğiniz bir alan ile birlikte animasyonun akışını ve karakterini belirleyebileceğiniz üç adet sekme gelecektir. Programda bir menü bulunmuyor fakat üstteki tuş takımını kullanarak dosya açma* dosya kaydetme* kesme* kopyalama gibi işlemleri gerçekleştirebiliyorsunuz.

Options ve Animation sekmelerinin* resmin tümünü* Image sekmesinin sadece seçili olan kareyi etkilediğini belirttikten sonra dilerseniz her bir sekmenin ve alt seçeneklerinin ne işe yaradığını açıklayalım:

Options Sekmesi
Thumbnails Reflect Image Position: Karelerin öngösterim penceresinde nasıl görüneceğini belirler. Bu seçeneği işaretlediğinizde kareler animasyonda görüleceği şekilde öngösterim penceresinde tekrar boyutlandırılır.

Main Dialog Window Always On Top: GIF Animator'ın tüm pencerelerin üzerinde görülmesini sağlar.
Import Color Palette: GIF paletinin cinsini belirler. Optimal palette seçildiğinde tüm karelerin paletleri birleştirilir ve 256 renge indirgenir. Browser Palette ise tüm karelerin paletlerini web tarayıcısının 216 renklik paletine çevirir.

Import Dither Method:
Solid: Karenin renklerine en yakın renkleri seçer.
Pattern: Çok fazla renge sahip animasyonlar için en optimal renkleri seçer
Random: Pattern'den daha iyi bir seçenektir fakat daha yavaştır.
Error Diffusion: Karelerde hata düzeltmesi yapar* parlama gibi yanlışlıkları törpüler.

Animation Sekmesi
Animation Width* Animation Height* Image Count: Animasyonlu GIF dosyasının uzunluk ve genişliğini* kaç adet kareden oluştuğunu gösterir.
Looping: Animasyonun kaç defa tekrarlanacağını belirler. Repeat Forever seçeneği işaretlendiğinde metin kutusundaki değer gözardı edilir ve animasyon sonsuza kadar devam eder.
Trailing Comment: Animasyon hakkında genel bir açıklama yapmanıza olanak tanır.

Image sekmesi
Bu bölümde karenin yükseklik ve genişliğini veren Image Width ve Image Height seçenekleri her zaman sabit kalır.
Left: GIF parçasının ana GIF dosyasının solundan ne kadar uzağa yerleştirileceğini*
Top: parçacığın üstten ne kadar uzağa yerleştirileceğini gösterir. Bu iki değer küçük parçacığın ana parçacık üzerindeki koordinatını vermesi açısından önemlidir.

Bu sekmedeki "Duration" seçeneği karenin kaç milisaniye (Saniyenin yüzde biri) ekrana duracağını belirler.
Undraw Method seçeneği küçük parçacığın işi bittikten sonra ne olacağını belirler.
"Leave" alt seçeneği parçacığın işi bittikten sonra ekranda kalmasını* "Restore Previus" parçacığın kullanılmadan önceki halinin geri getirilmesini* "Restore Background" ise parçacığın kullanıldığı alanın boşaltılmasını sağlar. Image sekmesindeki "Transparancy" seçeneği karenin hangi renginin transparan renk olacağını belirler. Kullanılması pek kolay olmayan bu seçenek iyi göz kararı istiyor çünkü transparan rengi önizleme karesinden değil de renk paleti içerisinden seçmenizi istiyor. Son olarak her kare için ayrı bir açıklama getirebileceğinizi belirtelim. Açıklamaları yazmak için "Comment" kutusunu kullanabilirsiniz.

Animasyonu oluşturalım…


GIF Animator ile animasyon oluşturmak çok kolaydır. Animasyonunuzun parçalarını bir grafik editörüyle oluşturduktan sonra ister teker teker kaydederek GIF Animator'a sürükler isterseniz grafik editörünüzden panoya yapıştırarak Animator penceresinde Shift+Insert tuşlarına basarsınız.

GIF Animator en iyi sonucu önceden kaydedilmiş resimlerin sürüklenip bırakılmasıyla elde ediyor.
İstediğiniz kareleri Animator penceresinde oluşturup ok tuşlarıyla sıralarını belirledikten sonra sıra animasyonun kaç kere tekrarlanacağına geliyor. Bu işlemi de bitirdiğinizde artık Image sekmesine geçerek her bir karenin pozisyonunu ayarlayabilir ve işi bittikten sonra ne olacağını belirleyebilirsiniz.

GIF Animatoru* daha doğrusu tüm animasyon programlarını kullanırken dikkat etmeniz gereken bir iki nokta var. Bunlardan birincisi resmin sadece değişen parçalarını almanız ve bunu animator penceresine yapıştırmanız* diğeri ise animasyonlarınızda fazla renk kullanmamanız. Eğer animasyonlarınızda tekrarlanmayan parçaları tekrar tekrar kullanırsanız dosyanın büyümesi* dolayisiyle yüklenmesinin zorlaşmasını sağlamış olursunuz.

Hangi tarayıcı?
Kullanıcınızın sitenize hangi web tarayıcısıyla bağlandığını ve hangi siteden geldiğini göstermek istiyorsanız aşağıdaki kodları kullanabilirsiniz.

Internet üzerindeki herhangi bir siteden sayfanıza gelen kullanıcı bu kodlar sayesinde geldiği adresi* Web tarayıcısının tipini ve sürümünü öğrenecektir. Kullanıcının geldiği adresi öğrenmesi için muhakkak bir web sunucusundan bağlanması gerekmektedir.

Sayfanıza lokal bir web sayfasından tıklayarak gelen kullanıcılar 1. Satırı boş göreceklerdir. Verdiğimiz örnek kodları değiştirerek sayfanıza bağlanan kullanıcının geldiği siteye geri dönmesi için bir tuş koyabilir* web tarayıcısının cinsine göre değişik içeriklere ulaşmasını sağlayabilirsiniz.

<HTML>
<HEAD><TITLE>Hangi Tarayıcı?</TITLE></HEAD>

<FONT SIZE=+1 FACE=ARIAL>
<SCRIPT LANGUAGE="JavaScript">
var where = document.referrer
var name = navigator.appName
var vers = navigator.appVersion
document.write("Sizi buraya yollayan adres: "+where+" <P>Kullandığınız tarayıcı: "+name+" <BR>"+vers+" ")
</SCRIPT>
</CENTER>
</HTML>

Alt çizgisiz ve aktif kısayollar
Bu günlerde alt çizgisiz ve klasik mavi renge sahip olmayan Internet kısayolları kullanmak çok moda oldu. Herkes gerekli olsun olmasın bu tip kısayolları kullanıyor. Eğer siz de bu tip link'lerin sayfanızın genel görünümünü güzelleştireceğine inanıyor ve bunları kullanmak istiyorsanız size bu işi nasıl becerebileceğinizi anlatalım.

Alt çizgisiz bir kısayol oluşturmak için <A HREF… takısının içinde bir stil tanımı kullanmanız yeterli. Bu stil takısını kullandığınızda hem kısayol alt çizgisiz olacak hem de ziyaret edildikten sonra rengi değişecek.

<p>Alt çizgisiz kısayol:<br>
<A HREF="http://www.pcmagazine.com.tr" STYLE="text-decoration: none">PC Magazine Online</a><p>

Dilerseniz bir adım daha ileri giderek altı çizili olmasına rağmen üzerine gidince rengi değişen bir link oluşturalım. Bunu yapmak için uzun kodlar kullanmaya gerek yok sadece onmouseover özelliğini kullanmak yeterli.

<p>Aktif ve normal kısayol:<br>
<A HREF="http://www.pcmagazine.com.tr" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">PC Magazine Online</a>

Şimdide hem altçizgisiz hem de üzerine gelince renklenen bir link kullanalım. Tahmin edebileceğiniz gibi hem onmouseover hem de STYLE özelliklerini kullanacağız.

<p>Aktif ve alt çizgisiz kısayol:<br>
<A HREF="http://www.pcmagazine.com.tr" STYLE="text-decoration: none" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">
PC Magazine Online</a>

Channel Desteği
Internet Explorer 4.0 bir çok yeni özellik ve değişiklikle karşımıza geldi. Aktif HTML ve kanallar bu özelliklerden belki de en can alıcı olanları. Eğer üzerinde çalıştığınız web projesini sık sık güncellemeyi düşünüyorsanız ve Internet Explorer 4.0 kullanıcılarını bu güncellemelerden en iyi şekilde faydalanmasını istiyorsanız IE4 ile gelen Channel özelliğini sitenize uygulamak isteyebilirsiniz.

Öncelikle belirtelim ki sitenizin içeriği statik ise ve değişmeyen bilgileri kullanıcılara sunmak istiyorsanız Channel özelliğini kullanmanıza gerek yok. Çünkü Channel mantığı sitedeki değişikliklerden kullanıcıyı haberdar etmek ve değişiklik yapılan iç sayfalara kolay erişim sağlamak. Siteniz güncellenmiyorsa kullanıcıların size "Sık Kullanılanlar " menüsünden ulaşması daha doğru olacaktır.

Aslında sitenizin Aktif Kanal'ını oluşturmak sandığınız kadar zor değil* 3-5 gerekli öğeyi biraraya getirdikten sonra kanalınızı kurmak çok az zamanınızı alacaktır. Aktif Kanal seçeneğinin sadece bir web sunucusu üzerinde çalışacağını ve lokal olarak hazırladığınız dosyaları denemek için bir web sunucusu kullanmanız gerektiğini belirttikten sonra kanal oluşturmak için gerekli olan "malzemeleri" sayalım:

194x32* 32x32* 80x32 piksel boyutlarında üç adet GIF dosyası:
En büyük olan GIF dosyası* kullanıcı kanalınıza üye olduğunda Internet Explorer'ın Kanallar çubuğuna belirecek. 80x32 ebatlarında olan diğer bir GIF dosyamız ise masaüstünüzdeki kanallar bölümüne yerleşecek. 32x32 boyutlarındaki GIF ise bir simge niteliğinde.

Alt bölümlerin planı ve ikonları:
Kullanıcı sitenize ait kanala abone olduğunda kanal çubuğunda kanalınızı simgeleyen grafiği görür. Kullanıcı size ait olan öğeye çift tıklayarak önemli gördüğünüz* her zaman güncellenen bölümlere ulaşabilmelidir. CDF dosyasını hazırlamadan önce bu bölümleri kafanızda tasarlamalı her biri için 32x32 boyutlarında simgeler oluşturmalısınız.

Önizleme sayfası
Kanalınıza abone olan kullanıcı kanal çubuğundaki simgenize her tıkladığınızda önizleme sayfanızla karşılaşacaktır. Önizleme sayfası kanalınızın çekiciliğini arttırmak için alt seçenekler dışında elinizdeki yegane kozdur. Bu sayfayı elinizden geldiği kadar çok güncellemeli* sitenizdeki tüm yenilikleri bu sayfaya anında yansıtmalısınız.

Püf Noktası: Kanal önizleme sayfasının genişliği 460 pikseli geçmemelidir. Sayfa bu genişliği geçerse sitenizi 640x480 çözünürlükte izleyen kullanıcılar kanal çubuğu karşılarına geldiğinde önizleme sayfası sağ tarafa kayacağından sayfanın tümünü görmekte zorlanacak* alttaki kaydırma çubuğunu kullanmak zorunda kalacaklardır.

CDF dosyası
Geldik can alıcı noktaya. Kullanıcının kanalınıza abone olabilmesi için kanalınızı karşı tarafın sistemine tanıtacak bir dosya oluşturmaya ihtiyacınız var. Bu dosya CDF (Channel Definition File/Kanal Tanım Dosyası) uzantısını taşıyor. Tüm CDF dosyaları birkaç ufak değişiklik tışında aynı tag'ları taşır ve oluşturması çok kolaydır. Dosyayı hazırlarken dikkat etmeniz gerekenler Türkçe karakter kullanılmamak ve girilediğiniz tüm URL'leri kontrol etmek. Internet Explorer URL yanlışlığı veya Türkçe karaktere rastladığında dosyanın geçersiz olduğunu söyleyecektir. İşte örnek CDF dosyanız:

<?XML VERSION="1.0" ENCODING="UTF-8"?>
<!DOCTYPE Channel SYSTEM "http://www.w3c.org/channel.dtd">
<CHANNEL HREF="http://www.projem.com.tr/channel/index.htm" SELF=" http://www.projem.com.tr/channel/proje.cdf">
<TITLE>Kanal Basligi</TITLE>
<ABSTRACT>Site slogani/Aciklamasi</ABSTRACT>

<LOGO HREF="http://www.projem.com.tr/channel/32x32.ico" STYLE="ICON"/>
<LOGO HREF="http://www.projem.com.tr/channel/80x32.gif" STYLE="IMAGE"/>
<LOGO HREF="http://www.projem.com.tr/channel/194x32.gif" STYLE="IMAGE-WIDE"/>

<ITEM HREF=" http://www.projem.com.tr/deneme.htm"
LASTMOD="1997.07.08T09:43+0200" PRECACHE="YES">
<TITLE>DENEMEDIR</TITLE>
<LOGO HREF="http://www.projem.com.tr/channel/ornek.ico" STYLE="ICON"/>
<ABSTRACT>DENEMEDIR</ABSTRACT>
</ITEM>
……
[Bu alana diğer alt seçenekler girecek]
……
</CHANNEL>



KULLANICI NASIL ÜYE OLACAK?
Yukarıda istediğimiz tüm öğeleri bir klasörde biraraya getirdiniz ve uygun CDFdosyasını hazırladınız. Şimdi kullanıcılarınızın* hazırldığınız bu nadide kanala abone olabilmeleri için gerekli olan kodları ana sayfanıza girmelisiniz.

<a href="javascript:window.external.addChannel('http: //www.projem.com.tr/channel/proje.cdf')">
<img src="abone.gif" border=0><br>Kanalıma Abone Olun!</a>

...şeklindeki kodları sayfanıza girdiğinizde artık sizi ziyaret eden bir şahıs kolaylıkla sitenize abone olabilir* değişiklikleri öğrenebilir. İşte bu kadar basit!

Yönlendirme
Web tarayıcısının tipine göre kullanıcıyı ilgili sayfaya yönlendirmeyi gösteriyoruz. Özellikle Internet Explorer'da çekici görüldüğünü düşündüğünüz bir sayfa varsa fakat sayfanın normal halinin diğer kullanıcılar tarafından izlenebilmesini istiyorsanız bu yola başvurabilirsiniz. Aşağıdaki kodlar Internet Explorer 4.0 web tarayıcısını gördüğünde hemen ilgili sayfaya gidecek aksi durumlarda ise sayfanın içeriğini gösterecektir.

<HTML>
<HEAD><TITLE>DENEME</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF">

<!-- Web tarayıcısının tipini ve sürümünü öğreniyoruz -->
<script language="JavaScript">
browser = navigator.appName;
version = parseInt(navigator.appVersion);
if (browser == "Microsoft Internet Explorer" && version >= 4) type = "e4";
else type = "e1";
</script>

<!-- Explorer 4.0 ise aynı dizindeki IE.HTM dosyasına yönlendiriyoruz -->
<script language="JavaScript">
if (type == "e4") { ******** = "IE.HTM " }
</script>

Netscape ve Internet Explorer'ın önceki sürümleri için hazırladığınız sayfa.
</BODY>
</HTML>

Her girişte farklı bir resim!
"Aman sitemde her türlü script'i kullanayım* geri kalmayayım" diyorsanız işte size harika bir script veriyoruz. Kodlarımızı kullanarak web sayfanız yüklenirken sunucunuzun RESIM klasöründe bulunan RESIM1… RESIM2 gibi GIF dosyalarından herhangi bir tanesinin rastgele olarak seçilmesini ve gösterilmesini sağlayabilirsiniz. Bu programcık ayrıca resmin üzerine tıklandığında resimle aynı adı taşıyan fakat HTM (RESIM1.HTM) uzantılı dosyanın da ayrı bir pencerede açılmasını sağlıyor.

<script language="JavaScript">
<!--
var now=new Date(); var status=(now.getSeconds())%3;
document.write('<a target="_blank" href="/resim/resim'+status+'.htm"><img src="/resim/resim'+status+'.gif"></a>');
//-->
</script>

Not: Kodları kullanırken kullanıcıya her defasında bir tanesini görmesi için verdiğin tüm resimleri görebileceğini söylememize gerek yoktur herhalde. Bunu yapabilmesi için sadece HTML kodlarınıza bir gözatması yeterli olacak.

"ÇEREZLER" İLE ZİYARET SAYISINI ÖĞRENMEK
Genellikle büyük yabancı firmaların web sitelerinden yolanan ve bilgisayarımıza yerleşen cookie'ler (Microsoft Türkçesi ile "çerezler") bilgisayarınızın veya sizin hakkınızdaki basit bilgileri sabit diskinizde belirli bir klasörde tutmak için kullanılır. Web sitesini tekrar ziyaret ettiğinizde bu bilgiler sunucu tarafından okunur ve sunucu sizin hakkınızdaki bilgileri bu yolla edinir. Windows'unuzu tekrar kurduğunuzda bazı web sitelerinde oluşturduğunuz kişisel sayfaların karşınıza gelmemesinin sebebi budur. Web sunucu* cookies klasöründeki bilgilerinizi bulamadığı için sizin kim olduğunuzu anlayamaz…

Sayfanızı ziyaret eden kullanıcının sabit diskinde bilgi tutmak çok kolaydır. Aşağıdaki Javascript* kullanıcının ziyaret sayısını yine kullanıcının sabit diskinde tutar ve kullanıcının her yeni ziyaretinde sayıyı bir arttırır. Çerezler hakkında daha çok bilgiyi ilerki sayılarımızda bulacaksınız* yine de merakınızı gidermek istiyorsanız [URL="https://tik.lat/hVQtR"] http://www.netscape.com/newsref/std/cookie_spec.html[/URL] adresini ziyaret edebilirsiniz.

<html><head>
**********
cookie_name = "Counter_Cookie";
function doCookie() {
if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
} else {index = -1;}
if (index == -1) {
document.cookie=cookie_name+"=1; expires=Tuesday* 01-Apr-1999 08:00:00 GMT";
} else {
countbegin = (document.cookie.indexOf("="* index) + 1);
countend = document.cookie.indexOf(";"* index);
if (countend == -1) {countend = document.cookie.length;}
count = eval(document.cookie.substring(countbegin* countend)) + 1;
document.cookie=cookie_name+"="+count+"; expires=Tuesday* 01-Apr-1999 08:00:00 GMT";}}
function gettimes() {if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
if (index != -1) {
countbegin = (document.cookie.indexOf("="* index) + 1);
countend = document.cookie.indexOf(";"* index);
if (countend == -1) {
countend = document.cookie.length;}
count = document.cookie.substring(countbegin* countend);
if (count == 1) {
return (count+" kere");
} else {return (count+" kere");}}}
return ("0 kere");}
</script>
</head>

<body onLoad="doCookie()">
<center>**********
document.write("<b>Merhaba! Bu sayfaya daha önce "+gettimes()+" uğradınız.</b>");
</script></center>

2000 YILI SORUNU
Aşağıdaki Javascript'i sayfanıza girdiğinizde* akıllı kodlar 2000 yılına kaç gün kaldığını sayfaya yazacaktır. Çok basit olan kod ayrıca 2000 yılına bir gün kaldığında ve 2000 yılına bir günden az kaldığında da sizi uyarır. Dileyenler bilgisayarlarının saatini değiştirerek script'i deneyebilir* script'i sitelerine ekleyip ilginç bir görüntü oluşturabilir.

<SCRIPT LANGUAGE="JavaScript">
<!--
var now = new Date();
var then = new Date("January 1* 2000");
var left = then.getTime() - now.getTime();
var days = Math.floor(left / (1000 * 60 * 60 * 24));
// var hours = Math.floor(left / (1000 * 60 * 60));
// var minutes = Math.floor(left / (1000 * 60));
// var seconds = Math.floor(left / 1000);
if (days > 1)
document.write("2000 yılına " + days + " gün kaldı!")
else if (days == 1)
document.write("2000 yılına bir gün kaldı!")
else if (days == 0)
document.write("2000 yılına bir günden az kaldı!")
else // days < 0
document.write("2000 yılındayız! ");
// -->
</SCRIPT>

DURUM ÇUBUĞUNDA YANIP SÖNEN YAZI
Geçen ay* sayfa yüklendiğinde durum çubuğuna yerleşen ve çubukta sabit kalan bir yazı oluşturmak için gerekli Javascript kodunu vermiştik. Aşağıdaki Javascript bir adım ileri giderek durum çubuğuna yanıp sönen bir yazı yerleştiriyor. Kullanıcı herhangi bir URL üzerine gittiğinde devreden çıkan yazı hiç bir kısayol üzerine gidilmediğinde yine yanıp sönmeye başlıyor.

<SCRIPT language="JavaScript"><!---
var yazi = "Yanip sönen yazilarla dikkat cekebilirsiniz...";
var hiz = 150;
var control = 1;
function flash()
{if (control == 1)
{window.status=yazi; control=0;}
else
{window.status=""; control=1;}
setTimeout("flash();"*hiz);}
// --></SCRIPT>

<BODY OnLoad="flash();">

İŞLETİM SİSTEMİNİ BULMA
Sunucunuza bağlanan bir Internet kullanıcısının Web tarayıcısının tipini bulmak* geldiği adresi öğrenmek gibi püf noktalarını daha önce bu sayfalarda vermiştik. Şimdi ise sayfalarınızı izleyen kullanıcıların işletim sistemini bulmanız için gerekli JavaScript'i veriyoruz. Sayfa herhangi bir bilgisayardan yüklendiğinde* yüklenen bilgisayarın işletim sistemi izleyicinin ekranında anında belirecektir. Daha önce verdiğimiz püf noktalarını kullanarak çıkan sonuca göre kullanıcıları yönlendirmeyi siz de başarabilirsiniz.

<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkOS() {
if(navigator.userAgent.indexOf('IRIX') != -1)
{ var OpSys = "Irix"; }
else if((navigator.userAgent.indexOf('Win') != -1) &&
(navigator.userAgent.indexOf('95') != -1))
{ var OpSys = "Windows 95"; }
else if(navigator.userAgent.indexOf('Win') != -1)
{ var OpSys = "Windows3.1 veya NT"; }
else if(navigator.userAgent.indexOf('Mac') != -1)
{ var OpSys = "Macintosh"; }
else { var OpSys = "diğer…"; }
return OpSys;
}
// -->
</SCRIPT>

<BODY BGCOLOR="#FFFFFF">
İşletim sisteminiz: <b>
<SCRIPT LANGUAGE="JavaScript">
<!--
var OpSys = checkOS();
document.write(OpSys);
// -->
</SCRIPT>




KARŞILAMA VE UĞURLAMA
İşte sayfanıza gelen kullanıcıları karşılayan ve sayfayı terkederken uğurlayan bir JavaScript. <BODY… tag'ı ile kullanılan bu script kullanıcı Web tarayıcısının penceresini kapatsa bile sayfanın terkedildiğini anlıyor ve bir mesaj kutusu çıkararak uğurlama mesajını gösteriyor.

<HTML>
<BODY BGCOLOR="#FFFFFF" onLoad="alert('Sayfama Hoşgeldiniz!');"
onUnload="alert('Tekrar Bekleriz...');">
</BODY>
</HTML>

İDDİALAR VE DOĞRULUK DERECELERİ
İddia: Sayfanızda bir kelimeyi ne kadar fazla tekrarlarsanız arama
servislerinde o kadar üstlerde yeralırsınız.
Doğrusu: Uzun süredir Internet erişimizin varsa mutlaka içerisinde yan yana ve blok halinde defalarca tekrarlanan kelimeler olan web sitelerine rastlamışsınızdır. (Özellikle bu site parayla veya insanların ilgisini çeken başka bir konu ile ilgiliyse) Genel kanının aksine bir kelimenin sayfa içerisinde bir çok defa tekrarlanmasının hiç bir yararı yoktur. Web arama motorları sayfayı bir defa indeksler ve içerisindeki kelime ve kelime katarlarını sadece 1 defa kaydeder. Kelime tekrarlanmışsa bunu gözardı eder. Arama motorlarına kendi sitenizi en iyi biçimde tanıtmak kullanıcıların sizi kolayca bulmasını sağlamak istiyorsanız **** tag'larını kullanmalısınız.



İddia: Bazı HTML tag'larını kapatmamanın zararı yoktur*
en azından sayfanın genel görünümünü etkilemezler.
Doğrusu: Bazen zaman kazanmak için bazen de unutkanlıktan HTML tag'larını kapatmıyor olabilirsiniz. Sayfanın kendi web tarayıcınızda doğru görülmesi her web tarayıcıda doğru görüleceğini göstermez. Explorer'da bir tablo'yu </TABLE> takısıyla kapatmasanız bile içeriği görülür* Netscape ise tablo hiç yokmuş gibi tepki verir. Popüler web tarayıcılar HTML kodlarını düzeltir* yine de tarayıcınız bu işi gerçekleştirmek için zaman çalar. Söz konusu tag* <LI> gibi liste oluşturmak için kullanılan bir tag olsa bile bunu </LI> gibi bir ifadeyle kapatmalısınız.



İddia: Resim görüntülemek için kullanılan <IMG… tag'I ile birlikte
HEIGHT ve WIDTH takılarını kullanmanın hiç bir önemi yoktur.
Doğrusu: Bu takıları kullanmamanın hiç bir zararı yoktur ama HEIGHT ve WIDTH'in yararının olmadığını söylemek de yanlış olur. Sayfanın yüklenmesini hızlandıran bu iki takı resimler yüklenirken sayfada izlenen yeniden boyutlandırmaları da önler. Netscape Navigator ve Internet Explorer kullanıcılarına bu tag'ları kullanmadıklarında sayfadaki tüm resimler yüklenmeden tablonun içeriğinin görülmeyeceğini de belirtelim. Halbuki herhangi bir tablo içerisindeki tüm resimler için HEIGHT ve WIDTH takıları kullanıldığında* resimler henüz yüklenmemiş olsa bile tablo yüklenecek metinler belirecektir...

RESİM DEĞİŞTİRMEK
Web sayfalarında üzerine gidince değişen resimlere sık sık rastlıyorsunuzdur. Java Applet* ActiveX kontrolü gibi derlenmiş bir öğe kullanmadan bu işi siz de kolayca gerçekleştirebilirsiniz. Örneğimizi uygulamadan önce grafik editörünüz ile 100*20 ebatlarında RESIM1-1.GIF* RESIM1-2.GIF* RESIM2-1.GIF* RESIM 2-2.GIF adlarında 4 adet grafik dosyasını hazırlayın. "-1" uzantısı ile biten dosyalar resmin ilk halini "-2" uzantısı ile bitenler ise resmin fare imleci üzerine gittiği hali oluşturacaktır.

Script'imizde her bir resim için bilgi "aOn.src"* "bOn.src" gibi değişkenlerde tanımlanmış. Bu değişkenleri uzatarak dilediğiniz sayıda kısayol kullanabilirsiniz. Resimleri oluşturduktan sonra örnek HTML dosyamızı oluşturun ve resimleri HTML sayfanızla aynı klasöre taşıyın. Resim ebatlarını değiştirmek için ise tek yapacağınız newImage(100* 20); ifadesi ile oynamak olacaktır.

<HTML>
<script language="javaScript">

if ((navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 3)
|| (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >= 4)) {
rollOvers = 1;} else {rollOvers = 0;}
var dirLevel = 1;
var levelMod = "";
levelMod = "";
for (i = 0;i < dirLevel;i++) {}

if (rollOvers) {
aOn = new Image(100* 20);
aOn.src = "resim1-1.gif";
aOff = new Image(100* 20);
aOff.src = "resim1-2.gif";
bOn = new Image(100* 20);
bOn.src = "resim2-1.gif";
bOff = new Image(100* 20);
bOff.src = "resim2-2.gif";
}
function switchOn(imgName) {
if (rollOvers){
imgOn = eval(imgName + "On.src");
document [imgName].src = imgOn;}}
function switchOff(imgName) {
if (rollOvers){
imgOff = eval(imgName + "Off.src");
document [imgName].src = imgOff;
}}</script>

<a href="http://www.pcmagazine.com.tr/haberler" onMouseover="switchOn('a')" onMouseout="switchOff('a')">
<IMG SRC="resim1-2.gif" border=0 name="a"></a>
<p>
<a href="http://www.pcmagazine.com.tr/share" onMouseover="switchOn('b')" onMouseout="switchOff('b')">
<IMG SRC="resim2-2.gif" border=0 name="b"></a>
</BODY>
</HTML>

TÜM İŞ ARKAPLANDA
PC Magazine Online'ın sayfalarını hazırlarken sol tarafı şeritli sayfaları oldukça sık kullanıyoruz. Hem göze güzel gelen hem de konu başlıklarının kolayca yerleştirebileceğiniz bu sayfa tipini uygulamak çok kolaydır. Bu tip bir sayfayı oluşturmak için tek gerekli olan şey uygun bir arkaplan ve sayfayı bu arkaplana göre ayıracak iki hücreli bir tablodur.

Şeritli bir arkaplan oluşturmak için sadece 1 piksel yüksekliğinde ve 1024 piksel uzunluğunda bir grafik oluşturun. Grafiğin ana sayfayı oluşturacak kısmını dilediğiniz renkte boyadıktan sonra şerit için uygun bir renk seçin ve sol taraftan dilediğiniz kadar pikseli bu renkle boyayın. Şeridin 100 piksel olduğunu varsayan kodlar aşağıdakine benzer olmalıdır:

<HTML>
<BODY BACKGROUND="ARKA.GIF">
<TABLE BORDER=0 WIDTH=590><TR><TD WIDTH=100>
Şerit üstündeki yazılar
</TD><TD WIDTH=490>
Ana sayfadaki yazılar…
</TD></TR></TABLE>



ÜSTE NASIL ŞERİT KOYACAĞIZ?
Sol tarafında şerit olan arka planı anlattıktan sonra* üst tarafında şerit olan arka planı oluşturmayı
tahmin etmek pek de zor olmayacaktır. Sayfanızın uzunluğu kadar uzun fakat 1 piksel genişliğinde bir grafik dosyası oluşturduktan sonra bu grafiğin üstten dilediğiniz kadar pikselini boyayın ve aşağıdaki kodları yazın. İşte size üstünden şerit geçen bir HTML sayfası. Hayal gücünüzü zorlayarak "uçuk" sayfa tasarımlarını web tarayıcılarının arka plan döşeme sistemlerinden de yararlanarak uygulayabilirsiniz.

<HTML>
<BODY BACKGROUND="ARKA.GIF">
<TABLE BORDER=0 WIDTH=590><TR><TD HEIGHT=100>
Şerit üstündeki yazılar
</TD></TR><TR><TD>
Ana sayfadaki yazılar…
</TD></TR></TABLE>

PÜF NOKTASI: Sayfanızın arka planına döşediğiniz grafiğin sabit kalmasını yazıları kaydırdığınızda grafiğin kaymamasını istiyorsanız <BODY BACKGROUND="ARKA.GIF" BGPROPERTIES=FIXED> gibi bir ifade kullanmalısınız.

WEB SİTENİZİ PARK EDİN!
"Web sayfalarımız her geçen gün büyüyor ve kontrolümüzden çıkıyor" diyorsanız size "Web Site Garage"ı önerelim. AtWeb firması tarafından hazırlanan bu servis web sitenizi kontrol ettiği gibi tasarım önerileri de sunuyor. Dilerseniz web sayfanızı arama motorlarına da kaydediyor.

Web tabanlı bir hizmet olan Web Site Garage'a ( [URL="https://tik.lat/H8Fq1"] http://www.websitegarage.com/[/URL]) ana sayfanızın adresini verdiğinizde sistem sitenizdeki kırık kısa yolları buluyor* sayfaların yüklenmesinin ortalama ne kadar tuttuğunu hesaplıyor* HTML ve yazım hatalarını buluyor. Servis dilerseniz ana sayfanıza link koyan siteleri araştırıyor.

Sitenizin araştırılması bittikten sonra servis* hataları düzeltmeniz için size değişik öneriler sunuyor. Servisin fiyatı sahip olduğu değişik özelliklere göre 100$ ile 1000$ arasında değişiyor* sadece ana sayfayı incelemek ise ücretsiz.

BU TASARIM NASIL YAPILDI?
Internet'te gezinirken Türkiye'deki AlfaRomeo'nun web sitesi gözümüze çarptı ve bu sayfalarda kullanılan güzel tasarım oldukça hoşumuza gitti. Özellikle modellerden birinin özelliklerini tanıtmak için oluşturulan ve şekilde gördüğünüz sayfada oldukça güzel bir teknik kullanılmıştı. Tekniği uygulamak çok zor olmasa bile amacı çok iyi gerçekleştiriyordu.

Sayfayı biraz incelediğinizde tasarımın üstte iki altta ise bir hücreden oluşan çerçeveli bir sayfadan ibaret olduğunu görüyorsunuz. Sol üst sayfada bir tablo oluşturularak buraya başlıklar* sağ üst çerçevedeki tabloya ise özellikler yerleştirilmiş. Sağ çerçevedeki özellikler tablosu sağa doğru uzayıp gidiyor* kullanıcı aşağıdaki kaydırma çubuğunu kullanarak tabloyu sağa sola kaydırabiliyor. Soldaki hücre sabit kaldığından her bir başlığın yanında özelliğin görülmesi kaidesi bozulmuyor.

Sol üst çerçevede bir tablo oluşturularak buraya başlıklar*
sağ üst çerçevedeki tabloya ise özellikler yerleştirilmiş.

[URL="https://tik.lat/NeXrI"] http://www.alfaromeo.com.tr[/URL] adresinden ulaşabileceğiniz bu sitedeki ilgili tasarımı inceleyerek siz de sitenizde kullanabilirsiniz. Tabloları marjinlerle birleştirmek* çerçevede kaydırma çubuğu kullanmamak gibi küçük kodları buradan öğrenebilirsiniz.

DURUM ÇUBUĞUNDA SABİT YAZI
Internet kullanıcısı web sayfası üzerinde herhangi bir kısayol üzerine gittiğinde durum çubuğunda gidilecek sayfanın URL'si belirir. Sayfa yüklendikten sonra ve fare imleci herhangi bir kısayolun üzerinde değilken ise durum çubuğu boşalır ve burada hiç bir bilgi sunulmaz. Durum çubuğu meşgul olmadığı zamanlarda kısa bir sloganın veya sitenizin başlığının buraya yerleşmesini istiyorsanız küçük JavaScript'imizi kullanabilirsiniz.

<body onLoad="window.defaultStatus='PC Magazine Online'">

Yukarıdaki satır sizin de anladığınız gibi sayfanızın BODY ifadesine yerleştirilecek. Sloganınız durum çubuğuna bir defa yerleştiğinde artık silinmeyecek* sadece bir URL üzerine gidildiğinde geçici olarak devre dışı kalacaktır.

SAYFA KENDİSİNİ KAPATSIN
Öyle bir web sitesi oluşturdunuz ki bir sürü yardımcı pencere açıyor…. Öyle ki kullanıcılar artık açılan bu yeni pencerelerin içinde boğulduklarından şikayet ediyorlar. Endişelenmeyin tam sizin durumunuza göre bir püf noktası vereceğiz şimdi.

Aşağıdaki 4 satırlık HTML kodunu sayfanıza eklediğinizde kodu eklediğiniz alanda bir düğme oluşacaktır. Artık kullanıcılarınız bu düğmeye basarak pencereyi rahatlıkla kapatabilir. Şimdi siz "İyi de güzelim kullanıcılarım pencerenin sağ tarafındaki çarpı tuşuna basmayı zaten akıl edebilirlerdi." diyeceksiniz. Bence bu tuş aynı zamanda sayfanın izlendikten sonra işinin bittiğinin de bir göstergesi.

<FORM>
<INPUT TYPE="BUTTON" VALUE="Kapat"
NAME="lowerButton" onClick="self.close()">
</FORM>



BİR MENÜDE SİTE HARİTASI!
Internet'te rastladığımız bir çok sitede kullanıcının istediği sayfaya kolayca erişebilmesi veya ana sayfaya bir klikleme ile ulaşabilmesi için navigasyon çubukları kullanılır. Kullanıcıyı sürekli olarak web tarayıcısının geri tuşuna basmaktan kurtaran bu özelliği şimdi vereceğimiz kodları sayfanıza ekleyerek uygulayabilirsiniz.

Aşağıdaki örnek HTML sayfası* içerisinde bir Javascript barındırıyor. Javascript'i kendinize göre özelleştirerek dilediğiniz tipte bir navigasyon menüsüne sahip olabilirsiniz. Dilediğiniz sayfaya gitmek için tek yapmanız gereken ilgili bölümü seçmek ve Git tuşuna basmak.

<html><head><script language="JavaScript">
<!--
function buildArray() {
var a = buildArray.arguments;
for (i=0; i<a.length; i++) {
this = a;
}
this.length = a.length;
}
var urls1 = new buildArray(""*
"http://www.pcmagazine.com.tr/"*
"http://www.pcmagazine.com.tr/haberler/"*
"http://www.pcmagazine.com.tr/rehber/"*
"http://www.pcmagazine.com.tr/games/"*
"http://www.pcmagazine.com.tr/share/");
function go(which* num* win) {
n = which.selectedIndex;
if (n != 0) {
var url = eval("urls" + num + "[n]")
if (win) {
openWindow(url);
} else {
********.href = url;
}
}
}
// -->
</script></head>

<body>
<form name="form1">
<select name="menu1">
<option>Seçiminizi Yapın
<option>Ana Sayfa
<option>Haberler
<option>Internet Rehberi
<option>PC Games
<option>Shareware
</select>
<input type="button" name="goButton" value="Git!" onClick="go(this.form.menu1* 1* false)">
</form></body></html>
 

ahmet99

Yeni üye
24 Eki 2007
9
0
çok teşekkür ederim ben yeni başladım bu işlere o yüzden daha bunlardayım.eywallah paylaşım için....
 

hayvanadam

Üye
27 Eki 2007
126
0
abi çok saolasın gerçekten çok yararlı bilgiler be yeni başlıorum bu yüzden çok işime yarayacak bilgiler var.yanlız hepsini daha okumadım çünkü önce bir programa ihtiyacım var :D

belki yazında buda vardır bilmiyorum ama program konusunda da yardımcı olabilirsen çok sevinirim.bana indirebileceğim bir program söylersen sevinirim.
 
7 Ağu 2011
140
0
Çok uzun olmuş okuyanın canı sıkılır ögrenmek isteyen mebin modüllerini pdf halinde indirsinler resimli anlatım var modülde
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.