Formlar herkesin hayatının bir parçası aslında. Çünkü interneti artık herkes kullanıyor. Tabi kullanırken sitelere yorum yapıp, üye oluyoruz. Bunlar içinde form etiketleri kullanılıyor.  Hem kullanıcı hemde tasarımcı için olmazsa olmaz bir araçtır. O yüzden burda dilimin döndüğünce form etiketlerini anlatmaya çalışacağım. Daha sonrada form hazırlayan çevirimiçi bir kaç siteden bahsedeceğim.
Hazır formlar çok kullanılıyor artık, ama bu formları kendi ihtiyacınıza göre düzenlemek içinde bu anlatacağım etiketleri bilmeniz gerekiyor. Evet başlayalım;

Form Etiketleri

Formlar set halindedir. Yani bir bilgisayar kasasının içindeki elemanlar gibi. Eğer elemanı kasanın içene yerleştirmezseniz çalışmaz. Aynen bunun gibi form etiketlerini işeren bir kasa vardır. Tüm form etiketlerini;
<form></form>
yapısı içine yerleştiririz. Böylece hepsi birbiriyle ilişkili olacaktır.

Biraz bilgi vermeye devam edelim. Formu gönderdiğinizde formdaki herbir bilgi tanımlanmış bir değişkene yazdırılır. Yani isminizi yazdığınızda , isminiz gidecek dosyada bir değişkene yazdırılır. Daha sonra ordan istenilen yere yollanır yada çıktı verilir. Bilgilerin doğru değişkene gitmesi için name=”" parametresi kullanılır. Her etikette olmak zorundadır.
Bir form oluşturulurken, bilgilerin gideceği dosya ve gönderilme metodu belirtilmelidir.

action=”Dosya ismi” Burada formdan gidecek bilgilerin değerlendirildiği dosya adının uzantısı yazılır.
method=”get/post” Buradada form gönderilme metodu belirlenir. Get yada Post kullanırsınız. Güvenlik açısından en çok post kullanılır.
Bu iki yöntemin çeşitli farklılıkları vardır. Fakat en belirgin ve temel farkları ise GET metoduyla gönderilen veriler ilgili betik sayfasında tarayıcının adres çubuğunda belirtilirken POST yöntemiyle gönderilen veriler belirtilmezler. POST yöntemi bu özelliğiyle daha gizli bir yöntemdir ve şifre verilerini göndermede kullanılan yöntemdir diyebiliriz. Ayrıca eğer çok uzun bir metni gönderiyorsak tarayıcının adres çubuğunda gereksiz yer kaplaması hem hız hem de görünüm bakımından hoş değildir.  Bu yüzden POST kullanmanızı tavsiye ederim. YAZININ TAMAMINA BAK »

Evet yazımıza devam ediyoruz. Önceki yazıda bir elemanın nasıl kutu ürettiğini ve kutuların kendi arasında nasıl davrandığını gördük. Şimdiki konu css için oldukça önemli bir konudur.  çünkü kutuların kendi aralarında nasıl dizildiğini hangisinin öncelik kazanacağını bu konumuzda öğreneceğiz.
FLOAT: float özelliği kutuların kendi aralarındaki konumlamasını belirler.
genel değerleri;
left | right | none | inherit tir.
Örneğin bir paragrafımız olsun ve paragrafımızın içince bir resim olsun. Bu resim paragrafımızın içinde yüzer. O yüzden float a tanım olarak yüzen kutu konumlandırma özelliği denir.Resmimiz paragrafın içinde yüzerken onu nasıl konumlandıracağımıza bakalım.
örnek bir kod yazalım ve görelim; YAZININ TAMAMINA BAK »

CSS i anlamak ve ona hakim olmak için bilinmesi gereken bir konudur. Tablosuz bir web tasarımı, daha temiz kod, daha az sorun  ve daha kullanışlı bir web sitesi demektir. Bunu anlamak içinde çerçeve modelini bilmemiz gerekir. Her eleman aksi belirtilmediği sürece (display:none) bir çerçeve üretir.
Örneğin <p> elemanı aşağıdaki şekilde çerçeve üretir. Ve bu çerçeve modeline istersek müdahale edebiliriz.

Örnekte görüldüğü gibi bir eleman belirtilen değerlere göre bir çerçeve üretir. İşte bu çerçevenin bir içerikte yüzdürülmesi, konumlandırılması veya çerçeve türünü belirliyen nitelikler vardır.Onlara değinecez ama önce çerçevenin oyutları hakkında bilgi verelim.
Çerçevenin boyutlarını şunlar belirler;
width:Çerçevenin genişliği bu nitelik ile tanımlanır.. Eğer niteliğin değeri auto ise kullanıcı arayüzü bu genişliği kendisi belirler.
height:Çerçevenin yüksekliği bu nitelik ile tanımlanır. Eğer niteliğin değeri auto ise taşıyıcı bloğun yüksekliği belgenin içeriğine uygun olarak büyüyecektir.

Bir elemanın bu şekilde çerçeve (blok) üretmesinin nedeni display niteliğidir. Yani blok seviyesinde olmayan bir elemanı blok seviyesine getirmek için veya tam zıtdı olarak blok seviyesinden bir elemanın seviyesinin indirgemek için kullanılır.Örnek verecek olursak; YAZININ TAMAMINA BAK »

Önceki yazıda birazda olsa css in bir html elemanına nasıl baktığını gördük. Şimdide bu bakışın tanımlamalarını yazarak örneklendirelim.

PADDİNG (kenar içi boşluk): Genel olarak şu tanımlamaları alır.

