Mumsema.NET

FrMaLeV

Bilgi Dağıtmak İçin El Ele

Geri git   Mumsema.NET >
Webmaster / Web Dizayn Scriptler
> Webmaster > HTML-PHP-ASP-JAVA

Forum Kuralları Bize Ulaşın İletiler Kayıt ol Yardım Ajanda Bütün Forumları okunmuş kabul et

             
Adım adım HTML kodlari arsivi html sitenizi kurun ile ilgili Benzer Konular
10772 Kez Görüntülendi

Windows 7 İşletim Sistemi Kurulumu Adım Adım (Resimli Anlatım) Windows 7
spaces Sinema html kodlari Msn Space Bölümü
HTML Password Lock 4.3 Web sayfalarınızı oluşturabileceğiniz bir HTML editörü Hemen İndir / Yükle Webmaster Programları
windows unuzun altında linux kurmak istemisiniz.adım adım açıklamalı Genelbilgi ve İpucu
Yanlışlıkla Silinen dosyaları adım adım (resimli) kurtarmak! (Recover My Files) Programların Resimli Anlatımları

Portable Dreamweaver 8 | Her WebMastere Lazım Asp Kodları %100
Cevapla
 
Konu Araçları
Alt 24-03-2006   #1
Profil Bilgileri
Adım adım HTML kodlari arsivi html sitenizi kurun

Adım adım HTML kodlari arsivi html sitenizi kurun başlıklı yazı Mumsema Adım adım HTML kodlari arsivi html sitenizi kurun Forum Alev


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 [Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...], ISS'nizle yaptığınız anlaşmaya göre tamamen kendi verdiğiniz isim de olabilir

