Baya bir süre (4 Ocaktan beri) hiç yeni yazımı ekleyemedim. Bunun için beni takip eden arkadaşlardan özür dilerim. İşlerimin ve sınavlarımın yoğunluğundan dolayı böyle bir eksiklik oldu. Fakat önümdeki plan şu şekilde.
Yazımına Devam Edilenler

• Bölüm 5.3 Font Özellikleri
• Bölüm 5.4 Tablo Özellikleri (Border v.s)
• Bölüm 6 Boşluklar- Padding - Margin
• Bölüm 7 Listeleme Seçenekleri - ul li
• Bölüm 8 - Boyutlar
• Bölüm 9 - Pozisyonlar ve Değerler
• Bölüm 10 - Tekil Tanımlamalar

Yeni Yazı Dizileri

• HTML (10 Bölüm)
• XML (5 Bölüm)
• Fotoğraf Düzenleme, Manipule, Montaj (15 Bölüm)
• Wordpress (5 Bölüm - kurulum -> tema tasarımı)

(Ayrıca bana yorum da bulunup küfür eden arkadaşlarada selamlar :). Beni tanımadıkları için klavye kovboyluğu yapıyorlar. Yazık. )

Çok eski dostlarımdan Can Hanhan kişisel sayfasında ASP hakkında çok güzel yazılar yayınlamış. Mutlaka okunması gerektiğini düşünüyorum. Gerçekten bu yazılar sayesinde kendinizi dahada geliştirebileceğinize inanıyorum.

ASP ile Veritabanı - 1
ASP ile Veritabanı - 2 
ASP ile Veritabanı - 3 
ASP ile Veritabanı - 4
ASP ile Veritabanı - 5 
ASP ile Veritabanı - 6 
ASP ile Veritabanı - 7
ASP’ye Yeni Başlayanlara 
ASP Rehberi

Background değeri ile stil tanımlayacağımız objelerin arka planlarında değişiklikler yapabiliriz. Background değeri stil için 2 şekilde tanımlanabilir. 

Birincisi tüm özellikleri tek bir değerde toplayarak background özelliğini kullanma. Sık olarak benim tercih ettiğimiz özellik budur. 

İkinici özellik ise her değeri ayrı ayrı tanımlamaktır. Bu da oldukça yaygın bir yöntemdir. 

