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.
/////////////////////KUTU: CSS ÖRNEĞİ///////////////////////
Bir CSS Örneği:
Düz yazı dosyası ile oluşturabileceğiniz bir Cascading Style Sheets örneği:
/*
New CSS file
*/
#turkuaz{
BackGround : **uaMarine ! 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>
<P>HTML programcılığının temel ilkesi:</P>
<SPAN ID=turkuaz”>Hiç yılmadan çalışmak ve öğrenmek; sonra herşeye yeniden başlamak</SPAN>
<P>Bu ilkeyi benimseyen, sadece başarılı HTML programcısı değil, her işte başarılı bir bir kişi olur</P>
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 **uamarin 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</TITLE>
<SCRIPT LANGUAGE=”Javascript”>......</SRIPT>
<LINK REL=stylesheet TYPE=”text/css” REF=”stillerim.css”>
</HEAD>
.......
Bazen bir sitede birden fazla aslî stil belgesi olabilir. Bazı sayfalara “stillerim1.css” dosyasını, bazı sayfalara “stillerim2.css” dosyasını bağlayabilirsiniz.
///////////////////////KUTU BİTTİ///////////////////
6. Script dosyası oluşturmaya başlayın. Tıpkı CSS gibi, HTML sayfasının Script bölümü de dışardan dosya olarak HTML’e bağlanabilir. Başkalarının sitelerinde gördüğünüz Javascript programlarını çok hoşlandınız diye alıp, kullanamazsınız. “Kim görecek!” diye düşünmek en azından ahlakî bir tutum olmaz. Ayrıca buna ihtiyaç da yok. Bir kere başkalarının sayfalarındaki Javascript bölümleri, büyük bir ihtimalle açıklama ve yorum satırları içermediği için içinden çıkılması imkansız olabilir. Oysa Web tasarımcılarına, kullanılmaya hazır, hemen her fonksiyonu yorum satırları ile açıklanmış, telif hakkı sorunu olmayan Javascriptler sunan binlerce Internet sitesi bulabilirsiniz. Bu tür yerlerden edineceğiniz güvenli ve anlaşılır Javascript’leri, sabit diskinizde biriktirebilirsiniz. Ayrıca büyük bir ihtimalle Javascript öğrenmek için alacağınız kitabın da içi binlerce örnekle dolu bir CD-ROM’u olacaktır!
7. Microsoft Internet Explorer ve Netscape Navigator başta olmak üzere yaygın Web Browser programlarını özelliklerini, benzerliklerini ve farklılıklarını öğrenmeye başlayın. Dinamik HTML adı altında yer alan tekniklerin çoğu, IE veya Netscape’in Belge Nesneleri Modeli adı verilen ve bir açtıkları bir pencerede görüntüledikleri bir Web sayfasının özelliklerini nasıl tanıdıkları ve hangi komutlarla değiştirdikleri bilgisine dayanır.
Bir örnekle bu karmaşık kavramı açalım: HTML’de tablo oluşturmak için <TABLE></TABLE> etiketlerinin içini doldurmanız gerektiğini biliyorsunuz. Fakat IE için bir tablonun 22 adet belirlenebilir özelliği varken, Netscape bir tablonun sadece 9 özelliğinin belirlenebilmesine izin verir. Bu yüzden TABLE etiketinin içinde, mesela BORDERCOLORDARK=”koyu-renk” ve BORDERCOLORLIGHT=”açık-renk” unsurlarını kullanacak olursanız, IE’de tablonuzun dış çerçevesinin üst ve sol kenarı koyu-renk yerine yazdığınız renkle, alt ve sağ kenarı ise açık-renk yerine yazdığınız renkle görüntülenir; sitenizi Netscape’i kullanarak ziyaret edenler ise tablonun tüm çerçevesini tek renk olarak görürler. İki Browser arasındaki farklar, bu kadar “zararsız” olsa iyi! Örneğin, ziyaretçilerden bilgi derlemekte kullandığınız formların vazgeçilmez ögesi INPUT etikeketi, IE’de 21 adet belirlenebilir özelliğe sahip ve bunlardan birini kullanarak, formunuzdaki INPUT kutusunu bir veritabanından alınacak bilgi ile doldurtmak isteyebilirsiniz. Bu, özellikle dinamik bir sayfada, ziyaretçinizin size daha önce bildirdiği bazı bilgilere, bazı tercihlere dayanıyor olabilir. Oysa ziyaretçiniz, Netscape kullanıyor ise, sayfanız bu dinazmden yoksun kalacağı gibi, formdaki eksiklik, ziyaretçiye tasarımcı olarak sizin hatanız gibi görünebilir.
İyi bir Web tasarımcısı, bu sebeple her iki programı çok iyi tanımak ve farklarını bilmek zorundadır. Güvenli yol, iki Browser’ın asgarî ortak noktalarına hitap etmektir. Bu, bazen Web sayfanızın daha az dinamik, daha az hareketli, daha az marifetli olmasına yol açacaktır. Ama iyi bir Web tasarımcısı, ziyaretçilerine hangi Browser’ın daha iyi olduğuna dair ders vermez; sadece ve sadece sitesinin içeriğini her iki Browser’ın kullanıcılarına da ulaştırmaya çalışır. Sitenizi IE kullanarak görmeye gelen bir kişinin “Bu site Netscape için optimize edilmiştir,” Netscape kullanarak gelen bir ziyaretçinin de “Bu site en iyi IE ile görülür!” yaftasını görünce, ne hissettiğini sanıyorsunuz? Size düşen, ziyaretçinizi sinirlendirmek değil, tersine sunmak istediğiniz içeriği, ziyaretçinin Browser’ına uyumlu hale getirmek. Bunun için ziyaretçinin Browser’ının türünü ve sürümünü belirlemeniz gerekir. Eğer bunu yapmayacaksanız, asla Netscape’de yanlış görüntülenecek, sadece IE’e özgü özelliklere hitap etmeyin. IE’nin bazı özelliklerinden yararlanmak istiyorsanız, bu sağlayacak kodun Netscape’de “hiç bir şey yaptırmayan” kodlar olmasına dikkat edin.
///////////////////KUTU: BROWSER KOKLAMAK!/////////////
Ziyaretçinin Browser’ını Koklayabilir Misiniz?
Internet Browser programlarının bir kokusu olduğunu düşünmüyorsunuz, herhalde! Ama muzip bir programcı, ziyaretçilerin sitenize bağlantı sağladıkları Browser’ın markası ve sürümünü belirleme işine “Browser’ı koklamak” adını takmakta sakınca görmemiş olmalı! O günden beri bu amaçla kullanılan Javascript ve VBScript programlarına “Browser Koklayıcı” deniyor.
Ziyaretçinizin Browser’ının türü ve sürümü iki yerde belirlenebilir: Ziyaretçinin bilgisayarında (Client-side) veya sitenize ev sahipliği yapan Web Server’da (Server-side). ASP gibi ileri bir Server teknolojisi kullanmıyorsanız, belirleme işini ziyaretçinin bilgisayarında yapmak uygun olur. HTML kodlarınızı iki Browser’ın ortak özelliklerine indirgemek işinize gelmiyorsa, sayfanın tümünü değilse bile bir bölümünü IE için ve diğerleri için farklı yapabilirsiniz. Bunu sağlamak için size gerekli bilgi, ziyaretçinin Browser’ı IE 4 ve üstü mü, 3 ve altı mı, yoksa diğerleri mi sorusunun cevabıdır. Bu soruyu, ziyaretçinin Browser’ına şu Javascript fonksiyonu ile sorabilirsiniz:
function msieversion()
{
var ua = window.navigator.userAgent
var msie = ua.indexOf ( "MSIE " )
if ( msie > 0 )
return parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))
else
return 0
}
Bu fonksiyon, hemen hemen bütün belli başlı Browser’larda işler ve size Microsoft IE’nin sürüm numarasını bildirir. Diyelim ki Web sayfanız gerçekten IE 4 ve daha sonrası sürümlerin bir özelliğine mutlaka hitabetmek zorunda. O zaman, HTML’in daha sonraki bir bölümünde, IE 4 ve sonrası için ayrı, IE 3 ve öncesi için ayrı, ve diğerleri için ayrı HTML veya Script kullanacağınız zaman, yukarıdaki fonksiyonun elde etmiş olduğu bilgiyi şöyle kullanabilirsiniz:
if ( msieversion() >= 4 ) {
[buraya IE 4 ve sonrası için yazacağınız kodlar girecek]
}
else if ( msieversion() <= 3 ) {
[buraya IE 3 ve öncesi için yazacağınız kodlar girecek]
}
else {
[buraya diğer Browser’lar için yazacağınız kodlar girecek]
}
Fakat bazen, birinci sayfanızı bile ziyaretçinin Browser’ına uyumlu olarak vermek isteyebilirsiniz. Bu durumda şu sayfa, ziyaretçinin Browser’ını koklayacak ve ona göre ana sayfa gönderecektir. (Netscape için sayfanızın adı “netscape.htm,” IE için “ie.htm” ve diğerleri için “diger.htm” olması, sayfa adları başka ise bu kodda değişiklik yapmanız gerekir):
<html>
<head>
<title>Browser'a göre ana sayfa!</title>
<script>
<!-- Eski Browser'lardan gizle
var browser=navigator.appName + " " + navigator.appVersion;
var getkey=browser.substring(0, 12);
function hangiSayfa()
{
if (browser.substring(0, 8)=="Netscape")
window.location="netscape.htm";
if (browser.substring(0, 9)=="Microsoft")
window.location="ie.htm";
if ( (browser.substring(0, 8)!="Netscape") && (browser.substring(0, 9)!="Microsoft") )
window.location="diger.htm";
}
// -->
</script>
</head>
<body onload=hangiSayfa()>
</body>
</html>
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.
/////////////////KUTU BİTTİ//////////////////////
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!