(örneğin [Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...]

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 ([Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...]) 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 bulunabilirHTML 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ünebilirBu ö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 arkagif diye bir resim olsun Bu resmi web sayfasının arka planına döşemek için yine <body> tag'ını kullanacağız ARKAGIF adındaki bir resmi web sayfasının arkasına döşemek için <body> tag'ını aşağıdaki gibi

<body background=' arkagif'>

kullanmalısınız Bu aşamada ARKAGIF 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=' arkagif' 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 istiyorumDikkat 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="RESIMGIF"> 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="RESIMGIF" ALT="deneme resmi"> satırını yazdığınızda web tarayıcınız RESIMGIF 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="RESIMGIF" WIDTH=100 HEIGHT=50> satırını yazdığınızda RESIMGIF isimli resmin boyutu ne olursa olsun 50 piksel yüksekliğe ve 100 piksel genişliğine getirilerek ekranda gösterilecektir Resim gösterirken işinize yarayacak diğer bir seçenek ise BORDER'dır Bu takı ileride değineceğimiz "Internet Kısayolları" (Hyper Link) ile ilgili olsa da şimdi birkaç püf noktası vermek gerekir Başka bir URL'ye kısayol yaratıldığında kısayolun ismi bir alt çizgi ile belirlenir, bu işlem resimlerde resmin mavi bir çerçeve içerisine alınmasıyla belirtilir, Eğer bir resmi başka bir sayfaya kısayol olarak kullanacaksanız ve çerçevenin görünmesini istemiyorsanız BORDER=0 ifadesini kullanmalısınız

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

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

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

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

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

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

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

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

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

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

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

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

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

<a href=" http://wwwpcmagazinecomtr" >PC Magazine Online</a>

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

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

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

<a href=" http://wwwpcmagazinecomtr" ><img src=" PCMGIF" alt=" PC Magazine Online" ></a>

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

<a href=" http://wwwpcmagazinecomtr" ><img src=" PCMGIF" 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 [Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...] mail adresi verirken başına [Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...] Bunu yapmazsanız verdiğiniz [Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...] veya [Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...] 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 DENEMEHTM sayfasını çağırmak istediğinizi varsayalım Bu dosyayı çağırmak için şöyle bir satır kullanmalısınız:

<A HREF=" /DENEMEHTM" >KISAYOL DENEMEHTM</A>

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

<A HREF=" BASKA/SAYFAHTM" >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=" /GIRISHTM" >GIRIS</a> satırı sizi web için ayrılan bölümün en dibine kadar indirecek ve GIRISHTM dosyasına kısayol oluşturacaktır Bunun gibi resimler dizinindeki bir resmi çağırmak için
<img src=" /resimler/pcmagazinegif" > 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 32 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 1tablonun 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 30 standartlarında bulunmadığını fakat en yeni web tarayıcıları tarafından desteklendiğini belirtelim Netscape Navigator'ın 20 ve Microsoft Internet Explorer'ın 30 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="1htm" NAME="1">
<FRAME SRC="2htm" NAME="2">
</FRAMESET>

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


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

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


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

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


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

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


<FRAMESET COLS="100,*">
<FRAME SRC="1htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="2htm" NAME="2">
<FRAME SRC="3htm" NAME="3">
<FRAME SRC="4htm" 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 20'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=' denememid' LOOP=5>

komutunu kullandığınızda ' denememid' 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

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

<IMG DYNSRC=' denemeavi' SRC=' denemegif' 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=' denemeavi' >

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

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

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

Aşağıda, mutlaka <HEAD> - </HEAD> aralığında kullanılması gereken <META> tag'ının iki örneğini veriyoruz 1 örnek, bulunulan sayfayı her iki saniyede bir tekrar yükleyecek, 2 örnek ise açıldıktan 5 saniye sonra [Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...] comtr adresli PC Magazine Online'ın web sitesine bağlanacaktır

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


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

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


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

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

<HTML>
<HEAD>
<TITLE>Rastgele Vecizeler</TITLE>
<SCRIPT LANGUAGE=' JavaScript' >
<!--
function getMessage() {
var ar = new Array(3)
ar[0] = ' Hiç bir iş göründüğü kadar kolay değildir'
ar[1] = ' Her iş tahmin ettiğinizden çok vakit alır'
ar[2] = ' Yanlış gitme olasılığı olan her iş yanlış gider'
ar[3] = ' Bir takım işlerin yanlış gitme olasılığı varsa size en çok zarar verecek olanı yanlış gider'
var now = new Date()
var sec = nowgetSeconds()
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 312 sürümünü kullanacağız PSP 40 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 20 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 [Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...] adresinden indirebileceğiniz Mail Form isimli programı web sitenize yerleştirerek kendi formlarınızı başkalarının göndermesini sağlayabilirsiniz


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

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

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

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

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

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

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

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

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

NAME=isim
Kontrole bir isim verir

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

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

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

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



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



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

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

<MAP NAME="map1"><!-- Örnek resmin HTML kodları -->
<AREA SHAPE="RECT" COORDS=' 7, 7, 119, 74' HREF="http://wwwpcmagazinecomtr">
<AREA SHAPE="CIRCLE" COORDS=' 178, 41, 35' href="http://wwwidgcomtr">
</MAP>

Öncelikle HTML sayfasında yukarıdaki gibi kodlar kullanır ve istediğimiz resimde hangi noktalara tıklandığında hangi adreslere bağlanılacağını belirtiriz Daha sonra <IMG SRC=' map1gif' 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 32 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 DENEMEHTM sayfası bu pencerenin içerisine yüklenecek

<IFRAME SRC="denemehtm" width=200 height=200></IFRAME>

SRC= ifadesinin karşısına HTML dosyasının adını vererek kullanabileceğiniz gibi [Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...] 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=documentlastModifiedsplit("");
documentwriteln("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 denemehtm 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="denemehtm">
<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 32 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="denemehtm">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: [Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...]
----------------------------------------------------------------
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
<META name="description" content="Sitenizin amacı, kısa açıklaması, sloganı">
<META name="keywords" content="sitenizdeki bölümler, anahtar kelimeler" >
<META name="copyright" content="Telif sınırlamaları ve tanımları" >

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

Animasyonlu GIF yapmak için önünüzde bir çok seçenek var Animagic, GIF Constructor, Animator Pro, Microsoft GIF Animator gibi programlar bunlardan sadece birkaç tanesi Şimdi bu programlardan [Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...] 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 = documentreferrer
var name = navigatorappName
var vers = navigatorappVersion
documentwrite("Sizi buraya yollayan adres: "+where+" <P>Kullandığınız tarayıcı: "+name+" <BR>"+vers+" ")
</SCRIPT>
</CENTER>
</HTML>

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

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

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

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

<p>Aktif ve normal kısayol:<br>
<A HREF="http://wwwpcmagazinecomtr" onmouseover="thisstylecolor='#CC0000'" onmouseout="thisstylecolor='blue'">PC Magazine Online</a>

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

<p>Aktif ve alt çizgisiz kısayol:<br>
<A HREF="http://wwwpcmagazinecomtr" STYLE="text-decoration: none" onmouseover="thisstylecolor='#CC0000'" onmouseout="thisstylecolor='blue'">
PC Magazine Online</a>

Channel Desteği
Internet Explorer 40 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 40 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="10" ENCODING="UTF-8"?>
<!DOCTYPE Channel SYSTEM "http://wwww3corg/channeldtd">
<CHANNEL HREF="http://wwwprojemcomtr/channel/indexhtm" SELF=" http://wwwprojemcomtr/channel/projecdf">
<TITLE>Kanal Basligi</TITLE>
<ABSTRACT>Site slogani/Aciklamasi</ABSTRACT>

<LOGO HREF="http://wwwprojemcomtr/channel/32x32ico" STYLE="ICON"/>
<LOGO HREF="http://wwwprojemcomtr/channel/80x32gif" STYLE="IMAGE"/>
<LOGO HREF="http://wwwprojemcomtr/channel/194x32gif" STYLE="IMAGE-WIDE"/>

<ITEM HREF=" http://wwwprojemcomtr/denemehtm"
LASTMOD="19970708T09:43+0200" PRECACHE="YES">
<TITLE>DENEMEDIR</TITLE>
<LOGO HREF="http://wwwprojemcomtr/channel/ornekico" 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:windowexternaladdChannel('http: //wwwprojemcomtr/channel/projecdf')">
<img src="abonegif" 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 40 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 = navigatorappName;
version = parseInt(navigatorappVersion);
if (browser == "Microsoft Internet Explorer" && version >= 4) type = "e4";
else type = "e1";
</script>

<!-- Explorer 40 ise aynı dizindeki IEHTM dosyasına yönlendiriyoruz -->
<script language="JavaScript">
if (type == "e4") { location = "IEHTM " }
</script>

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

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

<script language="JavaScript">
<!--
var now=new Date(); var status=(nowgetSeconds())%3;
documentwrite('<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 [Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...] adresini ziyaret edebilirsiniz

<html><head>
<script>
cookie_name = "Counter_Cookie";
function doCookie() {
if(documentcookie) {
index = documentcookieindexOf(cookie_name);
} else {index = -1;}
if (index == -1) {
documentcookie=cookie_name+"=1; expires=Tuesday, 01-Apr-1999 08:00:00 GMT";
} else {
countbegin = (documentcookieindexOf("=", index) + 1);
countend = documentcookieindexOf(";", index);
if (countend == -1) {countend = documentcookielength;}
count = eval(documentcookiesubstring(countbegin, countend)) + 1;
documentcookie=cookie_name+"="+count+"; expires=Tuesday, 01-Apr-1999 08:00:00 GMT";}}
function gettimes() {if(documentcookie) {
index = documentcookieindexOf(cookie_name);
if (index != -1) {
countbegin = (documentcookieindexOf("=", index) + 1);
countend = documentcookieindexOf(";", index);
if (countend == -1) {
countend = documentcookielength;}
count = documentcookiesubstring(countbegin, countend);
if (count == 1) {
return (count+" kere");
} else {return (count+" kere");}}}
return ("0 kere");}
</script>
</head>

<body onLoad="doCookie()">
<center><script>
documentwrite("<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 = thengetTime() - nowgetTime();
var days = Mathfloor(left / (1000 * 60 * 60 * 24));
// var hours = Mathfloor(left / (1000 * 60 * 60));
// var minutes = Mathfloor(left / (1000 * 60));
// var seconds = Mathfloor(left / 1000);
if (days > 1)
documentwrite("2000 yılına " + days + " gün kaldı!")
else if (days == 1)
documentwrite("2000 yılına bir gün kaldı!")
else if (days == 0)
documentwrite("2000 yılına bir günden az kaldı!")
else // days < 0
documentwrite("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)
{windowstatus=yazi; control=0;}
else
{windowstatus=""; 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(navigatoruserAgentindexOf('IRIX') != -1)
{ var OpSys = "Irix"; }
else if((navigatoruserAgentindexOf('Win') != -1) &&
(navigatoruserAgentindexOf('95') != -1))
{ var OpSys = "Windows 95"; }
else if(navigatoruserAgentindexOf('Win') != -1)
{ var OpSys = "Windows31 veya NT"; }
else if(navigatoruserAgentindexOf('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();
documentwrite(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 META 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-1GIF, RESIM1-2GIF, RESIM2-1GIF, RESIM 2-2GIF 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 "aOnsrc", "bOnsrc" 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 ((navigatorappName == "Netscape" && parseInt(navigatorappVersion) >= 3)
|| (navigatorappName == "Microsoft Internet Explorer" && parseInt(navigatorappVersion) >= 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);
aOnsrc = "resim1-1gif";
aOff = new Image(100, 20);
aOffsrc = "resim1-2gif";
bOn = new Image(100, 20);
bOnsrc = "resim2-1gif";
bOff = new Image(100, 20);
bOffsrc = "resim2-2gif";
}
function switchOn(imgName) {
if (rollOvers){
imgOn = eval(imgName + "Onsrc");
document [imgName]src = imgOn;}}
function switchOff(imgName) {
if (rollOvers){
imgOff = eval(imgName + "Offsrc");
document [imgName]src = imgOff;
}}</script>

<a href="http://wwwpcmagazinecomtr/haberler" onMouseover="switchOn('a')" onMouseout="switchOff('a')">
<IMG SRC="resim1-2gif" border=0 name="a"></a>
<p>
<a href="http://wwwpcmagazinecomtr/share" onMouseover="switchOn('b')" onMouseout="switchOff('b')">
<IMG SRC="resim2-2gif" 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="ARKAGIF">
<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="ARKAGIF">
<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="ARKAGIF" 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 ([Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...]) 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ş

[Hoşgeldiniz.. Yudumla Ailesine Üye Olmadan Forumdaki Linkleri Göremezsiniz. Üye Olmak İçin Tıklayın...] 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="windowdefaultStatus='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="selfclose()">
</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 = buildArrayarguments;
for (i=0; i<alength; i++) {
this[i] = a[i];
}
thislength = alength;
}
var urls1 = new buildArray("",
"http://wwwpcmagazinecomtr/",
"http://wwwpcmagazinecomtr/haberler/",
"http://wwwpcmagazinecomtr/rehber/",
"http://wwwpcmagazinecomtr/games/",
"http://wwwpcmagazinecomtr/share/");
function go(which, num, win) {
n = whichselectedIndex;
if (n != 0) {
var url = eval("urls" + num + "[n]")
if (win) {
openWindow(url);
} else {
locationhref = 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(thisformmenu1, 1, false)">
</form></body></html>

Bu anlatıklarımızdan sonra "ama ben navigasyon menümden kim nereye gitmiş kim hangi bölümü kaç kere gezmiş öğrenmek isterim, bilmek isterim" derseniz yine Internet üzerinden bulabileceğiniz bir CGI veya Perl Script'ten faydalanmanızı öneririz
alıntıdır

 

ORKUN is offline  
Dantel   Mumsema   Frmacil
Alt 24-03-2006   #2
Profil Bilgileri
Standart



arkadaşım çok sağol bu konuda eksiklerim çoktu bütün sayfayı çaldım valla çok teşekkürler

 

seko is offline  
Alt 24-03-2006   #3
Profil Bilgileri
Standart Küçülüp büyüyen yazi



küçülüp büyüyen yazı
PHP- Kodu:
<script language="Javascript1.2"

<!--

// please keep these lines on when you copy the source

// made by: Nicolas - http://www.javascript-page.com



var tags_before_clock "<center>";

var 
tags_after_clock  "</center>";



var 
speed 100;

var 
speed2 2000;

var 
biggest_text 28;



var 
0;

var 
0;

var 
themessagesize;

var 
esize "</font>";



function 
initArray() {



this.length initArray.arguments.length;

  for (var 
0this.lengthi++) {

  
this[i] = initArray.arguments[i];

  }

}



var 
themessage2 = new initArray(

"siteme gelsene",

"http://www.hayel.gezisi.com",

"GEBZE",

"siteme beklerim"

);



if(
navigator.appName == "Netscape") {

document.write('<layer id="wds"></layer><br>');

}



if (
navigator.appVersion.indexOf("MSIE") != -1){

document.write('<span id="wds"></span><br>');

}



function 
upwords(){ 



themessage themessage2[y];



if (
biggest_text) {

 
x++;

 
setTimeout("upwords()",speed);

}



else {

setTimeout("downwords()",speed2);

}



if(
navigator.appName == "Netscape") {

  
size "<font point-size='"+x+"pt'>"

  
document.wds.document.write(size+tags_before_clock+themessage

                              
+tags_after_clock+esize);

  
document.wds.document.close();

}



if (
navigator.appVersion.indexOf("MSIE") != -1){
  
wds.innerHTML tags_before_clock+themessage+tags_after_clock;

  
wds.style.fontSize=x+'px'

}





function 
downwords(){



if (
1) {

 
x--;

 
setTimeout("downwords()",speed);

}



else {

 
setTimeout("upwords()",speed2);

 
y++;

 if (
themessage2.length 10;

}



if(
navigator.appName == "Netscape") {

  
size "<font point-size='"+x+"pt'>"

  
document.wds.document.write(size+tags_before_clock+themessage

                              
+tags_after_clock+esize);

  
document.wds.document.close();

}



if (
navigator.appVersion.indexOf("MSIE") != -1){

  
wds.innerHTML tags_before_clock+themessage+tags_after_clock;

  
wds.style.fontSize=x+'px'

}

}



setTimeout("upwords()",speed);

//-->

</script> 

 

ORKUN is offline  
Alt 24-03-2006   #4
Profil Bilgileri
Sitenin açilisina bilgi eklemek



Kod:
<!-- Beginning of JavaScript Applet<-- begin to hide script contents from old browsers.

function Info()

{if (!confirm("Su an bu internet sitesine girmek üzeresiniz kabul mu ? ?"))

history.go(0);return " "}

document.writeln(Info())<!--End-->



</SCRIPT>



<SCRIPT language=JavaScript>

alert("Hosgeldin seninle çok iyi arkadas olucaz!");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Umarim bu sayfa hosuna gidecek Sayfada senin için çok seyler var");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ok.e basarak ilerlemeye devam edelim mi ?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Hayir mi diyorsun ?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Valla artik benim yapcam biseyim yok");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bu dönüsü olmayan bir oyun ve bende bisey yapamam artik");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bosver moralini bozma");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Gel seninle tanisalim");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Adim Serdar Bu Sayfanin Yaraticisiyim!");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Baksana birileri senden intikam aliyor");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Yada masumhane bir saka yapiyor");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Hazir beklerken, nasilsin?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Umarim iyisindir");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bende iyiyim sordugun için saol");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ama sormadin diimi? hahahaaaaa");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Benim nasi oldugum umrunda diil degilmi?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bu sayfa kendiliginden mi oldu saniyosun");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Halbuki bu sayfayi birisi yapti");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ne kadar emek verdi biliyormusun?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Senin umrunda olmayabilir");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ama benim umrumda");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Çok kabasin!");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Kaba oldugun için seninle biraz oynayayim");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Çünkü bu küçük kutular çikmaya devam ettikçe burdasin:)");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Istersen dene");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Esc ise yaramiyor degilmi?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Hiçbirsey kurtaramaz kilitlendin");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Aslinda kurtarirda senin aklin ermez");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bu lafima kizdin diimi");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Olabilir sende birilerini kizdirmisindir");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ve belkide o senden intikam aliyodur simdi");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Peki bu olay sonsuza dek devam ederse?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Kutudan sonra kutu, kutudan sonra kutu, kutudan sonar kutu yani sonsuza kadar.........");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Görüyorsunki ilerlemeye devam ediyor");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Yani ikimizde bir süreligine burdayiz");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Beklerken biraz konusalim mi?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Annarsin kalpten kalbe");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ne düsündügünü biliyorum");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Yapmam gereken isler var");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Görmem gereken insanlar");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("En azindan seni bu sayfaya gönderen kisiyi bulmaya gideceksin");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ama bu bayagi eglenceli");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Sana bu sakayi yapan için öyle");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bu olayi yapabilmek için ben bile kaç defa yaptim bunlari");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Senin ok.ye bastigindan yüzlerce daha fazla");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bende sinir olmustum");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Hatta kendime bile acimaya baslamistim");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ama en sonunda bitti iste");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Basardim bunu yapmayi");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bana sinirleniyor musun?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bu aslinda bayagi sinir bozucu");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Beni suçlama");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Sana bunu göndereni suçla");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Tabi o ben diilsem:)");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Seni bu iskenceye o soktu");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bu iskence diimi?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Eminim parmagin yoruluyodur");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Hep tiklamak, tiklamak. . .");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Umarim psikolojin bozulmuyodur");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bozuluyomu yoksa");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bozulsun");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Hiç Önemsemem");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Istersen bosluga da basabilirsin");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Hiçbisi farketmez");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Simdi neyden bahsedelim?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Yoruluyomusun?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Istersen ara verelim. Ben beklerim seni.");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Sen git bi çay iç");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Uzun bir süredir burdasin");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bence bu isin sonu gelmicek");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ama sonu olmayan sey yoktur");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ama bunun sonu güzel olucak");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Çünkü sonunda sana bi sürpriz hazirladik");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ve gerçekten çok hos bir sürpriz");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Çok hos çok");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Hos x 1000000000000");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ama daha çok var sona");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ve daha basindayiz");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Varmisin o sona birlikte erismeye");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Hadi");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bu kutucuk olayindaki en iyi sey ne biliyomusun?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Benim her söyledigimi dinleyip");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Onu kabullenmen");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Çünkü ok.ye bastikça kabulleniyosun");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Simdi sana keriz desem onuda kabulleniceksin");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ok.ye bastigin için kabullendin");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Les gibi kokuyosun");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bunada Ok. dedin diimi");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("hehehe çok eglenceli");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bu arada ilerlemeye devam ediyoruz");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Yarisina vardik sayilir");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Az kaldi");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Eminim sabrediceksin");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ve hediyeni alicaksin");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Aslinda ben senin yerinde olsam");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Beni buraya gönderene bayagi kizardim");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Seni buraya tiktilar düsünsene");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Aslinda simdi senin siran");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bildigin kisilere bu adresi gönder");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Baska birilerinide buraya tikabilirsin");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Seni tiktiklari gibi");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Arkadas dediklerine bu adresi gönder");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ve bu küçük iskenceyi dagit");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Biliyormusun. . .");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Söyleyecek seylerim azaliyor");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Belki kutu basina bir kelime yazmaliyim");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bu");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Oyun");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("çok");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("sinir");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("bozucu");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("degil");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("mi?");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bu");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("arada");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("su");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("anda");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("yariyi");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("geçmis");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("bulunmaktayiz");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("düsünsene bukadar daha sürecek bu is");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("çekilmez artik diimi");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("bencede");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("o zaman birakalim istersen");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("ewet ewet birakalim");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("bende sikildim zaten");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("ikimiz içinde uzun bir yolculuk oldu");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("senin için sinir bozucu belkide");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("çok sinirlendin kesin");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("belki kulaklarindan duman çikiyordur");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("eminim delirdin");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("ama bundan bir ders çikarabilirsin");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("herkesle iyi ol");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("sev");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Neyse sona geldik");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Ewet güle güle, goodbye, sayanora ve adiyos");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Huzurlu yasa");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Mutlu ol");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Haaaa bideeee");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Haber listeme kaydini yap gelismelerden haberdar edeyim seni");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Bu scripti yazan ***OrKuN***'a TESEKKÜR EDERIZ!.");