body {             background:#FF6600 url(../img/arkaplan.jpg) fixed top left;} 

body {            Background-color:#FF6600;Background-image:url(../img/arkaplan.jpg);Background-attachment:fixed;Background-position:top left;            }Body etiketinin alabileceği tüm değerler ve özellikler aşağıdaki tabloda belirtilmiştir. 

Yazılar üzerinde neredeyse en çok oynama yapacağımız, en çok değere sahip olan ve neredeyse sayfamızın en önemli kısmıdır. Yazıların renk ve yazı tipi uyumluluğunun yanında tipografik olarakda sayfadaki önemi çok büyüktür.  

Tipografik olarak yazınızı hazırlamanızın size en büyük katkısı yazıların okunabilirliğini arttırarak ziyaretçilerinize kolaylık sağlamak ve görsel olarak birbirine karışmış yazılardan ziyada göze hoş gözüken tasarımınızı uzgun yazılar hazırlamaktır. 

Yazılarımıza verebileceğimiz değerler ve özellikleri aşağıdaki tabloda ne işe yaradıkları ile beraber verilmiştir. 

Yukarıdaki bilgileri iyice inceleyip kendi örnekleriniz ile denemelerinizi yaptıysanız eğer artık stil vereceğimiz html objelerine hangi değerleri ve özellikleri verebileceğimizi öğrenmenin zamanı gelmiş demektir.  

Hazırlayacağınız sayfanın tüm özelliklerini, yerini kısacası grafik ve animasyon dışındaki tüm görünümünü tamami ile bundan sonra öğreneceğiniz değer ve özellikler ile yapacaksınız. Bu yüzden şimdiki kısım çok önemli. 

Etiket ve özellikleri bilmeden önce öğrenilmesi gereken temel bilgiler vardır.
Örnek vermek gerekirse boyut belirtirken bir çok kişi sadece pixel değer kullanır fakat istenildiği takdirde yerine göre boyutlar yüzde değeri olarak veya em değeri olarakda verilebilir. 

Renk tanımlamaları yaparken sabit ve İNGİLİZCE olarak da tanımlama yapabilirken (red, green, gray v.b) renk kodları (#FF6600, #F0F0F0 v.b) ilede tanımlama yapabilirsiniz. 

Belirteceğiniz özelliği kullanmayacaksanız eğer o değeri boş bırakmaktansa hiç yazmamak veya sıfırlamak (yani özelliğin değerini sıfır belirtmek) w3c standartları açısından ve tarayıcı farklılıkları açısından önemlidir.

CSS dosyanızı hazırlarken unutmamanız gereken birkaç tane önemli nokta vardır. Bu noktalara dikkat emeyip bir çok kez sinir krizleri geçirebilir hatanızı düzelttiğiniz zaman ise bu hataya nasıl düştüğünüz konusunda kendinize kızabilirsiniz. 

CSS tanımlamaları kesinlikle SAYI ile başlayamaz. Class değeri ve ID değeri içinde bu geçerlidir. Bu özellik  internet explorer için önemsizken günümüzün yaygın tarayıcısı firefox için önem arzetmektedir.Örnek vermek gerekirse ; 

.Haber { text-align:left; position:absolute; z-index:5;  } 

Yukarıdaki Haber tanımlamamız için yazdığımız kod doğru iken 

.1Haber { text-align:left; position:absolute; z-index:5; } 

Tanımlaması doğru olduğu halde internet explorerda çalışacak fakat firefoxda çalışmayacaktır. Kodlarınızın doğruluğu ve w3c standartları açısından birinci örneğimiz şeklinde kodlarınızı yazmanız doğru olacaktır. 

Bölüm 2 de belirttiğimiz bir özellik vardı. Class ve id değerlerinin dışında komple sayfayı etkileyecek taglara da stil tanımlayabiliyorduk. Hatırlatmak gerekirse bunlardan bazıları; h1, h2, h3, span, body, html, input… 

Bu taglardan bazıları kendi içerisinde özelliklere ayrılı ve bunlarında bir anda aynı stile sahip olmalarını isteyebilirsiniz. Bunun en güzel örneği form verileri için kullandığımız input tagıdır. 

Input tagı type=”” değeri ile radio buton, checkbox, textbox, buton v.b değerler alarak şekillenir. Normalde bir etiketi komple etkilemesi için CSS kodumuzu 

input { background:#ff6600;  } 

şeklinde yazıyorduk. Peki input tagına bağlı olan tüm textboxlara tek bir stil tanımlamak istersek ne gibi bir yol izlememiz gerekiyor? 

input[type=”text”]  { background:#ff6600; } 

Yukarıda belirttiğimiz kodda dikkatinizi çekmesi gereken 2 bölüm var. Birincisi sabit tagımızı belirttik. İnput olarak tanımlamamızı yaptık. Ardından köşeli parantez ile html kodlarımız içerisinde type=”” ile belirttiğimiz form değerimizi yani text, checkbox v.b değerimizi belirtiyoruz. Ve kodumuzun devamında normal cssimizi yazmaya devam ediyoruz. 

Peki madem CSS dosyamızı hazırladık. Artık CSS ile stillerimizi oluşturmaya hazırız. Peki hangi objeye hangi özelliği hangi değeri vermemiz gerekiyor. Bu kısmı dikkatli takip etmeniz gerekiyor. Çünkü CSS’in en can alıcı noktası bu kısım. 

Öncelikle belirtmekte fayda var. CSS ile HTML sayfanız içerisinde her dosyaya müdahale edebiliriz. Bir imaj’dan tabloya kadar heyşere müdahale etme şansımız bulunuyor. Bu demektirki sayfa içerisindeki tüm objelerimizi CSS ile şekillendirebiliriz. Yani bir resime kenarlar vereceğimiz zaman bunu resimden değilde css den vererek hem işimizi hızlandırabilir hemde renk değişikliği yapacağımız zaman bir grafik editörüne ihtiyaç duymayız. Artık bu kısma giriş yapıp öğrenme vaktimiz geldi. 

Başlangıç olarak CSS i nasıl yazabileceğimizi yani CSS’in SYNTAX’ını öğrenmemiz gerekiyor.Syntax : Bir programlama dilinde kodlamanın uyması gereken kurallar dizisi, yazım şekli 

TAG { özellik:değer;} ilk başta bilmemiz gereken standart cümlemin başında belirttiğim şekilde. Yani hangi tag e stil tanımlaması yapacaksak onu belirtiyoruz. Arından küme parantezimizi açıp vereceğimiz özelliği belirtiyoruz ve ikinokta üst üste kullanarak değerini belirtiyoruz. Çoklu özellikleri birbirinden noktalı virgül ile ayırıyoruz.

Tek ÖzellikBody { background: #333333   } 

Birden Fazla ÖzellikBody { background: #333333; font-size:11px; letter-spacing:1px } 

Gruplama Özelliği
Body, html, p, a { font-size:10px; color: #ff6600  } 

Gruplama özelliği sayesinde tagları birbirinden virgül ile ayırıp aynı özellikleri bir çok kez yazmaktan kurtulabilirsiniz. 

Css kodunuzu tek satır yazmak zorunda değilsiniz. Örnek vermek gerekirse ; 

Body   {            Text-align:left;            Font-size:11px;            Color:#ff6600            } 

Yukarıdaki kodumuz da sorunsuz çalışacaktır.

Sıfırdan bir HTML dosyası ve CSS dosyası yaratalım. Bu iki dosyayı bir birlerine tanıtalım. Düzenli olması açısından beni yeni bir klasör açıyorum ve projemin adına Arman adını veriyorum. Arman klasörünün altına css, img diye iki tane daha klasör açıyorum. CSS dosyalarımı (bir sayfa içerisinde birden fazla css dosyası kullanabilirsiniz. Fakat aynı özellikleri belirtemezsiniz) CSS klasörüne, imajlarımı img klasöründe saklayacağım.

Ön Hatırlatma, HTML oluşturmak ve temel html bilgisine sahip olmak için Göktuğ (İçöz)’ün hazırladığı Temel HTML adlı dökümanı okuyabilirsiniz.
http://blog.goktug.biz/index.php/19-temel-html.html

Dökümanı okuduğunuzu farzederek devam ediyorum. Yani Temel HTML bilgisine sahip olduğunuzu düşünüyorum.

Boş HTML Sayfamızın kodları şu şekilde;

Hazırlayacağımız CSS dosyasını bu sayfaya tanıtmak için yazmamız gereken kod ise şu şekilde.

<link href=”css/style.css” rel=”stylesheet” type=”text/css” />

Bu kodu <head> </head> taglarımız arasına koyuyoruz ve artık HTML dosyamız ve CSS dosyamızı birbiri ile tanıştırmış oluyoruz.
CSS dosyamızda yapacağımız işlemler artık HTML dosyamızı etkilemeye başlayacaktır.

CSS dosyasını hazırlamak için ekstra programlama ihtiyaç duymamaktayız. Yani CSS dosyanızı herhangi bir metin editörü ile (Notepad, Notepad2, Notepad+, EditPlus) hazırlayabilirsiniz.

Browserınızın CSS dosyasını tanıması için tek yapmanız gereken hazırladığınız CSS dosyasının uzantısının .css olması gerekmektedir. Örnek verecek olursak ; kaydedeceğimiz dosya arman.css şeklinde kaydedilmelidir.

Bir CSS dosyası içerisinde tanımlamalar küme parantezi ile { başlar ve küme parantezi kapatma ile } kapanır. Örnek;

Body { text-align:left; }

Yukarıda örnekte gördüğünüz gibi Body tagı için tanımlayacağımız stilleri küme parantezi içerisine aldık. Küme parantezi içerisinde yapacağımız tanımlamaların sıralamasınıda

ÖZELLİK: (ikinokta üstüste) DEĞER ; (noktalı virgül)

Şeklinde yazabiliyoruz. Yukarıda belirttiğimiz TANIM kısmı vereceğimiz özellik (yazı, renk, arkaplan v.b), DEĞER olarak tanımladığımız yer ise belirttiğimiz özellik için alacağı değerdir. (Renk kodu, arka plana dresi, sağ, sol v.b)

Bir tag için belirteceğimiz özellik birden fazla ise her özelliği belirttikten sonra ; (noktalı virgül) kullanmak zorundasınız. Bu sayede kullanılan tarayıcı o özelliğin bittiğini ve tag için ikinci özelliğin olduğunu anlayıp onuda işleme koyacaktır.

NOT : CSS’in de kendine özgü bir yazım stili bulunmaktadır. Bir çok programlama dilinde olduğu gibi CSS’de bu yazım kurallarına uygun yazılmalıdır. CSS Validation ile ilgili kısımlara ilerde değineceğiz)

Vereceğimiz stil değerleri için bazı ön tanımlamaları bilmek gerekmektedir.
(.), (#) ve ().

. (nokta) tag içinde vereceğimiz stilin CLASS etiketine sahip olduğunu belirtir.
HTML kodlarımız içerisinde <span class=”STYLE”>Merhaba</span> şeklinde class etiketinde yaptığımız STYLE tanımlamasının CSS kodları içerisindeki karşılığı .STYLE şeklindedir. Örnek verecek olursak;

.STYLE { color:#ff6600; letter-spacing:1px; }

# (diyez) tag içinde vereğimiz stilin ID etiketine sahip olduğunu belirtir. HTML kodlarımız içerisinde <span id=”STYLE”>Merhaba</span> şeklinde id etiketine yaptığımız STYLE tanımlamasının CSS kodları içerisindeki karşılığı #STYLE şeklindedir. Örnek verecek olursak

#STYLE { color:#ff6600; letter-spacing:1px; }
Bu noktada unutmamanız gereken bir bölüm var. Bu da id ile class arasındaki farktır. Aynı class etiketini 1’den çok taga tanımlayabilirken , ID etiketini o sayfa içerisinde sadece bir tane taga tanımlayabilirsiniz. Birden fazla tag a id tanımlaması sorunsuz çalışacağı halde ilerde bahsedeceğimiz gibi CSS Validation olayında geçmeyecek ve sayfamız onay alamayacaktır.

Birde nokta veya diyez kullanmadan yapılabilen CSS tanımlamaları mevcuttur. Bunlar direkt tagın adını belirtmek koşulu ile kullanılır ve o sayfa içerisindeki o taga sahip heryeri etkilerler.

Body , a , img, input bunlardan bazılarıdır. Örnek verecek olursak

a { color:#ff6666; text-decoration:none; font-weight:bold; }

Bu kodu kullandığımız zaman hiç bir class veya id vermediğimiz a (bağlantı) taglarının hepsinin rengi kırmızı altı çizgisiz ve kalın olacaklardır.

Tasarım’da Stil Esasları

Bir web sayfası hazırlamaya başlarken ilk aklımıza gelecek şeylerden biri grafikleri ve tabloları şekillendirmeden önce kullanacağınız renkler ve renklerin uyumudur.

Renklerden kastımız her zaman içni kullanılan büyük nesnelerden çok yazılardaki tipografi uyumu, yazıların rengi, bağlantıların rengi ve onların kullanıldığı alanların rengidir.

Bir web sayfasında hiç bir resim, animasyon kullanmasanız dahi başarılı renk ve yazı çalışmaları ile güzel bir sonuç ortaya çıkartabilirsiniz.

Başarılı renk ve yazı uygulamaları için HTML kullanımını çok iyi bilmeniz ve bununda yanında CSS konusunda bilginiz olması gerekmektedir. HTML konusunda Göktuğ İçöz’ün yazdığı ve Web Tasarım’a Giriş seminerinde anlattığı Temel HTML bölümünü okuyabilirsiniz.

CSS Nedir?

CSS (ing) - Cascading Style Sheets
Kısaca CSS’i sayfaya şeklini veren ve düzene sokulmasını sağlayan kodlar yığını olarak algılayabiliriz.

CSS telafuz bakımından şiveye bağlıdır. SiEsEs şeklinde okunduğu gibi (ki genellemede doğrusu budur) CeSeSe veya CiEsEs diye okunduğuda olabilir. Bu tanımlamalar arasında doğrusu SiEsEs şeklinde okunan ve söylenendir.

CSS kodları 3 şekilde kullanılabilir.

Dilenirse temel html sayfası içerisinde
<style></style>
tagları arasında,

Özel html tagları arasında
<table cellspacing=”0” cellpadding=”0” style=”border:1px solid #cccccc;” >

Ya da daha düzenli olması açasından ayrı bir dosyada.
style.css

Anlatacağımız örnek ve uygulamalarda hep ayrı dosyayı baz alacağız.