HTML ve CSS Ne Demek?

HTML & CSS NEDİR?

Web sayfalarının olmazsa olmazı olan HTML (Hyper Text Markup Language), herhangi bir programlama dili olarak tanımlanmamaktadır. Zira HTML kodları ile tek başına çalışmakta olan bir programa asla yazılamaz. Ancak bu dili yorumlama yeteneğine sahip olabilen programlar yardımıyla çalışabilen programlar yazılabilmektedir. Programlama dili olarak algılanmamasının nedeni ise tam anlamıyla budur. HTML dosyalarının aktarabilmesi için HTTP (Hyper Text Transfer Protocol) kullanılmaktadır. Temel anlamda gereği, görüntü, yazı, video gibi çok sayıda farklı verileri ve içerisinde bunları barındıran sayfaları birbirlerine basit bir şekilde bağlamak, bunun yanında söz konusu sayfanın web tarayıcısı yazılımları aracılıyla düzgün bir şekilde görüntülenebilmesi için gerek duyulan kuralları belirlemektir. HTML kodunu web tarayıcı programlar okur, yorumlar ve görsel bir şekle dönüştürür. Haliyle aynı HTML kodunun farklı tarayıcılar içerisinde çok sayıda farklı sonuç vermesi olası bir durumdur.

Bu değişiklikleri, düzeni ve tasarımı sağlayan ve HTML yanında kesinlikle kullanılması gereken CSS kullanılır.

Cascading Style Sheet ( Basamaklı biçim sayfaları ya da Basamaklı stil şablonları, biline kısa adı ile CSS), HTML sistemine ilave olarak format ve metin şekillendirme alanında fazla sayıda olanaklar sunan bir web teknolojisi anlamına gelmektedir. Herhangi bir web sayfası içinde birbiriyle uyumlu yazı ver renk tipi öğelerin her bir sayfa için farklı olarak değil de tek bir noktadan yönetilmesi anlamını taşıyan çeşit kodlama türleridir.  

CSS FAYDALARI

1. Daha kolay ve daha iyi sayfa kontrolü
2. Kolay renk değişim ve yönetimi
3. Etkin bir şekilde kenar boşluğu denetimleri
4. Yazı tipi ve özellikleri, metin şekillendirme ve biçimlendirme yöntemleri belirleme
5. Geçişler gibi görsel efektleri meydana getirebilme
6. Görsel konulardaki kolaylıklar
7. Tek bir alandan sahip olunan bütün siteleri kontrol edebilme imkanı vb.

CSS ile Neler Yapılıyor?

CSS sistemi kullanılarak HTML ile yapacağımız çok sayede şeyi gerçekleştirebiliriz. Bir sayfada yer alan bütün öğeleri ya da belli bir kısım öğeyi boyut, renk, sayfa konumu, arkaplan resmi, sağında ve solunda yer alan boşlukları ve çok sayıda özelliği yönünden CSS sistemi ile tanımlamamız mümkündür. Herhangi bir CSS dosyalı yardımı ile bütün sayfalarınızın stilini meydana getirebileceğiniz için sayfa boyutlarınız küçülür ve yükü bir o kadar da hafifler. Ayrıca CSS sistemi öğrenilmesi en basit dillerden bir tanesidir.

CSS sistemini öğrenmek için gerekli olan bilgilere bakacak olursak;

CSS öğrenebilmek için en çok gerekli olan bilgi temel HTML bilgisidir. HTML bilmeden CSS kodlarını kullanabilmeniz oldukça zor olacaktır. Bu yazımızda anlatmaya çalışacağımız konu CSS olduğu için HTML yöntemini bildiğinizi düşünerek yola çıkıyoruz. HTML yöntemini öğrenmeden CSS’ye başlamanızı kesinlikle tavsiye etmiyoruz.

CSS sistemini öğrenmek için bilmeniz gereken diğer bir şey ise İngilizce’dir. Tabi ki İngilizce’yi çok iyi bir şekilde bilmek değil. Sadece bu CSS kodlarının içinde yer alan kelimeler İngilizce kavramlı kelimelerdir ve bu kelimelerin büyük bir kesiminin ifade ettiği şey Türkçe karşılığı bulunan kelimelerle ilgilidir. Yine de de ezber hafızanıza güveniyorsanız İngilizce bilmenize de gerek kalmaz.

Bir CSS Kuralı Hangi Parçalardan Meydana Gelir?

CSS parçaları 3 parçadan meydana gelmektedir. Her bir CSS kuralı bir tanımlama ve bir bölümleme alanına sahiptir. Tanımlama alanı bir özellik ve bir değerden oluşmaktadır. Yani kısaca ifade etmek gerekirse CSS kuralı şu şekilde meydana getirilir;

seçici {özellik:değer}

Herhangi bir CSS kuralında seçici olan bir HTML öğesinin ası (Örnek verecek olursak; span, a, p, body, div), kimliği ise (id’si) ya da sınıfı (class’ı) kullanılabilmektedir. Bu anlatımda yer verdiğimiz örneklerde seçici olarak HTML öğelerinin isimlerine yer verilmiştir.