</SCRIPT>



<SCRIPT language=JavaScript>

alert("Script'in ne oldugunu biliyomusun ? :))");

</SCRIPT>

<SCRIPT language=JavaScript>

alert("Iyi yolculuklar dileriz! :))))");

</SCRIPT>


<SCRIPT language=JavaScript>

alert("www.forumalev.com");

</SCRIPT>

 

ORKUN is offline  
Alt 24-03-2006   #5
Profil Bilgileri
Standart Sitenin arka planina ziyaretçi karar versin



Kod:
Arka plan rengi

<select name="schemesel" onChange="document.bgColor = this.options[selectedIndex].value" size="1" style="background-color: rgb(57,57,57); color: rgb(255,255,255)">

<option value="" selected>NORMAL</option>

<option value="000000">SYYAH</option>

<option value="A0A0A0">GRY </option>

<option value="A0EFAA0ACFA">LACYVERT</option>

<option value="0000FF"> KOYU MAVY </option>

<option value="A0A0FF">?AFAK MAVYSY </option>

<option value="0FAFAFECF00">AÇIK MAVY </option>

<option value="C0EEE0F0FA">SOLUK MAVY</option>

<option value="E9E900">SARI </option>

<option value="FFFFA0">AÇIK SARI </option>

<option value="FAFAFAF0AFAFAFAF0A">SOLUK SARI </option>

