11 Eylül 2013 Çarşamba
Format Atma
Daha önce hazırlamış olduğumuz DVD yi bilgisayarımıza takıyoruz.Bilgisayarı kapatıyoruz.Açarken sürekli F11 F12 ve Delete tuşlarına sürekli basıyoruz.Karşımıza boot device geliyor ve oradan DVD yi seciyoruz..Devamını resimlerle takip edelim..
Veri Merkezi (Data Center)
Veri Merkezi(Data Center), bilgisayar sistemleri ile telekomünikasyon ve veri ambarı sistemleri gibi ek sistemleri barındıran bir tesistir. Sunucu odası veya sistem odası olarak da adlandırılan bu tesisler işletmelere ait sunucu ve veri ambarlarının bulunduğu alanlardır. Veri merkezleri genel olarak iki kategoriye ayrılır:özel veri merkezleri ve internet veri merkezleri. Özel veri merkezleri sadece bir kuruluş tarafından kendi hizmetlerinde kullanılır. İnternet veri merkezleri ise üçüncü şahıslara hizmet verir.
Veri merkezlerinde işlenen ve saklanan verinin önem derecesine göre elektrik, mekanik, güvenlik sistemleri değişmektedir. Genel olarak düşünüldüğünde veri merkezleri; yedek güç kaynakları, yedek veri iletişim bağlantıları, merkez içerisinde bulunan sistemlerin soğutulması için kullanılan iklimlendirme sistemleri, yangın söndürme sistemleri ve dış ortamdan gelebilecek tehlikelere karşı verinin güvenlik derecesine göre güvenlik sistemlerini bulundururlar.
Barındırma(Hosting): Ev sahipliği hizmeti; internet veri merkezinden hizmet alan kuruluşun kendi işi çerçevesinde kullandığı yazılım, veri ve uygulamalarını internet veri merkezinde bulunan sunucular ve veri depolama birimlerinde çalıştırması ve/veya internet veri merkezi işletmecisi tarafından sağlanan uygulamaları kullanmasıdır.
Yer paylaşımı(Co-location): Yer paylaşımı hizmeti; internet veri merkezinden hizmet alan kuruluşun kendi işi çerçevesinde kullandığı (kendisine ait) BT sistemlerini internet veri merkezi alanına kurması, internet veri merkezinin temel altyapı olanaklarını ve ağ altyapısını, isteğe bağlı olarak da yönetim hizmetini kullanmasıdır.
Veri merkezlerinde sağlanan diğer hizmetler; veri tabanı yönetimi, web yönetimi, sunucu yönetimi, servis yönetimi, konfigürasyon yönetimi, performans yönetimi, kullanıcı yönetimi, yedekleme / geri yükleme, ek güvenlik duvarı, ağ ve bilgi güvenliği yönetimi, yük dengeleme, veri ambarı, felaket kurtarma hizmeti, sayısal sertifika.[5]
Bugün birçok veri merkezi internet hizmet sağlayıcıları tarafından kendilerine ait veya üçüncü şahıs sunucularını barındırmak maksadıyla çalıştırılmaktadır. Bununla birlikte bugüne kadar uygulanan veri merkezleri sadece bir dev şirketin kullanımında olabilir(örneğin Google, Amazon gibi) veya üçüncü şahsa ait sunucuları barındırabilir(co-location) veya ağ bağımsız veri merkezi olarak kullanılabilir.
Veri merkezlerinde işlenen ve saklanan verinin önem derecesine göre elektrik, mekanik, güvenlik sistemleri değişmektedir. Genel olarak düşünüldüğünde veri merkezleri; yedek güç kaynakları, yedek veri iletişim bağlantıları, merkez içerisinde bulunan sistemlerin soğutulması için kullanılan iklimlendirme sistemleri, yangın söndürme sistemleri ve dış ortamdan gelebilecek tehlikelere karşı verinin güvenlik derecesine göre güvenlik sistemlerini bulundururlar.
İnternet Veri Merkezleri Tarafından Sunulan Hizmetler
Internet veri merkezi tarafından sağlanan ana hizmetler ise yer paylaşımı (co-location) ve barındırma(hosting) olarak adlandırılmaktadır. Bu hizmetler, yönetimin internet veri merkezi işletmesine veya hizmet alan kuruluşa ait olduğu farklı birleşimlerle sunulabilir.Barındırma(Hosting): Ev sahipliği hizmeti; internet veri merkezinden hizmet alan kuruluşun kendi işi çerçevesinde kullandığı yazılım, veri ve uygulamalarını internet veri merkezinde bulunan sunucular ve veri depolama birimlerinde çalıştırması ve/veya internet veri merkezi işletmecisi tarafından sağlanan uygulamaları kullanmasıdır.
Yer paylaşımı(Co-location): Yer paylaşımı hizmeti; internet veri merkezinden hizmet alan kuruluşun kendi işi çerçevesinde kullandığı (kendisine ait) BT sistemlerini internet veri merkezi alanına kurması, internet veri merkezinin temel altyapı olanaklarını ve ağ altyapısını, isteğe bağlı olarak da yönetim hizmetini kullanmasıdır.
Veri merkezlerinde sağlanan diğer hizmetler; veri tabanı yönetimi, web yönetimi, sunucu yönetimi, servis yönetimi, konfigürasyon yönetimi, performans yönetimi, kullanıcı yönetimi, yedekleme / geri yükleme, ek güvenlik duvarı, ağ ve bilgi güvenliği yönetimi, yük dengeleme, veri ambarı, felaket kurtarma hizmeti, sayısal sertifika.[5]
Bugün birçok veri merkezi internet hizmet sağlayıcıları tarafından kendilerine ait veya üçüncü şahıs sunucularını barındırmak maksadıyla çalıştırılmaktadır. Bununla birlikte bugüne kadar uygulanan veri merkezleri sadece bir dev şirketin kullanımında olabilir(örneğin Google, Amazon gibi) veya üçüncü şahsa ait sunucuları barındırabilir(co-location) veya ağ bağımsız veri merkezi olarak kullanılabilir.
8 Eylül 2013 Pazar
jQuery Ders Kodlar
<html>
< head>
<title>odev</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
* {margin:0; padding:0;}
.tabMenuUst{width:500px; background:#B44D4D; display:block; text-align:center; float:left; margin:10px auto;}
.tabMenuUst li{display:inline-block; padding:5px 20px;}
.tabMenuUst li a{color:#fff;}
.tabMenuUst li a.secili, .tabMenuUst li a:hover{text-decoration:none; color#000;}
.tabMenuAlt{width:500px; float:left;}
.tabMenuAlt div{width:480px; height:500px; text-align:center; padding10px; background:#956FAC; display:none;}
.tabMenuAlt div.secili{display:Block;}
</style>
< /head>
< body>
<ul class="tabMenuUst">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">İletisim</a></li>
</ul>
<div style="clear:both"></div>
<div class="tabMenuAlt">
<div class="tabMenu1">
ilk tiklanan
</div>
<div class="tabMenu2">
ikinci tiklanan
</div>
<div class="tabMenu3">
son tiklanan
</div>
</div>
<script>
$('.tabMenuUst li:first-child.a').addClass("secili");
$('.tabMenuAlt div:first-child').addClass("secili");
$('.tabMenuUst li').click(function(){
$('.tabMenuUst li a').removeClass('secili');
$('.tabMenuAlt div').removeClass('secili');
$(this).find('a').addClass('secili')
var tiklananLi=$(this).index();
$('.tabMenuAlt div').eq(tiklananLi).addClass('secili');
});
</script>
< /body>
< /html>
Ekran çıktısı:
< head>
<title>odev</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
* {margin:0; padding:0;}
.tabMenuUst{width:500px; background:#B44D4D; display:block; text-align:center; float:left; margin:10px auto;}
.tabMenuUst li{display:inline-block; padding:5px 20px;}
.tabMenuUst li a{color:#fff;}
.tabMenuUst li a.secili, .tabMenuUst li a:hover{text-decoration:none; color#000;}
.tabMenuAlt{width:500px; float:left;}
.tabMenuAlt div{width:480px; height:500px; text-align:center; padding10px; background:#956FAC; display:none;}
.tabMenuAlt div.secili{display:Block;}
</style>
< /head>
< body>
<ul class="tabMenuUst">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">İletisim</a></li>
</ul>
<div style="clear:both"></div>
<div class="tabMenuAlt">
<div class="tabMenu1">
ilk tiklanan
</div>
<div class="tabMenu2">
ikinci tiklanan
</div>
<div class="tabMenu3">
son tiklanan
</div>
</div>
<script>
$('.tabMenuUst li:first-child.a').addClass("secili");
$('.tabMenuAlt div:first-child').addClass("secili");
$('.tabMenuUst li').click(function(){
$('.tabMenuUst li a').removeClass('secili');
$('.tabMenuAlt div').removeClass('secili');
$(this).find('a').addClass('secili')
var tiklananLi=$(this).index();
$('.tabMenuAlt div').eq(tiklananLi).addClass('secili');
});
</script>
< /body>
< /html>
Ekran çıktısı:
jQuery 2
attr()
.removeAttr()
.css()
.addClass()
.hasClass()
.removeClass()
.toggleClass()
.append()
.append to ()
.attr() -> Bu metod sayesinde seçtiğimiz nesnenin özniteliklerine ulaşabiliriz.
Bu kod ile img nesnemizin title özniteliğini okyanus olarak değiştirdik. Eğer title nesnesi olmasaydı bile kendi ekleme yapacaktı.
Başka bir örnek vermek gerekirse. xHTML standartlarına göre her resmin bir alt özniteliği olmalı. Siz sayfanızı yaparken buna dikkat etmediniz ve sonradan bunu düzeltmek istediniz. Tek tek bütün resimlere alt özniteliği eklemek yerine aşağıdaki kod ile tüm resimlerine boş bir alt özniteliği eklemiş olursunuz ki buda xHTML standartları için uygundur.
// Sayfadaki tüm img nesnelerine alt özniteliği eklendi.
.removeAttr() -> Kullanımı attr() metodu gibidir. Adından da anlaşıldığı gibi seçtiğimiz nesnenin özniteliğini siler.
.css() -> Daha önceki derslerimizde de sık sık kullandığımız bu özellik seçtiğimiz nesnenin css özelliklerine değiştirmemize yarar.
Tek özellik kullanımı için:
Çoklu özellik kullanımı için
jQuery de bir metod içine çoklu özellik tanımı yapacaksak bunu süslü parantezler içinde ve yukarıda şekilde yaparız.
.addClass() -> Yine çok kullandığımız bir metottur. Seçtiğimiz nesneye daha önceden tanımlı bir class atar.
.hasClass() -> Seçtiğimiz nesnenin içinde belirlediğimiz class‘ın olup olmadığına bakar. Sonuç True yada False olarak döner.
.removeClass() -> Seçtiğimiz nesne içindeki belirlediğimiz class‘ı siler.
.toggleClass() -> Seçtiğimiz nesne içinde belirlediğimiz class varsa onu siler yoksa ekler.
p nesnesi içinde yazi classi varsa siler yoksa ekler.
Şimdi ise bu html kodları üzerinde oynama append() fonksiyonu yapıyoruz.
Kodları tek tek açıklayacak olursak ;
Sayda yüklendiğinde
Class’ı cerceve olan div’in içerisindeki h1 tagının içine append komutu ile ‘ ~ aycan.net’ text değerini yazdırıyoruz.
Class’ı cerceve olan div’in içerisindeki p tagının içine ‘<strong>nedir? <br> Cevap : Ne bileyim ben arkadaş!</strong>’ bu değerini yazdırıyoruz.
ve birde reklam şart diyerek kendi logomuzu yeni bir h1 tagı > a tagı > img tagı bastırıyoruz.
Ön izleme;
Örnek : jQuery append uygulaması
Yani mantık kurarsak “Şunu” , “Şunun sonuna ekle” gibi bir mantığa ulaşıyoruz.
Html kodumuz ;
Js kodlarımız ;
Kodları tek tek açıklıyoruz.
H1 tagının içine ‘Var!’ diye text yazdırıyoruz.
Cerceve claslı div’in sonuna p tagı ekliyoruz ve bundan sonraki işlemde aynıdır.
.removeAttr()
.css()
.addClass()
.hasClass()
.removeClass()
.toggleClass()
.append()
.append to ()
.attr() -> Bu metod sayesinde seçtiğimiz nesnenin özniteliklerine ulaşabiliriz.
1
| $('img').attr('title','okyanus'); |
1
| <img src="resim.png" alt="" title="Gökyüzü" /> |
1
| $('img').attr('alt',''); |
.removeAttr() -> Kullanımı attr() metodu gibidir. Adından da anlaşıldığı gibi seçtiğimiz nesnenin özniteliğini siler.
.css() -> Daha önceki derslerimizde de sık sık kullandığımız bu özellik seçtiğimiz nesnenin css özelliklerine değiştirmemize yarar.
Tek özellik kullanımı için:
1
| $('a').css('text-decoration','none'); |
1
2
3
4
5
6
| $('a').css({'text-decoration':'none','color':'red'}); |
.addClass() -> Yine çok kullandığımız bir metottur. Seçtiğimiz nesneye daha önceden tanımlı bir class atar.
.hasClass() -> Seçtiğimiz nesnenin içinde belirlediğimiz class‘ın olup olmadığına bakar. Sonuç True yada False olarak döner.
.removeClass() -> Seçtiğimiz nesne içindeki belirlediğimiz class‘ı siler.
.toggleClass() -> Seçtiğimiz nesne içinde belirlediğimiz class varsa onu siler yoksa ekler.
1
| $('p').toggleClass('yazi'); |
.append() nedir?
Append fonskiynonu belirtilen bir nesne üzerininin sonuna html tagı veya metin eklemeye yarar. (Detaylı bilgi jquery.com).append() nasıl kullanılır ?
Kodlarla örnek gösterecek olursak ufak bir html kodu oluşturuyoruz.
1
2
3
4
| <div class="cerceve"> <h1>jQuery .append()</h1> <p class="metin">Soru : jQuery append</p></div><!-- cerceve DIV Kapanış --> |
1
2
3
4
5
6
7
| $(document).ready(function(){ $('div.cerceve h1').append(' ~ aycan.net'); $('div.cerceve p').append('<b>nedir? <br> Cevap : Ne bileyim ben arkadaş!</b>'); $('div.cerceve').append('<h1><a href="http://www.aycan.net/"><img src="http://www.aycan.net/wp-content/themes/headlines/images/logo.png" alt="aycan logo"/></a>');}); |
1
| $(document).ready(function(){ .. } |
1
| $('div.cerceve h1').append(' ~ aycan.net'); |
1
| $('div.cerceve p').append('<b>nedir? <br> Cevap : Ne bileyim ben arkadaş!</b>'); |
1
| $('div.cerceve').append('<h1><a href="http://www.aycan.net/"><img src="http://www.aycan.net/wp-content/themes/headlines/images/logo.png" alt="aycan logo"/></a>'); |
Ön izleme;
Örnek : jQuery append uygulaması
.appendTo() nedir?
AppendTo fonskiyonu seçilen nesnenin sonuna bir html tagı olmak şartıyla bir nesne ekler. Deneme yanılma yönetimi ile bu sonuca vardım Html tag kullanmadan düz metin değerleri ekleme işleminde kullanmıyor. Ayrıca yazımıda biraz değişik.(Detaylı bilgi jquery.com).appendTo() nasıl kullanılır ?
1
| $('<htmlTagi>Eklenecek icerik</htmlTagi>').appendTo('eklenecek nesne ') |
Html kodumuz ;
1
2
3
4
| <div class="cerceve"> <h1>jQuery .appendTo()'da değişik birşey </h1> <p class="metin">Hınk ?</p></div><!-- cerceve DIV Kapanış --> |
1
2
3
4
5
6
7
| $(document).ready(function(){ $('<b> var!</b>').appendTo('div.cerceve h1'); $('<p>Farketmedin mi ?</p>').appendTo('div.cerceve'); $('<p>İşleyişi farklı</p>').appendTo('div.cerceve');}); |
1
| $('<b> var!</b>').appendTo('div.cerceve h1'); |
1
| $('<p>Farketmedin mi ?</p>').appendTo('div.cerceve'); |
-DVD-
İlk olarak adres satırına ;
---> ftp://10.100.100.100/ yazıyoruz.
--->Dosyalar arasından Microsoft'u seçiyoruz.
--->Dosyalar arasından OperationSystems 'i tıklıyoruz.
--->Clients 'i tıklıyoruz.
--->windows_7_iso seçiyoruz.
--->Ardından 32/ 'yi seçiyoruz.
--->Ve son olarak 7_pro_x86_TR.iso yu tıklıyoruz.Adımlar sonunda karşımıza çıkacak ekran:
----->"yazdıktan sonra diski doğrula" seceneğini işaretliyoruz.
----> "yaz" a tıklıyarak,işlemi bitiriyoruz.
---> ftp://10.100.100.100/ yazıyoruz.
--->Clients 'i tıklıyoruz.
--->Ardından 32/ 'yi seçiyoruz.
--->Ve son olarak 7_pro_x86_TR.iso yu tıklıyoruz.Adımlar sonunda karşımıza çıkacak ekran:
----->"yazdıktan sonra diski doğrula" seceneğini işaretliyoruz.
----> "yaz" a tıklıyarak,işlemi bitiriyoruz.
5 Eylül 2013 Perşembe
jQuery
Jquery denince akla ilk gelen olgulardan biri de sanırım efektlerdir. Bu yazıda jquery ve efekt fonksiyonlarını yazmaya çalışacağım.
Efekt fonksiyonları Jquery’nin resmi sitesinde 4 gruba ayrılarak anlatılmış, bende o şekilde anlatmayı düşünüyorum. Gruplandırmaya bir göz atalım ;
show Fonksiyonu : Seçilen elemanın görünmesini sağlar. Genelde gizlenmiş bir elemana uygulanır.
toggle Fonksiyonu : Seçilen elemanın hem gizlenmesini, hem görünmesini sağlar. Daha önceki yazılardan hatırlayacağınız gibi bu işlemi aynı fonksiyon bloğu içinde yapmaya yarar.
Temel efekt fonksiyonları ile ilgili bir örnek yapalım. Sayfamızda 3 farklı link bulunsun, birisi hide(), birisi show(), diğeri ise toggle() fonksiyonları ile yüklensin ve linklere tıklandığında efekt işlemi gerçekleştirilsin.
Yukarıda örnekte temel efekt fonksiyonlarının içine slow, fast, 1000 gibi farklı parametreler aldığnı farketmişsinizdir. Bu şekilde kullanımın yanında, aşağıdaki gibi bir kullanım da mümkündür. Ayrıca bu durum tüm efekt fonksiyonları içinde geçerlidir.
fadeOut Fonksiyonu : Elementi şeffaflaştırarak gizler.
fadeIn Fonksiyonu : Opacity değerini 1′e yaklaştırarak gizlenmiş elementi gösterir.
fadeToggle Fonksiyonu : Seçilen element üzerinde opacity değerini her iki yöne (1′e ve 0′a) azaltarak ve artırarak elementi gizler ya da gösterir.
fadeTo Fonksiyonu : Elementin opacity değerini istediğiniz bir değere ayarlamanızı sağlar.
Bu fonksiyonlar ile iligi olarak küçük bir örnek yapalım. 4 farklı link ile fadeOut, fadeIn, fadeToggle ve fadeTo fonksiyonlarını kullanalım ;
slideUp Fonksiyonu : Bu fonksiyon seçtiğiniz elementi yukarı doğru slayt yapar.
slideDown Fonksiyonu : Aşağıya doğru slayt yapmak için kullanabilirsiniz.
slideToggle Fonksiyonu : İki yönlü slayt için kullanabilirsiniz.
Bu fonksiyonları kullanarak yukarıdaki örneklerle aynı formatta başka bir örnek yapalım.
Jqueryde, animate fonksiyonu ile css özelliklerini kullanarak kendi efektlerimizi oluşturabiliyoruz. Özellikle vurgulamak istiyorum, css özelliklerini kullamak zorundayız. Ayrıca kullanılan css özelliğinin değeri sayısal olması gerekiyor. Yani arkaplanı maviyken, kırmızı yapamazsınız. Fakat genişliği 400px’den 500px’e çıkarabilirsiniz, çerçeve kalınlığını artırabilirsiniz, left ve top değerlerini değiştirebilirsiniz. Sayısal özelliklerle ilgili aklınıza ne geliyorsa yapabilirsiniz.
Biz küçük bir örnek yapalım, örneğimizde önce soldan 100 px ilerleyelim, sonra yukarıdan 100px ilerleyelim ardından da padding değerimizi artıralım.
Farkettiyseniz animasyonlar tek tek icra ettiler, hepsini aynı anda yapmak isterseniz şu şekilde kullanabilirsiniz ;
Mesela az önceki örneğimizin üzerinden gidelim ve animate fonksiyonunun linke tıklandıktan 1 saniye sonra gerçekleşmesini sağlayalım.
Son olarak stop fonksiyonunu inceleyelim. Stop fonksiyonu ile icra etmekte olan bir animasyonu durdurabilirsiniz. Hemen görsel olarak da görmek için bir örnek yapalım ;
Efekt fonksiyonları Jquery’nin resmi sitesinde 4 gruba ayrılarak anlatılmış, bende o şekilde anlatmayı düşünüyorum. Gruplandırmaya bir göz atalım ;
- Temel (Basic) Efekt Fonksiyonları
- Karartma (Fading) Fonksiyonlar
- Slayt (Slide) Fonksiyonları
- Özel (Custom) Efekt Fonksiyonları
Temel (Basic) Efekt Fonksiyonları
hide Fonksiyonu : Seçilen elemanı gizler.show Fonksiyonu : Seçilen elemanın görünmesini sağlar. Genelde gizlenmiş bir elemana uygulanır.
toggle Fonksiyonu : Seçilen elemanın hem gizlenmesini, hem görünmesini sağlar. Daha önceki yazılardan hatırlayacağınız gibi bu işlemi aynı fonksiyon bloğu içinde yapmaya yarar.
Temel efekt fonksiyonları ile ilgili bir örnek yapalım. Sayfamızda 3 farklı link bulunsun, birisi hide(), birisi show(), diğeri ise toggle() fonksiyonları ile yüklensin ve linklere tıklandığında efekt işlemi gerçekleştirilsin.
$("a.gizle").click(function(){
$("div").hide("slow");
});
$("a.goster").click(function(){
$("div").show("fast");
});
$("a.gizleGoster").click(function(){
$("div").toggle(1000);
});
Örneği buradan inceleyebilirsiniz. Buradan da indirebilirsiniz.Yukarıda örnekte temel efekt fonksiyonlarının içine slow, fast, 1000 gibi farklı parametreler aldığnı farketmişsinizdir. Bu şekilde kullanımın yanında, aşağıdaki gibi bir kullanım da mümkündür. Ayrıca bu durum tüm efekt fonksiyonları içinde geçerlidir.
$("a").click(function(){
$("div").toggle("slow", function(){
alert("Efekt İşlemi Başarılı !");
});
});
Karartma (Fading) Fonksiyonları
Fading fonksiyoları, seçilen elementin şeffaflık özelliğini (opacity) kullanarak efekt işlemini gerçekleştirir.fadeOut Fonksiyonu : Elementi şeffaflaştırarak gizler.
fadeIn Fonksiyonu : Opacity değerini 1′e yaklaştırarak gizlenmiş elementi gösterir.
fadeToggle Fonksiyonu : Seçilen element üzerinde opacity değerini her iki yöne (1′e ve 0′a) azaltarak ve artırarak elementi gizler ya da gösterir.
fadeTo Fonksiyonu : Elementin opacity değerini istediğiniz bir değere ayarlamanızı sağlar.
Bu fonksiyonlar ile iligi olarak küçük bir örnek yapalım. 4 farklı link ile fadeOut, fadeIn, fadeToggle ve fadeTo fonksiyonlarını kullanalım ;
$("a.gizle").click(function(){ $("div").fadeOut("slow"); });
$("a.goster").click(function(){ $("div").fadeIn("fast"); });
$("a.gizleGoster").click(function(){ $("div").fadeToggle(1000); });
$("a.ayarla").click(function(){
$("div").fadeTo(300,0.3);
});
Sonuca buradan bakabilirsiniz, buradan da indirebilirsiniz.Slayt (Slide) Fonksiyonları
Jquery slide fonksiyonları bir elementin görünüp gizlenmesini aşağıdan yukarıya doğru yapar.slideUp Fonksiyonu : Bu fonksiyon seçtiğiniz elementi yukarı doğru slayt yapar.
slideDown Fonksiyonu : Aşağıya doğru slayt yapmak için kullanabilirsiniz.
slideToggle Fonksiyonu : İki yönlü slayt için kullanabilirsiniz.
Bu fonksiyonları kullanarak yukarıdaki örneklerle aynı formatta başka bir örnek yapalım.
$("a.slideUp").click(function(){
$("div").slideUp("slow");
});
$("a.slideDown").click(function(){
$("div").slideDown("fast");
});
$("a.slideToggle").click(function(){
$("div").slideToggle(1000);
});
Sonucu buradan inceleyebiirsiniz, buradan indirebilirsiniz.Özel (Custom) Efekt Fonksiyonları
Yukarıda efekt fonksiyonlarının en çok kullanılanlarını yazmaya çalıştım. Bu fonksiyonların dışında 3 farklı efekt fonksiyonu daha anlatmak istiyorum.Jqueryde, animate fonksiyonu ile css özelliklerini kullanarak kendi efektlerimizi oluşturabiliyoruz. Özellikle vurgulamak istiyorum, css özelliklerini kullamak zorundayız. Ayrıca kullanılan css özelliğinin değeri sayısal olması gerekiyor. Yani arkaplanı maviyken, kırmızı yapamazsınız. Fakat genişliği 400px’den 500px’e çıkarabilirsiniz, çerçeve kalınlığını artırabilirsiniz, left ve top değerlerini değiştirebilirsiniz. Sayısal özelliklerle ilgili aklınıza ne geliyorsa yapabilirsiniz.
Biz küçük bir örnek yapalım, örneğimizde önce soldan 100 px ilerleyelim, sonra yukarıdan 100px ilerleyelim ardından da padding değerimizi artıralım.
$("div").animate({
left : "100px" },"slow"); // Sola gittik
$("div").animate({
top : "100px" },"slow"); // Aşağı gittik
$("div").animate({
padding : "50px" },"slow"); // Padding değerini arttırdık
Sonuca buradan bakabilirsiniz, buradan indirebilirsiniz.Farkettiyseniz animasyonlar tek tek icra ettiler, hepsini aynı anda yapmak isterseniz şu şekilde kullanabilirsiniz ;
$("div").animate({
left : "100px",
top : "100px",
padding : "50px"
},"slow");
Bir başka özel efetk fonksiyonu olan delay fonksiyonu ile gerçekleştirmek istediğiniz animasyonların gecikmeli olarak gerçekleşmesini sağlayabiliyorsunuz.Mesela az önceki örneğimizin üzerinden gidelim ve animate fonksiyonunun linke tıklandıktan 1 saniye sonra gerçekleşmesini sağlayalım.
$("div").delay(1000).animate({
left : "100px",
top : "100px",
padding : "50px"
},"slow");
Buradan inceleyebilir, buradan indirebilirsiniz.Son olarak stop fonksiyonunu inceleyelim. Stop fonksiyonu ile icra etmekte olan bir animasyonu durdurabilirsiniz. Hemen görsel olarak da görmek için bir örnek yapalım ;
$("a.animate").click(function(){
$("div").animate({
left : "500px",
},3000);
});
$("a.stop").click(function(){
$("div").stop();
});
4 Eylül 2013 Çarşamba
Alert 1 komutunu jquery ile çalıştırma
Web ödevi 2:
<html><head>
<link href="asdf.css" type="text/css" rel="stylesheet" media="all" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
alert(1);
});
</script>
</head>
<body>
<div class="tepe">
<h1>
<img src="resim1.jpg"/>
</h1>
<ul>
<li><a href="#"> Anasayfa </a></li>
<li><a href="#)"> Hakkimda </a></li>
<li><a href="http://isminur-ates.blogspot.com">Blogum</a></li>
<li><a href="#"> Resimlerim </a></li>
<li><a href="#"> Sosyal Aglar </a></li>
</ul>
</div>
<div class="orta">
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li>
<li><a href="0">Hakkimda</a></li>
<li><a href="http://isminur-ates.blogspot.com">Blogum</a></li>
<li><a href="0">Bilgilerim</a></li>
<li><a href="0">Resimlerim</a></li>
<li><a href="0">Sosyal Aglar</a></li>
<li><img src="resim2.jpg"></li>
</ul>
</div>
<div class="alt">
<ul>
<li>Isminur Ates</li>
</ul>
</div>
</body>
</html>
jQuery Nedir? Nasıl çalıştırılır? Bir Web Sayfasında jQuery Çalıştırmak İçin
Yapılması Gereken İşlemler ?
jQuery nedir? jQuery ne işe yarar? jQuery Nasıl Kullanılır? jQuery Nasıl öğrenilir? jQuery’e nereden başlamalıyım? gibi sorular birçok web geliştiricinin kafasını kurcalayan ortak sorulardır. Bu yazımda elimden geldiğince bu sorulara cevap vermeye çalışacağım. Web projeleri geliştirirken zamandan ve emekten tasarruf etmemizi sağlayan jQuery kütüphanesini öğrenmeye başlayacak arkadaşlara yararlı olması dileğimle yazıma başlıyorum.jQuery Nedir? jQuery Ne İşe Yarar?
jQuery HTML dokümanların yönetiminde, animasyon oluşturumunda, etkileşimli sayfaların hazırlanmasında kullanılan daha az kodla, daha efektif daha çok işlerin yapılmasını sağlayan bir WEB etkileşimi sağlayan JavaScript kütüphanesidir. Bir JavaScript framework’üdür desek de yanlış olmaz. jQuery ile slayt, fotogaleri gibi görsel olarak kullanıcılarımızın hoşuna gidecek yapıları kolayca oluşturabiliriz.
Tüm tarayıcılarda tutarlı bir şekilde çalışan bir kütüphane olduğundan projelerimizde gönül rahatlığıyla kullanabiliriz. jQuery’i uygulamalarımızda kullanabilmek için kütüphanenin mevcut dosyalarını projemize dahil etmemiz ve HTML kodlarıyla projemiz içerisinden çağırmamız gerekmektedir. jQuery dosyalarını jQuery’nin resmi sitesi olan jquery.com‘dan indirip kullanmaya başlayabilirsiniz.
Hangi jQuery Dosyasını İndirmeliyim?
jQuery kullanmaya yeni başlayan arkadaşlar bu konuda bazen sıkıntı yaşayabiliyorlar. Mevcut jQuery kütüphanesi üzerinde herhangi bir ek geliştirme yapmayı planlamıyorsanız PRODUCTION dosyalarını indirmeniz sizin için yeterli olacaktır. Fakat jQuery kütüphanesini kendi ihtiyaçlarınıza göre biraz daha geliştirip kullanmak isterseniz DEVELOPMENT dosyalarını indirmeniz gerekmektedir.
jQuery Nasıl Kullanılır?
jQuery dosyasını indirdikten sonra proje klasörünüze kopyaladığınızı varsayarak jQuery’i web projenize nasıl dahil edeceğinizi anlatmak istiyorum. Aşağıdaki kodu sayfanızın <head></head> etiketleri arasına ekleyerek jQuery kütüphanesini projenize dahil edebilirsiniz. Buradaki jquery-1.8.3.js dosya adı olduğundan onu kendinize göre değiştirebilirsiniz.
jQuery Öğrenmeye Nasıl Başlamalıyım?
jQuery öğrenmek isteyen birçok web geliştiricinin aklındaki asıl soru jQuery öğrenmeye nasıl başlayacağıdır. jQuery yukarıda da bahsettiğim gibi bir JavaScript kütüphanesi olduğundan dolayı temel düzeyde de olsa JavaScript biliyor olmalısınız. Tabi buna ek olarak temel düzeyde HTML ve CSS bilgilerine de ihtiyacınız olacak. Eğer okuduğunuzu anlayacak düzeyde ingilizce bilgisine sahipseniz Html, Css ve JavaScipt öğrenmek için w3schools.com‘u tavsiye ederim.
jQuery Nasıl Öğrenilir?
Geldik yazımızın en önemli sorusuna. jQuery Nasıl Öğrenilir? Aslında jQuery öğrenmek için birçok yol mevcut. İlk olarak yeterli ingilizce bilgisine sahipseniz jQuery’nin kendi dökümantasyon sitesini kullanabilirsiniz. Bir diğer seçenek jQuery ile ilgili bir kitap almak olsa da ben internetteki kaynakları kullanmanızdan yanayım. Türkçe kaynaklardan en kolay anlaşılan ve faydalı olduğunu düşündüğüm kaynak ise Tayfun Erbilen’in kendi blogunda yayınladığı jQuery dersleri. Tayfun Erbilen’in jQuery derslerine bu bağlantıdan ulaşabilirsiniz.
jQuery ile ilgili vermek istediğim temel bilgiler bu kadar.
web ödevi
html kodları..
<html>
<head>
<link href="asdf.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body>
<div class="tepe">
<h1>
<img src="resim1.jpg"/>
</h1>
<ul>
<li><a href="#"> Anasayfa </a></li>
<li><a href="#)"> Hakkimda </a></li>
<li><a href="http://isminur-ates.blogspot.com">Blogum</a></li>
<li><a href="#"> Resimlerim </a></li>
<li><a href="#"> Sosyal Aglar </a></li>
</ul>
</div>
<div class="orta">
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li>
<li><a href="0">Hakkimda</a></li>
<li><a href="http://isminur-ates.blogspot.com">Blogum</a></li>
<li><a href="0">Bilgilerim</a></li>
<li><a href="0">Resimlerim</a></li>
<li><a href="0">Sosyal Aglar</a></li>
<li><img src="resim2.jpg"></li>
</ul>
</div>
<div class="alt">
<ul>
<li>Isminur Ates</li>
</ul>
</div>
</body>
</html>
css kodları..
body{}
.tepe{width: 1200px; heigth: 50px; background: brown; overflow:hidden; float: left;}
.tepe h1{float:left;}
.tepe h1 img{width:100px; height:100px; display: block;}
.tepe ul{float:right; background:cyan;}
.tepe ul li{float:left; list-style:none;margin:20px 0 0 0;border-left:4px solid #fff; padding:5px}
.tepe ul li a{color:#333; font-size:16px; text-decoration:none;}
.tepe ul li a:hover{color:#fff;}
.orta{background:cyan; overflow:hidden; width:200px;}
.orta img{width:100px; height:100px}
.orta ul{float:left;}
.orta ul li{list-style:none; margin:25px 50px 0 0; padding:5px;}
.orta ul li a{color:white; font-size:16px; text-decoration:none;}
.orta ul li a:hover{color:#fff;}
.alt{background:brown; overflow:hidden;}
.alt ul{float:right;}
.alt ul li{list-style:none; margin:25px 700px 0 0; padding:5px;}
<html>
<head>
<link href="asdf.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body>
<div class="tepe">
<h1>
<img src="resim1.jpg"/>
</h1>
<ul>
<li><a href="#"> Anasayfa </a></li>
<li><a href="#)"> Hakkimda </a></li>
<li><a href="http://isminur-ates.blogspot.com">Blogum</a></li>
<li><a href="#"> Resimlerim </a></li>
<li><a href="#"> Sosyal Aglar </a></li>
</ul>
</div>
<div class="orta">
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li>
<li><a href="0">Hakkimda</a></li>
<li><a href="http://isminur-ates.blogspot.com">Blogum</a></li>
<li><a href="0">Bilgilerim</a></li>
<li><a href="0">Resimlerim</a></li>
<li><a href="0">Sosyal Aglar</a></li>
<li><img src="resim2.jpg"></li>
</ul>
</div>
<div class="alt">
<ul>
<li>Isminur Ates</li>
</ul>
</div>
</body>
</html>
css kodları..
body{}
.tepe{width: 1200px; heigth: 50px; background: brown; overflow:hidden; float: left;}
.tepe h1{float:left;}
.tepe h1 img{width:100px; height:100px; display: block;}
.tepe ul{float:right; background:cyan;}
.tepe ul li{float:left; list-style:none;margin:20px 0 0 0;border-left:4px solid #fff; padding:5px}
.tepe ul li a{color:#333; font-size:16px; text-decoration:none;}
.tepe ul li a:hover{color:#fff;}
.orta{background:cyan; overflow:hidden; width:200px;}
.orta img{width:100px; height:100px}
.orta ul{float:left;}
.orta ul li{list-style:none; margin:25px 50px 0 0; padding:5px;}
.orta ul li a{color:white; font-size:16px; text-decoration:none;}
.orta ul li a:hover{color:#fff;}
.alt{background:brown; overflow:hidden;}
.alt ul{float:right;}
.alt ul li{list-style:none; margin:25px 700px 0 0; padding:5px;}
3 Eylül 2013 Salı
Yazılım
DocType (Document Type - Belge Tipi) Nedir ?DocType; sayfada kullanılan standartı browsera (tarayıcı) bildirmek için kullanılan bir yöntemdir.
Neden DocType Kullanılmalı ?
HTML`in ilk zamanlarında her tarayıcı sayfayı farklı yorumlamaktaydı. Bu sorundan dolayı standartlara uyum için DocType yöntemi geliştirildi.
Artık tarayıcılar kullandığınız belge tipine göre sayfayı standart kipde (standards mode) kurallara uygun şekilde farklı yorumlanmaktadır.
Hiçbir belge tipi kullanmadığında ise sayfa eski usul garip kipde (Quirks mode) yorumlanmaktadır.
Tarayıcı tarafından garip kipde yorumlanan sayfalar her tarayıcının yorumuna göre farklı çıkmaktadır. Bu da tasarımcıların her tarayıcıda aynı görünen sayfalar hazırlamasını son derece zorlaştırmaktadır.
Html tagı nedir?
Html sayfalarının içersinde bulunan ve internet explorer gibi tarayıcılar tarafından yorumlanarak görsel hale getirilen yazılardır.
basit bir tag örneği:
<b>Yazı</b>
yukarıdaki yazı internet sayfasında ise bu yazı kullanıcıya aşağıdaki gibi yansıtılacaktır.
Yazı
Burada kullanılan <B> işareti BOLD kelimesinin kısaltması olup anlamı koyu harflerle yazılmış yazıdır.
HEAD etiketi ne işe yarar?
Yukarıda da gördüğünüz gibi HTML içerisinde ilk kullanılan etikettir. Bu etiket içerisinde bir ise başa tanımlama etikleri kullanılır. Kullanılan bu etiketler Meta etiketler, Stil etikteri, yardımcı etiketler olarak adlandırılır.
Bu etiketlerle Sitemizin tanımlamarını sağlarız, mesela sitemizin açıklama yazısını, tanımla kelimelerini, sitemizi kimin yaptığını, dışarıdan kullandığı stil (CSS) dosyalarını gösteririz, kullandığımız diğer yardımcı dilleri bu alanda sitemizin içerisine çağırırız,
Kısacası, Sitemizin baştan aşağı tanımlamasını, bu etiketin çerçevesi içerisinde yaparız.
<!--...--> Açıklama yazmak için kullanılır
<!DOCTYPE> Dosya tipini belirtir
<a> Link belirtir
<abbr> Yazının bir kısaltma olduğunu belirtir
<acronym> Kelimenin başharfleri olduğunu belirtir
<address> iletişim adresleri için kullanılır
<applet> Gömülü aplet eklemekte kullanılır(html 4 ile bu özellik iptal edilmiştir)
<area /> Resmin parçalarına ait link vermeyi sağlar
<b> Koyu harfli yazı
<base /> Tüm linkler için kaynak kök adresi belirtir
<basefont /> Fon tipi belirtir (html 4 ile bu özellik iptal edilmiştir)
<bdo> Yazının yönünü belirler
<big> Büyük yazı tanımlar
<blockquote> Uzun alıntı metin olduğunu gösterir
<body> Dosyanın ana kısmını gösterir
<br /> Alt satıra geçiş işaretidir
<button> Gönderme butonu üretir
<caption> Tablo başlığı yazar
<center> Elemanı sayfada ortalar (html 4 ile bu özellik iptal edilmiştir)
<cite> Alıntı belirtir
<code> Bilgisayar kodları belirtir
<col /> Tablo sütunları için özellik verir
<colgroup> TAblodaki bir grup sütuna özellik verir
<dd> Tanım Listesi
<del> Silinmiş yazı
<dir> Klasör listesi belirtir (html 4 ile bu özellik iptal edilmiştir)
<div> Dökümanda bir bölümü temsil eder
<dfn> Tanım kelimesini gösterir
<dl> Tanım listesi elemanı
<dt> Tanım listesindeki elemanlardan biridir
<em> Vurgulanmış yazı
<fieldset> Form için çerçeve üretir
<font> Yazı özellikleri belirtir (html 4 ile bu özellik iptal edilmiştir)
<form> Bilgi yayıt formu
<frame /> Sayfa içinde gömülü pencere açar
<frameset> Sayfada bölme yapar
<h1> ile <h6> arası Başlık yazısı belirler
<head> Dökümanın temel başlık elemanlarını içerir
<hr /> Yatay çizgi
<html> sayfa türünü belirtir
<i> Eğik yazı
<iframe> Başka bir sayfayı dökümanda gösterir
<img /> Resim
<input /> Form için bilgi alanı
<ins> Eklenmiş yazı
<isindex> Dökümana ait arama kelimesi (html 4 ile bu özellik iptal edilmiştir)
<kbd> Klavye yazısı
<label> Form için metin etiketleri
<legend> Form çerçevesi için açıklama
<li> Liste elemanı
<link /> Dökümana dışardan bir kaynak bağlar
<map> resim için parçaları tanımlar
<menu> Menü listesi (html 4 ile bu özellik iptal edilmiştir)
<meta /> Dökümana ait önemli tanımlamaları içerir
<noframes> Frame özelliği kapalı ise gösterilecek yazı
<noscript> Javascript kapalı isse gösterilecek yazı
<object> Gömülü uygulamalar
<ol> Düzenli Liste
<optgroup> Seçim listesindeki alkalı bileşenler
<option> Seçim listesindeki elemanlar
<p> Paragraf başı
<param /> Gömülü uygulamalar için ayar kısmı
<pre> Düz yazı biçimi
<q> Kısa alıntı
<s> Üseri çizili yazı (html 4 ile bu özellik iptal edilmiştir)
<samp> Örnek bilgisayar kodu gösterir
<script> Kullanıcı taraflı uygulama
<select> Seçim listesi
<small> Küçük yazı
<span> Dökümanda bir bölümü gösterir
<strike> Üzeri çizili ayzı (html 4 ile bu özellik iptal edilmiştir)
<strong> Kalın yazı
<style> Elemanların görünümünü belirten şekiller
<sub> Alt yazı
<sup> Üst yazı
<table> Tablo
<tbody> Tablo grubu
<td> Tablonun bir gözü
<textarea> Form için uzun yazı alanı
<tfoot> Tablonun dip kısmı
<th> Tablodaki başlık alanı
<thead> Tablo başlık grubu
<title> Dökümanın ana başlığı
<tr> Tablonun bir satırı
<tt> özel metin
<u> Altı çizili yazı (html 4 ile bu özellik iptal edilmiştir)
<ul> Düzensiz liste
<var> Yazı içinde değişken tanımı
<xmp> Ön tanımlı yazı (html 4 ile bu özellik iptal edilmiştir)
Css Özellikleri:
HTML ilk üretildiğinde yazı rengi ve boyu gibi özellikleri tag´lar ile tanımlayacağı düşünülmedi. ilk Html sürümünde aşağıdaki gibi temel taglar kullanıldı.
<h1>Başlık yazısı</h1>
<p>Paragraf yazısı</p>
Daha sonra html 3.2 sürümüyle <font> gibi taglar sunulduğundarenk ve yazı boyu gibi alt özellikler gelişmeye başladı. Fakat çok büyük web sayfalarında bu durum tasarımcı için sıkıntılı olmaya başladı. çünkü sonradan doğru tagı bulmak ve değiştirmek zorlaşıyordu.
Bu sorunu çözmek için Dünya internet topluluğu (W3C) html 4.0 sürümü ile CSS yapısını geliştirdi. Böylece boyut ve şekil bilgileri sayfada olmak yerine CSS uzantılı tek bir dosyada toplandı. Bu sayede web tasarımcı sayfanın görünümünü değiştirmek istediğinde tek yapması gereken CSS dosyasını açmaktı. böylece web sayfasında bir anda birçok sayfa değişmiş oluyordu.
Background Nedir?
CSS‘in Background satırı arka plan görsellerimizin seçimini, yerleşimini, boyutunu ve pozisyonunu yönetmemizi sağlar.
Ve diğerleri....
text- decoration: Yazının biçiminde değişiklik yapmayı sağlar.
border: Kenarlıkları belirler.
owerflow : Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
font-weight: Yazının kalın olmasını sağlar.
width: Genişliği belirler.
height: Yüksekliği belirler.
display: Elemanın nasıl görüneceğini beirler.
list-style: Liste biçiminin resimli olmasını sağlar.
padding: Tablo kenarları ile tablo içeriği arasında bırakılacak boşluğu belirler.
margin: Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
color: Yazının rengini belirler.
font-size: Yazı boyutunu belirler.
float: Bir elemanın yerini ayarlamayı sağlar.
Html için etiketler:
Neden DocType Kullanılmalı ?
HTML`in ilk zamanlarında her tarayıcı sayfayı farklı yorumlamaktaydı. Bu sorundan dolayı standartlara uyum için DocType yöntemi geliştirildi.
Artık tarayıcılar kullandığınız belge tipine göre sayfayı standart kipde (standards mode) kurallara uygun şekilde farklı yorumlanmaktadır.
Hiçbir belge tipi kullanmadığında ise sayfa eski usul garip kipde (Quirks mode) yorumlanmaktadır.
Tarayıcı tarafından garip kipde yorumlanan sayfalar her tarayıcının yorumuna göre farklı çıkmaktadır. Bu da tasarımcıların her tarayıcıda aynı görünen sayfalar hazırlamasını son derece zorlaştırmaktadır.
Html tagı nedir?
Html sayfalarının içersinde bulunan ve internet explorer gibi tarayıcılar tarafından yorumlanarak görsel hale getirilen yazılardır.
basit bir tag örneği:
<b>Yazı</b>
yukarıdaki yazı internet sayfasında ise bu yazı kullanıcıya aşağıdaki gibi yansıtılacaktır.
Yazı
Burada kullanılan <B> işareti BOLD kelimesinin kısaltması olup anlamı koyu harflerle yazılmış yazıdır.
Head nedir?
Bu tag'ın adı < HEAD > </ HEAD> yani BAŞ, ÜST anlamına da gelen HTML etiketlerinden ilkidir.HEAD etiketi ne işe yarar?
Kod:
<! docteyps> <html> <head> Tanımlama bilgileri (Meta Etiketleri, Stil Etiketleri, Yardımcı Etiketler) </head> </html>
Bu etiketlerle Sitemizin tanımlamarını sağlarız, mesela sitemizin açıklama yazısını, tanımla kelimelerini, sitemizi kimin yaptığını, dışarıdan kullandığı stil (CSS) dosyalarını gösteririz, kullandığımız diğer yardımcı dilleri bu alanda sitemizin içerisine çağırırız,
Kısacası, Sitemizin baştan aşağı tanımlamasını, bu etiketin çerçevesi içerisinde yaparız.
<!--...--> Açıklama yazmak için kullanılır
<!DOCTYPE> Dosya tipini belirtir
<a> Link belirtir
<abbr> Yazının bir kısaltma olduğunu belirtir
<acronym> Kelimenin başharfleri olduğunu belirtir
<address> iletişim adresleri için kullanılır
<applet> Gömülü aplet eklemekte kullanılır(html 4 ile bu özellik iptal edilmiştir)
<area /> Resmin parçalarına ait link vermeyi sağlar
<b> Koyu harfli yazı
<base /> Tüm linkler için kaynak kök adresi belirtir
<basefont /> Fon tipi belirtir (html 4 ile bu özellik iptal edilmiştir)
<bdo> Yazının yönünü belirler
<big> Büyük yazı tanımlar
<blockquote> Uzun alıntı metin olduğunu gösterir
<body> Dosyanın ana kısmını gösterir
<br /> Alt satıra geçiş işaretidir
<button> Gönderme butonu üretir
<caption> Tablo başlığı yazar
<center> Elemanı sayfada ortalar (html 4 ile bu özellik iptal edilmiştir)
<cite> Alıntı belirtir
<code> Bilgisayar kodları belirtir
<col /> Tablo sütunları için özellik verir
<colgroup> TAblodaki bir grup sütuna özellik verir
<dd> Tanım Listesi
<del> Silinmiş yazı
<dir> Klasör listesi belirtir (html 4 ile bu özellik iptal edilmiştir)
<div> Dökümanda bir bölümü temsil eder
<dfn> Tanım kelimesini gösterir
<dl> Tanım listesi elemanı
<dt> Tanım listesindeki elemanlardan biridir
<em> Vurgulanmış yazı
<fieldset> Form için çerçeve üretir
<font> Yazı özellikleri belirtir (html 4 ile bu özellik iptal edilmiştir)
<form> Bilgi yayıt formu
<frame /> Sayfa içinde gömülü pencere açar
<frameset> Sayfada bölme yapar
<h1> ile <h6> arası Başlık yazısı belirler
<head> Dökümanın temel başlık elemanlarını içerir
<hr /> Yatay çizgi
<html> sayfa türünü belirtir
<i> Eğik yazı
<iframe> Başka bir sayfayı dökümanda gösterir
<img /> Resim
<input /> Form için bilgi alanı
<ins> Eklenmiş yazı
<isindex> Dökümana ait arama kelimesi (html 4 ile bu özellik iptal edilmiştir)
<kbd> Klavye yazısı
<label> Form için metin etiketleri
<legend> Form çerçevesi için açıklama
<li> Liste elemanı
<link /> Dökümana dışardan bir kaynak bağlar
<map> resim için parçaları tanımlar
<menu> Menü listesi (html 4 ile bu özellik iptal edilmiştir)
<meta /> Dökümana ait önemli tanımlamaları içerir
<noframes> Frame özelliği kapalı ise gösterilecek yazı
<noscript> Javascript kapalı isse gösterilecek yazı
<object> Gömülü uygulamalar
<ol> Düzenli Liste
<optgroup> Seçim listesindeki alkalı bileşenler
<option> Seçim listesindeki elemanlar
<p> Paragraf başı
<param /> Gömülü uygulamalar için ayar kısmı
<pre> Düz yazı biçimi
<q> Kısa alıntı
<s> Üseri çizili yazı (html 4 ile bu özellik iptal edilmiştir)
<samp> Örnek bilgisayar kodu gösterir
<script> Kullanıcı taraflı uygulama
<select> Seçim listesi
<small> Küçük yazı
<span> Dökümanda bir bölümü gösterir
<strike> Üzeri çizili ayzı (html 4 ile bu özellik iptal edilmiştir)
<strong> Kalın yazı
<style> Elemanların görünümünü belirten şekiller
<sub> Alt yazı
<sup> Üst yazı
<table> Tablo
<tbody> Tablo grubu
<td> Tablonun bir gözü
<textarea> Form için uzun yazı alanı
<tfoot> Tablonun dip kısmı
<th> Tablodaki başlık alanı
<thead> Tablo başlık grubu
<title> Dökümanın ana başlığı
<tr> Tablonun bir satırı
<tt> özel metin
<u> Altı çizili yazı (html 4 ile bu özellik iptal edilmiştir)
<ul> Düzensiz liste
<var> Yazı içinde değişken tanımı
<xmp> Ön tanımlı yazı (html 4 ile bu özellik iptal edilmiştir)
CSS Nedir?
Css internet sayfalarının görünümünü değiştiren bir tanım dosyasıdır. CSS kendine has kuralları olan bir tanım dilidir denilebilir. CSS Sayfa içersindeki her bir elemana ait farklı özellik atamayı sağlarCss Özellikleri:
- Html sayfasındaki nesnelerin görüntüsünü belirler
- Html 4.0 sürümü ile stil dosyaları geliştirilmiştir
- CSS ayrı bir dosyada *.css uzantısı ile saklanabilir. Bu işlem sayfanın daha hızlı açılmasını sağlar
- Elemanlar üzerinde style="" parametresi ile özel kısa tanımlar yapılabilir
HTML ilk üretildiğinde yazı rengi ve boyu gibi özellikleri tag´lar ile tanımlayacağı düşünülmedi. ilk Html sürümünde aşağıdaki gibi temel taglar kullanıldı.
<h1>Başlık yazısı</h1>
<p>Paragraf yazısı</p>
Daha sonra html 3.2 sürümüyle <font> gibi taglar sunulduğundarenk ve yazı boyu gibi alt özellikler gelişmeye başladı. Fakat çok büyük web sayfalarında bu durum tasarımcı için sıkıntılı olmaya başladı. çünkü sonradan doğru tagı bulmak ve değiştirmek zorlaşıyordu.
Bu sorunu çözmek için Dünya internet topluluğu (W3C) html 4.0 sürümü ile CSS yapısını geliştirdi. Böylece boyut ve şekil bilgileri sayfada olmak yerine CSS uzantılı tek bir dosyada toplandı. Bu sayede web tasarımcı sayfanın görünümünü değiştirmek istediğinde tek yapması gereken CSS dosyasını açmaktı. böylece web sayfasında bir anda birçok sayfa değişmiş oluyordu.
Background Nedir?
CSS‘in Background satırı arka plan görsellerimizin seçimini, yerleşimini, boyutunu ve pozisyonunu yönetmemizi sağlar.
Overflow Nedir? Nasıl Kullanılır?
CSS anlatımlarımıza devam ediyoruz arkadaşlar. Şimdi sizlere CSS‘de overflow tekniğinden bahsedeceğim. Öncelikle Overflow tekniğini tanımlamak gerekir ise, şöyle ki; Örnek olarak bir yazıyorsunuz ve yazdığınız yazı çok uzun. Dolayısı ile yazdığınız yazı taşıyor. İşte, tam bu anda yardımınıza Overflow yetişiyor. Çünkü Overflow tekniği ile belirlediğiniz yükseklik doğrultusunda, yazınızın taşmamasını sağlıyorsunuz. Yani çıkan kaydırma çubuğu ile, yazdığınız yazı belirlediğiniz yükseklik doğrultusunda kalıyor ve taşmamış oluyor.Ve diğerleri....
text- decoration: Yazının biçiminde değişiklik yapmayı sağlar.
border: Kenarlıkları belirler.
owerflow : Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
font-weight: Yazının kalın olmasını sağlar.
width: Genişliği belirler.
height: Yüksekliği belirler.
display: Elemanın nasıl görüneceğini beirler.
list-style: Liste biçiminin resimli olmasını sağlar.
padding: Tablo kenarları ile tablo içeriği arasında bırakılacak boşluğu belirler.
margin: Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
color: Yazının rengini belirler.
font-size: Yazı boyutunu belirler.
float: Bir elemanın yerini ayarlamayı sağlar.
Html için etiketler:
Metin Biçimlendirme Etiketleri
| Tag | Açıklama |
|---|---|
| <b> | Koyu metin |
| <big> | Büyük metin |
| <em> | Vurgulanmış metin |
| <i> | İtalik metin |
| <small> | Küçük metin |
| <strong> | Güçlü metin |
| <sub> | Alt indis metini |
| <sup> | Üst indis metini |
| <ins> | Altı çizili metin |
| <del> | Üstü çizili metin |
| <s> | Önemsiz etiket, bunun yerine <del> kullanınız. |
| <strike> | Önemsiz etiket, bunun yerine <del> kullanınız. |
| <u> | Önemsiz etiket, bunun yerine styles kullanınız. |
"Programlama Dilleri" Etiketleri
| Tag | Açıklama |
|---|---|
| <code> | Programlama dili metini |
| <kbd> | Klavye metini |
| <samp> | Örnek bilgisayar kodu metini |
| <tt> | Tele tip metin |
| <var> | Değişken |
| <pre> | Biçimlendirilmemiş metin. |
| <listing> | Önemsiz etiket, bunun yerine <pre> kullanınız. |
| <plaintext> | Önemsiz etiket, bunun yerine <pre> kullanınız. |
| <xmp> | Önemsiz etiket, bunun yerine <pre> kullanınız. |
Alıntılar ve Açıklamalar İle İlgili Etiketler
| Tag | Description |
|---|---|
| <abbr> | Kısaltma |
| <acronym> | Baş harfleri ile kısaltma |
| <address> | Adres öğesi |
| <bdo> | Metin yönü |
| <blockquote> | Uzun alıntı |
| <q> | Kısa alıntı |
| <cite> | Alıntı |
| <dfn> | Tanımlama terimi |
En Çok Kullanılan Özel Karakterler
| Sonuç | Açıklama | Özel karakterleri | Numaralı Hali |
|---|---|---|---|
| Fazladan boşluk | |   | |
| < | Küçüktür | < | < |
| > | Büyüktür | > | > |
| & | Ve | & | & |
| " | Alıntı | " | " |
| ' | apostorof | ' (IE'de çalışmaz) | ' |
Bazı Başka Özel Karakterler
| Result | Description | Özel karakterleri | Numaralı Hali |
|---|---|---|---|
| ¢ | Cent | ¢ | ¢ |
| £ | Pound | £ | £ |
| ¥ | Yen | ¥ | ¥ |
| € | Euro | € | € |
| § | Section | § | § |
| © | Copyright | © | © |
| ® | Kayıtlı marka | ® | ® |
| × | Çarpma | × | × |
| ÷ | Bölme | ÷ | ÷ |
İnternet Omurgası
Merhabalar, bu yazımda daha çok yeni başlayanların dikkatini çekebilecek bir konuyu ele aldım. Çok basit bir şekilde İnternet & İntranet & Extranet kavramlarından bahsettim ve maddeler halinde bir takım özelliklerini anlattım. Tabiki bu yazı bu kavramları anlatmak için oldukça kısa, ama en azından bir fikir olması açısından yardımcı olacağını düşünüyorum :) Umarım birazcık da olsa yardımcı olur.
INTERNETİnternet iletişim ağı olarak tanımlanır ve bu iletişim ağı üzerinden her kullanıcının (Tabiki izin verilmesi halinde) kolaylıkla ulaşabileceği bilgiler sunar. Yani bir nevi dosya paylaşım ve haberleşme ortamıdır denebilir.
Internet, TCP/IP protokolü ile desteklenen pek çok servis sunar. Örnek verecek olursak, Internet erişimi olan bir kullanıcı, kendisine yetki verilmesi halinde, Internete bağlı diğer herhangi bir kullanıcıyla iletişime geçip, paylaşımda bulunabilir. İletişime geçmesi, posta iletim protokolü; bilgi paylaşımıysa dosya transfer protokolü olarak bilinir.
Ayrıca İnternet araçları sayesinde de bilgiye ulaşım daha da kolaylaşmış ve ulaşılabilecek bilgiler ve sunulan servisler, miktar ve çeşit olarak artış göstermiştir.
Peki dosyalarımızı paylaştığımız, haberleşmeyi sağladığımı İnternet ne kadar güvenli? İnternet'in, şu an için, çok fazla güvenli olduğu söylenemez. Çok nadiren de olsa; kişisel iletiler, kötü amaçlı ve profesyonel kişiler tarafından yasal olmayan yollarla ele geçirilebilir. Özellikle ticari kuruluşların İnternet'i kullanmaya başlamaları ile birlikte (İnternete başlamaları dedik çünkü ilk başta İnternet sadece akademik kurumlar, üniversiteler, devlet daireleri gibi alanlarla sınırlandırılmıştı. Ticari boyut sonradan ortaya çıktı.), Internet'te güvenlik probleminin çözümü için ciddi çalışmalar yapılmış ve hala güvenlik çalışmaları hız kesmenden günümüze kadar devam etmiştir. Bu yüzden, şuanda bile ki güvenlik düzeyi eskiye nazaran çok üst düzeyde, bir paylaşım yaparken ya da email atarken çok dikkatli olmalıyız ve içerisinde kesinlikle şifre veya gizli bilgileri bulundurmamalıyız.
Türkiye’ye gelecek olursak: Türkiye, Internet’e ilk bağlantısını Nisan 1993 yılında yapmıştır. Hatta ilk bağlantı ODTÜ’den gerçekleştirilmiştir. Bu hat 64kbit/sn hızında ve çok uzun bir sürede tüm ülkenin tek çıkışı olmuştur. Daha sonra, Ege Üniversitesi’nden bir bağlantı gerçekleştirilmiştir, bu da 1994 yılının başlarına denk gelmiştir ve yine hızı 64kbit/sn’dir. Hemen ardından da sırayla: Bilkent Üniversitesi (Eylül 1995), Boğaziçi Üniversitesi (Kasım 1995) ve İTÜ (Şubat 1996) İnternet çıkış bağlantıları gerçekleşmiştir. Ağustos 1996 ayında da Turnet çalışmaya başlamış, 1997 yılına gelindiğinde, ULAKNET (Akademik kuruluşların internet bağlantısını sağlayan kurumdur.) çalışmaya başlamıştır. Böylece üniversiteler omurga yapısıyla birbirlerine bağlanmış ve İnternet kullanır hale gelmiştir. 1999-2000 yılı içerisinde, TURNET'in yerini TTnet adını almış, ticari kullanıcılar için TTNet omurgası üzerinden; akademik kuruluşlar ve ilgili birimler de Ulaknet omurgası üzerinden İnternet erişimine sahip olmuş olmuşlardır.
Şu anda Türkiye'nin Internet çıkışını sağlayan merkezler özetle üç ana grupta toplanabilir:
- Üniversite İnternet bağlantı çıkışları
- TTNET İnternet bağlantı çıkışları
- TTNET ile yapılan İnternet Erişim Noktasi (İEN) anlaşması sonrasında kullanılan firma bazlı doğrudan yurtdışı İnternet bağlantı çıkışları
Kaydol:
Yorumlar (Atom)