Dinamik HTML aslında bir dil değildir. HTML`in durağan sayfalarından kurtulmak amacıyla geliştirilen; JavaScript, CSS ve CSS-P (Cascading Style Sheet - Positioning) yardımıyla oluşturulan sayfalara denir. Sanırım buna en iyi örnek Microsoft `un sayfalarıdır. Daha önce girmediyseniz veya dikkat etmediyseniz mutlaka girin, üst taraftaki ana linklerin üzerine geldiğinizde aşağıya doğru alt başlık linkleri açıldığını göreceksiniz. Eğer sitenizin konu başlıkları çok fazlaysa bu teknik tam size göre. Bu menünün JavaScript ve CSS karışımından oluştuğunu belirteyim. Önce CSS ve Div sayesinde stil ve katmanlar oluşturuluyor, bazıları gizli hale getiriliyor, sonra bunlar JavaScript ile imleci üzerine götürme ve çekme olayları sonucu görünür ve gizli yapılıyor. Gerçekten çok güzel bir dHTML örneği, fakat bizim bu seviyeye gelmemiz için önümüzde uzun bir yol var.

    HTML içinde en çok kullanılan Script dili JavaScript`tir. Bu Scriptlerin çalışabilmesi için Browser `ın bazı eklentilere ihtiyacı vardır. Bu eklentiler son 3-4 sürümde zaten geliyor ama eski Browser`larda veya Opera gibi az kullanılan Browser`larda olmayabiliyor veya sonradan yükleniyor olabilir. Bir de belirtmek istediğim Script veya Applet`ların sistemden bayağı bir güç çaldığı. Ama bu çok karmaşık olanlar için geçerli bizi öğreneceklerimiz için değil.

    Yukarıda dHTML`in ayrı bir dil olmadığına, JavaScript ve CSS`e dayandığına değindik. Fakat Java; C , Pascal ve Delphi dillerden esinlenerek veya kırpılarak yazılmış ve her platformda çalışabilen bir dildir. JavaScript ise bunun kısaltılmış versiyonudur. JavaScript`in temeli olan ECMAScript ile ilgili kurallar kitabı 1500 sayfadır. Kısaca JavaScript başlıbaşına bir dildir ve bu dil ile programlar yazılabilir. En güzel yanı ise HTML gibi, özel bir derleyici programa gerek kalmadan düzyazı editörleriyle yazılabiliyor olmasıdır.

    Bu sizi fazla korkutmasın çünkü bizi ilgilendiren sadece imlec hareketlerine göre iş gören 3 komut olacak. Bunlar imleci üzerine ötürünce çalışan onMouseOver, imleci üzerinden çekince çalışan onMouseOut, tıklayınca çalışan onClick `dir. Bu 3 komut sayesinde farenin hareketlerine bağlı dinamik sayfalar tasarlayabiliriz. Bu komutlara hem Script, hem de CSS unsurları ekleyebiliriz.

    Yine bir ön bilgi vermeden geçemiyeceğim, lütfen bu ön bilgileri çok dikkatle okuyun. Şimdiye kadar defalarca belirttiğim, belkide sizin de şimdiye kadar öğrendiklerinizi uygularken fark ettiğiniz gibi bütün Browser`lar sayfaları yorumlaması bakımından farklılık arz eder. Bir tasarımcı yaptığı sayfaları, en azından çok kullanılmaları bakımından, internet Explorer ve Netscape Navigator Browser `larında denemek ve iki browser `da da aynı çıkan sayfalar yapmakla yükümlüdür. 'Yükümlüdür' deyince yasal zorunluluk gibi oldu ama bu konu gerçekten önemli çünkü Netscape Navigator kullananların sayısı yatsınamayacak kadar fazla, Linux ve MacOS kullanıcılarıda Netscape kullanır, diğer ismi az duyulan Browser`ların da Netscape Navigator `a daha yakın olduğu bir gerçek. Yani iki Browser`a uygun site yapmamız yeterli. Ayrıca dHTML unsurları tam olarak, Explorer`da 5.0 ve sonrasında , Netscape`de ise 6.0 ve sonrasında düzgün çıkar.

    İki Browserda aynı çıkacak sayfalar yapmak bazen gerçekten çok zor olabilir. İsterseniz deneyerek ikisine uyan bir tasarım yapabilir, isterseniz de iki Browser için ayrı sayfalar yapıp, sitenizin giriş sayfasına browser tanıyan bir Script yerleştirip, Script`i ziyaretçinin Browser`ına göre yaptığınız uygun sayfaya yönlendirmesini sağlayabilirsiniz. Bunları anlatmamın nedenine gelince bu ayrımın Script ve CSS tekniklerinde çok daha fazla olması.

    CSS, sayfalarınızda stil şablonları oluşturmaya, CSS-P ise sayfa üzerindeki metin, tablo, grafik, vs. gibi tüm unsurları piksel piksel konuklandırmaya (Positioning) yarar.
    CSS; HTML dilinin sayfa tasarımında tam esneklik vermemesinden dolayı geliştirilen ve çok çabuk benimsenen bir eklentidir. Bu tekniklerin sayfa içinde kullanılmasını sağlayan tag ve attribute STYLE`dır.

    CSS ve CSS-P `nin üç çeşit kullanma yolu vardır. Bunlar Global, yerel ve bağlantılı şablon teknikleridir. Üçüde doğrudur, üçüde aynı işi yapar ve üçü birden de farklı işlerde kullanılabilir. Sonuç itibariyle hangisi daha kolayınıza geliyorsa, hangisi sizin için daha pratikse onu kullanabilirsiniz. Üç şekilde kullanılmasından dolayı hem tag hem de attribute olarak tanımlanabilirler. Öncelikle CSS`in en çok kullanıldığı alan olan link veya yazı tipi değiştirme ve Browser`ınızın kaydırma çubuğunu renklendirme konularına değineceğim, ama ne yazıkki kaydırma çubuğunu renklendirme sadece Explorer 5.0 ve üzeri sürümlerinde işe yarıyor.

    Birinci kullanım şekli olan Global şablonda etiketler <HEAD>   </HEAD> tagları arasında bir tag olarak kullanılır. Style `ın kulanılma şekline kısaca değinecek olursak. Style taginin içinde Type etiketi ile düz yazı formatında css kodu yazdığımızı belirtiyoruz. Sonra değişiklik yapacağımız unsuru belirtiyoruz, mesela normal linkler için A arkasından bir aralık, süslü parantez ve etiketi belirtip eşittir yerine iki nokta üstüste işareti ve değer giriyoruz. Etiketleri ise birbirinden noktalı virgül ile ayırıp süslü parantezi kapatıyoruz. Birde örneği inceleyelim.

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<TITLE>CSS Teknikleri</TITLE>