<option value="C70000">KIRMIZI </option>

<option value="F0F0000FA">AÇIK KIRMIZI</option>

<option value="F0F0FA">YNCY BEYAZI</option>

<option value="A80E0F0ECCA">KOYU MOR</option>

<option value="FF00FF">MOR </option>

<option value="F0F0FACECEEEF0AAA">SOLUK MOR</option>

<option value="00FFFF">TURKUAZ </option>

<option value=" E70C0A00F">YESYL </option>

<option value="A0EFAA0A">AÇIK YE?YL</option>

<option value="C80E0F0E0CCCEF">SOLUK YESYL</option>

<option value="FF0CEAF00">PEMBE</option>


</select>

 

ORKUN is offline  
Alt 24-03-2006   #6
Profil Bilgileri
Standart Sitene Google arama motoru ekle



Kod:
<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
                  <div align="right"><span class="">Aramak İstediğiniz Kelime(ler) </span>
                    <input name="q" type="hidden" />
                    <input name="qfront" type="text" style="width: 120px" />                    
                    <input name="" type="submit" value="  Ara  " />
                  </div>
                </form>

 

ORKUN is offline  
Alt 24-03-2006   #7
Profil Bilgileri
Standart Mail sistemi



Kod:
<html>
<head>
<title>kadir com hos geldınız</title>
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="expires" CONTENT="0">
<meta HTTP-EQUIV="content-language" content="TR">
<meta NAME="robots" CONTENT=" all">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1254">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9">
	<link rel="stylesheet" href="nfrServisler.css" tppabs="http://www.kadir.com/include/general/nfrServisler.css">
	<link rel="stylesheet" href="servisler.css" tppabs="http://www.kadir.com/include/general/servisler.css">
	<script type="text/javascript" src="footer.js" tppabs="http://www.kadir.com/include/ortaklik/footer.js"></script>
	<script type="text/javascript" src="header.js" tppabs="http://www.kadir.com/include/ortaklik/header.js"></script>
	<style>
	.text{font-size:10pt;font-family:tahoma;color:black}
	</style>
	<script>
	function popup(url){
	var yenipencere = null;	
	yenipencere=window.open('','yenipencere','width=625,height=300,status=no,toolbar=no,menubar=no,directories=no, location=no,scrollbars=yes,resizable=no,alwaysRaised=yes,screenX=20,screenY=5,titlebar=yes,z-lock=yes,left=20,top=130');
	yenipencere.location.href=url;
	if (yenipencere != null) {
	if (yenipencere.opener == null){
	yenipencere.opener = self;		
	}
	yenipencere.location.href=url;
	yenipencere.focus();	
	}
	}
	</script>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" bgcolor="#FFFFFF">
