DarkForum
Would you like to react to this message? Create an account in a few clicks or log in to continue.

DarkForum

Free
 
AnasayfaAramaLatest imagesKayıt OlGiriş yap

 

 ___BİRKAÇ HTML ___KODLARI__

Aşağa gitmek 
YazarMesaj
55200
Yeni Üye
Yeni Üye
55200


Mesaj Sayısı : 70
Yaş : 36
Kayıt tarihi : 18/03/07

___BİRKAÇ  HTML ___KODLARI__ Empty
MesajKonu: ___BİRKAÇ HTML ___KODLARI__   ___BİRKAÇ  HTML ___KODLARI__ Icon_minitimeNisan 27th 2007, 6:10 pm

KAYAN RESİM EFEKTİ

<script>
<!-- Begin
var no = 10; // BURADA RESMIN SAYISINI BELIRTIYORUZ
var speed = 1; // RESMIN KAYMA HIZINI AYARLIYORUZ
var heart = "image001.gif"; // KAYAN RESIM DOSYASININ ISMINI YAZIYORUZ
var flag;
var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
amx = new Array();
amy = new Array();
stx = new Array();
sty = new Array();
flag = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-30)+10; // set position variables
yp[i] = Math.random()*doc_height;
amy[i] = 12+ Math.random()*20; // set amplitude variables
amx[i] = 10+ Math.random()*40;
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
flag[i] = (Math.random()>0.5)?1:0;
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></layer>");
}
} else
if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
}
}
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
flag[i]=(Math.random()<0.5)?1:0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}
document.layers["dot"+i].top = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.layers["dot"+i].left = xp[i] + amx[i]*dx[i];

}
setTimeout("snowNS()", speed);
}

function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
flag[i]=(Math.random()<0.5)?1:0;
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}