<STYLE type="text/css">

A {background-color: white; color: blue;}

A:visited {background-color: white; color: red; font-weight: normal; font-family : Verdana; font-size: 20pt}

A:active {background-color: black; color: yellow; font-weight: normal; font-family : Arial; font-size: 20pt}

A:hover {background-color: blue; color: white; font-weight: bold; text-decoration : none; font-family : Times New Roman; font-size: 30pt}

H1 {font-family : Times New Roman; color: blue}

.deneme {font-family : impact; color: #bbbbbb; font-size: 30pt}
</STYLE>

</HEAD>
<BODY>

<P><a href="#">Lütfen Tıklayın</a>
<P><a href="#">Lütfen Tıklayın</a>
<P><a href="#">Lütfen Tıklayın</a>
<P><H1>Satırbaşı</H1>
<P><DIV class="deneme">DENEME YAZISI</DIV>

</BODY>
</HTML>

Örneği Görüntülemek için Tıklayın

    Kodu yazıp oluşan liklerin üzerine gidince, tıklayınca ve seçince oluşan farklılıkları gözlemleyin. Renklerin hepsi Style sayesinde oluyor, Body taginde hiçbir değer yok.

    Örnekte Normal linkler için A, tıklanmış linkler için A:visited, imleci üzerine getirdiğimizde linkin değişmesi için A:hover ve akfit linkler için A:active etikletlerini kullandık. Burada yaptıklarımız sayfadaki tüm linkleri etkileyecektir. Ayrıca yine sayfadaki tüm H1 başlık taglerinin değişmesi içinde de stil belirledik.

    İstediğimiz bir ismi vererek oluşturduğumuz stil`e ise seçiciler tekniği deniyor. Bu teknikte dikkat edilmesi gereken oluşturulurken başına nokta konması .secici gibi, buraya yazacağınız isim harf ile başlamak şartıyla her ingilizce karakter olabilir. Sonra bunu, istediğimiz tagin içine class attribute`u yardımıyla atıfta bulunarak kullanabiliriz. Katman oluşturmak için kullanılan tagler ise Div, Span ve Layer `dır. Fakat Layer sadece Netscape `de çalışır, Div ve Span ise ikisinde de çalıştığı için örneklerimizde bunları kullanacağız. Şimdi örnekteki etiketlerimizi tanıyalım.

    font-size : Font büyüklüğünü punto cinsinden belirtir.

    font-family : Font tipini belirtir. Verdana, Arial gibi değerler alabilir.

    font-weight : Fontun kalınlık incelik durumunu belirtir. Alacağı değerler kalın yapmak için bold, normal yapmak içinse normal `dir.

    font-style : Yazının italic (yatık) olup-olmamasını belirler. italic ve normal değerlerini alır.

    color : Fontun rengini belirtir.

    text-transform : Alacağı değerler; lowercase Yazının tümünün küçük harf olmasını, uppercase Yazının tümünün büyük harf olmasını ve capitalize Yazının istenilen şekilde kalmasını sağlar.

    text-decoration : Alacağı değerler; underline yazının altının çizili, overline üstünün çizili, line-through tam üzerinin çizili ve none ise yazının çizgisiz olmasını sağlar.

    text-align : Alacağı değerler; left yazının solda, right sağda, center ortada , line-height yazının belirttiğiniz değerde punto cinsinden normal satırdan çizgi yüksekliğini ve text-ident : Yazının soldan ne kadar boşlukla içeriden başlayacağını punto cinsinden belirtir.

    background-color : Arka plan rengini belirtir.

    background-image : Arka plana bir resim dosyası koymanıza yarar. Kullanılışı background-image: url(resim.gif)

    background-position : Alacağı değerler; left Arka fondaki resmin sadece sol tarafta olmasını, center resmin sadece ortada olmasını ve right resmin sadece sağ tarafta olmasını sağlar.

    background-repeat : Arka plana resmin tekrarlanması istendiğinde kullanılır. Alacağı değerler, repeat Tüm yönlerde tekrar edilmesini, repeat-x : X (yatay) yönünde tekrar edilmesini, repeat-y : Y (dikey) yönünde tekrar edilmesini ve no-repeat : Resmin tekrar edilmeyerek bir kere gösterilmesini sağlar.