> 1 <
Kırık Link Bildir! #269862 31-10-2007 18:33 GMT-1 saat WEB SAYFASI TASARIMIN TEMELLERİ
EVET, nihayet bir Web sunucusunda kendinize ait bir alan elde ettiniz ve Web aracılığı ile başkalarına söyleyecek çok şeyiniz var. Peki bir Web sayfasını tasarlamaya nereden başlamalı? Öğrenmeniz gereken temel dilin HTML (Hypertext Mark-up Language) olduğunu belirtmiştik. Bu dil aslında, normal metni, hypertext adı verilen ve web browser'larla görüntülenmeye uygun metin haline dönüştüren bir kodlar silsilesi. Diğer bir deyişle HTML, basit bir belgeyi alıp içine bu belgenin sayfa düzeni ve metin biçimleri ile ilgili bilgiler yerleştirmenin ve bu belgeyi diğer metin (ve/veya grafik) içerikli belgelerle ilişkilendirmenin yoludur.
Web'de yayınlanmak üzere belgeler hazırlarken, HTML kodları ile metinlerinize vereceğiniz biçimler belirteç (İngilizce adı ile mark-up veya tag) adını taşır. Bunlar metnin çeşitli yerlerinde, ' <' ve ' >' şeklindeki parantezlerin arasına yerleştirilen kodlardır. Bunlar arasında diğer Internet sayfalarına (veya URL'lere) geçişi sağlayan 'link'ler de bulunabilir.HTML bir dil olarak adlandırılsa da, HTML belgelerinin (kısaca Web sayfalarının) hazırlanması klasik bilgisayar dilleri ile programlama yapmaya pek benzemez. Daha çok kelime işlemcilerle çalışmaya benzer. Ancak burada yazıtipi büyüklüğünü ayarlamak, bir metni kalın veya italik yapmak için menü komutlarını kullanmaz, bunları metnin başına ve sonuna koyduğunuz kodlarla belirlersiniz. (WordPerfect ile çalışanlar bunu kolayca anlayacaktır, çünkü bu kelime işlemcide yazdığınız metinlerin biçim kodlarını da Reveal Codes komutu ile görüntüleyebilirsiniz.) Metni ve bu kodları nerede yazacağız diyorsanız, başlangıçta Windows'un Not Defteri fazlasıyla yeterli olacaktır.
Bu kısa girişten sonra bir örnek ile HTML kodlarını kullanmaya başlayalım. Diyelim ki elimizde şöyle bir metin var:
Düşünde bile göremez işler,
Düşlerin gördüğü işleri.
Bu metni HTML kodları ile şöyle yazarsak:
<B>Düşünde</B> bile göremez,
<B>işler</B>,<BR><B>Düşlerin</B> gördüğü <B>işleri</B>.<BR>
Web browser'da aşağıdaki gibi bir görüntü elde ederiz:
Düşünde bile göremez işler,
Düşlerin gördüğü işleri.
Bu örnekte <B> ve </B> belirteçleri Web browser'a aralarındaki metni kalın (bold) göstermesini söyler. <BR> belirteci ise satır başı verilmesi gerektiğini. Bunlar gibi başka pek çok belirteç var ama güzel bir Web sayfası tasarlamak için başlangıçta öğrenmeniz gereken belirteç sayısı 30-40 kadardır. Profesyonelleştikçe yeni belirteçler kullanmaya başlayabilirsiniz.
Bir de yazdıklarınızın düzgün görünmesi için her html dosyasının başında:<html> <head> <title> </title> </head><body>
sonunda:
</body></html>
belirteçlerinin bulunmasına dikkat edin. Bunlar sayfanın başını sonunu belirlemek için gerekli belirteçlerdir. Koymazsanız, Web browser'ınızda metin belirteçleri ile birlikte görünebilir.Bu örnekteki belirteçleri kendiniz denemek istiyorsanız, Not Defteri'ne istediğiniz metni bu belirteçleri kullanarak girin. Belgeye bir isim ve htm soyadını ('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. Adım 1. 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 'in masaüstündeki duvar kağıdına benzetebiliriz. Önce boş bir arka planı renklendirmeyi görelim. Web sayfasının arka planının rengi <body> tag'ını kullanarak değiştirilir. Default arka plan rengi gridir. Arka plan rengini örneğin beyaz yapmak için body tag'ını
<body bgcolor='white'>veya <body bgcolor="#FFFFFF">
şeklinde kullanabilirsiniz. Birinci seçenekte rengin İngilizce ismi, ikinci seçenekte ise aynı rengin RGB cinsinden renk kodu hexadecimal (onaltılı sayı sistemi) olarak verilmektedir. Eski tarihli browser'lar renk isimlerini algılayamazlar, bu yüzden sayfalarınızda renklerin onaltılı sayı sistemi kodlarını kullanmak daha hayırlıdır. Yan tarafta gördüğünüz tabloda, web sayfalarının arka planlarında kullanılabilecek olan temel renkler isim ve sayı kodu olarak listelenmiştir. Onaltılı sayıların RGB kombinasyonları ile oynayarak istediğiniz rengi web sayfası arka plan rengi olarak belirleyebilirsiniz.
Bir Web sayfasının arka planına bir resim döşeyebilirsiniz. Bu işlem için ilk önce elinizde bir resim dosyası olması gerekir. Web sayfalarında kullanılabilecek bütün resimler JPG veya GIF formatında olmalıdır. Web okulunu hazırlarken elinizde bir resim düzenleme programının olduğunu ve JPG veya GIF formatındaki dosyalarla çalışmayı bildiğinizi varsayıyoruz. Örneğin elimizde arka.gif diye bir resim olsun. Bu resmi web sayfasının arka planına döşemek için yine <body> tag'ını kullanacağız. ARKA.GIF adındaki bir resmi web sayfasının arkasına döşemek için <body> tag'ını aşağıdaki gibi
<body background="arka.gif"
kullanmalısınız. Bu aşamada ARKA.GIF dosyasının, HTM dosyası ile aynı klasörde yer alması gereklidir. Örnek bir resim döşemesi aşağıdaki resimde gösterilmiştir. Bu aşamada bir web sayfasının arka planında bir resim döşediğinizde, arka plan rengi kullanmaya gerek kalmadığı gibi bir hisse kapılırsınız, yanılırsınız. Genelde Internet yavaş bir şey olduğu için, çoğu kullanıcı sörf yaparken resimleri kapatma yoluna gidiyorlar. Böyle olunca arka plana döşenmiş resimler görünmeyecek, arka plan rengi de default olarak gri olduğu için sizin hiç düşünmediğiniz bir web sayfası ortaya çıkabilecektir. Bu yüzden size tavsiyemiz, arka plan grafiği kullandığınızda arka planda kullandığınız resme uygun bir arka plan rengini de <body> tag'ının içinde belirtmenizdir. İki belirteç bir tag içerisinde kullanılabilir. Ve resmiler kapatıldığında web tarayıcısı otomatik olarak belirtilen arka plan rengini web sayfasına uygulayacaktır. Sarı içerikli bir arka plan resmi ile kullanılması gereken <body> tag'ı aşağıda gösterilmiştir.
<body background="arka.gif" bgcolor="#ffff00">
Adım 2. Web sayfasının metin içeriği. Web sayfalarında aynen kitap veya dergi sayfalarında olduğu gibi metinler ve resimler kullanılabilir. 2. Adımda web sayfalarında metinlerin kullanımına değineceğiz. Web sayfalarında metinler aynen Word veya benzeri bir kelime işlemci programda olduğu gibi bold, italik vs.. şeklinde formatlanabilir, font tipi, rengi ve boyutu ayarlanabilir. Web sayfasının içerisine yazdığınız metin web tarayıcısının genişliği boyunca yazılır, artan kısım otomatik olarak alt satıra atılır. Örneğin aşağıdaki gibi bir metnimiz olsun.
Merhaba. Bu benim ilk web sayfası denemem. Yazdığım metni bold, italik, veya altçizgili olarak görüntülemek istiyorum.
Bu metni web sayfasına girdiğinizde aşağıdaki gibi bir ekran görüntüsü ile karşılaşacaksınız. Şimdi bu metni formatlamaya başlayalım. Öncelikle merhaba kısmını büyük yapmak lazım. Bunun için de <hx> tag"ını kullanacağız. Bu tag'da x yerine birden 6'ya kadar numara verebilirsiniz. 1 en büyük boyut, 6 en küçük boyuttur. Denemeyle sabittir, 1 ile 4 arasında rakamlar kullanmak en iyisidir. Şimdi merhaba yazısını büyütmek için onu <h1> tag'ına alalım.
<h1>Merhaba</h1>
Burada, <h1> ile </h1> arasındaki metin, büyültülecektir. Aşağıdaki resimde merhaba tag'ı değişik <hx> boyutlarında kullanılmıştır. Böylece merhaba yazısını istediğimiz gibi büyüttük. <hx> tag'ını kullanırken öğrendiğimiz bir ikinci şey ise metin formatlamasının nasıl yapıldığı. Demek ki, bir tag'ın formatlaması iki tag arasına (<h1> ile açılış, </h1> ile kapanış) aldığımız metne uygulanıyor. Şimdi hızlı bir biçimde diğer metin tag'larını inceleyelelim.
<b> </b> aradaki metni bold (kalın) yapar
<i> </i> aradaki metni italik yapar
<u> </u> aradaki metnin altını çizer
Bu tür metin formatlama tag'ları birbirlerinin içinde kullanılabilirler. Örneğin bir metin parçasını hem bold hem de italik yapmak için <b><i> ..... </i></b>
formatlamasını kullanmak gerekecektir. Özgün metnimize geri dönelim. Bu metinde adı geçen formatlamaları uyguladığımızda HTML sayfamızdaki metin aşağıdaki gibi olacaktır.
<h1>Merhaba. </h1>Bu benim ilk web sayfası denemem. Yazdığım metni <b>bold</b>, <i>italik</i>, veya <u>altçizgili</u> olarak görüntülemek istiyorum.
Böyle bir formatlama yapıldığında elde edilecek olan web sayfası görüntüsü aşağıdaki gibidir. Metin parçalarını web sayfasında görüntülerken paragraf başı ve satır sonunu da elle işaretlemek zorundasınız yoksa metin otomatik olarak alta kaydırılacaktır. Burada karşımıza iki adet tag çıkıyor. Bunlardan birincisi <br>, ikincisi de <p> tag'ı. Birincisi satır sonu, ikincisi ise paragraf başı anlamına geliyor. Söz konusu metinde ' Bu benim ilk web sayfası denemem' yazısından sonra bir satır sonu yani <enter> verelim. Ayrıca paragraf başını denemek için de ' bold, italik, veya altçizgili' metnini yeni bir paragraftan başlatalım. Bu durumda kullanacağımız formatlama aşağıdaki gibi olacaktır. <h1>Merhaba. </h1>Bu benim ilk web sayfası denemem. <br>Yazdığım metni <p><b>bold</b>, <i>italik</i>, veya <u>altçizgili</u> <p>olarak görüntülemek istiyorum.Dikkat ederseniz, <p> yani paragraf başı tag'ının kullanıldığı yerlerde <br> yani satır sonu kullanmıyoruz. Çünkü paragraf başı tag'ı zaten satır sonunu da belirlemektedir. Yukarıdaki örnekte kullanılan tag'lamanın ekranda göstereceği sonuç aşağıdadır. Son olarak HTML sayfalarında enter tuşunu kullanmanın web sayfasının görünümüne bir etkisi olmadığını söyleyelim. Web sayfalarının ekranda görünümünde satır sonları, satır araları ve paragraf başları tamamen tag'lar ile belirlenir. Bu yüzden metin dosyasında enter kullanmanın web sayfasına herhangi bir etkisi yoktur. Ancak web sayfasını düzenlerken her şeyin derli toplu gözükebilmesi için bu tür bir enter'lama yapabilirsiniz. Gelecek sayımızda metin formatlarken renk ve font kullanmayı, <pre> tag'ının ne işe yaradığını, metinlerin bir liste halinde nasıl alt alta sıralanacağını görecek ve web sayfalarında resim kullanımına giriş yapacağız.
resim kullanmak :
Resim Kullanmak
Gelelim web dünyasının en önemli öğelerinden birine, resimlere. HTML dilinde her şey çok kolay olduğu gibi sayfalara resim yerleştirmek de çok kolaydır. Resimler sayfa içerisinde metne göre sağa, sola, aşağı ve yukarı doğru yerleştirilebilirler, ayrıca boyutları sadece belirli değerler değiştirilerek ayarlanabilir.
Dokümanın herhangi bir yerine bir resim yerleştirmek için en sade haliyle <IMG SRC="RESIM.GIF"> tag'ını kullanabilirsiniz. Bu tag'ı kullandığınızda resim hiç bir yere yaslanmayacak, boyutu ayarlanmayacak, metin olarak bir alternatifi olmayacaktır.
Yukarda da belirttiğimiz gibi resimleri kullanırken bir çok seçeneğiniz var, bu seçenekler sayfanın görünümünde kuşkusuz büyük rol oynayacaktır. Seçeneklerden birincisi Internet erişiminin yavaş olduğunu bildiğimiz ülkemizde sayfalarınızı görüntüleyecek olan kişilere biraz yardımcı olmak en azından resim yüklenene kadar kullanıcının meraklarını gidermek için kullanılabilir, bahsettiğimiz takı "ALT" tır. <IMG SRC="RESIM.GIF" ALT="deneme resmi"> satırını yazdığınızda web tarayıcınız RESIM.GIF adlı resmi yüklenmeden önce resmin yerine "deneme resmi" metnini girecektir, böylece kullanıcı resmi görmeden ne olduğunu bilecek ve anında STOP tuşuna basabilecektir. (!)
Seçeneklerden biri de resmin ekranda görünecek boyutlarını ayarlamak için kullanılır bu takı HEIGHT ve WIDTH'tir. Bu takılar bir arada kullanılmalıdır, tek başına kullanıldığında web tarayıcısı takıyı göz ardı edecektir. <IMG SRC="RESIM.GIF" WIDTH=100 HEIGHT=50> satırını yazdığınızda RESIM.GIF isimli resmin boyutu ne olursa olsun 50 piksel yüksekliğe ve 100 piksel genişliğine getirilerek ekranda gösterilecektir. Resim gösterirken işinize yarayacak diğer bir seçenek ise BORDER'dır. Bu takı ileride değineceğimiz "Internet Kısayolları" (Hyper Link) ile ilgili olsa da şimdi birkaç püf noktası vermek gerekir. Başka bir URL'ye kısayol yaratıldığında kısayolun ismi bir alt çizgi ile belirlenir, bu işlem resimlerde resmin mavi bir çerçeve içerisine alınmasıyla belirtilir, Eğer bir resmi başka bir sayfaya kısayol olarak kullanacaksanız ve çerçevenin görünmesini istemiyorsanız BORDER=0 ifadesini kullanmalısınız.
Resimleri kullanırken dikkat etmeniz gerekenler:
* Daha önce de belirttiğimiz gibi Internet'te uzun süredir yer alan kullanıcılar, sitelerdeki büyük resimleri çok işlerine yaramadığı sürece görmek istemeyeceklerdir. Bu yüzden, her zaman resimlerin boyutunu küçük, miktarını az tutmalısınız.
* Eğer büyük resimler kullanacaksanız, (büyük resim derken ekranı kaplayacak kadar büyük değil), bunları JPEG formatına çevirmenizi ve kalitesini düşürmenizi tavsiye ederiz. JPEG resimler her zaman GIF'lerden daha az yer kaplarlar, bu yüzden daha hızlı yüklenirler.
* Resimlere her zaman ALT tag'ını kullanarak alternatif metinler verin, Internet'i kullananların her zaman resim görüntüleyebilecek, browser'ı olan makineler olduğunu varsaymayın. Eğer resimlere alternatif metinler verirseniz terminal ekranı kullanan kullanıcılarda bilgiye erişebilirler.
* GIF'leri kullanırken "Interlaced" haline getirin, bu tip GIF'ler kademe kademe yüklenir ve yavaş yavaş netleşerek resmi daha hızlı yükleniyormuş gibi gösterir.
yazı tipleri :
HTML ve Yazıtipleri
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)
internet kısayolları :
Internet Kısayolları
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] [:port]" >[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="
bağlantıyı göster (facebook ile) bağlantıyı göster (klasik üye girişi ile) > deneme</a>
gibi bir satır ekranda deneme olarak görülecek ve sizi doğruca Türkiye'nin Web sitesine bağlayacaktır.
Adres kısmı oldukça basit olmasına rağmen, bazı küçük püf noktaları da yok değil. Örneğin, adres kısmını kullanıcının size mail atması için kullanabilirsiniz. Bunu gerçekleştirmek için kişisel e-posta adresinizin önüne mailto: takısını getirmeniz yeterlidir. Örneğin hazırladığınız sayfada kullanıcıların size mail atabilmeleri için
Bana <a href=" mailto:[email protected]" >mail</a> atabilirsiniz.
gibi bir satır kullanabilirsiniz. Kısayollar ayrıca Telnet, FTP, Gopher servislerini de çağırabilirler. Bunları çağırmak için, sizin de tahmin edebileceğiniz gibi
bağlantıyı göster (facebook ile) bağlantıyı göster (klasik üye girişi ile) gopher:// takılarını site isminin önüne getirmek yeterlidir. Genel kullanımda verdiğimiz :port 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 :port 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="
bağlantıyı göster (facebook ile) bağlantıyı göster (klasik üye girişi ile) ><img src=" PCW.GIF" alt=" deneme" ></a>
satırını yazdığınızda PCW.GIF isimli resim deneme'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="
bağlantıyı göster (facebook ile) bağlantıyı göster (klasik üye girişi ile) ><img src=" PCW.GIF" border=0></a>
Dikkat Etmeniz Gerekenler
Bir kısayol oluşturduktan sonra mutlaka ' Acaba bir hata yapmış mıyım?' diyerek kısayolu kontrol edin. Bozuk kısayolların sitenizin ziyaret sayısını ve itibarını zedeleyeceğini unutmayın.
Sonradan doldururum diye kısayolu önceden yerleştirmeyin. Sitenin başına ' inşa aşamasında' yazsanız bile yapmadığınız bölümlerin linklerini koymayın. Bunun yerine hazırladığınız bölümleri kısayol oluşturmaksınız Web sayfasına yerleştirin.
Sitenize bulunduğunuz makineden FTP programıyla uzunca bir shareware yolluyorsunuz diyelim. Shareware'inizin kısayolunu önceden yollamayın, geçen zaman süresince sitenize bağlanıp o program ile ilgilenenler ' 404 Not Found' hatası ile karşılaşırlar.
Internet adresi verirken başına
bağlantıyı göster (facebook ile) bağlantıyı göster (klasik üye girişi ile) mail adresi verirken başına mailto: koymayı unutmayın. Bunu yapmazsanız verdiğiniz www..com.tr veya [email protected] gibi bir adres lokal bir dosya olarak görülür ve linkine tıklayınca doğal olarak hata verir.
Internet kısayollarını ve resimlerin kısayollara atanması için nasıl kullanıldığını öğrendik...
İşte bize en çok sorulan sorulardan biri:
' Web projem bir klasörde duruyor, lokal olarak çalışıyorum ve bir alt veya üst klasördeki dosyayı bulunduğum sayfadan çağırmak istiyorum. Nasıl yapacağım?'
Üzerinde çalıştığınız HTML sayfası C:\PROJE\1 klasöründe olsun, sizin de C:\PROJE klasöründeki DENEME.HTM sayfasını çağırmak istediğinizi varsayalım. Bu dosyayı çağırmak için şöyle bir satır kullanmalısınız:
<A HREF=" ../DENEME.HTM" >KISAYOL DENEME.HTM</A>
../ ifadesini istediğiniz kadar kullanabilirsiniz. İki alt klasördeki dosyayı çağırmak için ../../DENEME.HTM gibi bir ifade kullanabilirsiniz. Bir üst klasördeki (C:\PROJE\1\BASKA\SAYFA.HTM gibi) dosyayı çağırmak için ise şöyle bir yol izlemelisiniz:
<A HREF=" BASKA/SAYFA.HTM" >KISAYOL</A>
Eğer bir Web sunucusu üzerinde çalışıyorsanız ve sabit diskinizin tümü veya bir alt dizinini Web sayfalarınız için tanımlanmışsa kök dizine inmek ve buradan başka bir klasöre geçmek için / karakterini kullanabilirsiniz. Örneğin
<a href=" /GIRIS.HTM" >GIRIS</a> satırı sizi web için ayrılan bölümün en dibine kadar indirecek ve GIRIS.HTM dosyasına kısayol oluşturacaktır. Bunun gibi resimler dizinindeki bir resmi çağırmak için
<img src=" /resimler/.gif" > gibi bir ifade kullanmalısınız.
Kısayollar için söyleyeceğim şimdilik bu kadar. Son olarak sayfalarınızın profesyonelliğini ve sayfanıza bağlananların ruh sağlığının korunması için "Dikkat Etmeniz Gerekenler" kutumuzu okumanızı ve sayfalarınızda uygulamanızı şiddetle tavsiye ederim.
listeler :
Liste 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
Tablolar, HTML sayfasında listeler ve şablonlar hazırlamak dışında, resimleri ve metinleri sayfa içerisinde istenilen bölgelere yerleştirmek ve bunun gibi bir çok alanda kullanılırlar. HTML 3.2 ile birlikte pek çok yeni özelliğe kavuşan ve daha görsel hale getirilen tablolar konusunu iyi öğrenen bir webmaster, hayalgücü ile tasarladığı "TÜM" sayfaları tablolar yardımı ile oluşturabilir.
<TR>,<TD>,<TH> ve bunları kapatma taglarıyla birlikte kullanılan <TABLE...> tag'ının genel kullanımı şöyledir:
<TABLE BORDER=X CELLPADDING=X CELLSPACING=X WIDTH=[% veya X] HEIGHT=[% veya X] BGCOLOR=X BACKGROUND="X">
BORDER değişkenine verilecek 0 veya daha üstü bir değer tablonun kalınlığını belirler. CELLPADDING değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi, CELLSPACING ise hücreler arasındaki mesafeyi belirler.
WIDTH ve HEIGHT değişkenleri bir yüzde değeri veya bir sayı olabilir. WIDTH=590 değeri verildiğinde 640*480 çözünürlükte ekranın tüm genişliğini kaplayacak bir tablo oluşturulur. WIDTH=%50 değerini verildiğinizde ise Web tarayıcınız o tablonun her zaman ekran genişliğinin yarısını kaplamasını sağlar.
<TABLE> tag'ının içerisinde kullanılan BGCOLOR değişkeni tablonun fon rengini tayin eder. X değeri geçen aylarda değindiğimiz HEX kodlarından (#FFFF00) veya renk isimlerinden (white, olive...) biri olmalıdır. Tablonuz daha canlı ve profesyonel görünsün istiyorsanız, arka fonuna bir GIF veya JPG resmini de BACKGROUND ekini kullanarak döşetebilirsiniz.
Gelelim tablonun oluşturulmasına. Genel prensip şudur: <TABLE> tag'ıyla tabloya başladıktan sonra her satırı oluşturmak için <TR>, her sütunu oluşturmak için ise <TD> tag'ını kullanmalısınız. Aman bu tagları kullanıyorsanız her satırın sonuna </TR> ve her sütunun sonuna </TD> tag'larının koymayı unutmayın!
Bir diğer durum da, herhangi bir hücrenin yanındaki iki ya da daha çok hücreyi enine ya da boyuna doğru içine almasıdır ki bu işlemi yapmak için <TD [COLSPAN=X, ROWSPAN=X]> veya <TR [COLSPAN=X, ROWSPAN=X]> ekleri kullanılır. Örneğin 2 satır ve 2 sütunlu 1.tablonun oluşturulması için aşağıdaki kodlara ihtiyaç vardır, bu kodlar aynı zamanda COLSPAN ve ROWSPAN eklerini de anlatmaktadır.
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=3>
<!---Bu kodlarla, çerçeve kalınlığı 1, hücreler arası boşluğu 2, hücre ile yazı aralığı 3 olan yeni bir tablo oluşturuyoruz.--->
<TR><TH COLSPAN=2> <!---iki kolonu içine alacak, yazılar kalın olacak ve ortalanacak (yani başlık olacak) --->
Tablo Örneği:
</TR></TD><TR><TD>
deneme1
</TD><TD> <!-- yeni bir kolona başlıyoruz... -->
deneme2
</TR></TD><TR><TD>
deneme3
</TD><TD> <!-- yeni bir kolona başlıyoruz... -->
deneme4
</TD></TR></TABLE> <!-- tüm tag'ları kapatıp tabloyu sonlandırıyoruz. -->
Eğer renkli tablolar elde etmek isteseydik <TABLE .... ifadesinin yanına BGCOLOR="#FFFF80", <TD.. ifadesinin yanına ise BGCOLOR="#000080" eklerini girmeniz gerekecekti. Tablolar hakkında daha çok bilgi edinmek istiyorsanız deneme'daki "Web Programcısının El Kitabı" bölümüne bakabilirsiniz. Adresi:
bağlantıyı göster (facebook ile) bağlantıyı göster (klasik üye girişi ile) İlerki aylarda tablolar hakkında güzel püf noktaları ve daha çok bilgi bulacaksınız.
sayfa içinde açıklama yapmak
Sayfa İçinde Açıklama 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> ------>
freme kullanmak :
Frame Kullanmak
Frame'ler web tarayıcınızın penceresini birbirine yapışık parçalara ayırarak her bir parçanın ayrı bir içerik sergilemesine izin verir. Yüklenen basit bir sayfayla yapılan pencereyi ayırma işlemi, her pencere için HTML standartlarına uygun bir sayfanın yüklenmesiyle tamamlanır. Frame'ler bulunan bir sayfa oluşturmak için herhangi bir HTML editörüne gerek yoktur. Tek ihtiyacınız olan basit bir metin editörü ve kafanızda tasarladığınız çerçeve stilini gerçekleştirmek için biraz düşünmek.
Sayfanızda frame uygulamasına geçmeden önce hemen bu özelliğinin HTML 3.0 standartlarında bulunmadığını fakat en yeni web tarayıcıları tarafından desteklendiğini belirtelim. Netscape Navigator'ın 2.0 ve Microsoft Internet Explorer'ın 3.0 ve daha üstü sürümleri frameleri destekliyor.
Frame'leri destekleyen bir sayfa oluşturuyorsanız mutlaka sayfanın, bu özelliği desteklemeyen web tarayıcıları için bir alternatifini oluşturmalısınız, aksi takdirde sitenize terminal ekranından veya eski bir web tarayıcıyla bağlanan kimseler içerikten faydalanamayacak ve sayfa ziyaret sayınıza katkıda bulunmayacaklardır (!) Frame'lere nasıl alternatif oluşturulduğunu yazımızın ilerki bölümlerinde anlatacağız. Başlamadan önce herkesin yaptığı gibi frame'ler konusunda 1-2 örnek verip sadece TAG'ları açıklamayacağımızı belirtelim, aynı zamanda kendi özgün çerçevelerinizi oluşturmanız için işin mantığına da değineceğiz.
Frame'ler ne zaman kullanılmalıdır?
Hiç gereği olmadığı halde web sayfanızda frame'lerden faydalanmak hem sayfanızın işlevselliğini yok edip kullanıcının kafasını karıştıracak hem de sayfanın yüklenmesini zorlayacaktır, web tarayıcınız bir web sayfasının yüklenmesi için sunucudan komutlar aldığından en az iki sayfadan oluşacak çerçeveli bir sayfayı yüklemek için ana sayfa da içinde olmak üzere üç sayfa için ayrı ayrı sunucudan bilgi alacaktır. Sayfa içerisinde, yüklenmesi uzun süre alacak, büyük bir resim, menü gibi değişmeyen öğeleri her seferinde tekrar yüklememek için bu bölümler ayrı bir pencere olarak tanımlanabilir.
Sayfa içerisinde ilişkilendirmeler oluşturmak, sayfanın değişik alanlarına tıklandığında bağımsız bir yerde bir içerik oluşturmak frame'ler sayesinde çok kolaydır.
Nasıl oluyor da oluyor?
Frame'lere sahip bir sayfa oluşturmaya başlamadan önce web tarayıcılarında bu teknolojiyi destekleyen iki rakip firmanın ortak olarak kullandığı komutları açıklayalım.
<FRAMESET>
Bu tag, yatay ve dikey pencerelerin tanımına "başlamak" için kullanılır. Tag ile birlikte kullanılabilecek iki adet takı vardır ki bu takılar olu&訛turulacak pencerelerin cinsini belirler.
COL takısı dikey nitelikte ROW takısı yatay nitelikte bir pencere oluşturmak için kullanılır.
<FRAMESET COL="100,50,*> komutu bundan sonra üç sayfanın tanımı yapılacağını, bu sayfaların kolon nitelikli olacağını, bunlardan iki tanesinin sabit uzunluklu, üçüncüsünün uzunluğunun ise değişebilir olduğunu gösterir. Tırnak içinde sabit bir sayı ve yıldız kullanabileceğiniz gibi "%30,%70" bir yüzde değer de belirtebilirsiniz, bu durumda frame'in boyutu sayfanın boyutu göz önüne alınarak otomatik olarak ayarlanır. <FRAMESET> takısı </FRAMESET> ile bitirilmeden önce iç içe kullanılarak komplike pencere tanımları yapmanıza izin verir.
<FRAME>
Bu tag ise <frameset> ile başlayacağınızı belirttiğiniz sayfaları oluşturmakta kullanılır ve sayfanın genel yapısını belirler. <frame> takısının iki web tarayıcısının da desteklediği 6 adet takısı vardır.
SRC="URL/DOSYA_ADI" Pencere içerisine yüklenecek dosyayı seçmek için kullanılır. Bu değer sunucu içinde herhangi bir dosya olduğu gibi değişik bir Internet adresi de içerebilir.
NAME="FRAME_ADI" Daha sonra sayfayı çağırmak için referans olarak kullanılacak isim bu değere atanmalıdır.
MARGINWIDTH="DEĞER" Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler.
MARGINHEIGHT="DEĞER " Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler.
SCROLL=AUTO/YES/NO Kaydırma çubuklarının durumunu belirler.
NORESIZE Pencerenin fare yardımıyla genişletilip daraltılamamasını sağlar.
<NOFRAME>
Bu takı iki çerçeveyi oluşturacak sayfada kullanılır ve frame'leri desteklemeyen web tarayıcısında sayfanın görünümünü oluşturur. Web tasarımcısı <noframe> ve </noframe> takıları arasına <HTML>, <BODY> tag'larını barındıran tam bir HTML sayfası girebilir.
Son olarak frame'leri tanımlayan sayfada bulunmayan fakat frame'in tanımladığı sayfaya koyabileceğiniz bir tag daha vardır. <BASE TARGET="pencere"> tagı o pencere içerisinden bir link'e tıklandığında kaynağın hangi pencerede açılacağını belirler.
Nelere dikkat etmeli ?
Frame'lerin kullanımını ve komutlarını anlatırken dikkat etmeniz gereken unsurların bir kısmındanbahsettik, ama yine de Internet üzerinde rastladığımız sayfalarda sık yapılan hataları belirtelim. Böylece siz de ilk deneyimlerinizde bu hatalardan kaçınabilirsiniz.
Frame içindeki bir sayfada dışarıya bir referans bulunuyorsa <A HREF=" ile başlattığınız tag içinde mutlaka TARGET="_TOP" veya TARGET="_BLANK" takılarını kullanın. Bunu yapmazsanız frame'li sayfanız içinda başka bir frame'li sayfa açılması veya küçücük pencerenize sığmayacak bir sitenin yüklenmesi kaçınılmaz olur.
Frame'inizi tasarlarken kaydırma çubuklarının otomatik olmasına özen gösterin. Sayfanın içerisinde yeterince içerik olmasa bile sayfa kenarlarında kaydırma çubuklarının bulunması kullanıcıya rahatsızlık verecektir.
Frame'lerin içeriğini her zaman iyi kontrol edin. Çerçevelerden birini menü olarak kullanıyorsanız o çerçeve içerisinde yanlışlıkla başka bir sayfanın açılmasına mahal vermeyin.
Pencerelerden bir tanesini "kaydırılamaz" olarak atıyorsanız ya bu frame'in genişliğini ve yüksekliğini sabit olarak atayın ya da sayfayı 640*480 çözünürlüğe uygun olarak tasarlayın. Bunu uygulamazsanız
640*480 çözünürlükte frame'in içeriğinin bir kısmının görülmesi kullanıcı ne yaparsa yapsın mümkün olmayacaktır.
Değişik çerçeve stilleri için kaynak kodlar
<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAME SRC="2.htm" NAME="2">
</FRAMESET>
---------------
<FRAMESET ROWS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAME SRC="2.htm" NAME="2">
</FRAMESET>
--------------------------
<FRAMESET ROWS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET COLS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
</FRAMESET>
</FRAMESET>
---------------
<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
</FRAMESET>
</FRAMESET>
-------------
<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
<FRAME SRC="4.htm" NAME="3">
</FRAMESET>
</FRAMESET>
kayan yazılar :
Kayan Yazılar
KAYAN, yuvarlanan, ters parende atarak ekrandan kaybolan yazılar insanların ilgisini daha çok çeker. Microsoft bunu düşünerek, benim vatandaşlarım da kayan yazılardan faydalanabilsin demiş ve <MARQUEE> tag'ını web tarayıcısının yorumlayıcısına eklemiş... Netscape ise Explorer 2.0'dan beri var olan bu tag'ı web tarayıcısına koymayı düşünmüyor. Yine de tag'ı kullandığınızda içerisinde var olan yazıların Netscape kullanıcıları tarafından 'normal yazı' olarak görüneceğini belirtelim.
<MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n>
BEHAVIOR=tip: Metnin ekranda nasıl hareket edeceğini belirten bu ek SCROLL, SLIDE, ALTERNATE değerlerinden birini alabilir. Ek kullanılmadığında SCROLL değeri varsayılan olarak kabul edilir ve yazı, sınırın bir köşesinden belirerek diğer köşeden kayarak kaybolur. SLIDE eki ise yazının bir köşeden başlayarak diğer köşede donmasını sağlar. Metnin iki köşe arasında gidip gelmesi ise ALTERNATE ekiyle gerçekleştirilebilir.
BGCOLOR=renk: Kayan yazının arkasındaki rengi belirler. ' renk' değeri 16'lık sayı düzeninde bir değer olabileceği gibi ' red' ,' blue' gibi renk isimlerinden biri de olabilir.
DIRECTION=yön: Yazının kayma yönünü belirler. DIRECTION eki, LEFT veya RIGHT değerlerinden birini almalıdır. LEFT değeri yazının soldan sağa doğru kaymasını, RIGHT ise bunun tersini sağlar.
HEIGHT=n: Kayan yazının sınırlarından ' yüksekliği' sağlar. N değeri sabit bir piksel sayısı olduğu gibi aynı zamanda bir pencere oranı olabilir. Oran değeri % işareti ile belirtilmelidir.
HSPACE=n: Kayan yazının sınırlara ne oranda yaklaşacağını belirler. Bu ek özellikle arka plana bir renk verildiğinde daha da belirginleşir.
LOOP=n: Yazıya verilen hareketin sınırlar içerisinde kaç kere tekrarlanacağını belirler. N değerine ' -1' veya ' INFINITE' verildiğinde hareket sınırsız olarak tekrarlanır. Tip olarak ' SLIDE' kullanıldığında bu işlem tek bir kez gerçekleşeceğinden LOOP ekini kullanmaya gerek yoktur.
SCROLLAMOUNT, Kayan yazının bir defada kaç piksel hareket edeceğini, SCROLLDELAY ise yazının her bir hareketi arasında kaç milisaniye bekleyeceğini belirler. Yazının üst ve alt sınırdan ne kadar uzakta kalacağını VSPACE ile, yazının kayacağı toplam uzunluğu ise WIDTH ile ayarlayabilirsiniz. WIDTH değeri HEIGHT gibi bir yüzde alabilir.
Örnek Kullanım:
<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200>Bu kayan bir yazıdır... </MARQUEE>
Örneğin Görünümü:
Bu kayan bir yazıdır...
multimedia öğeleri :
Multimedia Öğeleri
HTML etkileşimli ve çarpıcı dokümanlar oluşturmak için mükemmel bir ortamdır. Ses ve video görüntülerinin HTML sayfalarında kullanılabilmesi bu ortamı daha da çekici bir konuma getirir.
Bu öğeleri kullanmak sadece 2-3 tane kilit komut bağlı. İşte bunları veriyoruz;
Seçiminize göre geri planda WAV, .AU veya MIDI ses dosyalarından birini çalmak için Internet Explorer'da BGSOUND tag'ını kullanabilirsiniz.
<BGSOUND SRC=' deneme.mid' LOOP=5>
komutunu kullandığınızda ' deneme.mid' adlı MIDI dosyası sayfa yüklendiğinde 5 defa tekrarlanacak ve sonra duracaktır. Bir AVI veya MOV dosyasını oynatmak için ise yine sadece Explorer'da işe yarayacak DYNSRC komutunu kullanmalısınız.
Deneme.Avi adlı bir video görüntüsünü ekrana yerleştirmek için aşağıdaki gibi bir komut kullanmalısınız. Deneme.Gif dosyası görüntü yüklenene kadar sayfada yer kaplayacaktır.
<IMG DYNSRC=' deneme.avi' SRC=' deneme.gif' LOOP=INFINITE >
Daha önce de belirttiğimiz gibi yukarıdaki komutlar sadece Explorer'da işe yarıyor. Peki çokluortam dosyaları
Netscape'de nasıl gösterilir? Onunda yolu var fakat görsel açıdan Explorer'daki kadar başarılı olmuyor.
EMBED komutuyla Netscape penceresine ' gömülen' dosyalar beraberinde çerçeve kaydırma çubuğunu da birlikte getiriyor. Yine de öğrenmek isteyenler için komutumuz şöyle:
<EMBED SRC=' deneme.avi' >
ilkel bir ' client pull '
İlkel Bir 'Client Pull'
POINTCAST'i hepiniz bilirsiniz. Kullanıcı bu servisin sağladığı arabirimde bir takım seçenekleri işaretler ve bu seçenekler doğrultusunda masaüstüne bilgiler gelir. <META> tag'ının yaptığı iş de bundan pek farklı değildir. Kullanıcıya ulaşan web sayfası bu tag sayesinde kendini belirli aralıklarla tekrar yükler veya kullanıcıyı başka bir web sayfasına ışınlar. ' Sayfayı isteme' işi kullanıcı tarafından sunucuya yollandığından bu komut ' client pull' işlemini başarıyor diyebiliriz. Bu tag ile birlikte aşağıdaki ekler kullanılmaktadır.
HTTP-EQUIV=' REFRESH' : Saniyelerle belirlenen aralıklarla dokümanın kullanıcıya tekrar ulaşmasını sağlar.
CONTENT=' n; URL=url' : Web tarayıcıya sayfanın ne aralıklarla tekrar yükleneceğini belirler. CONTENT eki içinde ayrıca URL ifadesi kullanılmışsa belirtilen zaman aralığından sonra hangi sayfanın yükleneceği de belirtilebilir.
Aşağıda, mutlaka <HEAD> - </HEAD> aralığında kullanılması gereken <META> tag'ının iki örneğini veriyoruz. 1. örnek, bulunulan sayfayı her iki saniyede bir tekrar yükleyecek, 2. örnek ise açıldıktan 5 saniye sonra www.. com.tr adresli deneme'ın web sitesine bağlanacaktır.
ÖRNEK - 1
<HTML>
<HEAD>
<META HTTP-EQUIV=' REFRESH' CONTENT=2>
<TITLE>Tekrar Yükleme</TITLE>
</HEAD>
<P>Bu sayfa 2 saniyede bir tekrar yüklenecektir.
</HTML>
--------------------------------------------------------------------------------
ÖRNEK - 2
<HTML>
<HEAD>
<META HTTP-EQUIV=' REFRESH' CONTENT=' 5; URL=http://www..com.tr' >
<TITLE>İkinci Dokümanı Yükle...</TITLE>
</HEAD>
<BODY>
<P>Bu sayfa 5 saniye sonra deneme'ın web sitesine bağlanacaktır.
</BODY>
</HTML>
--------------------------------------------------------------------------------
rastgele işlemler
Rastgele İşlemler
WEB Okulu sayfalarımızda zaman zaman faydalı Java Script kodları vereceğiz. İşte bunlardan bir tanesi; kodlarımız bulunulan saniyeyi okuyarak her saniyede değişik bir Murphy kuralını ekrana getiriyor. ' AR' değişkeniyle kaç adet kural olduğu tanımlandıktan sonra, kural Getmessge fonksiyonuna atanıyor ve fonksiyon <BODY...> tag'ının içerisinden çağrılıyor. Kendi vecizelerinizi bu script'e eklemek için öncelikle ' Array(3)' değerini daha sonra ' ar[sec % 4])' değerini yükselmeli ve vecizeyi yeni bir ' ar[x] =' satırına eklemelisiniz.
<HTML>
<HEAD>
<TITLE>Rastgele Vecizeler</TITLE>
<SCRIPT LANGUAGE=' JavaScript' >
<!--
function getMessage() {
var ar = new Array(3)
ar[0] = ' Hiç bir iş göründüğü kadar kolay değildir.'
ar[1] = ' Her iş tahmin ettiğinizden çok vakit alır.'
ar[2] = ' Yanlış gitme olasılığı olan her iş yanlış gider.'
ar[3] = ' Bir takım işlerin yanlış gitme olasılığı varsa size en çok zarar verecek olanı yanlış gider.'
var now = new Date()
var sec = now.getSeconds()
alert(' Murphy Kanunu:\r' + ar[sec % 4])
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad=' getMessage()' >
</BODY>
</HTML>
transparan gifler
Transparan GIF'ler
Internet üzerinde gezinirken, resimlerin arka plan ve arka renkler ile uyum içinde olduğunu, resmin kare olmasına rağmen arka planın resmin boşluklarından görünebildiğine şahit olursunuz. Eğer web sayfanızda bir resim kullanıyor ve resmin boş taraflarından arkaplanın görünmemesinden ve resmin sayfa üzerinde yama gibi görünmesinden yakınıyorsanız bu bölümü dikkatle okuyun.
Bu bölümde resmi transparan hale getirirken en çok kullanılan shareware grafik editörlerinden biri olan Paint Shop Pro'nun 3.12 sürümünü kullanacağız. PSP 4.0 sahipleri de yaptıklarımızı aynen kendi programlarında uygulayabilirler. Öncelikle Paint Shop'u açın ve transparan yapmak istediğiniz GIF dosyasını yükleyin, unutmayın transparan dosyalar sadece GIF formatında ve 256 renkte olabilirler.
"Select" araç kutusundan aşağıdaki resimde de seçili olan "Color Picker"ı seçin ve resim üzerinde transparan yapmak istediğiniz, yani yaprak ve dünyanın dışında kalan alanın üzerine götürün. Fareyi bu bölgeden ayırmadan durum çubuğunun sağ bölmesinde I: değerinin yanındaki değeri aklınızın bir kenarına kaydedin.
"File" menüsünden "Save As..." komutunu çalıştırın ve format olarak GIF89a - Interlaced'i seçin. Diyalog kutusunun sağ tarafında bulunan Options butonuna bastığınızda GIF Transparency Options Diyalog kutusu karşınıza gelecektir. Bu kutucukta "Set Transparency Value to:" seçeneğini işaretleyip karşısındaki metin kutusuna "I:"nın karşısında okuduğunuz değeri (yani yalnız bu resim için 215'i) yazarsanız GIF dosyasının
renk seçici ile seçtiğiniz rengi transparan olacak böylece arkaplanlar bu bölgeden görülebilecektir. Resimler her zaman başarılı olarak transparan yapılamazlar, bunun sebebi bazen resmin istemediğiniz alanlarında transparan yaptığınız renge ait parçacıkların kalmasıdır. Bunu önlemek için resmi yüksek renge getirdikten sonra resim ile alakası olmayan bir renk seçip transparan yapmak istediğiniz alanı bu renk ile boyamalı ve resmi tekrar 256 renge getirerek bu rengin indeksini okuyup transparan hale getirmelisiniz. Bir transparan GIF'in hikayesi kısaca böyle, "Benim işim gücüm var, bu kadar işle uğraşamam" diyorsanız, Internet üzerinde yüzlerce GIF dönüştürme seti bulabilirsiniz, hızlı olmalarına rağmen insan elinin yerini tutmaz ama olsun.
resimlerinizin haritasını çıkartın
Resimlerinizin Haritasını Çıkartın
IMAGE map'ler kullanıcının belirli bir resmin değişik alanlarına tıkladığında farklı adreslere gidebilmesine olanak tanır. İki şekilde hazırlanabilecek Image Map'ler isteğe göre HTML sayfasına veya sunucu üzerindeki başka bir dosyaya yerleştirilebilir. Biz bu konumuzda HTML sayfalarına yerleştirilen Image Map'leri inceleyecek Paint Shop Pro yardımıyla bir resmin haritasının nasıl çıkarılacağını göstereceğiz.
<MAP NAME="map1"><!-- Örnek resmin HTML kodları -->
<AREA SHAPE="RECT" COORDS=' 7, 7, 119, 74' HREF="http://www..com.tr">
<AREA SHAPE="CIRCLE" COORDS=' 178, 41, 35' href="http://www.idg.com.tr">
</MAP>
Öncelikle HTML sayfasında yukarıdaki gibi kodlar kullanır ve istediğimiz resimde hangi noktalara tıklandığında hangi adreslere bağlanılacağını belirtiriz. Daha sonra <IMG SRC=' map1.gif' USEMAP=' #map1' > gibi bir ifade kullanılarak haritasının çıkarılmasını istediğimiz resmi sayfaya yerleştirir ve bu resim için ' map1' isimli haritanın kullanılacağını belirtiriz.
MAP TAG'I <MAP NAME='deneme' > AREA takılarıyla tanımlanan haritaya başlangıç yapar ve bir isim verir.
AREA TAG'I
<AREA COORDS=koordinatlar SHAPE=tip HREF=url TARGET=pencere>
COORDS
Tanımlanan şekle göre değişik koordinatlar girebilmenizi sağlar
SHAPE=tip
Tip RECTANGLE, CIRCLE, POLYGON seçeneklerinden biri olabilir. RECTANGLE Bir kare tanımlar ve ' x1, y1, x2, y2' değerleri kullanılır. CIRCLE Bir çember tanımlar ve ' OrtaX, OrtaY, Yarıçap' değerleri kullanılır. POLYGON Bir poligon tanımlar. Birçok noktadan oluşabilir.
HREF
Şekle tıklandığında hangi adrese gidileceğini belirler.
TARGET
Gidilecek adresin hangi pencerede açılacağını belirler
Peki tanımladığımız şekillerin koordinatlarını nasıl bulacağız? Bu da çok basit, en büyük yardımcımız olan Paint Shop Pro'yu kullanarak istediğimiz bir noktadaki koordinatları bulabiliriz. Örneğin bir karenin sınırlarını öğrenmek istiyorsunuz, hemen resmi açın ve tanımlamak istediğiniz karenin üst sol noktasına gidin. X1 ve Y1 noktalarını durum çubuğundan öğrenip bir kenara not ettikten sonra sol alt sınıra gidin ve X2, Y2 noktalarını öğrenin. İşte bu kadar basit.
_________________
Verilen Emeklere Saygı Duyalım Lütfen !!!
Başa dön
barbieee
Kayıt: 07 Oca 2007
Mesajlar: 81
Nerden: istanbul
Tarih: Çrş Oca 31, 2007 6:38 pm Mesaj konusu:
--------------------------------------------------------------------------------
floating frame kullanımı
FLOATING FRAME KULLANIMI
HTML sayfalarında sık kullanılmayan bir unsur olsa da HTML 3.2 standartlarına giren Floating Frame özelliğini anlatmakta fayda görüyoruz. Sayfa içerisinde başka bir HTML sayfasını göstermek istiyor ve bu sayfanın dilediğiniz sınırlar dışına taşmasına engel olmak istiyorsunuz. O zaman Floating Frame'leri kullanabilirsiniz. Aşağıda gördüğünüz örnek satırı HTML sayfanıza girdiğinizde 200x200 piksel ebatlarında bir pencere açılacak ve DENEME.HTM sayfası bu pencerenin içerisine yüklenecek.
<IFRAME SRC="deneme.htm" width=200 height=200></IFRAME>
SRC= ifadesinin karşısına HTML dosyasının adını vererek kullanabileceğiniz gibi
bağlantıyı göster (facebook ile) bağlantıyı göster (klasik üye girişi ile) 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ğiştirilmiş
SAYFA NE ZAMAN DEĞİŞTİRİLMİŞ?
BİR siteyi cazip kılan özelliklerden biride güncellemedir. Sayfanıza bağlanan kullanıcıların ilgili sayfanın en son ne zaman güncellendiğini bilmesini istiyorsanız aşağıdaki Java Script'i, kullanabilirsiniz. Bu script'i sayfanıza bir kez ekleyip varlığını unutabilirsiniz, çünkü aşağıdaki akıllı kodlar HTML sayfasının tarihine bakarak bunu sayfa açıldığında otomatik olarak görüntülüyorlar. Böylece küçük değişiklikler yapsanız bile sayfadaki tarihi her defasında tekrar girmek zorunda kalmıyorsunuz.
<SCRIPT LANGUAGE=JavaScript>
<!--
var mod=document.lastModified.split("");
document.writeln("Bu sayfanın son güncellenme tarihi:" + mod[0]);
-->
</SCRIPT>
sayfanızda bambaşka bir sayfa
SAYFANIZDA BAŞKA BİR SAYFA
BAZI Web sitelerinde görürsünüz, güncel olaylar bir pencere içerisinde yukarıdan aşağıya veya tersi yönde sayfanın bir köşesinde kaydırılır ve bu işlem genellikle bir Java programcığıyla yapılır. İşte size bunu hiç zahmet harcamadan yapmanın yolunu gösteriyoruz. Aşağıdaki kodları sayfa içerisinde kullandığınızda deneme.htm dosyası bir pencere içerisinde açılacak ve devamlı olarak yukarı doğru kaydırılacak.
<OBJECT ALIGN=CENTER CLASSID="clsid:1a4da620-6217-11cf-be62-0080c72edd2d"
WIDTH=200 HEIGHT=200 BORDER=1 HSPACE=5 ID=marquee>
<PARAM NAME="ScrollStyleX" VALUE="Circular">
<PARAM NAME="ScrollStyleY" VALUE="Circular">
<PARAM NAME="szURL" VALUE="deneme.htm">
<PARAM NAME="ScrollDelay" VALUE=60>
<PARAM NAME="LoopsX" VALUE=-1>
<PARAM NAME="LoopsY" VALUE=-1>
<PARAM NAME="ScrollPixelsX" VALUE=0>
<PARAM NAME="ScrollPixelsY" VALUE=-3>
<PARAM NAME="DrawImmediately" VALUE=0>
<PARAM NAME="Whitespace" VALUE=0>
<PARAM NAME="PageFlippingOn" VALUE=0>
<PARAM NAME="Zoom" VALUE=100>
<PARAM NAME="WidthOfPage" VALUE=400>
</OBJECT>
style sheed kullanımıSTYLE SHEET KULLANIMI
WEB tarayıcı geliştiren firmalar bir yandan yeni teknolojileri tarayıcılarına adapte ederken diğer bir yandan HTML dilinin getirdiği sınırlamaları ortadan kaldırmak için kendilerine göre yollar buluyorlar. İşte ilk olarak Microsoft'un ortaya attığı, günümüzde pek yaygın olarak kullanılmasa da Active HTML'ye dahil edilen Style Sheet'ler. Ne işe mi yarıyor? Yaptığı iş çok basit: Sayfa içerisinde kullanılan paragraf, başlık, kısayol gibi nesneleri önceden tanımlayarak sizi, bunları her defasında tekrar tanımlama zahmetinden kurtarıyor. Şu anda W3C'nin de (World Wide Web Consortium) kabul ettiği bu HTML 3.2 standardını bir nevi ' şablon' olarak niteleyebiliriz. Öyle ki bir defa şablonunuzu tanımladığınızda bu şablonu diğer sayfalarınızdan da kolayca çağırabiliyorsunuz. Örnek için aşağıdaki kodları inceleyip nasıl bir görüntü oluşturduğunu resimden görebilirsiniz.
<HTML>
<title>Style Sheet Kullanımı</title>
<STYLE>
BODY {background: white;}
H1 {font: 24pt Arial bold}
P {background: yellow;}
A {text-decoration: none; color: blue}
</STYLE>
<BODY>
<H1>Bu bir başlık! 24 punto, Arial ve Kalın.</H1>
<p>Üzeri sarı işaretleyici ile çizilmiş alelade bir yazı.</p>
<a href="deneme.htm">Link'lerin altının çizilmemesini bu yolla sağlayabilirsiniz.</a>
</BODY>
</HTML>
Gelecek aylarda Style Sheet konusunu ayrıntılarıyla inceleyeceğiz. Yine de merak edenler için bu konuyla ilgili geniş bilgi edinebilecekleri adresi verelim:
bağlantıyı göster (facebook ile) bağlantıyı göster (klasik üye girişi ile)
arama motorlarına yardımcı olun :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 :
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 www.microsoft.com/imagecomposer/gifanimator/gifanin.htm 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.
alt çizgisiz ve aktif kısayollar :Alt çizgisiz ve aktif kısayollar
Bu günlerde alt çizgisiz ve klasik mavi renge sahip olmayan Internet kısayolları kullanmak çok moda oldu. Herkes gerekli olsun olmasın bu tip kısayolları kullanıyor. Eğer siz de bu tip link'lerin sayfanızın genel görünümünü güzelleştireceğine inanıyor ve bunları kullanmak istiyorsanız size bu işi nasıl becerebileceğinizi anlatalım.
Alt çizgisiz bir kısayol oluşturmak için <A HREF takısının içinde bir stil tanımı kullanmanız yeterli. Bu stil takısını kullandığınızda hem kısayol alt çizgisiz olacak hem de ziyaret edildikten sonra rengi değişecek.
<p>Alt çizgisiz kısayol:<br>
<A HREF="http://www..com.tr" STYLE="text-decoration: none">PC deneme</a><p>
Dilerseniz bir adım daha ileri giderek altı çizili olmasına rağmen üzerine gidince rengi değişen bir link oluşturalım. Bunu yapmak için uzun kodlar kullanmaya gerek yok sadece onmouseover özelliğini kullanmak yeterli.
<p>Aktif ve normal kısayol:<br>
<A HREF="http://www..com.tr" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'"> deneme</a>
Şimdide hem altçizgisiz hem de üzerine gelince renklenen bir link kullanalım. Tahmin edebileceğiniz gibi hem onmouseover hem de STYLE özelliklerini kullanacağız.
<p>Aktif ve alt çizgisiz kısayol:<br>
<A HREF="http://www..com.tr" STYLE="text-decoration: none" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">
deneme</a>
yönlendirme :
Yönlendirme
Web tarayıcısının tipine göre kullanıcıyı ilgili sayfaya yönlendirmeyi gösteriyoruz. Özellikle Internet Explorer'da çekici görüldüğünü düşündüğünüz bir sayfa varsa fakat sayfanın normal halinin diğer kullanıcılar tarafından izlenebilmesini istiyorsanız bu yola başvurabilirsiniz. Aşağıdaki kodlar Internet Explorer 4.0 web tarayıcısını gördüğünde hemen ilgili sayfaya gidecek aksi durumlarda ise sayfanın içeriğini gösterecektir.
<HTML>
<HEAD><TITLE>DENEME</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF">
<!-- Web tarayıcısının tipini ve sürümünü öğreniyoruz -->
<script language="JavaScript">
browser = navigator.appName;
version = parseInt(navigator.appVersion);
if (browser == "Microsoft Internet Explorer" && version >= 4) type = "e4";
else type = "e1";
</script>
<!-- Explorer 4.0 ise aynı dizindeki IE.HTM dosyasına yönlendiriyoruz -->
<script language="JavaScript">
if (type == "e4") { location = "IE.HTM " }
</script>
Netscape ve Internet Explorer'ın önceki sürümleri için hazırladığınız sayfa.
</BODY>
</HTML>
her girişte farklı bir resim :Her girişte farklı bir resim!
"Aman sitemde her türlü script'i kullanayım, geri kalmayayım" diyorsanız işte size harika bir script veriyoruz. Kodlarımızı kullanarak web sayfanız yüklenirken sunucunuzun RESIM klasöründe bulunan RESIM1 RESIM2 gibi GIF dosyalarından herhangi bir tanesinin rastgele olarak seçilmesini ve gösterilmesini sağlayabilirsiniz. Bu programcık ayrıca resmin üzerine tıklandığında resimle aynı adı taşıyan fakat HTM (RESIM1.HTM) uzantılı dosyanın da ayrı bir pencerede açılmasını sağlıyor.
<script language="JavaScript">
<!--
var now=new Date(); var status=(now.getSeconds())%3;
document.write('<a target="_blank" href="/resim/resim'+status+'.htm"><img src="/resim/resim'+status+'.gif"></a>');
//-->
</script>
Not: Kodları kullanırken kullanıcıya her defasında bir tanesini görmesi için verdiğin tüm resimleri görebileceğini söylememize gerek yoktur herhalde. Bunu yapabilmesi için sadece HTML kodlarınıza bir gözatması yeterli olacak.
"çerezler" ile ziyaret sayısını öğrenmek :
"Ç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 i
Bunu ilk beğenen siz olun
Hata Oluştu
Bunu ilk beğenen siz olun
Hata Oluştu
bLaCk_jaCkaL
Yüzbaşı
1397 ileti
Yer: 58 Vatan 16 Mekan
İş: Öğrenci
Kayıt: 30-09-2007 10:40
İş: Öğrenci
Kayıt: 30-09-2007 10:40
Alıntı:
bLaCk_jaCkaL :
Keşke alıntı deseydin
Evet alıntıdır oturupda benim yazacak halim yok yalan söyleyecek halimde yok
Bunu ilk beğenen siz olun
Hata Oluştu
bLaCk_jaCkaL
Yüzbaşı
1397 ileti
Yer: 58 Vatan 16 Mekan
İş: Öğrenci
Kayıt: 30-09-2007 10:40
İş: Öğrenci
Kayıt: 30-09-2007 10:40
Alıntı:Sayın Program Editörümüz.Lütfen kuralları okuyunuz.
bLaCk_jaCkaL :
NE SÖYLEMEYE ÇALIŞTIĞIMI ANLADIKTAN SONRA YORUM YAP İSTERSEN!
13-) Kesinlikle mesajınızı büyük harfle yazmayınız. Büyük harfle yazılmış kelime kullanmayınız.
bağlantıyı göster (facebook ile) bağlantıyı göster (klasik üye girişi ile)
Bunu ilk beğenen siz olun
Hata Oluştu
bLaCk_jaCkaL
Yüzbaşı
1397 ileti
Yer: 58 Vatan 16 Mekan
İş: Öğrenci
Kayıt: 30-09-2007 10:40
İş: Öğrenci
Kayıt: 30-09-2007 10:40
Alıntı:
bLaCk_jaCkaL :
özürdilerim sinir anında...
Ben seni sinirlendirecek birşey etmedim
Bunu ilk beğenen siz olun
Hata Oluştu
arkadaşlar bana yardım edebilecek olan warmı html başlığını görünce hemen dirdim ben kendi sitem için sothink DHTMLMenu prog. kullanıyorum ve yaprığım menüleri html kodu olarak alamıyorum ltfn yardım edin çok önemli şimdiiden tşk ederimBunu ilk beğenen siz olun
Hata Oluştu
Alıntı:
rapedavet :
Html Kodunu Vermez Export Edeceksin.
Bunu ilk beğenen siz olun
Hata Oluştu