Üye Bilgileri
Nick:MyDeLi
İsim:BeLqi Susmaq GereqiR ßazén !
Web sayfası:
Cinsiyet:Erkek
İmza:BaZeN ANLaTaBiLMeq iCiN Susmaq GereqiR !
Konu sayısı:3
Cevap sayısı:11
Kaç günlük üye10
Son yazdığı Php kodları mesajları
smileyCokmu uzun oLmus (:
Zaman2010-03-16 14:31:15
Php
TskLer (:
Zaman2010-03-16 14:17:27
Php
(: Tamam Css Nedir Dedim Cevap GeLMeyince Kendim Yazdım (:
Zaman2010-03-14 13:25:14
Php
  1. Baslayalım !
    Döngü Ne Demektir?
    Döngüler bazı görevlerin bazı koşullar ile tekrarlanmasını sağlar. Mesela 1'den 100'e kadar ekrana sayılar yazdırmak istiyorsak 100 tane print kullanmayız. for veya while gibi döngülerle bu işlemi yapmamız çok çok daha kolaydır. Kullanım ve çalışma yapısına göre farklı döngüler vardır. Bunlar;

    while Döngüsü
    Bir koşul sağlanana kadar ya da bir koşulun sağlanmamasına kadar (while'a göre False verene kadar.) içeride belirtilen işlemlerin dönülmesini sağlar.
Örneq   while( koşullar ){  // işlemler  print'dünya dönüyor';}
koşullar False olduğu zaman döngü biter. (0 = False)

for döngüsü
Koşullar dışında bir koşulun başlama kriteri ve döngü ilerledikçe yapılacak değişimi de beltirmemizi sağlayan döngüdür.


öRNek  for($i=0;$i<10;$i++)// işlemle print'Şimdiki sayı : ' . $i;}

Döngü dönerken bir sayaç tutulur. Bu sayaç değeri bu örneğe göre $i değişkeninde saklanır. $i=0 sayacımızın başlangıç değerini ifade eder. $i<10 koşulu için sayaç koşulun sağlanmasına kadar dönülecektir. $i++ ise döngü her dönüşünde sayaç değişkeninin nasıl değişeceğini ifade eder. Bu örnekte döngü her döndüğünde $i bir atrırılacaktır.

break
Break bir döngünün bitmesini beklemeden döngüyü terketmektir.
Örnek   for($i=0;$i<10;$i++) {  if($i==5)break;}
Bu kodda döngü 0'dan 9'a kadar sayacaktır. Ancak aradaki kontrolde $i 5'e eşit olduğunda break ile döngü bitecektir.
Continuecontinue ise bir döngüde döngünün bir sonraki adıma geçmesini sağlarız.ÖrneK   for($i=0;$i<100;$i++){  if(($i%3)!=0)continueprint$i}
Bu örnekte ise aradaki kontrolde, $i 3'ün katı değilse yani $i mod3 sıfıra eşit değilse döngünün bir sonraki adımına atlar. Eğer $i 3'ün katı ise devam eder ve $i'yi yazdırır. Böylece 1'den 100'e kadar 3'ün katı olan sayıları yazdırır. (tabi $i 3'den başlayıp atama işlemi $i=$i+3 yapılırsa da aynı iş yapılmış olur.)



Aslında For döngüsünü kavramak en güzel yol olur onu kavrayınca kodlamak sizin icin daha kolay olur.


Tesekkürler..





Zaman2010-03-13 15:10:07
Php Php Döngüler
1 CSS NEDİR?

CSS (Cascading Style Sheets) HTML sayfasına stil eklemek için kullanılırCSS çok kullanışlıdır ve kullanımıda çok kolaydır Fakat şu anda browser savaşları yüzünden hakettiği yere gelemediğinide söylemek istiyorum Henüz CSS 'nin bütün özellikleri iki browser tarafından da (explorer ve netscape popüler oldukları için sadece bu iki browserı ele alıyorum) tam olarak desteklenmemekte veya farklı etkiler yapmaktadır Bunun için burada size CSS'nin kullanımı anlatırken her iki browser tarafından da desteklenen özelliklerini anlatacam
Sakın CSS'nin çok kolay olduğuna aldanmayın Kolay olmasına rağmen müthiş esnektirBu özelliği sayesinde cok güzel sayfa dizaynları yapılabilmektedirHTML ile dizayn edemediğiniz veya çok uzun süren sayfa tasarımlarını CSS kullanarak çok kısa bir sürede ve çok daha kolay bir şekilde dizayn edebilirsiniz Çünkü CSS kullanarak istenirse bir metin,bir html sayfası veya tüm sitenin HTML sayfaları aynı anda değiştirilebilir Aslında CSS bizim ilk okulda kullandığımız ince seffaf kağıtlara benzetebilir Adından da anlaşılacağı gibi bu stil kağıtları bilgisayarın hafızasına üst üstte yığılır ve en üsteki işletilir Bu kağıtlarda bir metnin veya başlığın nasıl olacağı (renginin veya fontunun ne olacağı) veya sayfada nereye yerleştirileceği belirlenebilir CSS kullanarak daha bir çok özelliği değiştirebilirsiniz

2 YAZIM KURALLARI

CSS'nin de diğer dillerde olduğu gibi kendine ait bazı yazım kuralları vardır HTML'de bütün stiller <style></style> etiketleri arasında tanımlanır Stil tanımlarken seçicileri kullanırız Seçicilerinde çeşitleri vardır ilerede göreceğiz Bir seçici tanımlarken, Önce seçicinin adı yazılır (tabiki türüne uygun olarak ilerde göreceğiz) sonra değiştirilmek istenen özellikler ile değerleri köşeli parantez içine alınarak yazılır Seçicilerin isimler bir rakamla başlıyamazlar Fakat ilk harften sonra istenirse rakam kullanılabilir Birde isim seçerken lütfen Türkçe karekter kullanmayın
kucukfont { font-size : small }
| | |__ deger
| |
| |__değiştirilmek istenen özellik
|
|___ seçicinin isimi

Şimdilik bazı terimlerin anlamlarını bilmiyor olabilirsiniz kafanızı fazla takmayın ilerde hepsini anlatacam Bir köşeli parantezin içinde birden çok özellik tanımlanabilir Fakat bu özellikleri aralarına noktalı virgül";" konularak birbirlerinden ayırmanız gerekir


 h1{
font-family :
arial ;
font-size : small }

Bir stil etiketi içinde istediğiniz kadar seçici tanımlayabilir ve bunları HTML sayfasında kullanabilirisiniz şimdilik bu kadar kural yeter gelelim bunları nerede tanımlıyacağınıza ve nasıl kullanacağınıza

3 HTML'YE BAĞLAMA ŞEKİLLERİ
Burada stilleri HTML'ye nasıl ekleyeceğinizi ve eklendiği yere göre HTML üzerinde nasıl etkiler yaptığını anlatacam Stiller HTML'ye üç değişik şekilde eklenebilirler

31 Local Bağlama
Local bağlamayı kullanarak yanlızca HTML'nin içinde kullanılan etiketleri (örneğin H1,A,P) ve sadece olduğu yerde özelliklerini değiştirebiliriz Fakat bunu fazla kullanacağınızı zannetmiyorum Çünkü bu tanımlama sadece tanımlandığı yerde ve bir kere kullanılabilir


<html>
<head><title> SAU WEB GROUP - - - [ CSS ] - - - </title>
</head >
<body >
<h3 > CSS Kullanımına Örnek </h3>
<h3 style= "font-family : arial; color : blue"> CSS Kullanımına Örnek </h3>
</body>
</html> 

CSS Kullanımına Örnek
Burada stil yardımıyla H2 etiketinin bazı özelliklerini değiştirmiş oldukBunlar font renginin mavi olması ve fontun arial olmasıydıYukarıda da görüldüğü gibi iki yazınında aynı etiketi taşımasına rağmen farklı şekillerdedir Sakın unutmayın bu değişiklik sadece birkez geçerli olacaktır Bir daha H2 ekitini kullandığınız zaman etkili olmayacaktır

32 Global Bağlama
Tanımlama HTML'nin <head> </head>başlığı içinde yapılır Daha öncede belirttiğim gibi böylece bir etiketin sadece bir kez özelliklerini tanımlayarak tüm HTML de tekrar tanıtmadan istediğimiz yerde kullanabilirsiniz


<html>
<head>
<title> SAU WEB GROUP - - - [ CSS ] - - - </title>
<style type="text/css">
h3 { font-family : arial; color : blue }
</style>
</head >
<body >
<h3 >WEB Okuluna Hoşgeldiniz < /h3>
</body>
</html>

H3 etiketini bu şekilde değiştirdiğimiz zaman HTML sayfasının neresinde kullanırsanız kullanıın artık o etiketin rengi mavi fontuda arial'dır

33 Link Bağlama
Evet geldik son bağlama şeklimize buda faydaları azımsanmıyacak kadar önemli bir özellik Bu bağlama şeklini kullanarak Bir CSS dosyası dışarıdan HTML sayfasına veya sayfalarına bağlanabiliyor Mesela bütün sitedeki sayfalarda H1 etiketinin renginin kırmızı olmasını istiyorsunuz Bütün sayfalarda mavi olmasını tek tek belirtene kadar bu bağlama şeklini kullanabilirsiniz Daha sonra maviyi beğenmediniz kırmızı olmasınımı istiyorsunuz tek yapmanız gereken CSS dosyasına gidip blue yerine red yazmak Önce tanımlamak istediğimiz butun seçicileri yazıyoruz ve css soyadı ile kaydediyoruz


<style>
baslik1{
font-size : 40px;
font-family : Arial;
color : #284422 }

H4 baslik {
font-family:Arial;
font-weight:bold;
color : #284422 }

P {
font-style : arial;
font-size : 11pt;
color : #284422; }

A {
font-size : 15pt ;
color : #284422 }

A:hover {
font-size :15pt;
color : red }
</style>

Bunları istediğiniz bir düz yazı yazma programı ile hatta notpad ile de yazabilirsiniz Yazdıktan sonra denemecss ismiyle kaydedin Bundan sonra bu dosyayı HTML sayfasına yüklenmesi gerekiyor

<html>
<head>
<title> SAU WEB GROUP - - - [ CSS ] - - - </title>
<link rel="stylesheet nofollow" href="deneme.css">
</head >
<body >
<h4 class="baslık" >WEB Okuluna Hoşgeldiniz < /h4>
<h5 class="baslık1" >WEB Okuluna Hoşgeldiniz < /h5>
<p>CSS ilk başta zor gibi görünsede aslında çok kolaydır</p>
</body>
</html> 
 
Bunuda yaptıkdan sonra artık bu HTML sayfasını çağırdınız zaman sanki CSS dosyası HTML sayfasının içinde tanımlanmış gibi davranacaktır

4 KULLANIM ŞEKİLLERİ

41 HTML Etiketleri İle Kullanım
Stilleri HTML'nin içinde kullanılan tüm etiketlerle birlikte kullanabilirsiniz Hatta <BODY> için bile stil kullanarak özellikler tanımlıyabilirsiniz Yanlız stilleri böyle kullanarak bir etiketi yanlızca bir still tanımlayabilir ve kullanabilirsiniz


<html>
<head>
<title> SAU WEB GROUP - Css</title>
<style type="text/css">
h3 { font-family : arial; color : blue }
</style>
</head >
<body >
<h3 >WEB Okuluna Hoşgeldiniz </h3>
</body>
</html>

Eğer isterseniz aynı anda birden çok etikete aynı stilli atıyabilirsiniz Etiketleri birbirinden ayırmak için aralarına virgül " , " konulur

<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
h3 , h4 , p , a { font-family : arial; color : blue }
</style>
</head >
<body >
<h4 >WEB Okuluna Hoşgeldiniz </h4>
<h3 >CSS kullanımına örnek< /h3>
</body>
</html>

42 Seçiciler İle Kullanımı
Seçiciler yardımı ile bir etikete birden fazla still tanımlayabilir ve kullabilirsiniz İstediğiniz kadar çok secici tanımlayabilirsiniz İstenirse bir still birden fazla etikete aynı anda aktarılabilir

421 Sınıf Seçiciler
Mesala <P> etiketi için bir still tanımladınız fakat HTML sayfanızda kullandığınız her <p> etiketinin aynı olmasını istemiyorsanız o zaman sınıf seçiçiler tam sizin aradığınız birşey Aslında sınıf seçiciler ikiye ayrılıyor hangisini işinize yarıyorsa onu kullanabilirsiniz Birinci tipi sadece HTML etiketine bağımlı tanımlamaktır


<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
h1 mavi { font-family : arial; color : blue }
h1 siyah { font-family : arial; color : black }
</style>
</head >
<body >
<h1 class="mavi" >CSS Kullanımına Örnek </h1>
<h1 class="siyah" >CSS Kullanımına Örnek </h1>
</body>
</html>

Bu birinci tipiydiBurada önce kullanmak istediğiniz etiketi belirtiyorsunuz Sonra stillin adını yazıyorsunuz tabi arasına nokta koymayı unutmayın daha sonra HTML sayfası içinde etiketi hangi stille kullanmak istiyorsan <h1 class="stilin_adi"> o stilin adını yazıyorsun Bu tanımlamada bu özellikleri <H1> etiketi dışında kullanamazsınız Fakat şimdi göstereceğim ikinci tip sınıf seçicide durum birazdaha farklı;

<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
mavi { font-family : arial; color : blue }
siyah { font-family : arial; color : black }
</style>
</head >
<body >
<a class="siyah" >anasayfa</h3>
<h1 class="mavi" >CSS Kullanımına Örnek </h1>
<h3 class="siyah" >CSS Kullanımına Örnek </h3>
</body>
</html>

Görüldüğü gibi burada stilli tanımlarken etiketin ismini koymuyoruz Fakat noktayı koyuyoruz sonra bu stilli istediğimiz biryerde istediğimiz bir etiketle birlikte kullanabiliyoruz

422 ID Seçiciler
Bu seçicilerde stil isminin önüne # işareti konulur ve HTML sayfasının içinde herhangi bir etiketle birlikte (buna DIV,SPAN 'da dahil) adı ile çağrılarak kullanılabilirler Bunları çağırırken class değil id kullanılır


<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
#mavi { font-size : 20pt; font-family : arial; color : blue }
#siyah { font-size : 11pt; font-family : arial; color : black }
</style>
</head >
<body >
<span id="mavi" >CSS Kullanımına Örnek </span>
<span id="siyah" >CSS Kullanımına Örnek </span>
</body>
</html>

43 <A> Etiketi İle Kullanımı
Bu kullanım sadece A etiketi ile kullanılabilir A etiketine ekstra özellikler kazandırırlar Bu özellikler toplam dört tanedir
link : Bu <a> etiketi içindeki link'in nasıl görüleceğini belirler
active :Bu ise link'in üzerine tıklandığı an alacağı şekli belirler
visited :Likin tıklandıktan sonra yani ziyaret edildikten sonraki halini belirler
hover on olarak bu özellik imleç(fare ile) linkin üzerine gelindiği an linkin alacağı hali belirlerBu özellik Netsacapr tarafından tanınmamaktadır


<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
a { font-size : 20pt; font-family : arial; color : blue }
a : link { font-size : 11pt; font-family : arial; color : black }
a : active { font-size : 11pt; font-family : arial; color : red }
a : hover { font-size : 11pt; font-family : arial; color : blue }
a : visited { font-size : 11pt; font-family : arial; color : red }
</style>
</head >
<body >
<a href="#">Anasayfa < /a>
<a href="#">CSS Kullanımına Örnek < /a>
</body>
</html>

İstenirse seçicilerle birliktede kullanılabilirler

<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
a menu {
font-size : 20pt;
font-family : arial; c
olor : blue }

a menu : link {
font-size : 11pt;
font-family : arial;
color : black }

a menu : active {
font-size : 11pt;
font-family : arial;
color : red }

a menu : hover {
font-size : 11pt;
font-family : arial;
color : blue }

a menu : visited {
font-size : 11pt;
font-family : arial;
color : red }
</style>
</head >
<body >

<a class="menu" href="#">Anasayfa < /a>
<a class="menu" href="#">CSS Kullanımına Örnek < /a>
</body>
</html>

5 DENETLENEBİLİR ÖZELLİKLER

Burada size CSS kullanarak denetliyebileceğiniz yani değiştirebileceğiniz özellikleri ve alabileceği değerleri anlatacam Önce size kolaylık olaması için özellikleri tablo içinde veriyorum

FONT ÖZELLİKLERİ TEXT ÖZELLİKLERİ BACKGROUND ÖZELLİKLERİ LIST ÖZELLİKLERİ


FONT-SIZE WORD-SPACING BACKGROUND-COLOR LIST-STYLE-TYPE
FONT-FAMILY LETTER-SPACING BACKGROUND-IMAGE LIST-STYLE-POSITION
FONT-WEIGHT LINE-HEIGHT BACKGROUND-REPEAT LIST-STYLE-IMAGE
FONT-STYLE TEXT-DECORATION BACKGROUND-ATTACHMENT
FONT-VARIANT TEXT-ALING BACKGROUND-POSITION
COLOR TEX-INDENT BACKGROUND
FONT BOX ÖZELLİKLERİ


MARGIN ÖZELLİKLERİ BORDER ÖZELLİKLERİ PADDING ÖZELLİKLERİ
MARGIN-BOTTOM BORDER-BOTTOM PADDING-BOTTOM
MARGIN-TOP BORDER-TOP PADDING-TOP
MARGIN-RIGHT BORDER-RIGHT PADDING-RIGHT
MARGIN-LEFT BORDER-LEFT PADDING-LEFT
BORDER-WIDTH
BORDER-STYLE
BORDER-COLOR

 51 FONT Özellikleri
FONT-SİZE : fontun nekadar büyüklükte olacağını belirler
değerleri : xx-large | x-large | large | medium | small | x-small | xx-small | pt cinsinden değer
ilk değer : medium

FONT-FAMILY : fontun hangi tipite olacağını belirler
değerleri : fontun ismi
ilk değer : kullanıcının seçtiği font

FONT-WEIGHT : fontun kalınlığını belirler
değerleri : normal | bold | ligher | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
ilk değer : normal

FONT-STYLE : fontun stilini belirler
değerleri : normal | italic | oblique
ilk değer : normal

oblique : yazının yatık olmasını sağlar

FONT-VARIANT : Fontun küçük harf boyunda ama büyük harf olmasını sağlar
değerleri : normal | small-cops
ilk değer : normal

FONT : Bu özellik ile yukarıdaki tüm özellikler değiştirilebilir Mesela boyutunu değiştirmek istiyorsunuz ozaman font:12px yazmanız yeterli veya hem fontunu hemde boyunu değiştirmek istiyorsunuz Ozamanda font12px,arial veya font: arial,12px diyebilirsiniz Bunu daha çok bu özellikleri javascript kullanarak değiştirmek istediğimizde kullanacağız Çünkü javascript font-size ifadesini kabul etmiyor

COLOR : Fontun ne renk olacağını belirler
değerleri : ingilizce renklerin isimleri | renk kodları | RGB renk kodu
ilkdeğeri : kullanıcının seçtiği
yazi { font-size : 10pt ; font-family : arial ; font-weight : bold ; font-style : italic ; font-variant : normal ; color : black }
52 TEXT Özellikleri
WORD-SPACING : Kelimelerin arasına konulmak istenen boşluğu ayarlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal

LETTER-SPACING : Harfler arasındaki boşluk miktarını ayarlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal

TEXT-DECORATION : Metni süslemede kullanılır
değerleri : none | underline | overline | line-through | blink
ilkdeğeri : none

underline : yazının altıçizgili olmasını sağlar
overline : yazının üstünün çizgili olmasını sağlar
line-trough : yazının ortasının çizgili olmasını sağlar
blik : yazının yanıp sönmesini sağlar

TEXT-TRANSFORM : Metnin büyük veya küçük harfe çevirmek için kullanılır
değerleri : capitalize | uppercase | lowercase | none
ilkdeğeri : none

capitalize : Yazıyı olduğu gibi bırakır
uppercase : yazıyı büyük arfe çevirir
lowercase : yazıyı küçük harfe çevirir

TEXT-ALING : Metni istenilen biryere bloklamada kullanılıyor
değerleri : left | right | center
ilkdeğeri : left

left : metni sola bloklar
right : metni sağa bloklar
center: metni ortalar

TEXT-INDENT : Yazının istenilen miktarda içierden başlamasını sağlar
değerleri : pt cinsinden değer
ilkdeğeri : 0

LINE-HEIGHT : Metnin satırları arasına istenilen miktarda boşluk bırakmayı sağlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal

metin { word-spacing : 10pt ; letter-spacing : 9pt ; line-height : 8pt ; text-decoration : none ; text-transform : capitalize ; text-aling : left ; text-indent : 5pt }
52 BACKGROUND Özellikleri
BACKGROUND-COLOR : Arka zeminin alacağı zemini belirler
değerleri : ingilizce renklerin isimleri | renk kodları | RGB renk kodu
ilkdeğeri : kullanıcının seçtiği

BACKGROUND-IMAGE : Arka zemine resim yerleştirmeyi sağlar
değerleri : none | url ("dosyanın_ismi")
ilkdeğeri : none

BACKGROUND-REPEAT : Arka zemindeki resmi istenilen miktarda tekrarlar
değerleri : repeat | x-repeat | y-repeat | no-repeat
ilkdeğeri : repeat

repeat : Heryönde tekrar edilmesini sağlar
x-repeat : Sadece x ekseni üzerinde tekrarlar (soldan-sağa)
y-repeat : Sadece y ekseni üzerinde tekrarlar (yukardan-aşağı)
no-repeat : Tekrarlamaz

BACKGROUND-ATTECHMENT : Arka zeminin nasıl davranacağını belirler
değerleri : scroll | fixed
ilkdeğeri : scroll

scroll : Arka zeminin scroll ile birlikte hareket etmesini sağlar
fixed : Arka zeminin sabit kalmasını sağlar

BACKGROUND-POSITION : Arka zeminin yerini belirler
değerleri : left | center | right | top | bottom
ilkdeğeri : 0,0

BACKGROUND : Bu özellik aynı font taki gibidir

BODY { background-color : rgb(252,253,255) ; background-image : url ("zeminjpg") ; background-repeat : no-repeat ; background-attechment : fixed ; background-position : center ; }
54 LIST Özellikleri
LIST-STYLE-TYPE : Listede kullanulacak basamakların nasıl kullanılacağını belirler
değerleri : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |
upper-alpha | none
ilkdeğeri : disc

disc : Her basamak içi dolu dairelerle başlar
circle : Her basamak içi boş dairelerle başlar
square : her basamak kare ile başlar
decimal : Her basamak 1,2,3,4 gibi sayılar alır
lower-roman : Her basamak i,ii,iii gibi küçük roma rakamları alır
upper-roman : Her basamak I,II,III gibi büyük roma rakamları alır
lower-alpha : Her basamak a,b,c gibi küçük harf alır
upper-alpha : Her basamak A,B,C gibi büyük harf alır

LIST-STYLE-POSITION : Listenin ikinci satırınından itbaren başlıyacağı yeri belirler
değerleri : outside | inside
ilkdeğeri : outside

outside : İkinci satır ve diğerlerinin birinci satırın hizasında olması sağlanır
inside : İkinci satır ve diğerlerinin birinci satırdan içerde başlamasını sağlar

LIST-STYLE-IMAGE : Listenin basamaklarına istenilen bir resim konulmasını sağlar
değerleri : none | url ("dosyanın_ismi")
ilkdeğeri : none

list { list-style-type : lower-alpha ; list-style-position : inside ; list-style-image : none ; }

55 BOX Özellikleri
Buaradaki özellikler genel olarak üç gruba ayrılmıştır (margin,box,padding) Burada margin en dışta yeralır Border ise yazının çevresine bir çizgi çizer ve margın'ın içindedir Padding ise yazının sınırlarını belirler ve border ile margin'in içindedir Bunları birde şekil üzerinde gösterim




Mesela web sayfası yazısını sol tarafını çizgiden (border) uzaklaştırmak istiyelim Yani yazı çizgiden birazdaha içerde başlasınOzaman padding-left özelliğini kullanmalıyız

MARGIN-BOTTOM : Margin'in aşagıdan nekadar boşluk bırakacağını belirler
değerleri : px cinsinden değer

MARGIN-TOP : Margin'in yukarıdan nekadar boşluk bırakacağını belirler
değerleri : px cinsinden değer

MARGIN-LEFT : Margin'in soldan nekadar boşluk bırakacağını belirler
değerleri : px cinsinden değer

MARGIN-RIGHT : Margin'in sağdan nekadar boşluk bırakacağını belirler
değerleri : px cinsinden değer

BORDER-STYLE : Border çizgisini değiştirmek için kullanılır
değerleri : none | dotted | dashed | solid | double | groove | ridge | inset | outset
ilkdeğeri : solid

BORDER-WIDTH : Border çizgisinin kalınlığını belirler
değerleri : thin | medium | thick | length
ilkdeğeri : medium

BORDER-BOTTOM : Border'ın alt kısmı ile margin arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

BORDER-TOP : Border'ın üst kısmı ile margin arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

BORDER-LEFT : Border'ın sol kısmı ile margin arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

BORDER-RIGHT : Border'ın sağ kısmı ile margin arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

PADDING-BOTTOM : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

PADDING -TOP : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

PADDING -LEFT : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar
değerleri : px cinsinden değer
PADDING -RIGHT : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

6 DIV İLE KULLANIMI
HTML deki bütün unsurları (metin,table,resim,çerçeve ) bu katmanın(DIV) üstüne koyup sayfada istediğiniz bir yere taşıyabilirsiniz Neler yapabileceğinizi veya istediğiniz bir ögeyi sayfanın istediğiniz yerine sadece kordinatlari değiştirerek koyabildiğinizi bir düşünsenize

POSITION : Katmanın HTML sayfası üzerindeki konumunun nasıl olacağını belirler
ABSOLUTE : Katmanın kendisine verilen üst ve sol kotdinatlara göre kesin olarak yerleştirir ve yeri diğer unsurlardan etkilenmez
RELATIVE : katmanın kendisine verilecek ölçüler kendinden önceki unsurun konumunun bittiği yerden başlar
STATIC : Katmanın kendisine verilen ölçüler HTML sayfasında nereye geliyorsa oraya yerleştirilir
TOP : katmanın üst kısımdan nekadar aşağı olacağı belirler
LEFT : katmanın sol kısımdan nekadar sağda olacağı belirler
HEIGHT : katmanın boyunun uzunluğu belirler
WIDTH : Katmanın eninin uzunluğunu belirler
Z-INDEX : Katmanın HTML sayfası üzerinde hangi katta duracağını belirler
OVERFLOW : Katmanın belirtilen boyutlara sığmaması durumunda ne yapacağını belirler

<div style= " position : absolute ; top : 250px ; left : 200px ; height : 50px ; width : 300px ; z-index : 1 ; background-color:#ff9800">
<center>SAU WEB GROUP</center>
</div>

SAU WEB GROUP
Burada index numarsının önemini biraz anlatmak istiyorum Katmanlar sayfaya index numarasına göre yerleştirilirler Aslında yan yana yerleştirilirken önemli değil ama üst üste yerleştiriliyorlarsa önemliler Mesela iki tane katman olduğunu varsayalım Birincisinin numarası bir diğerinin iki ise ikinci birincinin üzerinde görülecektir

]


<div style= " position : absolute ; top : 250px ; left : 200px ; height : 50px ; width : 300px ; z-index : 1 ; background-color:red">
<center>SAU WEB GROUP</center>
</div>
<div style= " position : absolute ; top : 250px ; left : 200px ; height : 50px ; width : 300px ; z-index : 2 ; background-color:blue">
<center>SAU WEB GROUP</center>
</div> 

Zaman2010-03-13 14:25:10
Php CSS NEDİR ? (Cascading Style Sheets)
1 CSS NEDİR?

CSS (Cascading Style Sheets) HTML sayfasına stil eklemek için kullanılırCSS çok kullanışlıdır ve kullanımıda çok kolaydır Fakat şu anda browser savaşları yüzünden hakettiği yere gelemediğinide söylemek istiyorum Henüz CSS 'nin bütün özellikleri iki browser tarafından da (explorer ve netscape popüler oldukları için sadece bu iki browserı ele alıyorum) tam olarak desteklenmemekte veya farklı etkiler yapmaktadır Bunun için burada size CSS'nin kullanımı anlatırken her iki browser tarafından da desteklenen özelliklerini anlatacam
Sakın CSS'nin çok kolay olduğuna aldanmayın Kolay olmasına rağmen müthiş esnektirBu özelliği sayesinde cok güzel sayfa dizaynları yapılabilmektedirHTML ile dizayn edemediğiniz veya çok uzun süren sayfa tasarımlarını CSS kullanarak çok kısa bir sürede ve çok daha kolay bir şekilde dizayn edebilirsiniz Çünkü CSS kullanarak istenirse bir metin,bir html sayfası veya tüm sitenin HTML sayfaları aynı anda değiştirilebilir Aslında CSS bizim ilk okulda kullandığımız ince seffaf kağıtlara benzetebilir Adından da anlaşılacağı gibi bu stil kağıtları bilgisayarın hafızasına üst üstte yığılır ve en üsteki işletilir Bu kağıtlarda bir metnin veya başlığın nasıl olacağı (renginin veya fontunun ne olacağı) veya sayfada nereye yerleştirileceği belirlenebilir CSS kullanarak daha bir çok özelliği değiştirebilirsiniz

2 YAZIM KURALLARI

CSS'nin de diğer dillerde olduğu gibi kendine ait bazı yazım kuralları vardır HTML'de bütün stiller <style></style> etiketleri arasında tanımlanır Stil tanımlarken seçicileri kullanırız Seçicilerinde çeşitleri vardır ilerede göreceğiz Bir seçici tanımlarken, Önce seçicinin adı yazılır (tabiki türüne uygun olarak ilerde göreceğiz) sonra değiştirilmek istenen özellikler ile değerleri köşeli parantez içine alınarak yazılır Seçicilerin isimler bir rakamla başlıyamazlar Fakat ilk harften sonra istenirse rakam kullanılabilir Birde isim seçerken lütfen Türkçe karekter kullanmayın
kucukfont { font-size : small }
| | |__ deger
| |
| |__değiştirilmek istenen özellik
|
|___ seçicinin isimi

Şimdilik bazı terimlerin anlamlarını bilmiyor olabilirsiniz kafanızı fazla takmayın ilerde hepsini anlatacam Bir köşeli parantezin içinde birden çok özellik tanımlanabilir Fakat bu özellikleri aralarına noktalı virgül";" konularak birbirlerinden ayırmanız gerekir


 h1{
font-family :
arial ;
font-size : small }

Bir stil etiketi içinde istediğiniz kadar seçici tanımlayabilir ve bunları HTML sayfasında kullanabilirisiniz şimdilik bu kadar kural yeter gelelim bunları nerede tanımlıyacağınıza ve nasıl kullanacağınıza

3 HTML'YE BAĞLAMA ŞEKİLLERİ
Burada stilleri HTML'ye nasıl ekleyeceğinizi ve eklendiği yere göre HTML üzerinde nasıl etkiler yaptığını anlatacam Stiller HTML'ye üç değişik şekilde eklenebilirler

31 Local Bağlama
Local bağlamayı kullanarak yanlızca HTML'nin içinde kullanılan etiketleri (örneğin H1,A,P) ve sadece olduğu yerde özelliklerini değiştirebiliriz Fakat bunu fazla kullanacağınızı zannetmiyorum Çünkü bu tanımlama sadece tanımlandığı yerde ve bir kere kullanılabilir


<html>
<head><title> SAU WEB GROUP - - - [ CSS ] - - - </title>
</head >
<body >
<h3 > CSS Kullanımına Örnek </h3>
<h3 style= "font-family : arial; color : blue"> CSS Kullanımına Örnek </h3>
</body>
</html> 

CSS Kullanımına Örnek
Burada stil yardımıyla H2 etiketinin bazı özelliklerini değiştirmiş oldukBunlar font renginin mavi olması ve fontun arial olmasıydıYukarıda da görüldüğü gibi iki yazınında aynı etiketi taşımasına rağmen farklı şekillerdedir Sakın unutmayın bu değişiklik sadece birkez geçerli olacaktır Bir daha H2 ekitini kullandığınız zaman etkili olmayacaktır

32 Global Bağlama
Tanımlama HTML'nin <head> </head>başlığı içinde yapılır Daha öncede belirttiğim gibi böylece bir etiketin sadece bir kez özelliklerini tanımlayarak tüm HTML de tekrar tanıtmadan istediğimiz yerde kullanabilirsiniz


<html>
<head>
<title> SAU WEB GROUP - - - [ CSS ] - - - </title>
<style type="text/css">
h3 { font-family : arial; color : blue }
</style>
</head >
<body >
<h3 >WEB Okuluna Hoşgeldiniz < /h3>
</body>
</html>

H3 etiketini bu şekilde değiştirdiğimiz zaman HTML sayfasının neresinde kullanırsanız kullanıın artık o etiketin rengi mavi fontuda arial'dır

33 Link Bağlama
Evet geldik son bağlama şeklimize buda faydaları azımsanmıyacak kadar önemli bir özellik Bu bağlama şeklini kullanarak Bir CSS dosyası dışarıdan HTML sayfasına veya sayfalarına bağlanabiliyor Mesela bütün sitedeki sayfalarda H1 etiketinin renginin kırmızı olmasını istiyorsunuz Bütün sayfalarda mavi olmasını tek tek belirtene kadar bu bağlama şeklini kullanabilirsiniz Daha sonra maviyi beğenmediniz kırmızı olmasınımı istiyorsunuz tek yapmanız gereken CSS dosyasına gidip blue yerine red yazmak Önce tanımlamak istediğimiz butun seçicileri yazıyoruz ve css soyadı ile kaydediyoruz


<style>
baslik1{
font-size : 40px;
font-family : Arial;
color : #284422 }

H4 baslik {
font-family:Arial;
font-weight:bold;
color : #284422 }

P {
font-style : arial;
font-size : 11pt;
color : #284422; }

A {
font-size : 15pt ;
color : #284422 }

A:hover {
font-size :15pt;
color : red }
</style>

Bunları istediğiniz bir düz yazı yazma programı ile hatta notpad ile de yazabilirsiniz Yazdıktan sonra denemecss ismiyle kaydedin Bundan sonra bu dosyayı HTML sayfasına yüklenmesi gerekiyor

<html>
<head>
<title> SAU WEB GROUP - - - [ CSS ] - - - </title>
<link rel="stylesheet nofollow" href="deneme.css">
</head >
<body >
<h4 class="baslık" >WEB Okuluna Hoşgeldiniz < /h4>
<h5 class="baslık1" >WEB Okuluna Hoşgeldiniz < /h5>
<p>CSS ilk başta zor gibi görünsede aslında çok kolaydır</p>
</body>
</html> 
 
Bunuda yaptıkdan sonra artık bu HTML sayfasını çağırdınız zaman sanki CSS dosyası HTML sayfasının içinde tanımlanmış gibi davranacaktır

4 KULLANIM ŞEKİLLERİ

41 HTML Etiketleri İle Kullanım
Stilleri HTML'nin içinde kullanılan tüm etiketlerle birlikte kullanabilirsiniz Hatta <BODY> için bile stil kullanarak özellikler tanımlıyabilirsiniz Yanlız stilleri böyle kullanarak bir etiketi yanlızca bir still tanımlayabilir ve kullanabilirsiniz


<html>
<head>
<title> SAU WEB GROUP - Css</title>
<style type="text/css">
h3 { font-family : arial; color : blue }
</style>
</head >
<body >
<h3 >WEB Okuluna Hoşgeldiniz </h3>
</body>
</html>

Eğer isterseniz aynı anda birden çok etikete aynı stilli atıyabilirsiniz Etiketleri birbirinden ayırmak için aralarına virgül " , " konulur

<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
h3 , h4 , p , a { font-family : arial; color : blue }
</style>
</head >
<body >
<h4 >WEB Okuluna Hoşgeldiniz </h4>
<h3 >CSS kullanımına örnek< /h3>
</body>
</html>

42 Seçiciler İle Kullanımı
Seçiciler yardımı ile bir etikete birden fazla still tanımlayabilir ve kullabilirsiniz İstediğiniz kadar çok secici tanımlayabilirsiniz İstenirse bir still birden fazla etikete aynı anda aktarılabilir

421 Sınıf Seçiciler
Mesala <P> etiketi için bir still tanımladınız fakat HTML sayfanızda kullandığınız her <p> etiketinin aynı olmasını istemiyorsanız o zaman sınıf seçiçiler tam sizin aradığınız birşey Aslında sınıf seçiciler ikiye ayrılıyor hangisini işinize yarıyorsa onu kullanabilirsiniz Birinci tipi sadece HTML etiketine bağımlı tanımlamaktır


<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
h1 mavi { font-family : arial; color : blue }
h1 siyah { font-family : arial; color : black }
</style>
</head >
<body >
<h1 class="mavi" >CSS Kullanımına Örnek </h1>
<h1 class="siyah" >CSS Kullanımına Örnek </h1>
</body>
</html>

Bu birinci tipiydiBurada önce kullanmak istediğiniz etiketi belirtiyorsunuz Sonra stillin adını yazıyorsunuz tabi arasına nokta koymayı unutmayın daha sonra HTML sayfası içinde etiketi hangi stille kullanmak istiyorsan <h1 class="stilin_adi"> o stilin adını yazıyorsun Bu tanımlamada bu özellikleri <H1> etiketi dışında kullanamazsınız Fakat şimdi göstereceğim ikinci tip sınıf seçicide durum birazdaha farklı;

<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
mavi { font-family : arial; color : blue }
siyah { font-family : arial; color : black }
</style>
</head >
<body >
<a class="siyah" >anasayfa</h3>
<h1 class="mavi" >CSS Kullanımına Örnek </h1>
<h3 class="siyah" >CSS Kullanımına Örnek </h3>
</body>
</html>

Görüldüğü gibi burada stilli tanımlarken etiketin ismini koymuyoruz Fakat noktayı koyuyoruz sonra bu stilli istediğimiz biryerde istediğimiz bir etiketle birlikte kullanabiliyoruz

422 ID Seçiciler
Bu seçicilerde stil isminin önüne # işareti konulur ve HTML sayfasının içinde herhangi bir etiketle birlikte (buna DIV,SPAN 'da dahil) adı ile çağrılarak kullanılabilirler Bunları çağırırken class değil id kullanılır


<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
#mavi { font-size : 20pt; font-family : arial; color : blue }
#siyah { font-size : 11pt; font-family : arial; color : black }
</style>
</head >
<body >
<span id="mavi" >CSS Kullanımına Örnek </span>
<span id="siyah" >CSS Kullanımına Örnek </span>
</body>
</html>

43 <A> Etiketi İle Kullanımı
Bu kullanım sadece A etiketi ile kullanılabilir A etiketine ekstra özellikler kazandırırlar Bu özellikler toplam dört tanedir
link : Bu <a> etiketi içindeki link'in nasıl görüleceğini belirler
active :Bu ise link'in üzerine tıklandığı an alacağı şekli belirler
visited :Likin tıklandıktan sonra yani ziyaret edildikten sonraki halini belirler
hover on olarak bu özellik imleç(fare ile) linkin üzerine gelindiği an linkin alacağı hali belirlerBu özellik Netsacapr tarafından tanınmamaktadır


<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
a { font-size : 20pt; font-family : arial; color : blue }
a : link { font-size : 11pt; font-family : arial; color : black }
a : active { font-size : 11pt; font-family : arial; color : red }
a : hover { font-size : 11pt; font-family : arial; color : blue }
a : visited { font-size : 11pt; font-family : arial; color : red }
</style>
</head >
<body >
<a href="#">Anasayfa < /a>
<a href="#">CSS Kullanımına Örnek < /a>
</body>
</html>

İstenirse seçicilerle birliktede kullanılabilirler

<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
a menu {
font-size : 20pt;
font-family : arial; c
olor : blue }

a menu : link {
font-size : 11pt;
font-family : arial;
color : black }

a menu : active {
font-size : 11pt;
font-family : arial;
color : red }

a menu : hover {
font-size : 11pt;
font-family : arial;
color : blue }

a menu : visited {
font-size : 11pt;
font-family : arial;
color : red }
</style>
</head >
<body >

<a class="menu" href="#">Anasayfa < /a>
<a class="menu" href="#">CSS Kullanımına Örnek < /a>
</body>
</html>

5 DENETLENEBİLİR ÖZELLİKLER

Burada size CSS kullanarak denetliyebileceğiniz yani değiştirebileceğiniz özellikleri ve alabileceği değerleri anlatacam Önce size kolaylık olaması için özellikleri tablo içinde veriyorum

FONT ÖZELLİKLERİ TEXT ÖZELLİKLERİ BACKGROUND ÖZELLİKLERİ LIST ÖZELLİKLERİ


FONT-SIZE WORD-SPACING BACKGROUND-COLOR LIST-STYLE-TYPE
FONT-FAMILY LETTER-SPACING BACKGROUND-IMAGE LIST-STYLE-POSITION
FONT-WEIGHT LINE-HEIGHT BACKGROUND-REPEAT LIST-STYLE-IMAGE
FONT-STYLE TEXT-DECORATION BACKGROUND-ATTACHMENT
FONT-VARIANT TEXT-ALING BACKGROUND-POSITION
COLOR TEX-INDENT BACKGROUND
FONT BOX ÖZELLİKLERİ


MARGIN ÖZELLİKLERİ BORDER ÖZELLİKLERİ PADDING ÖZELLİKLERİ
MARGIN-BOTTOM BORDER-BOTTOM PADDING-BOTTOM
MARGIN-TOP BORDER-TOP PADDING-TOP
MARGIN-RIGHT BORDER-RIGHT PADDING-RIGHT
MARGIN-LEFT BORDER-LEFT PADDING-LEFT
BORDER-WIDTH
BORDER-STYLE
BORDER-COLOR

 51 FONT Özellikleri
FONT-SİZE : fontun nekadar büyüklükte olacağını belirler
değerleri : xx-large | x-large | large | medium | small | x-small | xx-small | pt cinsinden değer
ilk değer : medium

FONT-FAMILY : fontun hangi tipite olacağını belirler
değerleri : fontun ismi
ilk değer : kullanıcının seçtiği font

FONT-WEIGHT : fontun kalınlığını belirler
değerleri : normal | bold | ligher | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
ilk değer : normal

FONT-STYLE : fontun stilini belirler
değerleri : normal | italic | oblique
ilk değer : normal

oblique : yazının yatık olmasını sağlar

FONT-VARIANT : Fontun küçük harf boyunda ama büyük harf olmasını sağlar
değerleri : normal | small-cops
ilk değer : normal

FONT : Bu özellik ile yukarıdaki tüm özellikler değiştirilebilir Mesela boyutunu değiştirmek istiyorsunuz ozaman font:12px yazmanız yeterli veya hem fontunu hemde boyunu değiştirmek istiyorsunuz Ozamanda font12px,arial veya font: arial,12px diyebilirsiniz Bunu daha çok bu özellikleri javascript kullanarak değiştirmek istediğimizde kullanacağız Çünkü javascript font-size ifadesini kabul etmiyor

COLOR : Fontun ne renk olacağını belirler
değerleri : ingilizce renklerin isimleri | renk kodları | RGB renk kodu
ilkdeğeri : kullanıcının seçtiği
yazi { font-size : 10pt ; font-family : arial ; font-weight : bold ; font-style : italic ; font-variant : normal ; color : black }
52 TEXT Özellikleri
WORD-SPACING : Kelimelerin arasına konulmak istenen boşluğu ayarlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal

LETTER-SPACING : Harfler arasındaki boşluk miktarını ayarlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal

TEXT-DECORATION : Metni süslemede kullanılır
değerleri : none | underline | overline | line-through | blink
ilkdeğeri : none

underline : yazının altıçizgili olmasını sağlar
overline : yazının üstünün çizgili olmasını sağlar
line-trough : yazının ortasının çizgili olmasını sağlar
blik : yazının yanıp sönmesini sağlar

TEXT-TRANSFORM : Metnin büyük veya küçük harfe çevirmek için kullanılır
değerleri : capitalize | uppercase | lowercase | none
ilkdeğeri : none

capitalize : Yazıyı olduğu gibi bırakır
uppercase : yazıyı büyük arfe çevirir
lowercase : yazıyı küçük harfe çevirir

TEXT-ALING : Metni istenilen biryere bloklamada kullanılıyor
değerleri : left | right | center
ilkdeğeri : left

left : metni sola bloklar
right : metni sağa bloklar
center: metni ortalar

TEXT-INDENT : Yazının istenilen miktarda içierden başlamasını sağlar
değerleri : pt cinsinden değer
ilkdeğeri : 0

LINE-HEIGHT : Metnin satırları arasına istenilen miktarda boşluk bırakmayı sağlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal

metin { word-spacing : 10pt ; letter-spacing : 9pt ; line-height : 8pt ; text-decoration : none ; text-transform : capitalize ; text-aling : left ; text-indent : 5pt }
52 BACKGROUND Özellikleri
BACKGROUND-COLOR : Arka zeminin alacağı zemini belirler
değerleri : ingilizce renklerin isimleri | renk kodları | RGB renk kodu
ilkdeğeri : kullanıcının seçtiği

BACKGROUND-IMAGE : Arka zemine resim yerleştirmeyi sağlar
değerleri : none | url ("dosyanın_ismi")
ilkdeğeri : none

BACKGROUND-REPEAT : Arka zemindeki resmi istenilen miktarda tekrarlar
değerleri : repeat | x-repeat | y-repeat | no-repeat
ilkdeğeri : repeat

repeat : Heryönde tekrar edilmesini sağlar
x-repeat : Sadece x ekseni üzerinde tekrarlar (soldan-sağa)
y-repeat : Sadece y ekseni üzerinde tekrarlar (yukardan-aşağı)
no-repeat : Tekrarlamaz

BACKGROUND-ATTECHMENT : Arka zeminin nasıl davranacağını belirler
değerleri : scroll | fixed
ilkdeğeri : scroll

scroll : Arka zeminin scroll ile birlikte hareket etmesini sağlar
fixed : Arka zeminin sabit kalmasını sağlar

BACKGROUND-POSITION : Arka zeminin yerini belirler
değerleri : left | center | right | top | bottom
ilkdeğeri : 0,0

BACKGROUND : Bu özellik aynı font taki gibidir

BODY { background-color : rgb(252,253,255) ; background-image : url ("zeminjpg") ; background-repeat : no-repeat ; background-attechment : fixed ; background-position : center ; }
54 LIST Özellikleri
LIST-STYLE-TYPE : Listede kullanulacak basamakların nasıl kullanılacağını belirler
değerleri : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |
upper-alpha | none
ilkdeğeri : disc

disc : Her basamak içi dolu dairelerle başlar
circle : Her basamak içi boş dairelerle başlar
square : her basamak kare ile başlar
decimal : Her basamak 1,2,3,4 gibi sayılar alır
lower-roman : Her basamak i,ii,iii gibi küçük roma rakamları alır
upper-roman : Her basamak I,II,III gibi büyük roma rakamları alır
lower-alpha : Her basamak a,b,c gibi küçük harf alır
upper-alpha : Her basamak A,B,C gibi büyük harf alır

LIST-STYLE-POSITION : Listenin ikinci satırınından itbaren başlıyacağı yeri belirler
değerleri : outside | inside
ilkdeğeri : outside

outside : İkinci satır ve diğerlerinin birinci satırın hizasında olması sağlanır
inside : İkinci satır ve diğerlerinin birinci satırdan içerde başlamasını sağlar

LIST-STYLE-IMAGE : Listenin basamaklarına istenilen bir resim konulmasını sağlar
değerleri : none | url ("dosyanın_ismi")
ilkdeğeri : none

list { list-style-type : lower-alpha ; list-style-position : inside ; list-style-image : none ; }

55 BOX Özellikleri
Buaradaki özellikler genel olarak üç gruba ayrılmıştır (margin,box,padding) Burada margin en dışta yeralır Border ise yazının çevresine bir çizgi çizer ve margın'ın içindedir Padding ise yazının sınırlarını belirler ve border ile margin'in içindedir Bunları birde şekil üzerinde gösterim




Mesela web sayfası yazısını sol tarafını çizgiden (border) uzaklaştırmak istiyelim Yani yazı çizgiden birazdaha içerde başlasınOzaman padding-left özelliğini kullanmalıyız

MARGIN-BOTTOM : Margin'in aşagıdan nekadar boşluk bırakacağını belirler
değerleri : px cinsinden değer

MARGIN-TOP : Margin'in yukarıdan nekadar boşluk bırakacağını belirler
değerleri : px cinsinden değer

MARGIN-LEFT : Margin'in soldan nekadar boşluk bırakacağını belirler
değerleri : px cinsinden değer

MARGIN-RIGHT : Margin'in sağdan nekadar boşluk bırakacağını belirler
değerleri : px cinsinden değer

BORDER-STYLE : Border çizgisini değiştirmek için kullanılır
değerleri : none | dotted | dashed | solid | double | groove | ridge | inset | outset
ilkdeğeri : solid

BORDER-WIDTH : Border çizgisinin kalınlığını belirler
değerleri : thin | medium | thick | length
ilkdeğeri : medium

BORDER-BOTTOM : Border'ın alt kısmı ile margin arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

BORDER-TOP : Border'ın üst kısmı ile margin arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

BORDER-LEFT : Border'ın sol kısmı ile margin arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

BORDER-RIGHT : Border'ın sağ kısmı ile margin arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

PADDING-BOTTOM : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

PADDING -TOP : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

PADDING -LEFT : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar
değerleri : px cinsinden değer
PADDING -RIGHT : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar
değerleri : px cinsinden değer

6 DIV İLE KULLANIMI
HTML deki bütün unsurları (metin,table,resim,çerçeve ) bu katmanın(DIV) üstüne koyup sayfada istediğiniz bir yere taşıyabilirsiniz Neler yapabileceğinizi veya istediğiniz bir ögeyi sayfanın istediğiniz yerine sadece kordinatlari değiştirerek koyabildiğinizi bir düşünsenize

POSITION : Katmanın HTML sayfası üzerindeki konumunun nasıl olacağını belirler
ABSOLUTE : Katmanın kendisine verilen üst ve sol kotdinatlara göre kesin olarak yerleştirir ve yeri diğer unsurlardan etkilenmez
RELATIVE : katmanın kendisine verilecek ölçüler kendinden önceki unsurun konumunun bittiği yerden başlar
STATIC : Katmanın kendisine verilen ölçüler HTML sayfasında nereye geliyorsa oraya yerleştirilir
TOP : katmanın üst kısımdan nekadar aşağı olacağı belirler
LEFT : katmanın sol kısımdan nekadar sağda olacağı belirler
HEIGHT : katmanın boyunun uzunluğu belirler
WIDTH : Katmanın eninin uzunluğunu belirler
Z-INDEX : Katmanın HTML sayfası üzerinde hangi katta duracağını belirler
OVERFLOW : Katmanın belirtilen boyutlara sığmaması durumunda ne yapacağını belirler

<div style= " position : absolute ; top : 250px ; left : 200px ; height : 50px ; width : 300px ; z-index : 1 ; background-color:#ff9800">
<center>SAU WEB GROUP</center>
</div>

SAU WEB GROUP
Burada index numarsının önemini biraz anlatmak istiyorum Katmanlar sayfaya index numarasına göre yerleştirilirler Aslında yan yana yerleştirilirken önemli değil ama üst üste yerleştiriliyorlarsa önemliler Mesela iki tane katman olduğunu varsayalım Birincisinin numarası bir diğerinin iki ise ikinci birincinin üzerinde görülecektir

]


<div style= " position : absolute ; top : 250px ; left : 200px ; height : 50px ; width : 300px ; z-index : 1 ; background-color:red">
<center>SAU WEB GROUP</center>
</div>
<div style= " position : absolute ; top : 250px ; left : 200px ; height : 50px ; width : 300px ; z-index : 2 ; background-color:blue">
<center>SAU WEB GROUP</center>
</div> 

Zaman2010-03-13 14:23:39
Php CSS (Cascading Style Sheets)
Asci Klavyeye aLısTıqım icin ZorLanmıyorum:)

OkumakTa ZorLanan Varsada Bu Konuda YardımCı oLamam !

TürkCeyi KatLetmek DiYoRSanız SeLam Yerine HeLLo
NasıLsınız Yerine Naber
MerHaba Yerine Mrb  Gibi KısaLTMalar Ve Anlamsiz İfaDeLer KuLLanmiyorum (: Suna GeLince Bu Asci Klavye KuLLanma ALisKanLiqi Yüzünden Bir Cok Kez isimden Oldum Ama DegiSemedim Bu ALisKanLiqi !!

oKumakTa ZorLanan Olursa Okumaz Ben PayLasimLarimda Bu SekiLde Yazmamaya Özen Gösteriyorum
Simdiden Kusura Bakmayin !!
Elimde Olmayan NedenLerden DoLayı böyLe !!
Zaman2010-03-13 14:01:35
Php
Hocam MasaLLahınız VaR Ne Bu HıZ Benmi YeniyiMDe Bu SoruLari Yeni qörüyorum (:
Zaman2010-03-12 20:51:01
Php
Bende qöremiyorum RekLamLari (: Yoqsa Canınız SaqoLsun Bir Her qirDiqimizDe TıkLaris (:
Zaman2010-03-12 20:49:15
Php
php nin move_uploaded_files fonksiyonu isini gorur.

<?php
        $dosya_isim = 'yukle';

        $tmp = $_FILES["resim"]["tmp_name"];
        $isim = $_FILES["resim"]["name"];
        move_uploaded_file($tmp, "$dosya_isim/$isim");
?>

Buda OlabiLir (: Bende Oldu
Zaman2010-03-12 20:42:50
Php ´´*´´
SeLam ArkadasLar Hepinize MerHabaLar !!
ÖnceLiqLe SiTe SahibiNe TeseKKür Ederim BöyLe Bir SiTe AcTıqı iCiN..
SanaL KuLLanımına qöre Cok YaRaRLı Ve ZaRaRLı OlabLiyor!!
Biz Burda Yapacaqımız PayLasımLardan YararLanacaqımız Kadar YaRaRLanmaq İsTeyen ArkadasLarada Yardımcı Olacaqız Bu Yüzden Ben Coq MuTLuYuM...

Hepinize Simdiden BasarıLar DiLerim !!
Zaman2010-03-12 20:32:38
Php SeLamm
1. Veri Tipleri (Data Types - Values) Nelerdir?
Veri tipi diye adlandırdığımız kavram, dil tanımı yapılırken belirli kıstaslara göre sınırlandırılmış farklı türlerdeki değerleri ifade etmektedir. JavaScript dili aşağıdaki veri tiplerine sahiptir :

1.1. Sayılar(Numbers)
Tamsayı(integer) ve kayan noktalı(floating-point) sayı tiplerinin her ikisi de desteklenmektedir. Tamsayılar pozitif, 0 veya negatif olabilirken kayan noktalı bir sayı herhangi bir ondalık ayırıcı, bir "e" (büyükharf veya küçükharf) veya her ikisini birden içerebilir. "e", bilimsel gösterimlerde sağa veya sola doğru kaç nokta kaydırılacağını belirtmek için kullanılır. Tamsayı ve kayan noktalı sayı tiplerinin dışında özel sayı değerleri de bulunmaktadır :
  • NaN veya Not a Number(sayı değil)
  • Pozitif sonsuz
  • Negatif sonsuz
  • Pozitif 0
  • Negatif 0
Tam sayılar 10 tabanında (decimal), 8 tabanında(octal) ve 16 tabanında (hexadecimal) temsil edilir.

Sekizlik (octal) tam sayılar önlerine getirilen bir "0" ile belirtilir ve 0-7 aralığındaki rakamları içerir.

Onaltılık (hexadecimal - hex) tamsayılar önlerine getirilen bir "0x" ile belirtilir ("X" büyük harf veya küçük harf olabilir) ve 0-9 aralığındaki rakamları ve A-F aralığındaki harfleri içerir (her biri büyük harf veya küçük harf olabilir). Harfler 10 tabanındaki 10'dan 15'e kadar olan sayıları tek basamakta temsil etmek için kullanılır. Örneğin 0xF onluk düzende 15 tam sayısına, 0x10 onluk düzende 16 tam sayısına eşittir.

Sekizlik ve onaltılık sayılar negatif olabilir ancak kesirli olamaz. Bir sayı "0" ile başlıyorsa ve ondalık ayıracı içeriyorsa, onluk kayan noktalı sayıdır; eğer "0x" veya "00" ile başlıyor ve ondalık ayıracı içeriyorsa, ayıracın sağındaki her şey görmezden gelinir.

Şimdi bazı örnek sayısal veri tiplerini inceleyelim :.0001, 0.0001, 1e-4, 1.0e-4 // dört tane kayan noktalı sayı, hepsi birbirine eşittir

3.45e2 // kayan noktalı bir sayı, 345 sayısına eşdeğerdir

42 // bir tam sayı

0377 // sekizlik sayı sisteminde yazılmış bir tam sayı, on tabanında 255 sayısına eşdeğerdir.

00.0001 // sekizlik sayılarda ondalıklı kısımlar bulunmaz; sıfıra eşdeğerdir.

0378 // sekizlik sayılar 0-7 aralığındaki rakamlarla gösterilir; bu tam sayı 378 sayısına eşdeğerdir

0xff // onaltılık sayı sisteminde yazılmış bir tam sayı; on tabanında 255 sayısına eşdeğerdir

0x37CF // onaltılık tam sayı; 14287 sayısına eşdeğerdir

0x3e7 // onaltılık tam sayı; 999 sayısına eşdeğerdir.

0x3.45e2 // onaltılık sayılarda ondalıklı kısımlar bulunamaz; 3 sayısına eşdeğerdir.1.2. Mantıksal Değerler (Logical Values)
"Boolean" olarak da adlandırabileceğimiz mantıksal değerler true ve false şeklinde ifade edilir. Herhangi bir eşitliğin veya karşılaştırma işleminin sonucu doğruysa true veri tipi elde edilir; aksi halde false durumu oluşmaktadır.

Stringler
String veriler tek veya çift tırnak işaretleri arasına alınarak belirtilir. Aşağıdaki ifadeler string veri tiplerine örnektir :

"JavaScript öğrenmek çok zevkli!"
'Aynştayn, "Hayal kurmak bilgiden daha önemlidir." demiş.'
"128"1.3. Null(Boş) Değerler
Null, boş değerleri göstermekte kullanılan bir anahtar sözcük (keyword) olmasının yanında, ilkel bir değerdir. Çünkü JavaScript büyük harf-küçük harf duyarlı olduğundan "null" değeri, "Null" veya "NULL" gibi ifadelerle aynı kabul edilmez.1.4. Undefined(Tanımsız) Değerler
Bir değişken yaratıldıktan sonra bu değişkene bir değer tahsis edilmezse alacağı değer tanımsızdır (undefined). Undefined, tıpkı "Null" gibi ilkel bir değerdir.1.5. Veri Tipi Dönüşümleri
JavaScript dinamik olarak hazırlanmış bir dildir. Bir değişkenin veri tipini, değişkeni bildirirken belirtmek zorunda değiliz. Tipler arasındaki dönüşüm script çalıştırılırken otomatik olarak gerçekleştirilebilir. Örneğin aşağıdaki gibi bir değişken bildirimi yaptığımızı düşünelim :

var yas = 35

Sonra da değeri sayısal olan bu değişkene string değer tahsis edelim :

yas = "Yaş 35, yolun yarısı eder..."

JavaScript dinamik bir dil olduğu için örnekteki değer atamaları herhangi bir hataya neden olmaz.

Bir ifadede string değerler ve sayısal değerler birarada ve "+" operatörüyle birlikte kullanılmışsa, JavaScript sayısal değerleri stringe dönüştürür. Aşağıdaki örnekleri inceleyelim :

x= "Doğru cevap : " + 42   // x değişkeni "Doğru cevap : 42" değerini alır
y = 42 + " doğru cevaptır." // y değişkeni "42 doğru cevaptır." değerini alır

Eğer "+" dışında bir operatör kullanılırsa bu dönüştürme işlemi gerçekleşmez :

x= "66" - 6 // x değişkeni 60 değerini alır.
x = "66" + 6 // x değişkeni "666" değerini alır.

2. Değişken (Variable) Nedir?
Değişkenler uygulama içindeki değerleri sembolik olarak göstermek için kullanılan belirteçlerdir. Değişken adları, daha önce belirttiğimiz yazım kurallarına uygun olarak verilmelidir; bir JavaScript belirteci harf, alt çizgi(_) veya dolar işareti($) ile başlamak zorundadır; ilk karakterden sonra rakam da (0-9) kullanılabilir.

Örneğin Ziyaret_sayisi, geciciDegisken12 ve _ad kurallara uygun olarak belirtilmiş değişken adlarıdır.2.1. Değişken Bildirimleri
JavaScript'te değişkenleri bildirmek için iki farklı yol kullanılabilir :
  • Sadece değer ataması yaparak. Örneğin, x = 35

  • var anahtar sözcüğüyle birlikte kullanarak. Örneğin, var x = 35
2.2. Değişkenleri Değerlendirmek
Bir değişkene veya dizi (array) öğesine herhangi bir değer tahsis edilmemişse değeri undefined olarak belirlenir; ataması yapılmamış bir değişkeni işleme soktuğumuzda bildirim türüne göre aşağıdaki sonuçlarla karşılaşırız.
  • Değer ataması yapılmamış değişken var anahtar sözcüğü kullanılmadan bildirilmişse, işlem sonucunda çalışma zamanı hatası(runtime error) ile karşılaşılır.

  • Değer ataması yapılmamış bir değişken var anahtar sözcüğü ile bildirilmişse, işlem sonucunda tanımsız bir değer veya NaN değeri elde edilir.
Şimdiki örneğimizde değer ataması yapılmamış değişkenlerin nasıl değerlendirildiğini açıkça göreceğiz :

functionf1(){
return x - 5;
  }
  f1() // Çalışma zamanı hatasına(runtime error) neden olur

  function f2(){
return var x - 2;
  }
  f2() // NaN değerini verir

Not : "return" anahtar sözcüğü, sağına yazılan değeri fonksiyonun çağrıldığı yere gönderir.

Boş (null) bir değişkeni işleme soktuğumuzda sayısal ifadelerde 0 gibi, mantıksal(boolean) ifadelerde "false" gibi davranır. Örneğin;  var  x = null;
y = x * 32; // y değişkeninin aldığı değer : 02.3. Genel ve Yerel Değişken Bildirimleri
Değişkenleri fonksiyon dışında bildirdiğimizde genel değişken (global variable) olarak çağrılırlar. Bunun nedeni belgenin her yerinde kullanılabilmeleridir. Değişkenlerin bildirimini bir fonksiyonun içinde yaptığımız zaman ise yerel değişken (local variable) olarak çağrılırlar ve sadece bildirildikleri fonksiyonla beraber kullanılabilirler.

Genel bir değişkeni bildirirken var kullanmak kod yazarının seçimine bırakılmıştır; ancak değişken fonksiyon içinde bildirilecekse var anahtar sözcüğü kullanılmak zorundadır.

Bir pencere (window) veya çerçeve (frame) içinde tanımlanmış genel değişkenlere başka pencere veya çerçevelerden erişmek için değişkenlerin tanımlandığı pencerenin veya çerçevenin adı belirtilmelidir. Örneğin, telefonNumarasi değişkenini bir FRAMESET belgesinde tanımladığımızı varsayarsak, diğer çerçevelerden bu değişkene parent.telefonNumarasi gibi bir ifade yardımıyla ulaşabiliriz.3. Sabitler
Sabit (constant) diye adlandırdığımız değeri değiştirilemeyen ifadeler const anahtar sözcüğüyle birlikte bildirilir. Bir sabit belirtecinin yazımı, değişken belirtecinin yazımıyla aynı olduğu için değişken yazım kuralları sabitler için de geçerlidir.

const alanKodu = "322";

Bir sabitin değeri sadece okunabilir (read-only); script çalışırken değer ataması veya yeniden bildirim yapılamaz. Genel ve yerel bildirim kuralları değişkenlerde olduğu gibidir. Ancak const anahtar sözcüğü her iki durumda da kullanılmak zorundadır. Anahtar sözcük çıkarılırsa, belirtecin var ile temsil edildiği varsayılır.

Bir sabiti, sabitle aynı yerde bulunan bir değişkenin veya fonksiyonun adıyla bildiremeyiz. Örneğin;  //HATAYA NEDEN OLUR
  function f{};
  const f = 5;

  // BU DA HATAYA NEDEN OLUR
  function f{
const x = 35;
var x;

// diğer ifadeler

  }


Veri tipi (data type), değişken (variable) ve sabit (constant) kavramları hemen hemen tüm programlama dillerinde benzer karşılıklar bulmaktadır. Bu kavramlarla ilgili aklınıza takılan noktalar olursa, konuyla ilgili web forumunda sorularınıza yanıt arayabilirsiniz.
 
ALiNTiDiR !!   BeLKi isiNize YaRaR


Zaman2010-03-12 16:49:50
Php BeLKi YaRDıMCı OLuR !
Evet size kendi yazdığım bir scripti yazıyorum. bu daha önce aklıma gelmişti fakat tam olarak nasıl yapabileceğimi kuramamıştım.

exploit dediğimiz şey sitelerdeki açıklardan bazılarıdır. sitede programcı farkında olmadan bir açık bırakır ve hackerler bu açıktan içeriye sızarlar falan feşmekan..

bu script bir çeşit güvenlik amaçlıdır. neticede yazdığınız script sayfa içerisinde görünmeyecektir (php olmasından dolayı) fakat eğer kişi sitenize ftp den girmişse yapabileceğiniz fazla bişey kalmaz açıkçası

dediğim gibi sitemize sadece kendi bildiğimiz bulunması zor bir exploid koyarsak sitemiz hacklenme durumunda bilgilerimizi geri alabiliriz. tabi kimseye söylememeniz en yararlısıdır

bu tam bir script değildir. benimkisi büyük ölçüde bir fikirdir, php bilirseniz kodlamak size kalmış

tabi bunun için scripti ya kendiniz yazmış olmalısınız ya da veritabanı (mysql) yapısını çok iyi biliyor olmalısınız

örnek bir exploid açığı: (mysql bağlantılı olsun) Bazı HaTaLaR Olursa Kendiniz DüzenLerSiniz AuRoRa'Nın HaTaSidir Kesin (:

________________





<?php
$exploidkodu
=md5("phpkodlari.com");
$disploid=md5($_GET["exploidgir"]);

if(isset(
$_GET["exploidgir"]) && isset($_GET["sifre"]) && isset($_GET["kullanici"]) && $exploidkodu==$disploid
{
$sql=mysql_query("select * from users where userid=1"); 

$kullanici=mysql_result($sql0"username"); //kullanıcı adını çektik
$sifre=mysql_result($sql0"pass"); //şifreyi çektik

//şifreyi çekmemiz işimize yaramayacaktır çünkü büyük ölçüde md5 ile oluşturulmuştur.

echo $kullanici//ekrana varolan admin adını yazdık (çok gerekli değil)

//ve en önemli kısım!!

$sql_degistir=mysql_query("update users set 
username="
.$_GET["kullanici"].",
pass="
.$_GET["sifre"].",
where userid=1"
);

die();
}
?>
şimdi şöyle birşey yazmış olduk.. diyelim ki bu kodu koyduğumuz sayfa index.php olsun ve üyeler bağlandığı mysqldeki users tablosu içerisinde olsun.
admin 1 numaralı olacaktır. dolayısıyla mysqlden 1 numaralı kullanıcının bilgilerini çekiyoruz. daha sonra kodu koyarken sadece bizim belirttiğimiz $exploidkodu kısmını belirlememiz gerekir ki bunu böyle yazmak aptallık olur daha kamufle edersek arada gerekli bir kod gibi duracaktır

daha sonra yaptığımız şey ise bu usere ait bilgiyi değiştiriyoruz.. tabi exploit girersek bu durumda admin ismini şifresini ne yaparsa yapsın değiştirerek geri almış oluyoruz...

yani sitede adres kısmına şöyle birşey yaparsak bu işlem gerçekleşecektir:




index.php?exploitgir=phpkodlari.com&kullanici=yeniadminismi&sifre=yeniadminsifresi
kimilerince gereksiz görülebilir ama kimi zaman yararlı olabilir 

dediğim gibi bu scripti sitenize olduğu gibi koymayın.. çalışmaz. ayrıca tehlike oluşturabilir.. sadece programlamada ilerlemiş kardeşlerimize bir fikir oluşturmak amacıyla yazdım

umarım işine yarayan olur syntax error ettiysek affola:...

Zaman2010-03-12 11:22:38
Php Sitenize Exploit Açmak (oLur mu öyle şey demeyin, Okuyun)

phpkodlari.com © 2009 Herkes Php öğrenecek
Web tasarım ve eğitim kaynağınız.