| |
|
03 Mayıs 2011, 23:47
| #1 | |
| Çevrimdışı  IF Ticaret Sayısı: (0) | Adım adım HTML kodlari arsivi html sitenizi kurun 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 [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...], ISS'nizle yaptığınız anlaşmaya göre tamamen kendi verdiğiniz isim de olabilir (örneğin [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]. 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 ([Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]) 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=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. 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@[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]agazine.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=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. 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=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. 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 [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] mail adresi verirken başına mailto: koymayı unutmayın. Bunu yapmazsanız verdiğiniz [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] veya cenk.tarhan@[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]agazine.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> <!---Bu kodlarla, çerçeve kalınlığı 1, hücreler arası boşluğu 2, hücre ile yazı aralığı 3 olan yeni bir tablo oluşturuyoruz.---> <TR><TH COLSPAN=2> <!---iki kolonu içine alacak, yazılar kalın olacak ve ortalanacak (yani başlık olacak) ---> Tablo Örneği </TR></TD><TR><TD> deneme1 </TD><TD> <!-- yeni bir kolona başlıyoruz... --> deneme2 </TR></TD><TR><TD> deneme3 </TD><TD> <!-- yeni bir kolona başlıyoruz... --> deneme4 </TD></TR></TABLE> <!-- tüm tag'ları kapatıp tabloyu sonlandırıyoruz. --> 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. <!-- Bu bir açıklama satırıdır --> <!-------- <b>Kalın yazı...</b> ------> 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. <****> 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. *******=' n; URL=url' : Web tarayıcıya sayfanın ne aralıklarla tekrar yükleneceğini belirler. ******* 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 <****> 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 [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]. com.tr adresli PC Magazine Online'ın web sitesine bağlanacaktır. ÖRNEK - 1 <HTML> <HEAD> <**** HTTP-EQUIV=' REFRESH' *******=2> <TITLE>Tekrar Yükleme</TITLE> </HEAD> <P>Bu sayfa 2 saniyede bir tekrar yüklenecektir. </HTML> -------------------------------------------------------------------------------- ÖRNEK - 2 <HTML> <HEAD> <**** HTTP-EQUIV=' REFRESH' *******=' 5; URL= Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. 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. [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] 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=' [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]' 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=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. SHAPE="CIRCLE" COORDS=' 178, 41, 35' href=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. 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 [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] 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: [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] ---------------------------------------------------------------- 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" *******="Sitenizin amacı, kısa açıklaması, sloganı"> <**** name="keywords" *******="sitenizdeki bölümler, anahtar kelimeler" > <**** name="copyright" *******="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 [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] 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=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. 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=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. 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=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. 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 " Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. HREF=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. SELF=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. Basligi</TITLE> <ABSTRACT>Site slogani/Aciklamasi</ABSTRACT> <LOGO HREF=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. STYLE="ICON"/> <LOGO HREF=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. STYLE="IMAGE"/> <LOGO HREF=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. STYLE="IMAGE-WIDE"/> <ITEM HREF=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. LASTMOD="1997.07.08T09:43+0200" PRECACHE="YES"> <TITLE>DENEMEDIR</TITLE> <LOGO HREF=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. 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: // Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. 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") { location = "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 progr----- 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 [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] adresini ziyaret edebilirsiniz. <html><head> <script> 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><script> 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=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. onMouseover="switchOn('a')" onMouseout="switchOff('a')"> <IMG SRC="resim1-2.gif" border=0 name="a"></a> <p> <a href=" Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. 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 ([Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]) 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ş. [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] 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[i] = a[i]; } this.length = a.length; } var urls1 = new buildArray("", " Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. function go(which, num, win) { n = which.selectedIndex; if (n != 0) { var url = eval("urls" + num + "[n]") if (win) { openWindow(url); } else { location.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> Alıntı Konu SeckiN tarafından (17 Temmuz 2013 Saat 00:20 ) değiştirilmiştir. | |
| |  |
| IRCForumlari.NET Reklamlar |
   |
 |
| Etiketler |
| adım, arsivi, html, kodlari, kurun, sitenizi |
| Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir) | |
| |
Benzer Konular | ||||
| Konu | Konuyu Başlatan | Forum | Cevaplar | Son Mesaj |
| Html 5 Sitene ----- ve Müzik Ekleme (HTML 5) | CeSaRCripS | HTML/CSS/JavaScript | 0 | 15 Aralık 2012 20:18 |
Normal
