Html serimizin son dersinde; kaynak (CSS, JavaScript) dahil etme, özellik (attribute) atama gibi konulara değineceğiz, JS ile ilgili detaylı bilgi için ileriki dersleri takip ediniz.

CSS nedir, nasıl kullanılır?

CSS sayfa içinde tarayıcının varsayılan olarak bize sunduğu elementlere tasarım katmak için oluşturulmuş bir dildir. Doğrudan HTML içerisinde style taglari arasında yazılabildiği gibi bir CSS uzantılı dosyadan da sayfaya dahil edilebilir. Renk, boyut, arkaplan görseli, şeffaflık, konum, kalınlık, duruma göre farklı özellik, tarayıcı genişliğine göre farklı özellik atama (responsive, mobil uyum) gibi bir çok imkan sağlamaktadır. CSS içerisinde var olan elementlerin üstüne yazabileceğiniz gibi kendinize ait class ve id tanımlaması da yapabilirsiniz.

                

                p { /* p tagi */
    color: black;
    font-size:15px;
}

.kutu{ /* kutu classı */
    width:200px;
    height:200px;
    background-color:green;
}

#main{ /* main id */
    width: 100% !important;
    text-align: center;
}
            

Yukarıda tanımladığımız css özelliklerini HTML içerisinde uygulamak için class ve id özelliklerini kullanırız.

şeklinde id ve class ataması yapılır. Böylece #main içerisinde bulunan özellikler ve .class içerisinde bulunan özellikler bu divlere kazandırılmış olunur. id ve class aslında aynı işlevi görüyor gibi sanılabilir fakat aralarında bir önemli fark var; id html içerisinde sadece bir elemente atanabilirken class istenilen her elemente atanabilir hatta bir elemente birden fazla class atanabilir. Çünkü id ayırt edici bir özelliktir. Bu fark JS (JavaScript) içerisinde daha çok önemlidir.

JS (JavaScript) nedir, nasıl kullanılır?

JS, web sayfalarında HTML ve CSS ile yapamadığımız hareketlendirme, sayfa içinde dinamik işlem yapma, sayfalar arası bilgi alışverişi gibi işlere yarayan bir dildir. JavaScript 2015 yılında çıkan Node.js sayesinde php, java, python gibi backend olarak da olarak çalışabilmektedir. React Native gibi frameworkler sayesinde mobil uygulama yazılabilir, electron gibi frameworkler ile masaüstü uygulama yapılabilmektedir. Fakat bu yazıda bir web sayfasında yapılabilecekleri örneklendireceğiz.

Günlük olarak girdiğimiz sayfalarda butonlara tıkladığımızda sayfa içerisinde işlemler yapıldığını görebilirsiniz. Örneğin bir chat uygulamasında enter tuşuna bastığınızda sunucuya JS ile bir form gönderilir ve size bir mesaj geldiği zaman yine JS bunu dinler ve size gelen mesajı, chat ekranına ekler. Eğer bir sayfada JS olmazsa bu işlem sayfa yenileme işlemi olmadan mümkün olmazdı. Ve size bir mesaj gelip gelmediğini kontrol etmek için sürekli sayfayı yenilemek zorunda kalacaktınız.

                

                <script>
    document.getElementById("metin").innerHTML="Merhaba";
</script>
            

Yukarıdaki kod id özelliği metin olan elementin içeriğini "Merhaba" olarak güncellemektedir.

Dahil etme ve doğrudan sayfa içinde kullanma

CSS ve JS kodlarını doğrudan sayfa içinde kullanmak istiyorsanız style ve script tagleri arasına kodunuzu yerleştirmeniz gerekmektedir.

<script>

js kodlarınız buraya gelecek

</script>

<style>

css kodlarınız buraya gelecek

</style>

Ama bu kullanım sayfayı yavaşlatmaktadır bu yüzden kullanmak istediğiniz kodları ilgili dosyaya kaydedip sayfanıza adresini dahil etmeniz gerekmektedir.