<script language="JavaScript">showHeader();</script>
<table width="760" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="White">
<tr bgcolor="White">
	<td width="130">
		<table width="100%" cellpadding="0" cellspacing="0" align="center" border="0">
			<tr>
				<td align="center" height="65"><a href="index.htm">
                <font size="3">kadir</font></a></td>
			</tr>
		</table>
	</td>
	<td width="630">
		<table width="100%" height="16" cellpadding="0" cellspacing="0">
			<tr>
				<td colspan="3"><img src="blank-1.gif" tppabs="http://img.kadir.com/general/blank.gif" width="1" height="37" border="0" alt=""></td>
			</tr>		
			<tr>
				<td width="90%"><img src="blank-1.gif" tppabs="http://img.kadir.com/general/blank.gif" width="40" height="1" border="0" alt=""></td>
				<td align="right" width="4%"><img src="blank-1.gif" tppabs="http://img.kadir.com/general/blank.gif" width="2" height="1" border="0" alt=""></td>
				<td align="right" width="6%"><img src="blank-1.gif" tppabs="http://img.kadir.com/general/blank.gif" width="29" height="1" border="0" alt=""></td>
			</tr>
			<tr>
				<td colspan="3"><img src="blank-2.gif" tppabs="http://www.kadir.com/img/general/blank.gif" width="1" height="5" border="0" alt=""></td>
			</tr>		
			<tr>
				<td colspan="3"><img src="blank-2.gif" tppabs="http://www.kadir.com/img/general/blank.gif" width="1" height="5" border="0" alt=""></td>
			</tr>		
		</table>
	</td>