Özellik olarak CSS kurallarında ise yalnızca belirli olan maddeleri kullanabiliyoruz (Belirli olarak ifade ettiğimiz yaklaşık olarak 120 tane kadar). Değer bakımından ise her bir özelliğin alabileceği kendine has değerler vardır ve bunları kullanabiliriz.

Örnek verecek olursak; span{font-size:10px; font-color:blue;} ve a{font-size:12pt} verilebilir. Eğer tanımlama bölümünde birden çok özelliğe yer veriliyorsa aralarına noktalı virgül (;) işareti konulur. Yalnızca tek bir değere yer veriliyorsa konumlayabilir fakat değerin sonuna ilave etmenin de herhangi bir sakıncası bulunmamaktadır. Bunun yanında aynı değerleri verebileceğimiz iki ayrı seçiciyi aralarına virgül koyarak tek bir hamlede tanımlayabiliriz;

a, span, p {font-size:12pt; font-color:blue;} gibi…

CSS Kodunu Sayfa İçine Yerleştirme Teknikleri

1. HTML öğesinin içine yerleştirmek;

Burada bir HTML kodumuz yer alsın: örnek olarak bir tane link kodu ilave ederim;

<a href=”Linkimizin Adresi”>Linkimizin Adı</a>

Bu şekilde eklenmiş olan link sayfamızda varsayılan link özelliği ile, yani altı çizili ve mavi renkte olarak görünecektir. HTML içine koyacağımız style tagının iç kısmına ekleyeceğimiz CSS kuralları ile bu linklimize çok farklı özellikler ekleyebiliriz. Örnek verecek olursak kodumuz:

<a href=”Linkimizin Adresi” style=”color:white; background:blue; font:10pt Comic Sans MS;”>Linkimizin Adı</a>
bu şekilde işlenmiş olan herhangi bir kodu style=”” içinde yer alan kuralları linkin özelliğini gösterir.

color:red; -> linkin renginin kırmızı olmasını, background:blue; -> linkinin ise arkaplanının mavi renkte olmasını Comic Sans MS fontuyla ve font:10pt Comic Sans MS; -> Linkin 10pt yazı boyutuyla yazılmasını ifade etmektedir. Bu linkin ise görünümü aşağıdaki örnekte görüldüğü gibi olacaktır.

a, span, p {font-size:12pt; font-color:blue;}

Linkimizin adı ise bu şekilde olan tagları içinde ilave edilmiş olan CSS kuralları yalnızca içine eklendiği HTML nesnesini etkiler.

b)Sayfa İçine Yerleştirmek;

Sayfanızın içine ekleyeceğimiz bazı CSS kuralları ile o sayfada yer alan bütün HTML unsurlarını etkileyebiliriz. Sayfa içine ilave edeceğimiz CSS kuralları genel olarak <head> tagından sonra </style> ve <style> tagları arasında yazılmaktadır. Örnek verecek olursak aşağıda basit olarak hazırlanmış olan bir sayfanın CSS kodlarına yer verdik.

<html>
<head>
<style>
a{color:green;font:15pt;}
p{width:100px; height:25px; background-color:black;}
</style>
</head>
<body>
<p><a href=”http://linkin_adresi”>Linkin Kelimesi</a></p>
</body>
</html>

Görüldüğü gibi bu şekilde çok sayıda CSS kuralını ard arda dizebiliyoruz ve bu şekilde yazmış olduğumuz bir kodun bütün sayfaya etki ettiğini görüyoruz. Yani a{ olarak başlayan kural sayfasındaki linklerin tamamı, p olarak başlayan sayfa ya da kuradaki bütün p HTML taglarını etkilemektedir.

3. Herhangi bir CSS Dosyasından Sayfamıza Çağırmak;

CSS uzantısı, dosyası.css olan dosyaları ifade etmektedir. Amacı çağırılmış olan bütün sayfaların CSS kurallarını taşımasıdır. Sayfa içine yerleştirilmiş olan CSS kodlarında tek farkı yalnızca bir sayfa değil, çağırılmış olduğu tüm sayfalara etki etmesidir. Bir CSS dosyasının içinde yalnızca CSS kuralları yer alır. Örnek verecek olursak;

a{font-color: blue; margin: 5px;}
p{font:12px;}
div{width:100px; height;100%;}
gibi olabilir. CSS dosyası meydana getirmek için içine koyacağımız bütün CSS kurallarını bir not defterine işleyip uzantısını.css olarak şekilde kaydetmemiz yeterli olacaktır.

Şimdi CSS dosyamızı hazırladık. Peki şimdi hazırlamış olduğumuz bu dosyayı nasıl istediğimiz HTML sayfalarına ilave edeceğiz? Onu da HTML sayfamızda yer alan <head> tagından sonra ilave edeceğiz. <link> kodunu kullanarak başaracağız. Bu kod:

<link rel=”stylesheet” type=”text/css” href=”http:// dosyasının yer aldığı - adres/stildosyanızınadı.css”> kodudur. Bu kodu kendinize göre düzenledikten sonra HTML sayfanıza eklediğinizde CSS dosyasında bulunan kurallar sayfanıza etki göstermeye başlayacaktır.