: İç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, PCW çok güzel şeyler yazmıştı.
.. İçindeki metnin bir yerden alıntı olduğunu gösterir:
Bu konuda,HTML Tasarım Rehberi kitabına bakabilirsiniz.
.. İçindeki metnin bilgisayar programı veya benzeri bir Script parçası olduğunu gösterir:
Bu paragrafın stili şöyle olmalıdır:
.shadow {
font-size: 16pt;
color: #000000;
font-family: "Arial";
}
Daha sonra normal paragrafa dönebilirsiniz.
.. İç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:
Dolayısıyla, suyun formülü, H2O şeklinde yazılır.
.. İçindeki metni, daha küçük harfle ve normal satırın üzerine çıkartarak, supercript şeklinde yazdırır. Özellikle bazı isimlerde kullanılabilir:
Romanın kahramanının adı Mike McCormick idi.
, - ve
- Ö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:
- DHTML
- Kelime anlamı Dinamik Hyper Text İşaretleme Dili olup, Web sayfalarına dinamik nitelik kazandıran teknolojiler bütünüdür.
- ASP
- Kelime anlamı Aktif Server Sayfaları olup, Microsoft'un Dinamik Web sitesi yapımına getirdiği yeni teknolojileri içerir.
:
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ığarak, 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.
DİNAMİK HTML'E HOŞGELDİNİZ!
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 "programcığı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 aşağı 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.
BİR CSS ÖRNEĞİ
Düz yazı dosyası ile oluşturabileceğiniz bir Cascading Style Sheets örneği:
/*
CSS Dosyası
*/
#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:
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:
Stil kağıdı bağlama örneği
Genellikle, ziyaretçinin Browser'ını soruşturduğunuz zaman aldığınız sonucu bir değişkene (variable) yazarak, bir kenarda tutmak isteyebilirsiniz. Bu değişken, ilerde başka Java fonksiyonlarında veya HTML içinde özellikle BODY etiketinde kullanılır. Bu amaçla biraz daha gelişmiş bir Browser belirleme fonksiyonu şöyle olabilir:
function Brw() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla')!=-1) && ((agent.indexOf('spoofer')==-1) &&
(agent.indexOf('compatible') == -1)));
this.ns2 = (this.ns && (this.major == 2));
this.ns3 = (this.ns && (this.major == 3));
this.ns4 = (this.ns && (this.major >= 4));
this.ie = (agent.indexOf("msie") != -1);
this.ie3 = (this.ie && (this.major == 2));
this.ie4 = (this.ie && (this.major >= 4));
this.op3 = (agent.indexOf("opera") != -1);
}
var brw = new Brw()
Bu Javascript fonksiyonu, size biri doğru (true), altısı yanlış (false) yedi nesne (object) kazandırır. Diyelim ki, ziyaretçinin Browser'ı Netscape 4.0; o zaman brw.ns4 doğru olacaktır, mesela brw.ie4 yanlış! Sayfanıza ilerde, "Eğer brw.ns4 doğru ise şunu yap... eğer brw.ie4 doğru ise bunu yap" şeklinde rutinler ve fonksiyonlar koyabilirsiniz.
8. Javascript'lerinizi hazırlayın: Dinamik HTML'in iki ayağından biri CSS ise diğeri Javascript yoluyla, bu stilleri katmanlara uygulamaktır. Ziyaretçinin Browser'ına, "Şimdi, pencerende x koordinatı 120, y koordinatı 15 olan noktadan itibaren eni 100, yüksekliği 110 olan bir katman aç ve içine "Burayı tıklayınız!" yaz; bu yazının rengi sarı, zemini mavi olsun; Mouse işaretçisi bu katmanın üzerine geldiği zaman yazının rengi kırmızıya, zeminin rengi turuncuya dönsün!" demek sadece HTML kullanarak hemen hemen imkansız. Oysa, Javascript ile kullanılmaya hazır fonksiyonlar oluşturup (veya bulup), bunları HTML sayfasında kullanmak, işi olağanüstü kolaylaştırır. Javascript ile oluşturulacak fonksiyoonlar da, tıpkı CSS komutları gibi bir HTML dosyasına ya dışarıdan eklenir, ya da HTML'in içinde (ya baş tarafında, ya da kullanılacağı yerde) kullanılır.
Javascript ile oluşturacağınız fonksiyonları bir sitedeki bütün sayfalarda, hatta başka-başka sitelerin sayfalarında kullanmak haricî Javascript dosyasının HTML'e bağlanması ile mümkün olur. Javascript fonksiyonlarını içeren bir düzyazı dosyası, adının uzatması ".js" olan bir dosyada toplanır ve HTML'e LINK etiketi ile bağlanır. Tıpkı stil komutları gibi, sırası geldiğinde HTML'in içinde bu dosyadaki bir fonksiyonu işbaşına çağırırsınız. İyi bir tasarımcının çok zengin bir haricî Script belgesi koleksiyonu olur.
Böyle bir haricî JS dosyasında şu bölümler bulunur:
Browser Belirleme Fonksiyonu: DHTML uyumlu bir Browser, CSS ve katman teknolojisini destekler. Bununla birlikte bütün Browser'lar bütün Javascript fonksiyonlarını desteklemez. Burada kritik nokta, Netscape 4.0 ve daha üstü ile IE 4 ve daha üstünün Browser penceresindeki bir belgeye nasıl referansta bulunduğudur. Netscape, belge unsurlarına document.nesne şeklinde hitabedilmesini isterken, IE, document.all.nesne şeklindeki referans gerektirir. Ayrıca Netscape'te stil belgelerine document.stil_adı.nesne şeklinde atıfta bulunursunuz, IE'de ise bu document.all.stil_adı.style.nesne şeklinde yazılır. Javascript'inizde bu unsurlara, diyelim ki, sürekli belge ve stil diye atıfta bulunabilirsiniz, fakat baş tarafa, Browser belirlediğiniz yere "Eğer Netscape ise belge = document.stil_adı.nesne, eğer IE ise belge = document.all.nesne" anlamında bir rutin yazarsınız.
Grafikleri önceden yükleme: DHTML önemli ölçüde grafik unsurlara yer verme sanatıdır; ve grafikler bir sayfanın ziyaretçiye aktarılmasında en önemli yavaşlık sebebidir. Burada iki büyük düşünce ekolü var: "Sitemizdeki bütün grafikleri henüz birinci sayfa görüntülenmeden ziyaretçiye aktaralım ve sayfalarımız daha sonra çabuk görüntülensin" diyenler; ve "Birinci sayfa ne kadar çabuk görüntülenirse o kadar iyi, ziyaretçinin bir kere ilgisini çekmek şart!" diyenler. İster birinci grupta olun, ister ikinci grupta, hiç değilse birinci sayfanın grafiklerinin tümü, sayfa görüntülenmeye başlamadan önce ziyaretçiye aktarılmalıdır. Bunu, BODY etiketine gömeceğiniz onLoad komutuna bir Javascript önyükleme fonksiyonu bağlayarak yapabilirsiniz. Şu Javascript fonksiyonu, önyükleme işini yapacaktır:
Function onYukleme() {
resim1 = new Image();
resim1.scr = "dizin/resim1.gif";
}
Kapanan kıvrık parantezle fonksiyonu bitirmeden önce, resim2, resim3, vd., sıralayabilirsiniz. Böylece önceden yüklettiğiniz grafikler, ziyaretçinin bilgisayarının belleğinde kalacak ve ihtiyaç anında sür'atle görüntülenecektir.
Javascript konusunda bir son tavsiyeye yer verelim: Gerçekten Javascript öğrenmeye zamanınız yoksa, o zaman sizin için Javascript yazacak bir programı, en ince ayrıntılarına kadar öğrenin. DHTML'in bütün unsurlarını HTML sayfalarınıza yazabilecek ve bu arada sizin için yüzlerce satır Javascript programı oluşturabilecek WYSIWYG tarzı HTML editörlerinin sayısı hızla artıyor. Macintosh dünyasında GoLive CyberStudio, Windows dünyasında Macromedia Dreamweaver bu tür programlar arasında sayılabilir.
9. Katmanlar: Denir ki, Internet, televizyon ile dergi arasında bir ortamdır. Doğru; Web sitelerinde bir gazetede olabileceğinden çok, ancak uzmanlık alanında yayın yapan bir dergide ya da kitapta bulunacak kadar bilgi, bir televizyon atraksiyonu ile ziyaretçiye sunulabilir. Web sayfalarınızda doğrudan video dosyaları da verebilirsiniz; fakat çok pahalı streaming video (akan video) teknolojisi kullanmıyorsanız, bir AVI dosyasının ziyaretçiye aktarılması için gerekli süre, ziyaretçiye bilgisayarını kapattırıp, televizyonunu açtırtabilir!
Fakat Web sayfalarınızda televizyon ve sinema teknolojisinin temeli olan grafiklerin (veya metinlerin) belirli bir sırayla görüntülenmesi, sırası gelenin "açılması," sırası geçenin "kapanması" sağlanabilir. Bunu katman teknolojisi sağlar. Bir HTML sayfasında, ziyaretçinin Browser'ına ActiveX, Flash, Shock ve benzeri animasyonları gerçekleştirmesi için gerekli plug-in dosyalarının yüklenmesini zorunluk olmaktan çıkartan da katman teknolojisidir. DIV, LAYER, ILAYER ve SPAN etiketleri ile oluşturacağınız katmanlar, piksel düzeyinde bir hassasiyetle, ziyaretçinin ekranında, Browser penceresinde belirli bir yere oturtulabilir ve belirli bir sırayla görünür veya görünmez hale getirilebilir. DHTML'in dinamik tek unsuru da budur. (Bunlardan sık kullanacağınız DIV ile SPAN'dir ve aralarındaki tek fark, DIV, blok elemanıdır, yani kendisinden sonra yeni paragraf başlatır; buna karşılık SPAN satır elemanıdır, kendisinden sonra hiç bir şey yapmaz.)
"Piksel düzeyinde hassasiyet" ne demek? Bir Browser, klasik HTML belgesini aldığı zaman içindeki komutları yorumlayıp, sonucunu kendi penceresinde görüntülemeye, sıfır-sıfır noktasından başlar. Bir Browser penceresini, soldan sağa x, yukarıdan aşağı y koordinatları olarak düşünün.
Başarılı bir Web sitesi, 14 inçlik bir ekranı, 640x480 çözünürlükte bir grafik kartı bulunan tipik bir ziyaretçi dikkate alınarak kurulduğuna göre, Windows ve MacOS'in aldığı yerler, Browser'ın kendi penceresi, başlık ve menü çubukları, çerçeveler çıktıktan sonra, tasarımcı olarak size "temiz alan" olarak 600'e 350 piksel kalıyor. (Microsoft, ve Brittanica ansiklopedisi bu alana kendi sitelerini sığdırdığına göre, herhalde siz bir günlük gezete sitesi sığdırabilirsiniz!) Düz bir yazı içeren Web sayfası, nerede başlayıp, nerede biterse bitebilir; önemli değil. Ama, diyelim ki, ziyaretçi Mouse işaretçisini bir grafiğin belirli bir yerine getirdiği zaman, aynı grafiğin 155:220 koordinatında başlayan ve eni 35, yüksekliği 48 piksel olan bir bölüme farklı grafik görüntülenecek! Bu ölçüde hassas positioning (yerleştirme işlemi), ancak katmanlarınızı doğru tanımlamakla mümkündür. "Doğru tanımlamak" ise önce ziyaretçinin o andaki Browser boyutlarını bilmekle mümkündür. Kim olduğunu bile bilmediğiniz bir kişinin, ne olduğunu bile bilmediğiniz Browser'ının o anda enini boyunu nasıl bilebilirsiniz? Ve üstelik bunu, her ziyaretçi için yapacaksınız. Oysa işin kolayı, sayfanın bir kenarına, ziyaretçiye hakaret edercesine, "Ekran çözünürlüğünüz 800'den aşağı ise, yandınız!" diye bir uyarı koymak iken!
Bu işleme ziyaretçinin Browser penceresinin çözünürlüğünü belirleme denir, ve Netscape ile Internet Explorer, farklı sorular sormak şartıyla, sorarsanız, size o andaki boyutlarını verirler. Diyelim ki bir haricî JSavascript dosyasını HTML belgenizin baş tarafında:
ş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ı:
if(is.ns4) {
ekranEn =innerWidth;
ekranBoy=innerHeight;
preLoad();
} else if(is.ie4) {
ekranEn=document.body.clientWidth;
ekranBoy=document.body.clientHeight;
preLoad();
}"
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ı 800x600 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 sınanmamış 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ı mı ç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, 640x480 çö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.
ŞUNU 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 aşağı 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:
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 ÇizgiHTML'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şluklarBazen, 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ırakıyor.:
![Giriş grafiği]()
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:
Madde 1
Madde 2
Madde 2
Madde 4
İş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.
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:
![]( "Burayı tıklayın, filanca sayfaya gidin!")
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, aşağı 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:
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:
Hiç yorum yok:
Yorum Gönder