</tr>
</table>
<table width=760 cellpadding=0 cellspacing=0 border=0 bgcolor=white align=center>
	<tr>
		
		<td valign=top height="20">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="9"></td>
					<td class="borderBottom">&nbsp;&nbsp;<font size="2"><b>HESAP YÖNETİMİ</b></font></td>
					<td width="8"></td>
				</tr>
			</table>
			<table width=100% cellpadding=0 cellspacing=0 border=0>
				<tr>
					<td height=17></td>
				</tr>
				<tr>
					<td colspan=2>
						<!--1-->
						<table width=80% border=0 cellspacing=0 cellpadding=0 align="center">
							<tr><td valign=top >
<!--icerik-->
<table border="0" width="400" cellspacing="0" cellpadding="0" align="center">
		<tr>
			<td bgcolor="#333399">
			<table width="100%" cellpadding="0" cellspacing="1" align="center" border="0">
				<tr>
					<td bgcolor="white">
						<table border="0" cellpadding="0" cellspacing="0" width="100%">
						      <tr>
						        <td colspan="2"  height="20" bgcolor="#333399">&nbsp;&nbsp;<font color="white" size="2"><strong>Satış Ortağı Hesap Yönetimi Girişi</strong></font></td>
						      </tr>
							  <tr>
							  	<td colspan="2"><img src="blank-4.gif" tppabs="http://www.kadir.com/ortaklik/images/blank.gif" width="1" height="20"></td>
							  </tr>
<FORM action="http://ortaklik.kadir.com/start.asp" method="post" name="formAccount">
							  <tr>
							  	<td width="40%" bgcolor="white" align="right" class="text">E-Mail :&nbsp;</td>
							  	<td width="60%" bgcolor="white"><INPUT size=20 name=username value=></td>
							  </tr>
							  <tr>
							  	<td width="40%" bgcolor="white" align="right" class="text">Şifre :&nbsp;</td>
							  	<td width="60%" bgcolor="white"><INPUT size=20 name=password type=password value=""></td>
							  </tr>
							  <tr>
							  	<td colspan="2"><img src="blank-4.gif" tppabs="http://www.kadir.com/ortaklik/images/blank.gif" width="1" height="3"></td>
							  </tr>
							  <tr>
							  	<td colspan="2" align="center"><img src="blank-4.gif" tppabs="http://www.kadir.com/ortaklik/images/blank.gif" width="7" height="20"><img height="17" src="lock.gif" tppabs="http://www.kadir.com/ortaklik/images/lock.gif" width="15"><img height="1" src="blank-4.gif" tppabs="http://www.kadir.com/ortaklik/images/blank.gif" width="3"><INPUT id=submit1 name=submit1 type=submit value="Güvenli Giriş"></form>
								</td>
							  </tr>
							  <tr>
							  	<td colspan="2" align="center"><img src="blank-4.gif" tppabs="http://www.kadir.com/ortaklik/images/blank.gif" width="40" height="1"><font size="1">Güvenli Giriş aşamasında tarayıcınızın<br>
								<img src="blank-4.gif" tppabs="http://www.kadir.com/ortaklik/images/blank.gif" width="64" height="1">açtığı pencere(ler)de Tamam / Evet'i seçin.</font></td>
							  </tr>
							  <tr>
							  	<td colspan="2"><img src="blank-4.gif" tppabs="http://www.kadir.com/ortaklik/images/blank.gif" width="10" height="20" align="absmiddle"></td>
							  </tr>
							  <tr>
							  	<td colspan="2" align="center"><img src="blank-4.gif" tppabs="http://www.kadir.com/ortaklik/images/blank.gif" width="10" height="30" align="absmiddle"><img height="18" src="soru.gif" tppabs="http://www.kadir.com/ortaklik/images/soru.gif" width="18" align="absmiddle"><font face="Tahoma" size="2">&nbsp;&nbsp;<a href="javascript:if(confirm('http://ortaklik.kadir.com/sendpassword.asp?Table=Accounts&Title=Affiliate  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://ortaklik.kadir.com/sendpassword.asp?Table=Accounts&Title=Affiliate'" tppabs="http://ortaklik.kadir.com/sendpassword.asp?Table=Accounts&Title=Affiliate">Şifremi Unuttum</a></font></td>
							  </tr>
						</table>
					</td>
				</tr>
			</table>
	
					</td>
				</tr>
			</table>
	
