Anasayfa

Html & Css

HTML ve CSS'e giriş. İlk Html Css çalışması
Facebookta Paylaş

HTML ve CSS'e giriş. İlk Html Css çalışması

Bu dersimizde HTML ve CSS nasıl kullanılır, nasıl başlanır ve nasıl yazılır onu göreceğiz. 

Class ve ID Tanımlama

.classadi {width:150px; height:75px;}   // şeklinde nokta ile başlayıp bir isim belirledikten sonra süslü parantez '{ }' arasına özellikleri yazarak classı tanımlamış oluruz. Classlar sayfa içinde tekrar eden stillerde kullanılır.
<div class="classadi">Alan içeriğimiz</div>   şeklinde html içerisinde tanımlanır. Bu şekilde tanımladığımızda 150 px genişliğinde 75px yüksekliğinde bir div tanımlamış olduk ve sayfanın başka alanlarında tekrar 150 px genişliğinde 75 px yüksekliğinde bir alana ihtiyacımız olduğunda aynı şekilde tanımlama yaparak tekrar tekrar style tanımlamadan işlemi tamamlamış oluruz.

#classadi {width:150px; height:75px;}   // şeklinde diez '#' ile başlayıp bir isim belirledikten sonra süslü parantez '{ }' arasına özellikleri yazarak idyi tanımlamış oluruz. IDler sayfa içinde tekrar etmeyen özel olarak belirlenen stillerde kullanılır.
<div id="classadi">Alan içeriğimiz</div>   şeklinde html içerisinde tanımlanır. Bu şekilde tanımladığımızda 150 px genişliğinde 75px yüksekliğinde bir div tanımlamış olduk. ID olarak tanımladığımız stili başka alanlarda kullanmayacağımızda yada genel bir alan belirmemiz gerektiğinde kullanırız.

<head> </head> Tagları Arasında Tanımlama

Html sayfamızda <head> </head> tagları arasına bir style tanımlayıp burada css kodlarımızı yazarak html dosyamıza şekil verebiliriz. Örnek üzerinden gidecek olursak;

<html>

<head>
<style type="text/css">
.kutu {width:150px; height:75px; background:red;color:white;}
</style>
</head>
 
<body>
<div class="kutu"> Hüseyin ULUSOY </div>
</body>

 
</html>

Yukarıdaki kodu yazdığınızda aşağıdaki gibi bir çıktı alırsanız doğru yapmışsınız demektir.

Hüseyin ULUSOY

Style içine css özellikleri yazarak

<html>

<head>
</head>
 
<body>
<div style="
width:150px; height:75px; background:blue;color:yellow;"> Hüseyin ULUSOY </div>
</body>

 
</html>

Bu şekilde style kısmına özellikleri belirterek de stil tanımlamış olursunuz. Yukarıdaki kodu yazdığınızda aşağıdaki gibi bir çıktı alırsanız işlemiz doğru olmuştur.

Hüseyin ULUSOY


Css Dosyası oluşturarak , stilleri dosyadan çağırma

Notepad, dreamweaver gibi editörler yardımıyla .css uzantılı bir dosya oluşturup , daha önce sayfa içinde tanımladığımız classları bu dosya içinde tanımlayarak stilleri kullanabiliriz.
Öncelikle .css uzantılı, adını da ornek vererek ornek.css dosyamızı oluşturuyoruz. ornek.css dosyamızı bir metin editörü ile düzenleyi seçerek içerisine aşağıdaki kodları yazarak kaydedelim.
 

 .yenikutu {width:90px; height:90px; background:green; color:white; }                         

CSS dosyamıza yukarıdaki kodu yazıp kaydettikten sonra aşağıdaki gibi "<link rel="stylesheet" type="text/css" href="/ornek.css" />" kodu ile css dosyamızın yolunu belirterek classımızı kullanabiliyoruz.
href kısmında css dosyamızın yolunu doğru yazdığınızdan emin olun, verilen örnekte html dosyası ile ornek.css dosyası aynı dizinde yer almaktadır.
 
<html>

<head>

<link rel="stylesheet" type="text/css" href="/ornek.css" />
</head>
 
<body>
<div class="yenikutu"> Hüseyin ULUSOY </div>
</body>

 
</html>

Bu adımları da uyguladıktan sonra aşağıdaki çıktıyı elde ediyorsanız doğru bir şekilde tamamlamışsınız demektir.

Hüseyin ULUSOY


Hangi Yöntem Kullanılmalı

Belirtilen tüm yöntemler ile istediğiniz stilleri oluşturabilirsiniz. Fakat CSS Dosyası oluşturup cssleri bir dosyadan çağırmak, hem yazım kolaylığı sağlayacak, düzenleme işlemlerinde işinizi kolaylaştıracak ve bir düzen sağlayacaktır. Arama motorları açısından da bir css dosyasından çalışmanız daha yararlı olacaktır. Oluşturduğunuz css dosyasına farklı stiller tanımlayıp daha sonra istediğiniz kadar html sayfasında bu stilleri kullanabilirsiniz. 


Bu konuda cssin width, height, background ve color özelliklerine de değinmiş olduk. İlerleyen konularda cssin diğer özelliklerine değiniyor olacağım.   

28 Eylül 2013 16:33 Kategori :Html & Css6674
Sitene Ekle :
Yukarıdaki kodu sitenize ekleyerek bu konuyu sitenizde yayınlayabilirsiniz.