document.all["dot"+i].style.pixelTop = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.all["dot"+i].style.pixelLeft = xp[i] + amx[i]*dx[i];
}
setTimeout("snowIE()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script>
Sayfa başına dön Aşağa gitmek
55200
Yeni Üye
Yeni Üye
55200


Mesaj Sayısı : 70
Yaş : 36
Kayıt tarihi : 18/03/07

___BİRKAÇ  HTML ___KODLARI__ Empty
MesajKonu: CSS&#8217;i Web Sayfalarına Eklemek   ___BİRKAÇ  HTML ___KODLARI__ Icon_minitimeNisan 27th 2007, 6:36 pm

CSS’i Web Sayfalarına Eklemek



___BİRKAÇ  HTML ___KODLARI__ Mods
CSS’i (X)HTML sayfalarımıza eklemenin 4 yöntemi vardır.
1- Kod içinde (In-line)


Direk olarak (X)HTML elementin içine style özelliği kullanılarak uygulamak.

  1. <div style=”color:red”>Deneme yazımız</div>

Tüm CSS komutlarını kodların içine direk uygulamak önerilen bir kodlama şekli değildir. Ancak özel durumlarda kullanılabilir.
2- style Elementi kullanılarak


<head> kısmında <style> elementi içinde CSS kodumuzu yazarak uygulamak.

    <LI class=alternatifard><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  1. <html xmlns=”http://www.w3.org/1999/xhtml”><LI class=alternatifard><head>
  2. <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ /><LI class=alternatifard><title>CSS’i Uygulamak </title>
  3. <style type=”text/css”><LI class=alternatifard>div{
  4. color:red;<LI class=alternatifard>}
  5. </style>
  6. </head>

Birinci yönteme göre avantajı (X)HTML kod ile CSS bir birinden ayrıştırılmış olmasıdır.
3- Harici Stil şžablonu Kullanımı


Bu metod da CSS kodlarımzı .css uzantılı bir dosyaya kaydederiz. ornek.css

    <LI class=alternatifard>p {
  1. color: red;<LI class=alternatifard>}
  2. a {<LI class=alternatifard>color: blue;
  3. }

Daha sonra bu kodu gereken sayfalarımıza uygularız.

    <LI class=alternatifard><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  1. <html xmlns=”http://www.w3.org/1999/xhtml”><LI class=alternatifard><head>
  2. <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ /><LI class=alternatifard><title>CSS’i Uygulamak</title>
  3. <link rel=”stylesheet” type=”text/css” href=”ornek.css” />
  4. </head>

Bu yöntemin diğerlerine göre en büyük avantajı bir kere yazılan kod lazım olan tüm sayfalara eklenebilmesidir. Bu sayede harici eklenen css kodu bir kere yüklendikten sonra diğer kullandığımız sayfalarda tekrar yüklenemeyerek bize hız kazandıracaktır.
4- @import ile eklemek


üncü yöntem ile kullanımı benzerdir.



    <LI class=alternatifard><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  1. <html xmlns=”http://www.w3.org/1999/xhtml”><LI class=alternatifard><head>
  2. <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ /><LI class=alternatifard><title>CSS’i Uygulamak</title>
  3. <style type=”text/css”><LI class=alternatifard>@import “ornek.css”;
  4. </style>
  5. </head>

Bu yöntemle eklenen harici css dosyası eski web tarayıcıları tarafından görüntülenemeyecektir.(Örn: NN4)
@import ile eklenen kod link ile eklenen kodlamadan önce yorumlanır web tarayıcıları tarafından. Ayrıca css dosyalarımızda @import özelliğini kullanarak devamlı kullandığmız kodları css dosyamıza harici olarak ekleyebilriz böylelikle tekrarlardan kurtulmuş oluruz.









(11.10.2006 güncellendi )
Sonuç olarak burada dört adet CSS uygulama metodu gördük ancak bu metodlardan dördüncüsü avantajları bakımından önerilen bir yöntemdir.
Ayrıca içeriği büyük olan sitelerde css kodunun parçalara ayrılması ve kullanılan sayfa CSS’inde hangi parçalar gerekli ise onların import edilmesi önerilir. Bu sayfade kodun bir kısmında yaptığımız değişiklik için tüm css kodu incelenip değiştirlmesi gerekmez ve kod yönetimi kolaylaşır.

    <LI class=alternatifard><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  1. <html xmlns=”http://www.w3.org/1999/xhtml”><LI class=alternatifard><head>
  2. <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ /><LI class=alternatifard><title>CSS’i Uygulamak</title>
  3. <style type=”text/css”><LI class=alternatifard>@import “urunler.css”;
  4. </style>
  5. </head>

Ürünler bölümü için bir css dosyası ekleyelim sonra parçalara ayırdığımız css kodlarının ürünlere lazım olanlarını urunler.css içine ekleyelim.
urunler.css

    <LI class=alternatifard>@import url(/css/iskelet.css);
  1. @import url(/css/fontlar.css);<LI class=alternatifard>@import url(/css/renkler.css);
  2. @import url(/css/urunlereozel
Sayfa başına dön Aşağa gitmek
55200
Yeni Üye
Yeni Üye
55200


Mesaj Sayısı : 70
Yaş : 36
Kayıt tarihi : 18/03/07

___BİRKAÇ  HTML ___KODLARI__ Empty
MesajKonu: CSS Kutu Modeli - Kenarlık(border) Özellikleri   ___BİRKAÇ  HTML ___KODLARI__ Icon_minitimeNisan 27th 2007, 6:40 pm

Kenarlık(border), içerik alanı ve padding etrafındaki bir veya daha fazla
çizgiye denir.
___BİRKAÇ  HTML ___KODLARI__ Basit_boxmodel



  • boder-style
  • border-top-style, border-right-style, border-bottom-style, border-left-style
  • border-width
  • border-top-width, border-right-width, border-bottom-width, border-left-width
  • border-color
  • border-top-color, border-right-color, border-bottom-color, border-left-color
  • border

Sırasıyla incelersek:
border-style



Yapısı : border-style: <deger>
Aldığı Değerler : [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-style özelliği kenarlık stilini belirlememizi sağlar.(Örn: dotted(noktalı), double(çift) vd.) 10 farklı değeri CSS desteklemektedir. Bu özellik kenarlığın görünmesi için
tanımlanması gereklidir. Bir veya dört değer alabilir eğer dört değer alırsa
sırasıyla üst, sağ, alt ve sol kenarlık stilini belirler. Eğer tek değeri
varsa tüm kenarlık değeri ataması yapılmış demektir. Eğer iki veya üç değer
ataması yapılmış ise margin‘de gördüğümüz sıralama söz konusudur.

    <LI class=alternatifard>p.yeni {
  1. border-style: solid;
  2. }


Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border-top-style, border-right-style, border-bottom-style, border-left-style



Yapısı : border-[top,left,right,bottom]-style: <deger>
Aldığı Değerler : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Başlangıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-top-style, border-right-style, border-bottom-style, border-left-style border-style özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

    <LI class=alternatifard>h1{
  1. border-style: solid;<LI class=alternatifard>border-left-style: none;
  2. }


Browser Uyumu:
Internet Explorer 4+(kısmen),6+ (tam)
Netscape 4+(kısmen), 6+ (tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border-width



Yapısı : border-width: <deger>
Aldığı Değerler : [ thin | medium | thick | <uzunluk değeri > ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
İlk olarak stili belirledikten sonra kenarlık kalınlığını belirlemek için border-width değeri kullanılır.
border-width yüzde değeri alamaz.

    <LI class=alternatifard>p {
  1. margin: 5px;<LI class=alternatifard>background-color: silver;
  2. border-style: solid;<LI class=alternatifard>border-width: 1px;
  3. }


Browser Uyumu:
Internet Explorer 4+
Netscape (kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border-top-width, border-right-width, border-bottom-width, border-left-width



Yapısı : border-[top,left,right,bottom]-width: <deger>
Aldığı Değerler : thin | medium | thick | <uzunluk değeri > | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok





border-top-width, border-right-width, border-bottom-width, border-left-width border-width özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

    <LI class=alternatifard>h2 {
  1. border-left-width: medium;<LI class=alternatifard>border-style: solid;
  2. }


Browser Uyumu:
Internet Explorer 4+ (kısmen), 6+(tam)
Netscape 4+(kısmen), 6+ (tam)
Opera 3.6, 4+
W3C’s CSS Level 1+
CSS Profile 1.0
border-color



Yapısı : border-color: <deger>
Aldığı Değerler : [ <renk> | transparent ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-color özelliği kenarlık rengini belirler. (X)html’deki bordercolor ile benzerdir.

    <LI class=alternatifard>p {
  1. border-style: solid;<LI class=alternatifard>border-color: gray;
  2. }

Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlamasıda
yapılabilir.

Browser Uyumu:
Internet Explorer 4+
Netscape 4+(kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border-top-color, border-right-color, border-bottom-color, border-left-color



Yapısı : border-[top,left,right,bottom]-color: <deger>
Aldığı Değerler : [ <renk> | transparent ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-color özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.
Not: Bir kenarlığı yok etmek için kalınlık değeri veririz. Birde CSS2 ile
birlikte gelen transparent özelliği vardır ki bu kenarlığı yok etmez sadece
görünmez yapar.

    <LI class=alternatifard>p {
  1. border-style: solid;<LI class=alternatifard>border-color: gray;
  2. }

Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlamasıda
yapılabilir.

Browser Uyumu:
Internet Explorer 4+
Netscape 4+(kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border



Yapısı : border: <deger>
Aldığı Değerler : <border-width> | <border-style> | <renk>
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border yukarıda sıraladığımız özellikleri tek sefer de tanımlamak için kullanılır. Bir kısaltmadır.

    <LI class=alternatifard>h1 {
  1. border: thick silver solid;
  2. }

Bu özellikleri tek tek atamak isteseydik şöyle bir kod yazmamız gerekecekti.

    <LI class=alternatifard>h1 {
  1. border-top: thick silver solid;<LI class=alternatifard>border-bottom: thick silver solid;
  2. border-right: thick silver solid;<LI class=alternatifard>border-left: thick silver solid;
  3. }


Browser Uyumu:
Internet Explorer 4+
Netscape 4+(kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
Sayfa başına dön Aşağa gitmek
 
___BİRKAÇ HTML ___KODLARI__
Sayfa başına dön 
1 sayfadaki 1 sayfası

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
DarkForum :: Bilgisayar :: Yazılım-
Buraya geçin: