Eki 22

CSS’e geçişte en çok düşündüren konu niye CSS geçelim ve CSS’in avantajları nelerdir? CSS’in avantajı bize web sayfasındaki elemanlara daha fazla müdahele etme imkanı vermesidir. Burada bunun en güzel örneklerinden birini göreceğiz. Devamını Okuyun »

Eki 22

CSS’in YapısıCSS’in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value). Devamını Okuyun »

Eki 22

CSS kullanımı ile birlikte bazı HTML elementlerinin kullanımı azalmış hatta oratadan kalkmıştır.Kullanım dışı olan elementleri sıralarsak: Devamını Okuyun »

Eki 22

CSS kullanımı ile tedavülden kalkan veya kullanımı azalan özellikleri sıralayalım: Devamını Okuyun »

Eki 22

CSS kullanımı ile tedavülden kalkan veya kullanımı azalan özellikleri sıralayalım: Devamını Okuyun »

Eki 22

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. Devamını Okuyun »

Eki 22

etiketler :IE 6.0+’daki image bar ‘ı(REsimlerin üzerine gelince sağ üstte çıkan bar) kaldırmak için

  1. <meta http-equiv=”image-toolbar” content=”no”>

eklenmeli, ayrıca her resim için ayrı ayrı atmada yapılabilir.

  1. <img src=”deneme.gif” mce_src=”deneme.gif” width=”450″ height=”450″ alt=”Dene” galleryimg=”no” />

Kaynak: Fatih Hayrioğlu

Eki 22

Bir şeyin karesinin alırken (x)html’de <sup> etiketi yerine alt+253 kullanın. Küp için alt+251 tuş kombinasyonlarını kullanarak <sup> ile oluşan satır yüksekliği sorununu halletmiş oluruz.

Kaynak: Fatih Hayrioğlu

Eki 22

Bir form ekledik ancak bu formu <input type=”submit” …/> elementi ile değil de, resimden linkle formu göndermek için:

  1. <a href=”#” mce_href=”#” onclick=”document.formun_adi.submit(); “>resim</a>

Aynı şekilde silme işlemi için:

  1. <a href=”#” mce_href=”#” onclick=”document.formun_adi.reset(); “>resim</a>

kullanılabilir.

Kaynak: Fatih Hayrioğlu

Eki 22

Bazı kullanıcı giriş alanlarında(textbox) daha önceden girilen değerlerin hafızada tutulmasını istemeyiz. Örneğin kullanıcı adı vb. Bunun için çok kısa bir kod eklememiz yeterlidir.

  1. <input type=”text” autocomplete=”off” />

Kaynak: Fatih Hayrioğlu

Eki 22

img elementinin alt özelliği kullanımı bize bir çok avantaj sağlayacaktır. Bir çok araç da(resimi desteklemyenler ve resimlerin yüklenmediği durumlarda) alternatif metin çıkacaktır, Google bu metni indeksleyecektir(arama motorlarında daha üst sıralar) ve gelişmiş web tarayıcıları tooltip olarak gösterecektir bu metni. Daha çok bilgilendirici metinlerin kullanılması daha iyidir.

  1. <img src=”/images/xhml_dorulama.gif” alt=”XHTML Uygun Kod” />

Kaynak: Fatih Hayrioğlu

Eki 22

DOCTYPE, HTML veya (X)HTML dökümanımızın tipini göstermek için kullandığımız bir koddur.DOCTYPE bildirimi (X)HTML kodunun başına bir veya iki satır olarak eklenir. Genel kullanımı:

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Devamını Okuyun »

Eki 22

CSS’in en büyük avantajlarından biri ve en önemlisi başka bir koda(XHTML hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır. CSS 1996′dan beri kullanıla gelen bir standart olsa da popülaretesini Zen Garden’ın sayfa planlaması için kullanmaya başlamasından sonra arttırmıştır. Eskiden sayfayapısını tablolarla oluştururduk. Bu kullanımın bir çok sorunları vardı. Bunları aşmak için CSS ile sayfa planlama metodları kullanılmaya başlanmıştır. Biz burada bu konudan bahsedeceğiz. Devamını Okuyun »

Eki 22

Elastik Web Sayfaları OluşturmaLikid Sayfalar yüksek çözünürlüğe sahip geniş ekranlarda satır yüksekliklerinden dolayı pek hoş görünmeyebilir. Bunun aksine, daraltılmış pencerelerde çok kısa ve parçalanmış görüneceklerdir ve metin boyutu arttırıldığında üst üste binmiş satırlarda görüneceklerdir. Bununla ilgili olarak elastik sayfa oluşturma metodu bize yardım edecektir. Devamını Okuyun »

Eki 22

CSS’de etkinliğin anlamı stil çatışması(aynı elemente birden fazla tanım yapıldığında) olduğunda kullanılan hangi kodun web tarayıcıları tarafından yorumlanacağını belirlemektir. Bir XHTML sayfamıza iki adet stil dosyası eklediğimizi düşünelim. Fakat bu stil dosyalarımızdan birinde h1 elementine bold özelliği atanmışken diğer stil dosyamızda italiktik özelliği atanmış. Bu durumda web tarayıcıları hangisini uygulayacaktır. Hangisinin etkin olduğunu bulup ona göre sayfayı yorumlayacaktır.

Burada iki tanımlamanın yakınlık dereceleri aynı. O zaman hangisi uygulanacak. Böyle Devamını Okuyun »

Eki 22

Bir kapsayıcı kutunun genişlik değerini minimum ve maksimum değerleri ile sınarlandırabilriz. Bu özellikler CSS2 ile birlikte gelmiştir. Devamını Okuyun »

Eki 22

Statik sayfalarda yönlendirme için javascript ve xhtml kullanırız. Javascript’in location.href özelliği bize mevcut sayfa URL’sine yazma ve okuma izni verir. Bir çok uygulamada kullanılabileceğimiz güzel bir özelliktir bu. Örneğin yönlendirme için kullanalıbilir. Kodumuzu yazarsak:

  1. <script>
  2. location.href="DigerSayfa.html" mce_href="DigerSayfa.html";
  3. </script>

Ayrıca xhtml ile de bu işi yapabiliriz.

  1. <head>
  2. <meta http-equiv="Refresh" content="5; URL=DigerSayfa.html" />
  3. </head>

Burdaki 5 değeri web tarayıcısının yönlendirmeden önceki beklediği değeri gösterir. Değer saniye cinsindendir.

Eğer yönlendirme yapayım ama geri tuşuna basınca önceki sayfaya gitmesin diyorsak location.replace özelliğini kullanmalıyız.

  1. <script>
  2. location.replace("DigerSayfa.html");
  3. </script>

Kaynak: Fatih Hayrioğlu

Eki 22

Eski versiyon web tarayıcılarında javascript kodlarımız saklamak için aşağıdaki yöntemi kullanırız.

  1. <script language="JavaScript"><!--
  2. // ...
  3. //--></script>

Eğer bu yöntemi dışarıdan javascirpt kodu çağırdığımız sayfalarda kullanırsak. Eski web tarayıcıları bu kodu göremeyecek ve geçecektir. Bu da eski web tarayıcılarına daha az kod yorumlama olanağı sağlayacaktır.

Kaynak: Fatih Hayrioğlu

Eki 22

CSS ile sayfa kodlaması yaparken karşımıza çıkan sorunlardan biridir Aksak Kolonlar(faux column). Genelde isimlendirme olarak Faux Kolon diye geçsede ben burada Aksak kolon olarak kullanacağım. Basit bir örnek verecek olursak; içerik ve sağ kolon diye iki kolondan oluşan bir yapımız olsun. Bu kolonların zemin renklerinin farklı olduğunu düşünelim. Aşağıdaki şekildeki gibi Devamını Okuyun »

Eki 22
  • Google Maps: Google haritasını kendi siteniz içine kelmenizi ve düzenlmenizi sağlar. Sitenize mesela şirketinizin yerin gösteren bir kroki gibi Google Map’deki şireketiniz gösterne yeri ekleyebilirsiniz.
  • Google Search: En popüler arama motoru Google’un armasını sitenize keleyebilir ve istediğiniz aram koşullarına göre aram yaptırabilirsiniz.
  • Google Checkout: Online alışveriş için Google Checkout hesabanıza direk yönlendirmek yaparak çok kolya bir şekilde alışveriş imkanı sağlayabilirsiniz.Dreamweaver Tools for Google’¢ 1.0.0 indirmek ve iayrıntılı bilgi almak için tıklayınız.

 Kaynak: Fatih Hayrioğlu