<!--icerik bit-->				
								</td></tr></table>
						<!--0-->
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>





<script language="JavaScript">showFooter();</script>
</body>

 

ORKUN is offline  
Alt 24-03-2006   #8
Profil Bilgileri
Standart Status bar da soldan saga kayan yazi



Kod:
<script language="Javascript">
<!--
var x = 0
var speed = 90
var text = "istediğini yaz"
var course =76
var text2 = text

function Scroll() {
window.status = text2.substring(0, text2.length)
if (course < text2.length) {
setTimeout("Scroll2()", speed)
}
else {
text2 = " " + text2
setTimeout("Scroll()", speed);
}
}
function Scroll2() {
window.status = text2.substring(x, text2.length)
if (text2.length - x == text.length) { 
text2 = text
x = 0
setTimeout("Scroll()", speed);
}
else {
x++
setTimeout("Scroll2()", speed);
}
}
Scroll()
//-->
</script>

 

ORKUN is offline  
Alt 24-03-2006   #9
Profil Bilgileri
Standart Karsilama ve ugurlama mesaji



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

 

ORKUN is offline  
Alt 24-03-2006   #10
Profil Bilgileri
Standart Mausu takip eden kivilcimlar



Kod:
<layer name="a0" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,2,2"></layer>
<layer name="a1" left=10 top=10 visibility=show bgcolor="#ff8000" clip="0,0,2,2"></layer>
<layer name="a2" left=10 top=10 visibility=show bgcolor="#ffff00" clip="0,0,2,2"></layer>
<layer name="a3" left=10 top=10 visibility=show bgcolor="#00ff00" clip="0,0,2,2"></layer>
<layer name="a4" left=10 top=10 visibility=show bgcolor="#0000ff" clip="0,0,2,2"></layer>
<layer name="a5" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,2,2"></layer>
<layer name="a6" left=10 top=10 visibility=show bgcolor="#ffffff" clip="0,0,2,2"></layer>

<div id="starsDiv" style="position:absolute;top:0px;left:0px">
<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#ffff00;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#ff0000;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#FF00FF;font-size:2px;visibility:visible"></div>
</div>

<script language="JavaScript">
//  HAZIRLAYAN VE SUNAN muratus Macho_M
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;
if (document.all) {
function MoveHandler(){
Xpos = document.body.scrollLeft + event.x;
Ypos = document.body.scrollTop + event.y;}
document.onmousemove = MoveHandler;}
else if (document.layers) {
function xMoveHandler(evnt) {
Xpos = evnt.pageX;
Ypos = evnt.pageY;}
window.onMouseMove = xMoveHandler;}
function animateLogo() {
if (document.all) {
yBase = window.document.body.offsetHeight / 4;
xBase = window.document.body.offsetWidth / 4;}
else if (document.layers) {
yBase = window.innerHeight / 4;
xBase = window.innerWidth / 4;}
if (document.all) {
for (i = 0 ; i < starsDiv.all.length; i++) {
starsDiv.all[i].style.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
starsDiv.all[i].style.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);}}
else if (document.layers) {
for (j = 0; j < 7; j++) { //7 is number of NS layers!
var templayer="a" + j;
document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);}}
currStep += step;
setTimeout("animateLogo()", 10);}
animateLogo();
// End -->
</script>

 

ORKUN is offline  
Cevapla
Tags: adim, arsivi, html, kodlari, kurun, sitenizi


Adım adım HTML kodlari arsivi html sitenizi kurun ile ilgili Benzer Konular
10772 Kez Görüntülendi

Windows 7 İşletim Sistemi Kurulumu Adım Adım (Resimli Anlatım) Windows 7
spaces Sinema html kodlari Msn Space Bölümü
HTML Password Lock 4.3 Web sayfalarınızı oluşturabileceğiniz bir HTML editörü Hemen İndir / Yükle Webmaster Programları
windows unuzun altında linux kurmak istemisiniz.adım adım açıklamalı Genelbilgi ve İpucu
Yanlışlıkla Silinen dosyaları adım adım (resimli) kurtarmak! (Recover My Files) Programların Resimli Anlatımları

Saat 22:19.
Sayfalar Rüyatadı Mumsema Frmacil Etiket Dantel Modeller Mumsema.Net Add to Google Add to My Yahoo!
Powered by vBulletin® Version 3.6.12 Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Mail Adresimiz Forumalev(at)gmailcom
Moderatör Başvuru Formu

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552