• Üst kenar içi boslugu(padding-top)
• Sag kenar içi boslugu (padding-right)
• Alt kenar içi boslugu (padding-bottom)
• Sol kenar içi boslugu (padding-left)
• Kenar içi boslugu (padding)

sadece padding {2em;} diye tanımlanırsa tüm özellikleri aynı anda 2 em olarak kullanır.

veya kısa olarak

padding{2em 4em 3em 1em;} diye tanımlanarak 4 özellik atanmış olur. Aslında tüm tanımlamalar için genel özelik ataması şu şekilde işler.

Eğer tek bir değer belirtilmişse, bu değer tüm kenarlara uygulanır.
İki değer belirtilmişse, ilk değer alt ve üst kenarların, ikinci değer ise sol ve sağ
kenarların iç boşluk genişlikleri olarak ele alınır.
Üç değer belirtilmişse,
birinci üst kenarın, ikinci sol ve sağ kenarın, üçüncü ise alt kenarıniç boşluk genişliği
için belirtilmiş sayılır.
Eğer dört değer belirtilmişse bunlar sırayla üst, sağ, alt ve sol kenar iç boşluk
genişlikleri olarak ele alınır.

Bunu tüm tanımlamalar için düşünebiliriz.

padding ve margin de tüm uzunluk değerlerini kullanabiliriz. (px,in,em,ex..)

MARGİN(kenardışı boşluğu). aynen padding teki gibi değerler alır. aşağıdaki bir örnekteki gibi.

  margin-top: 1em;

  margin-right: 2em;

  margin-bottom: 3em;

  margin-left: 2em;

BORDER(kenar çizgisi): YAZININ TAMAMINA BAK »
				

                

                    

						Henüz Konuşma Yok                    
                    

                    	                       
                    
                
			

CSS html elemanlarına(<p>,<h1>…) bakarken onları bir kutu içindeymiş gibi algılar.Yani bir paragrafımız olsun; css le paragrafa müdahale ederken, css paragrafa bir kenar çizgisi ekler (bu değer ‘0′ sa görünmez) yani border. border ile paragraf arasındaki alan kenar içi boşluğudur (padding).padding uzunluk değeri aldıkça boşluk büyür. Diğer bir boşluk border ile yani çerçeve ile diğer nesneler arasındaki boşluktur.Yani kenardışı boşluk (margin). Margin bir paragraf içindeki bir resmin , paragrafa yakınlık uzaklık değerini tanımlar.Biraz karışık bir durum gibi görülüyor ama aşağıdaki resme bakarak daha iyi anlayabiliriz.

Kenar iç boşluk alanının yüzey rengi veya resmi background niteliği ile belirtilir.
background{color:red;} gibi.

Bir örnekle daha iyi açıklayalım.

      li.cizgili {          /* LI için kenar çizgileri */
        border-style: dashed;  /* Kesik çizgili */
        border-width: medium;  /* Orta kalınlıkta */
        border-color: lime;    /* Açık yeşil renkte */
        background:#bb55cc;    /*mor renkte kenar içi boşluk*/
      }

Bu paragraf orta kalınlıkta kesik çigili ve yeşil renkte
border içerir.


Bu kodun görüntüsü şu şekildedir;
 
Genel olarak tanım bu şekildedir. yani kenar içi boşluk(padding),
kenar çizgisi(border) ve
kenar dışı boşluk(margin). Bu üç özelliğin tanımlamaları farklı farklıdır.
Örneğin border için;
kenar çizgisi tipi border-style, kenar çizgisi genişliği border-width ,
kenar çizgisi rengi border-color tanımlanabilir.
 Bu tanımlamarıda diğer yazımda vermek istiyorum.

css in bize sunduğu sonsuz nimetlerden biriside HTML veya XHTML deki <a/> elemanına
kendimizce uygun gördüğümüz renkleri ve özellikleri atayabilmemizdir.aslında biz bu
tanımlamaları yapmasakta tarayıcı varsayılan değerleri kullanır ve renklendirir.
ama bir web sayfası tasarım istediğinden bize yeterli olmaz.aşağıda verilen
örnekte bu uygulanmıştır.

Genel işleyişini anlatırsak bu iş sözde sınıflarla ve elemanlarla gerçekleşir.
Sözde sınıf; bir elemanı farklı sınıflara böler.(örn: link elemanını
active, visited vd. sınıflarına böler).
:visited bir sözde sınıf tanımlamasıdır. ':' sözde sınıflandırma işaretidir. visited
sözde sınıf seçicisidir.kullanımı aşağıdaki gibidir. isterseniz css tanımlamalarıyla
daha çok tanım yapabilirsiniz.Örneğin a:hover tanımlamasını kullanarak mouse
linkin üzerine
geldiğinde yazı tipini,boyutunu,rengini,yapısını ayarlayabilirsiniz.

a:link    { color: red }    /* ziyaret edilmemiş bağlantı */

a:visited { color: blue }   /* ziyaret edilmiş bağlantı   */

a:hover   { color: yellow } /* kullanıcı rastlarsa dikkatini çekmek için */

a:active  { color: lime }   /* etkin bağlantılar */

Bu tanımlamaları tek bir eleman için kullanmak isterseniz.ID yada sınıf seçiciside
kullanabilirsiniz
#deneme td.ilk:hover {background-color: #fff; } gibi.

css te renkler tanımlanırken ya bir anahtar sözcük yada sayısal olarak RGB(red-green-blue) tanımlanır.

anahtar tanımlama örnek verecek olursak;

body {color: black; background: white }

h1 { color: maroon }

h2 { color: olive }

verilebilir.

css te renklerin anahtar sözcükleri: black, YAZININ TAMAMINA BAK »