html cambazlıkları

Ne sihir.. Ne keramet.. Web’de iki, haydi bilemediniz 12 satırlık komutla, mucizeler yaratmanın ne sihirle, ne kerametle ilişkisi var. Herıey, marifete dayanıyor. Bu kez marifetin adı, HTML püfleri ve DHTML.
Televizyonda en çok izlenen belgesellerden biri, film sanayiinin teknik hileleridir. Sinemada teknik hile, olmayanı varmış, ya da başka bir şeymiş gibi göstermek olduğu halde, Web’de “hile” olamaz. Web’de sihir ve keramet, sadece ziyaretçinin ekranında ancak video montaj yoluyla elde edilebilecek bir etkiyi, HTML kodları ile oluşturmayı amaçlar. Bu konuyu böylesine derinlemesine ele almamızın sebeplerinden biri sinema hilelerine meraklı sinema seyircilerine Hollywood tekniklerinin içyüzünü açıklayan belgelsellerin yapım sebebiyle aynı: “Bakın ekranınızdaki bu inanılmaz etkiler aslında nasıl kolay sağlanıyor, görün!” demek. İkinci ve asıl amacımız ise, son altı ayda ülkemizde tanık olduğumuz Web sitesi sayısındaki patlamaya paralel olarak, teknişi zayıf Web sayfası sayısındaki yürekler acıs? duruma engel olmak. Oradan buradan derlenmiş ve bu arada en hayatî satırları atılmış Javascriptler; parametreleri eksik Java Applet’ler; yukarıdan ayaşı, mesela “HelveticaTürk” harfine atıf yapan, fakat bu harf türünün sadece kendi bilgisaylarında olabileceğini hesaba bile katmayan Webmaster’ların incileri! Kısaca, Webcilişimizin biraz sihire, biraz keramete ve çok ölçüde marifete ihtiyacı var. Web’de usta işi siteler ve sayfalar yapmak için, herşeyden önce HTML’in bütün inceliklerine hakim olmanız gerekiyor. Sonra, buna Dinamik HTML unsarlarını eklemeniz şart. Web sayfalarında gerçekten usta işi denilebilecek uygulamalar, doğru ve yerinde kullanılan HTML komutlarına, Javascript veya VBScript dilleriyle yazılmış programlar ve HTML unsurlarına Cascading Stylesheets denen stil komutları eklemekle mümkündür. Bir sirkte, tel üzerinde tek tekerlekli bisiklet süren ve elindeki uzun deıneyi bir sağa bir sola oynatarak dengesini bulan bir cambaz düşünün. Benzetmek gibi olmasın, ama Web’de cambazlık yapacaksanız, üzerinde yürüdüşünüz HTML telini, dengenizi sağlayacak Script çubuşunu ve üzerine çıkacağınız Stil bisikletini iyi tanımanız gerekir. ??e, HTML’in inceliklerinden başlayabiliriz. Web’in ortak dili HTML, dördüncü sürümüne ulaşmış bulunuyor. World Wide Web Consortium (www.w3c.org) tarafından düzenlenen bir ortak çabanın ürünü olan HTML’in ziyaretçilerin birbirinden farklı Browser programları tarafından aynı şekilde yorumlanması ve tasarımcının niyet ettişi gibi görüntülenmesi için, W3C’nin koyduğu ilkelere harfi harfine riayet etmeniz şart.
Uyulması gereken temel ilkelerin başında ise, , <HEAD> ve <BODY> etiketlerinin sırası ve içlerine nelerin konabileceği konusundaki kurallar geliyor. Bir HTML dosyasının HEAD bölümünde yer alması gereken etiketler, bu etiketin dışına konursa, istenmeyen iki durum meydana gelir: Ziyaretçinin Browser’? sayfayı sizin istedişiniz gibi yorumlayamaz; sayfanız Internet’in endeksini çıkartan belli bağlı ara-bul firmaları tarafından doğru tasnif edilemez ve arandışında herhangi bir ihtiyaç sahibi tarafından arandışında bulunamaz. Başarılı bir Web sayfası oluşturmak istiyorsanız, <HEAD> etiketinin içinde, Şu unsurlara yer vermelisiniz: BASE: İçinde yer aldığı sayfanın mutlak veya göreli URL’ini belirtir ve çok sayfalı Web sitelerine Browser açısından istikrar kazandırır. Browser’ların Geri düşmesi, bir sayfadan önceki sayfaya gidebilmek için buradaki bilgiyi kullanır. İçinde üç özellik unsuru (attribute) yer alır: HREF: Sayfanın URL’i belirtir. TARGET: Frameset etiketi ile birlikte kullanıldışında, çerçevelere isim verilmişse sayfanın yeralacaşı çerçeveyi belirtir. FRAMESET (Sayfanın yükleneceği pencere Target’ta belirtilmemişse, ya isim verilmiş bir çerçeveye ya da Browser’ın varsaydığı , _blank, _parent, _self veya _top çerçeveye yükleneceğini belirtir. Bunlar, sırasıyla, yeni ve adlandırılmamış bir Browser penceresini, mevcut sayfayı açtıran sayfanın çerçevesini, mevcut sayfanın kendi çerçesini ve çerçeveli de olsa mevcut Browser penceresinin tümünü kasteder. META: Bir Web sayfasındaki bilgiler hakkındaki bilgileri (meta/üst bilgileri) içerir. İki unsuru sık kullanılır: NAME: Sayfanın yazarı, sayfanın yayın tarihi, vb., bilgiler içerir. <META NAME=”bilginin türü” CONTENT=”bilgi”> şeklinde yazılır. HTTP-EQUIV: İçinde yer aldığı sayfanın, Web Server tarafından ziyaretçiye gönderilmesinde oluşturulacak Response Header (Karı?lık Başlığı) bölümünde yer alacak bilgiler içerir. <META HTTP-EQUIV=”bilginin türü” CONTENT=”bilgi”> şeklinde yazılır. Sık Kullanılan Meta Bilgilerinden örnekler: <META NAME=”keywords” CONTENT=”kelime1 kelime2 kelime3”> “keywords” Internet’teki belli bağlı ara-bul kurumlarının siteleri araştırır ve içeriklerine göre gruplandırırken, sınıflandırmada kullanmaları istenen kilit kelimeyi belirtir. CONTENT hanesine sitenizin hangi kelimelerle arandışında bulunmasın? istiyorsanız, o kelimeleri yazın. Söz gelimi, Yahoo’da “Türkçe MP3” kelimeleriyle arama yapan birisinin sizin sitenizi bulmasın? istiyorsanız, bu etiketi şöyle yazmalısınız: <META NAME=”keywords” CONTENT=”Türkçe Turkçe türkçe turkçe, Türk Turk türk turk mp3 MP3 MPEG mpeg müzik muzik music”> <META NAME=”description” CONTENT=”metin”> Bazı ara-bul firmaları “description” etiketini tanır ve karşılığı olan metni, sitenin tanımlaması olarak arama yapan kişiye bildirir. Bu etiketi tanımayan ara-bul firmaları ise sayfanın ilk bir kaç kelimesini tanımlama aracı olarak kullanır. Örnek: <META NAME=”description” CONTENT=”Telif hakk? yasası yakamıza yapılıncaya kadar Türkçe MP3 müzik dosyalarını bu sitede bulabilirsiniz.”> <META NAME=”author” CONTENT=”Adı Soyadı”> Bazı ara-bul firmaları arama yapanlara siteleri sunarken sitenin yazarını “author” etiketini okumak suretiyle tanır ve karşılığı olan metni, arama yapan kişiye bildirir. Örnek: <META NAME=”author” CONTENT=”Hakk? Öcal” <META HTTP-EQUIV=”expires” CONTENT=”Wed, 04 Apr 1999 23:59:59 GMT”> Bu sayfanın 4 Nisan günü Griniç saatiyle gece yarısından sonra her türlü ara-bul firmasının endeksinden (ve ziyaretçilerin bilgisayarlarında geçici Internet dosyaları deposundan) silinmesini sağlar. <META HTTP-EQUIV=”refresh” CONTENT=”5; URL=http://sitem.com/iki.htm”> Bu sayfanın 5 saniye sonra Browser penceresinden silinmesini ve yerine sitem.com adresindeki “iki.htm” belgesinin görüntülenmesini sağlar. SCRIPT: Web sayfalarına, Javascript ile VBScript dilleri, HTML’in kendi orijinal komutları arasında bulunmayan işlevler kazandırır. Javascript ile Java programlama dili, adlarındaki benzerlişe rağmen uzaktan-yakından ilgili değildir; Javascript gerçekte C dilinden türetilmiştir. VBScript ise Microsoft’un Uygulamalar İçin Visual Basic, VBA, dilinden türetilmiştir. Bir Web sayfasında kullanılacak Script dilinin tipi ve kaynaşı, HEAD bölümünde deklare edilmek suretiyle, bütün HTML’de bir daha tip ve kaynak belirtilmeden kullanılabilir. Ancak tasarımc? isterse, HEAD bölümü dışında bir yerde mahallî Script deklarasyonunda da bulunabilir. HEAD bölümünde Script dili kullanılarak oluşturulacak fonksiyonlara, sayfanın ileri bölümlerinde isimleriyle atıfta bulunmak mümkündür. STYLE: Web Browser programlarının HTML’in ilk günlerinden kalma 18 metin biçimlerdirme, 12 metin sunu? etiketi vardır. Buna yapısal belge etiketlerinden altı başlık etiketini de eklerseniz, bir sayfada herhangi bir metni biçimlendirmek için 26 adet önceden-tanımlanmış şekil kullanabilirsiniz. HTML DEYIP GEÇMEYEN! Web cambazlığına özenenlerin çoğu, HTML’in yorumu Browser’lara bırakılmış varsayılan biçimlendirme etiketleri ile çok şey yapılamayacaşı şeklinde yanlış bir kanıs? vardır. İşte bu etiketlerden bazıları ile oluşturabileceğiniz etkilerden bir kaç örnek: <ACRONYM>..<ACRONYM>: İçindeki metnin kısaltma olduğunu gösterir ve ziyaretçi Mouse işaretçisini bu kelimenin üzerinde tutarsa, kelimenin açık şeklini gösterir. Bu etiket, Windows veya Macintosh’un yerel yardım ve ipucu kutuları gibi, bilgi kutuları oluşturmakta kullanılabilir: Bu konuda, <ACRONYM TITLE=”PC WORLD TURKIYE dergisi, Mart 1999, sayfa 98″>PCW</ACRONYM> çok güzel şeyler yazmıştı. <magic00001.tif> <CITE>..</CITE> İçindeki metnin bir yerden alıntı olduğunu gösterir: Bu konuda,<CITE>HTML Tasarım Rehberi</CITE> kitabına bakabilirsiniz. <magic00002.tif> <CODE>..</CODE> İçindeki metnin bilgisayar programı veya benzeri bir Script parçası olduğunu gösterir: Bu paragrafın stili şöyle olmalıdır: <CODE>.shadow { font-size: 16pt; color: #000000; font-family: “Arial”; } </CODE> Daha sonra normal paragrafa dönebilirsiniz. <magic00003.tif> .. İçindeki metni, daha küçük harfle ve normal satırın altına indirerek, subscript şeklinde yazdırır. Özellikle bilimsel formül yazarken kullanılabilir: <BODY>Dolayısıyla, suyun formülü, H2O şeklinde yazılır.</BODY> .. İçindeki metni, daha küçük harfle ve normal satırın üzerine çıkartarak, supercript şeklinde yazdırır. Özellikle bazı isimlerde kullanılabilir: <BODY>Romanın kahramanının adı Mike McCormick idi.</BODY> <DL>, <DT> ve <DD> Özellikle tanımlama ve benzeri liste türü açıklamalarda, tanımlanan kelime ile tanımlama paragrafın?, kelime-işlem veya masaüstü yayıncılılık programı hassasiyetiyle, içerden başlatmakta bu iki etiket birlikte kullanılabilir: <body> <DL COMPACT> <DT>DHTML <DD>Kelime anlamı Dinamik Hyper Text İşaretleme Dili olup, Web sayfalarına dinamik nitelik kazandıran teknolojiler bütünüdür. <DT>ASP <DD>Kelime anlamı Aktif Server Sayfaları olup, Microsoft’un Dinamik Web sitesi yapımına getirdişi yeni teknolojileri içerir.</DL> </body>: <magic00004.tif> Ne var ki, bu görüntülenme tarz? önceden belirlenmiş biçim etiketleri, bu tarzın her zaman tasarımcının elde etmek istedişi etkiye uygun olmaması ve HTML etiketlerinin bazen bir Browser’dan dişerine farklı şekil göstermesi çoğu zaman tasarımcıya “Ah, Şu metne Şu Şu özellikleri verecek bir etiket olsa!” dedirtir. İşte bu gibi durumlarda tasarımcının imdadına koşmak amacıyla icad edilmiş birinci araç Script ise ikinci araç Style etiketidir. Bir HTML belgesi, üç ayrı tarzda stil komutu kabul eder ve bunları tabir yerinde ise üstüste yıkarak, en son talimatı yerine getirir. Bu sebeple, HTML’in bir uzantıs? olan stil belirleme yoluyla belge biçimlendirme teknişini, Cascading Style Sheets, denir. Cascading, “birbirinin üzerine yığılma,” Style Sheets ise stil komutlarının içinde yer aldığı talimat belgesi anlamına gelir. Bir Web sayfasına ayrı bir belge halindeki stil kaşıdın? ekleyebilirsiniz; veya Web sayfasının HEAD bölümünde belgenin tümü için geçerli stil komutları koyarsınız; ya da en zor yola giderek, her bir paragraf? bizzat kendi etiketininin içindeki stil komutları ile biçimlendirirsiniz. Dışarıdan bir stil kaşıdı ekleme yöntemi, sadece bu kağıttaki komutları değiştirerek, bir sitenin (bu kağıt iliştirilmiş) bütün sayfalarındaki biçimlendirmeleri değiştermenize imkan sağlar. HEAD bölümünde yapacağınız stil değişiklişi ise o belgedeki bütün biçim etiketlerini etkiler. Bir paragrafın kendi biçim komutları ise o paragraf bittişi anda hükmünü kaybeder. İyi bir Web tasarım teknişi, bütün siteyi bir Style Sheet’e başlamak ve stil değişikliklerini bu belge üzerinde yapmaktır. Bu sitenin bütün sayfalarına tutarlılık kazandırır. Böyle bir sitede öyle bir sayfa olur ki, sitenin tümüne biçim veren Stil Kaşıdı yerine, yeni HEAD bölümündeki stil komutları ile biçimlendirilmesi gerekir. Bu durumda, sayfa, dışarıdaki stil kaşıdına bağlı bile olsa, kendi HEAD bölümündeki stil kuralları geçerli olur. Fakat bir sayfada öyle bir paragraf olur ki, sitenin tümünü biçimlendiren veya o sayfayı şekillendiren stiller yerine kendi özel stiline ihtiyaç duyabilir. Bu durumda o paragrafın stilini, kendi etiketini biçimlendirerek belirlemek en kolay yol olur. Bu durumda ne sitenin stil kaşıdı, ne de sayfanın stil bölümü geçerli olur; o paragraf stilini kendi yerel stil komutundan alır. Dinamik HTML’e Hoşgeldiniz! Gerçekte dinamik HTML diye bir şey olmadığını söylersek, Web tasarımcısı olarak hayalleriniz yıkılmaz, herhalde! Dinamik HTML bağlığı altında ele alabileceğimiz herşeyi, yukarıda “Duragan HTML” unsurları arasında gördük bile: Script ve CSS. Script, Browserların 100’e yakın kelime içeren HTML diline, yeni kelimeler kazandıran bir ek sözlük gibidir. Javascrip veya VBScript, programlama dili olarak, Browser ve onun vasıtasıyla Windows, Unix veya MacOS tarafından yorumlanarak anlam kazanırlar. “Yorumlanan” dil, işletim sistemine bir yorumlayıc? eklenmesini gerektirir. Mesela C dili ile yazdığınız bir programın yorumlanması gerekmez; çünkü bu program, işletim sisteminin istedişi ve anladığı bütün komutları bilir. Oysa Javascript veya VBScript komutunun, Browser’a bir iş yaptırtabilmesi için önce tercüme edilmesi, yorumlanması gerekir. Bu zorunluk gerçi Script dili ile yazılmış “program” veya “programcIşın” yavağlamasına yol açar, ama Script dilleri genellikle türetildikleri programlama dilinden daha basittir ve daha kolay öğrenilir. Web’de gerçekten usta bir tasarımc? olmaya niyet eden kişinin, HTML’den hemen sonra, belli bağlı iki Browser’ın da ortak Script dili olan Javascript’i derhal öğrenmesi gerekir. VBScript öğrenmek, aktif ve ziyaretçi ile etkileğmeli yeni bir Server teknolojisi olan ASP (Active Server Pages) öğrenmeye ve uygulamaya kararlı kişiler için daha çok kazançlı olacaktır; ancak Netscape bugünkü haliyle VBScript komutlarını tanımamaktadır. Sitesini her iki Browser’? da kullanan ziyaretçileri dikkate alarak tasarlayan bir Web ustasının, Browser için Javascript, Server için VBScript öğrenmekten başka çaresi yoktur. “Öğrenmek” dedişimiz zaman, bundan, bilgisayar okullarında öğretildişi tarzda aylar süren bir formel eğitimle bir programlama dilini öğrenmeyi kastetmiyoruz. Çoğu zaman bu iki dilin de nerede ve nasıl kullanıldığını ve bu dilin komutlarının sentaksın? (cümle kuruluşunu) öğrenmek yeterlidir. Internet’te istemedişiniz kadar çok bulacağınız Script’leri, kendi sitenize uyarlarken nelere dikkat edeceğinizi bilmeniz gerekir. Bir yerde unutulan bir tırnak, eğittir yerine iki nokta üstüste, ve benzeri mini-mini hatalar yüzünden, bir Script bekledişiniz sonucu vermeyebilir. Bir Web tasarımcısının Script dili öğrenirken amacı, o dili kullanarak, etkileğmeli oyun programı yazmaktan çok, sitesine dinamik unsurlar kazandırmak için yeterli düzeyde, en temel komutları ve bunların yazım teknişini öğrenmekten ibarettir. Dinamik HTML teknişine dayanan Web sayfası ile yapılabilecek işlerin zirve noktalarından birini www.htmlguru.com adresinde görebilirsiniz. Sayfalardaki hemen her unsurun görsel olduğunu, buna karşılık metinle yapılabilecek hiç bir işlemin grafişe yüklenmedişi ve dolayısıyla sayfaların siteden ziyaretçinin bilgisayarına aktarılması için gerekli zamanı asgaride tutan, yine de ziyaretçinin ekranına yansıyacak herşeyi ziyaretçinin talebine bırakan bir dinamizme sahip bir sayfa on adımda elde edilebilir. Buna isterseniz, DHTML’in anayasası da diyebilirsiniz: 1. Kaşıt üzerinde hazırlık: Fikrinizi önce kaşıda dökün; reklam ajanslarının reklam filmi yaptığı gibi bir senaryo ?eması çıkartın. Bu, birinci sayfadan sonuncuya kadar, sitenizdeki bütün sayfaların ekran görüntüsünü kağıt üzerinde resmetmek demektir. 2. Teknikleri belirleme: Hayalinizdeki sitenin oluğumu için kullanılacak teknikleri belirleyin; zayıf olduğunuz tekniklerde kimden yardım isteyeceğinizi düşünün. Günümüzün Web teknolojisi, grafikçinin programc?, metin yazarının grafikçi olmasını gerektiriyor ve kolaylaştırıyor. Hayatında bir suluboya resim yapmamış kişi bile bir grafik programı ve telif hakkından vazgeçilmiş bir kaç grafikle yola çıkabilir ve ortaya en görkemli Web sitelerinde kullanılabilecek kalitede grafikler çıkartabilir. Bu tür bir el yatkınlığını elde etmek için, bol bol alıştırmak yapmak gerekir. Alıştırmanın zamanı ise Web sitesinin çatısın? çatmaya başlamadan öncedir. 3. Donanım ve yazılım denetimi: Hayalinizdeki sitenin oluşturulması için gerekli grafik programları, HTML editörü, site yönetim programı, kelime-işlem programı bilgisayarınızda yüklü müş Bilgisayarınız bu programların hepsini aynı anda çalıştıracak (ve çökmeyecek) RAM, sanal bellek, sabit disk ve grafik kartı ve ekrana sahip miş 4. Grafik hazırlama: Kullanacağınız grafik unsurları hazırlayın. Zemin grafişi, ziyaretçilerinizin sayfalarınız arasında gidip gelmesini sağlayacak Navigation (seyir) düşmeleri olarak kullanılacak grafikler, içerişin gerektirdişi grafikler, başlıklar, süsleme unsuru olarak kullanılacak resimler, sabit diskte, belirli bir yerde toplanmış durumda mış Bu iş söylendişi kadar kolay değildir. Birinci maddede çizdişiniz sayfa görüntülerinin gerektirdişi bütün unsurları biraraya getirip, telif hakları ile ilgili sorunları halletmek zaman alır. Ayrıca bütün grafiklerinizde aynı tür isimlendirme teknişini uygulayın: ya hepsinin adı büyük harfle, ya da hepsinin adı küçük harfle yazılsın. Günün birinde dinamik sayfanızda zemin grafişi yerine kırmızı çarp? işareti görmek istemiyorsanız, sitenizin duracağı Server’ın dosya adları konusunda büyük harf-küçük harf ayırt edip etmedişini Şimdiden bilmeniz gerekir. 5. Stil belirleme: Sitenizde uygulanacak metin, başlık ve dişer biçimlendirme stillerini belirleyin: Başlıklarınız arasında kavram sıralaması yapın ve yukarıdan ayaşı doğru, bütün unsurlarınıza nasıl şekil vereceğini tayin edin. Bunların gerektirdişi stilleri, bir CSS dosyası olarak yazın. CSS dosyası, düz yazı dosyasıdır ve herhangi bir düz yazı programı ile oluşturulabilir. CSS yöntemiyle, HTML’in temel etiketlerinin stillerini değiştirebileceğiniz gibi, kendi vereceğiniz adla kendi stillerinizi oluşturabilirsiniz. Bir CSS Örneği: Düz yazı dosyası ile oluşturabileceğiniz bir Cascading Style Sheets örneği: /* New CSS file */ #turkuaz{ BackGround : AquaMarine ! important; Font : 100%; } .Koyumavi{ BackGround : Beige ! important; Color : DarkBlue ! important; Font : bold xx-large/1 Sans-Serif, Arial ! important; } .Mavi{ Color : #0000FF ! important; Font : inherit inherit/inherit Sans-Serif ! important; } body, p{ Color : #008080 ! important; Font : normal normal 100%/1 Sans-Serif, Arial ! important; } H1{ Color : #800080 ! important; Font : oblique xx-large/1 Serif, ‘Times New Roman’ ! important; Text-Align : center ! important; Text-Decoration : underline ! important; } Web dilinde stili belirlenebilen etiketlere Selector denir. Bu CSS dosyasında, bir ID (kimlikli) türü, iki Class (sınıf) türü Selector tanımlanıyor; iki HTML Selector’ü, varsayılan değerleri yerine yeni biçimlere kavuşturuluyor. ID türü Selector’ler, adlarının başındaki # işaretinden tanınırlar ve HTML belgesinde kendilerine kimlikleriyle atıfta bulunularak, herhangi bir etikete biçim vermekte kullanılırlar. Örneğin, buradaki “#turkuaz” adlı ID Selector’ünü bir katmanın içindeki yazıyı biçimlemek üzere kullanmak isterseniz, HTML kodunuz şöyle olacaktır: <BODY> HTML programcılığının temel ilkesi: Hiç yılmadan çalışmak ve öğrenmek; sonra herşeye yeniden başlamak Bu ilkeyi benimseyen, sadece başarılı HTML programcısı değil, her işte başarılı bir bir kişi olur Buradaki katman etiketi SPAN’ın içindeki metni biçimlendiren, “turkuaz” adlı Selector başka hiç bir şey yapmayıp sadece biçimlendirdişi unsura aquamarin arkaplan rengi verecektir. “Class” sayılan Selector’leri, mevcut herhangi bir HTML biçim etiketi ile birlikte kullanılabilir: p.mavi, H2.koyumavi gibi. “Mavi” sınıf? Selector ile birleğtirilen HTML Selector’ü, “mavi” sınıfının özelliklerini alır. Buradaki örnekte “.mavi” Selectörünün harf rengini mavi yapmaktan başka bir özelliği yok: dişer bütün stil özelliklerini “inherit” ediyor, yani başlandığı ve değiştirdişi HTML Selectror’ünden miras alıyor. Burada gördüşünüz “! Important” ifadesi ise Browser’a, ziyaretçi kendi bilgisayarında Browser ayarlarını değiştirmiş bile olsa, bilgisayar sahibinin değil, bizim verdişimiz değerlerin geçerli olması gerektişini bildiriyor. CSS yoluyla, HTML’in kendi stil belirleyebilen etiketlerini, veya teknik adıyla HTML Selector’lerini de yeniden biçimleyebiliriz. Normal olarak HTML’in H1 bağlığı sağa yatık bir harfle görüntülenmez; ancak “stillerim.css” dosyasını başladığınız her Web sayfasında H1 bağlığı, italik, çok büyük ve Times Roman olacaktır. Stil kaşıdı, herhangi bir isimle kaydedilebilir; fakat dosya adının uzatması, tercihan “.css” olmalıdır. Bir CSS dosyası, HTML sayfasına HEAD etiketi içinde LINK etiketiyle başlanır. Diyelim ki bu dosyayı “stillerim.css” adıyla kaydettiniz.Bu dosyayı HTML sayfasında şöyle başlamanız gerekir: <HTML> <HEAD> <TITLE>Stil kaşıdı başlama örneği

şeklinde bir SCRIPT etiketi ile sayfanıza başlamış bulunuyorsunuz ve bu JS dosyasının içinde daha önce ele aldığımız türden size “brw.ie4” veya “brw.ns4” nesnelerini veren bir fonksiyon var. Şimdi bu neslereni BODY etiketi içinde onLoad olayın? kullanarak test edebilir ve ziyaretçinin Browser’? Netscape ise Netscape için, IE ise IE için geçerli soruyu sorarak, ziyaretçimizin o anda Browser ekranının enini boyunu öğrenebiliriz. İşte size kullanabileceğiniz bir HTML-Javascript parçası:

onResize=”history.go(0)”>
Bir parantez açalım: buradaki “onResize=”history.go(0)” ifadesi, ziyaretçininin sitemize başlandıktan sonra Browser’ının boyutlarını değiştirmesi ihtimaline karşı, sayfamızın ziyaretçinin sabit diskindeki Cache bellekten yeniden yüklenmesini sağlayan bir güvenlik önlemidir. Bir başka güvenlik önlemi Browser’ın sayfa görüntülendişi anda penceresinin sağına ve altına otomatik kaydırma çubuğu koymasın? istemiyorsanız, BODY etiketine Şu özellikleri de verebilirsiniz:
BACKGROUND=”images/horizon.jpg” MARGINWIDTH=”0″ MARGINHEIGHT=”0″ SCROLL=”NO”
Peki, Şimdi elinizde iki ölçü oldu: ekranEn ve ekranBoy. Bu bilgileri nasıl kullanacaksınız? İşte bu bilgi, ziyaretçinize “Ekranın? 800×600 piksel yap, öyle gel!” demekten sizi kurtaracak, söz gelimi bir grafişi 460:710 koordinatlarına denk gelmek yerine “ziyaretçinin ekranının sağ kenarından 200 piksel solda başlamasın? sağlayacak olan bilgidir. Bunu yapabilmek için grafişinizi bir katman nesnesinin (.., .. veya..

etiketlerinin içine koyarsınız; katman nesnesi, “çıplak” konulacak grafikten () farklı olarak, STYLE özelliğine (attribute) sahiptir ve dolayısıyla, posizyon, başka bir nesnenin altında veya üstünde olmak, görünür veya görünmez olmak gibi kontrollere sahiptir. Örneğin, içinde sayfalarınız arasında gidip gelmeyi sağlayan düşmelerden birincisini içeren katmanın şöyle oluşturulduşunu düşünün:

Hangi IMG etiketi böylesine denetlenebilirı İşte bu dinamizmdir; ziyaretçi ile etkileğmektir. Ziyaretçi ile etkileğmek, her ziyaretçinin bilgisayarına bir çerez bırakmaktan ibaret değildir. Katmanlar nesne oldukları için, isimleriyle hitabedilebilirler; herhangi bir Mouse olayına göre attribute değiştirebilir, örneğin görünür hale gelebilirler; görünmez olabilirler. Dinamik bir katman yerleğtirme işlemi gibi yönetimi de Javascript ile mümkündür.
10. Sitenizi sınayın: Çok kolay gibi görünmesine rağmen, Internet, farklı Browserlar, farklı modem hızları, farklı bilgisayarlar, farklı ekran kartları ve ekranlarla sinanmamış sitelerle dolu. Bir çok tasarımc? için sınama, en fazla bütün dosyaları sitenin üretildişi bilgisayardan başka bir bilgisayara aktararak, başlantıları kontrol etme anlamına geliyor. Yani acaba herhangi bir LINK, mutlak bir dosyayı mI çaşırıyorı IMAGE dizinine yerleğtirilmemiş grafik kaldı mış Hayır, hayır.. Sınama bu değil. Sınama, mesela siz Istanbul’da oturuyorsanız, Artvin’deki veya Van’taki hedef kitlenize mensup olduğuna inandığınız gerçek Internet kullanıcılarını bir 14.4’lük modem başlantısı olan, 66 MHz’lük bir CPU’su ve 1 MB bellekli, 640×480 çözünürlükte ekran kartı bulunan ve 15 inç ekrana sahip bir bilgisayarın karşısına geçirip, yüzlerini incelemektir.
Ve bunu yaparsanız, sizden daha iyi Web Sihirbazlığı yapan olmayacağına inanabilirsiniz.
BUNU NASIL YAPARIM?
Ne kadar usta olursa olsun, bu soruyu, hiç olmazsa arada bir sormayan Web tasarımc? düşünmek imkansız gibidir. ??in kötü taraf?, insan kendisini Web tasarımcısı saymaya başladıktan sonra, bu tür soruları da açıkça soramaz! İşte, sormaya çekindişiniz veya çekinmedişiniz HTML soruları ve yanıtları. Ama hemen eklemek gerekir ki, yapılacak herhangi bir işin, çözülecek herhangi bir tasarım güçlüşünün, HTML 4 gibi, CSS, CSS-P, Javascript ve VBScript ile donanmış bir dilde, sadece bir doğru yanıtı olamaz. Buradaki çözümleri, bulanabilecek çözümlerden sadece biri olarak değerlendirmek gerekir.
Büyük Birinci Harf (Gömme):
Gazete ve dergi yazılarında bazı paragrafların ilk harfi, dişer harflerden çok büyük ve ayaşı doğru iki, hatta üç satır yükseklişinde olur. Gazetecilik dilinde buna Gömme Harf denir. Yazılı basının favori masaüstü yayıncılık programı QuarkExpress’te bile otomatik yapmak için programın beğinci sürümünü bekledişimize göre, HTML’de birinci harfin büyük olmasını otomatik olarak sağlamak için biraz daha bekleyeceğiz demektir. Gerçi CSS-1 kuralları arasında bunu sağlayan bir eleman var (first-letter), fakat kuralların zorunlu değil tavsiye bölümünde yer aldığı için ne Nestcape 4.5 ve öncesi, ne de IE 4.01 ve öncesinde uygulanmış değil. Bütün umudumuz, IE 5 ile CSS-1 ve CSS-P’nin bütün kurallarının uygulanabilir hale gelmesi. Eğer bu mümkün olursa, bu imkandan yararlanmak için, örneğin, şöyle bir stil tanımlamanız yeterli olacak:
P.first-letter {font-size: 200%;}
Tabiî, ilk harfinizi yüzde 200 yerine isterseniz yüzde 400 de büyütebilirsiniz. O zamana kadar Şu seçeneklerle idare edin:
1. Grafik olarak harf:
üyük ilk harf elde etmenin çaresi.
2. Tek kutulu tablo:

üyük harf elde etmenin çaresi..
3. Stil vererek:
HTML belgesinde HEAD bölümünde Şu stili oluşturun:
 .gomme { width: 1em; height: 1em; float: left; text-align: center; font-size: 20pt; color:red; font-style:italic }
Sonra, birinci harfini büyük yapmak istedişiniz paragrafa şöyle başlayın:

Bharf büyük, kırmızı ve yükseklişi üç satır olacak. Bu paragraf? biraz daha uzatalım.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Eh bu kadar yeter.

Dikey Çizgi
HTML’de yatay çizgi (

) var da, dikey çizgi yok. Tasarımınız, sayfada dikey çizgi gerektiriyorsa, tablodan yararlanabilirsiniz. Grafik programınızda eni ve boyu 1 piksel ve rengi siyah bir kutu resmi yapın. Bunu 1psiyah.gif adıyla kaydedin. Dikey çizgiye ihtiyacınız olan yerde bir tablo oluşturun; metinlerinizin bir kısmı ve tablonun içine girebilir; girmeyebilir. İşte bir örnek:

Burada metin var.

Burada metin var

Çizginin yükseklişi ne kadar olacaksa, çizginin bulunduğu kutudaki IMG etiketinin yükseklişini o kadar arttırın.
Beyaz Boğluklar
Bazen, iki satır arasında tam istedişiniz ölçüde boşluk elde etmek zor olur.

çok,
ise az boşluk bırakır. Kolayı var. Eni 1, boyu 2 piksel, saydam bir GIF dosyası yapın ve 1psaydam.gif adıyla kaydedin. Boğlu?a ihtiyacınız olan iki satırın arasına Şu etiketi koyun:

Burada 20 ve 49 yerine, kendi ihtiyacınız olan boğluşun değerini yazacaksınız.
Bir satırı arzu ettişiniz kadar içerden başlatmak amacıyla da aynı teknikten biraz farklı ifadeyle yararlanabilirsiniz:
Bu satır 25 piksel içerden başlayacak.
İki sütun yazı arasına arzu ettişiniz kadar boşluk vermek için, sütunları bir tablonun hücrelerine alın, ortalarındaki hücrenin boyunu ve enini istedişiniz boşluk ölçüsüne getirin.
Sadece Netscape’de bulunan etiketi de beyaz boşluk sağlayabilir:

IE, bu kodu görünce, hiç bir şey yapmaz.
Arkaplanda Yazı
Bazen güzel bir düzenleme ile biş bağlı?ın arkasında, aynı veya farklı kelimelerin tekrarlanarak zemin oluşturduşunu görürsünüz. Üstelik de sayfa yıldırım hızıyla gelmiştir; yani arkaplandaki yazıların, grafik olmadığı anlaşılıyor. Bunu katman teknolojisi ile başarabilirsiniz:
ÖNDEK? METİN

Arkadaki metin Arkadaki metin Arkadaki metin Arkadaki metin
Arkadaki metin Arkadaki metin Arkadaki metin Arkadaki metin
Arkadaki metin Arkadaki metin Arkadaki metin Arkadaki metin

İlk sayfa bir kaç saniye görünsün, kaybolsun!..
Buna “Splash page” (suya dalma sayfası) da deniyor; bir kaç saniye görünüyor, sitenizin nitelişi hakkında fikir veriyor, ilgi çekiyor, sonra yerini ana sayfaya bıraor.:

Bu teknişi iki sayfasının arasında reklam amacıyla uygulayanlar bile var!
Stil düzenlemesi yapmadan harf belirlemek için
Sayfanızda, sadece bir yerde normal stil komutlarının dışına çıkarak, bir metnin belirli bir harfle görüntülenmesini istiyorsanız, hemen önünde Şu etiketi kullanabilirsiniz:
Bu yazı Courier harfle görüntülenecek
Türkçenizi kaybetmemek için
Bilgisiyarla uğraşalı beri, kendi dilimiz sık sık kazaya uğruyor, ama sayfalarımızın dilini korumak elimizde. Her sayfanın bağına Şu META etiketi koyabilirsiniz:

Resimleri Bloklayın!
Sayfanızdaki grafiklerin hepsinin sol taraf? aynı hizaya gelsin istiyorsanız, sadece yazı için kullanılır sandığınız

etiketinden grafiklerde de yararlanabilirsiniz:

Bütün grafikleriniz soldan yaklaşık 40 piksel hizalanacaktır! Resimleriniz sayganın sağına hizalansın istiyorsanız, buna bir de ALIGN ekleyebilirsiniz:

etiketi kendi içinde kullanırsa, içindeki unsuru 80 piksel sağa iter.

Tabiî, en istikrarlı hizalama aracı olarak daima tablodan yararlanabilirsiniz.
Noktasız Liste
HTML’in noktasız listesinin satır araları çok açık; noktalıların araları iyi, fakat siz nokta istemiyorsunuz. O halde HTML’i biraz kandırabilirsiniz:

İşte size aralığı dar, ama noktasız liste!
HTML’e ENTER ve TAB girdilerini kabul ettirmek mümkün müş
Hayır, değil! Düz yazı programınızda HTML belgede bir metne ne kadar ENTER ve TAB girseniz de, Browser bildişini okur ve bunları yok eder. Bir şartla! İstedişiniz gibi biçimlemek istedişiniz bölümün bağına

 , sonuna

etiketlerini koyarsanız, bütün ENTER ve TAB’leriniz korunacaktır.
Form unsurlarını hizalamak istiyorsanız
Formlarda, isim yazılacak INPUT kutusuyla adres yazılacak INPUT kutusunu hizalayabiliyor musunuz? Elbette, hayır! Bir çaresi bütün unsurları bir tablonun hücrelerine serpiştirmektir. Fakat bir başka çaresi daha var.

etiketinden yararlanmak. “İsim” kelimesi dört harfli, “Adres” kelimesi beğ harfli.. Demek ki, İsim’in INPUT kutusunun Adres’in INPUT kutusu ile hizalanması için İsim’den sonra bir boşluk olması gerekiyor.

etiketinden önce

 etiketini kullanırsanız, bütün form unsurlarınıza bu hesabı yaparak, INPUT kutularını kolayca hizalayabilirsiniz.

E-Mektup başlantısı

Sitenizdeki bir başlantıyı tıklayan ziyaretçinin elektronik posta programı açılsın; boş  bir mektup kaşıdı görüntülensin; alıc? hanesine sizin (veya arzu ettişiniz bir başka kişinin ve kurumun) adresi yazılsın istiyorsunuz. Kolay! Bir mailto: başlantısı bu işi halleder.  Bu mektup birden çok kişiye gitsin istiyorsanız, o zaman kod şöyle olacak:



Bu mektubu bir üçüncü kişi de alsın istiyorsanız, bir ekleme yeter:



Peki, sitenizde kime elektronik mektup göndereceği kararını neden ziyaretçiye bırakmıyorsunuz? Bir “açılan liste” kutusuyla bu işi halledebilirsiniz:
 






ONCLICK="location.href = "mailto:" + document.mektupformu.liste.options[document.mektupformu.liste.selectedIndex].value" NAME="Mektup Gönder">

Bu kodu yazarken, Javascript bölümünde tırnak işaret tırnak içinde olmasın diye “"” kodunun ktullanıldığına dikkat edin!

Geri Dü?mesi

Browser’ın Geri düşmesi özellikle Çerçeveli sayfalarda nereye geri döneceğini bilmeyebilir. Bu bakımdan sayfalarınızda arzu ettiniz yere kendi Geri düşmenizi koyabilirsiniz:

Aynı kodu grafik yerine bir veya daha fazla kelimeye de kazandırabilirsiniz:

Geri dönmek için burayı tıklayın

Aynı kodu, HTML-vari düşmelere de uygulayabilirsiniz:

Pencereyi kapatın

Bir ziyaretçinin Browser penceresini kapatmak için sayısız seçeneği var. Ama yine de kolay bir yere Kapat düşmesi koyabilirsiniz:

Bu pencereyi kapatmak için burayı tıklayınız

İsterseniz, yazı yerine bir grafik de kullanabilirsiniz.

Çerçeveye esir düşünce

Bir başka sitede sizin sayfanıza başlantı veriliyor; fakat uyanık site sahibi sizin sayfanız? kendi çerçevelerinden birinde görüntülettiriyor. Oysa siz bu tür başlantılarda sayfanız Browser’ın tüm penceresini kaplasın istiyorsunuz. Sayfalarınızın bağına Şu minik kodu yazın; hiç kimse sayfalarınız? kendi çerçevesine hapsedemez:

Veya Şu kodu da yazabilirsiniz:

Başlantılarınıza Tool Tip ekleyin

Tool Tip, Windows’da Mouse işaretçisini araç menüsünde bir simgesinin üzerine götürdüşünüzde açılan ve içinde bu aracın ne işe yaradığını belirten küçük bir sarı kutu içindeki yazılara verilen ad. Ziyaretçi Mouse işaretçisini başlantılarınızın üzerine götürdüşünde böyle bir Tool Tip görüntülensin isterseniz, başlantı kodunu şöyle yazabilirsiniz:

Sayfanız? Sık Kullanılanlar’a eklettirin:

IE 4.0 ve üstünü kullanan ziyaretçilere, isterlerse, bir kelimeyi tıklattırarak, sayfanız? Windows Sık Kullanılanlar klasörüne eklettirebilirsiniz. Buradaki kod, kendi Browser belirleme fonksiyonunu da içeriyor; dolayısıyla başka tür ve sürüm Browser’? olan ziyaretçiler açısında arzu etmedikleri bir durum olmayacaktır:

Geriye doğru sayım

Diyelim ki, özel sitenizde Doğum gününüze kaç gün kaldığını belirterek, ziyaretçilerinize, size alacakları armağan için hazırlık fırsatı vermek istiyorsunuz. Ya da tuttuşunuz takımın büyük maçına! Ya da 21’nci yüzyıla! (Bu Script’i kullanmak isterseniz, başındaki kredi satırını atmamak şartıyla serbestçe kullanabilirsiniz):

GeoCities’in yüzen grafişini kıskanıyor musunuz?

GeoCities bütün sayfalarında yarı-saydam bir loga grafişi, sayfası yukarı da indirseniz, ayaşı da indirseniz, sağ alt köşede kıpırdamadan durur. Bu etkiyi elde etmek isterseniz, sadece IE 4 ve sonrasında işlemek üzere, işte kodu:

Fakat aynı etkiyi Netscape de de elde etmek için, bir Javascript’e ihtiyaç var. Önce, DIV ile bir katman oluşturalım:

Kullanacağınız grafişin dosya adı ne ise, burada grafik kaynak (scr=) yerinde bu ismi kullanacaksınız. Bunu hallettikten sonra, DIV bölümünden sonra ve tercihan BODY etiketinin kapanmasından önce, Şu kodu yazın. (Bu Script’i , telif hakk? satırını atmamak şartıyla istedişiniz gibi değiştirerek, kullanabilirsiniz.)

Yüzen logo olarak kullanacağınız resmin eni-boyu kaç piksel ise, markW ve markX değişkenlerinin karşısına bu değerleri yazmalısınız. Ayrıca logonuzun ekranın neresinde sabit durmasın? istiyorsanız, o noktanın koordinatlarını (yüzde olarak) markX ve markY değişkenlerinin karşısına yazablirsiniz. Bu örnekte logo, erkanın sağ alt köşesinde duracak şekilde ayarlanmış bulunuyor. Bu değerler 0,0 olursa, logo ekranın sol üst köşesinde 50,50 olursa ortasında, 100,0 olursa sağ üst köşesinde, 0,100 olursa sol alt köşesinde durur. Yenilenme oranı olan milisaniye ise, Browser’ın logonun yerini kaç saniyede bir güncelleğtirmesini istedişinizi gösterir. Bu süre ne kadar düşük olursa, logo o kadar yerinde sabit kalır.

CSS Eİlenceleri

CSS, kullanışlığı olduğu kadar eğlenceli de olabilir. DHTML-uyumlu veya CSS kodlarının tümünü anlayabilen bir Browser ile Mouse işaretçisinin görünümünü değiştirerek, ziyaretçilerinizi Şaşırtabilirsiniz. Önce HTML belgesinin HEAD bölümüne Şu stil kodlarını yazın:

Sonra, BODY bölümünde bir sınama yapalım:
Yeğil Başlantı
Kahverengi Başlantı

Bir Yeğil Daha Ama bu Başlantı Değil

Meğgul.. Bekleyiniz
Yardım
Taşı
Otomatik
Bu kodun işleyebilmesi için ziyaretçinizin IE 4.0 sonrası bir Browser kullanıyor olması gerekir. NS kullanan ziyaretçiler etkiyi göremezler, o kadar.

Maviden gına geldi ise

Browserlar’a başlantıları mavi harfle ve mavi çizgili çizgili yorumlattıran varsayılan stilden bıktı iseniz, aramıza hoşgeldiniz! Ama üzülmeyin. Mavilikten kurtulmanın bir yolu HEAD etiketi içinde Şu stili oluşturmaktır:

Tabiî, renkleri zevkinize göre verebilirsiniz. Dikkat gerektiren tek nokta, ziyaret edilmiş başlantı ile edilmemiş başlantının renklerinin aynı olması, ziyaretçiyi Şaşırtır.

Yazıcıya göre sayfa kesme

Özene bezene hazırladığınız sayfaların ziyaretçi tarafından yazıcıda bastırılması halinde ne şekil alacağını da hesaba katıyor musunuz? Bazı sayfaların, özellikle grafik bulunan sayfaların yazıcıdan nasıl çıkaca?ın? önceden planlamak tasarımcının görevidir. Fakat yazıcılar arasındaki farklar ve ziyaretçinin varsayılan harfinin büyüklüğü veya küçüklüşü gibi faktörler yüzünden evdeki hesap bazen çarı?yı tutmayabilir; en güzel grafişiniz kaşıda ortasından ikiye ayrılarak dökülebilir. Hiç değilse buna engel olabilir; sayfanızın daşıt üzerinde bir bütün oluşturmasın? istedişiniz bölümünü belirleyebilirsiniz. HTML’in HEAD bölümüne Şu stili girin:

.yenisayfa (pagebreak-after: always)

Sonra, sayfanız? bölmek ve kağıt üzerinde yeni bir sayfa başlasın istedişiniz yerde, Şu kodu yazın:

Sayfada tarih

Sayfalarınızda, günün adını, ay ve yılı, isterseniz, geri planında bir de güne belirten grafikle gösterebilirsiniz. Biraz uzunca görünmekle birlikte, herşeyi bir tablo içinde yapabilen bu kodu, istedişiniz sayfaya ithal ederek, bir kere yazdıktan sonra yeniden kullanmanız mümkün. (Bu kodu, yazarının adını belirten satıra yer vermek şartıyla, istedişiniz gibi kullanabilir ve değiştirebilirsiniz)

Bu kodu yazarken, en çok dikkat edilmesi gereken bölümü, Javascript’e HTML yazdırtan son 16-17 satırıdır.; tek ve çift tırnakların yerine özellikle dikkat etmeniz gerekir.

Javascript ile açılan menü

Sayfanızın bir yerinde, Navigation çubuklarında gösterilemeyecek kadar çok belgeye veya sayfaya ulaşım imkanı vermek isteyebilirsiniz. Sözgelimi bir kitabın farklı bölümlerine ulaşma kolaylığı sağlamak isteyebilirsiniz. Ya da kendi sitenizin çeşitli sayfalarına bir menü ile ulaşılması daha az yer kaplaması bakımından uygun olabilir. Bunu FORM teknişi ile sağlamak mümkün. Önce HEAD bölümünde kısa bir Javascript yazalım:

Sonra, bu Script’in yardımıyla kullanacaşımız açılan menü bölümü için bir FORM oluşturalım:

Tabiî menüde gösterilecek kelimeler ve bunların karşılığı olan HTML sayfalarının adını kendi sitenize uygun şekilde düzeltmeniz gerekiyor.

Tek pencere yetmiyorsa

Diyelim ki sayfalarınızın içerişi öylesine arttı ki, artık size bir Browser penceresi yetmiyor ve ziyaretçi bir başlantıyı tıkladışında bilgisayar ekranında ikinci bir pencere açılsın ve talep edilen içerik yeni pencerede gösterilsin istiyorsunuz. Yani size bir pop-up pencere gerekiyor. İkinci ve 640x480 piksellik pencere için kodumuz şöyle olabilir.

Bu penceresi ziyaretçinin ekranında belirli bir konumda da açtırabiliriz. Bunun için popupWin satırı şöyle olacak:

popupWin=window.open('http://www.psacake.com','remote','width=640,height=480,top=100,left=100')

Sonra, hangi başlantı yeni bir pencere açtırsın istiyorsanız, o başlantıyı şöyle yazabilirsiniz:

İsterseniz, bu kolaylıktan düz başlantı metninde de yararlanabilirsiniz:

Burayı tıklayınız

Açtıracağınız pencerenin menü ve araç çubuğu olup olmaması, kaydırma çubukları bulunup bulunmaması da bu arada belirtilebilir.

Kaynaşı kolayca görüntületmek

Özellikle Internet, Web teknikleri, HTML ile ilgili bir siteniz varsa ve ziyaretçileriniz o anda izledikleri sayfanın kaynaşın? görmek için zahmet edip, Mouse’un sağ düşmesini tıklayıp, menü açarak kaynaşı görüntülemekle uğraşmasınlar istiyorsanız, sayfanızın altına mesela bir “Kaynaşı Görüntüle” satırı koyun, bu satırı şöyle başlantılayın:

57267

Char w/space:57000

Char w/space:64000