Stil Sayfasını HTML İçerisinde Çağırmak (CSS)

Tarih: Ağustos 10, 2008 Yazar:  
Kategori: CSS Makaleleri


Dış Stil Sayfası (External Style Sheets)

Birden fazla sayfada tek tip stil kullamak için “style” dosyası oluşturmamız gerekir. Oluşturacağımız stil dosyasının uzantısı .css şeklinde olmalıdır.

Bunu yaptıktan sonra HTML sayfalarda “style” dosyasını çağırmamız gerekir. Her sayfanın header bloğuna ekleyeceğimiz kısa satırla bunu sağlarız:

<link rel="stylesheet" type="text/css" href="stil.css" />

Bu örnekte “style” dosyasının ismi “stil.css” dir. Bu dosyanın ana dizinde olması gerekir. Başka bir dizinde bulunuyorsa bunu “dizin/stil.css” şeklinde ilgili klasörün ismini vererek belirtmemiz gerekir.

Bu tür “style” dosyalarına “dış stil sayfası” diyebiliriz. Tüm sayfalarda tek tip stil kullanmak için bunu tercih edebiliriz.

İç Stil Satırları (Internal Style Sheets)

Ayrıca “dış stil sayfası” kullanmak yerine stilimizin tamamını ilgili sayfada header bloğuna ekleyeceğimiz “iç stil satırları” ile sağlayabiliriz:

<style type="text/css">
P {color: black; font: verdana}
H1 {color: red; font: verdana}
</style>

“İç stil satırları” bazı eski tarayıcılar tarafından desteklenmeyebilir. Zaten günümüzde Firefox 2 ve Internet Explorer 6/7 gibi yeni kuşak tarayıcılar tercih edilir. Yine de eski tarayıcılarda bunu önlemek için yukarıdaki kodun başına <!– imlecini; sonuna ise –> imlecini yerleştirerek CSS komutunu aşağıdaki gibi kapatmamız gerekir:

<style type="text/css"> <!--
P {color: black; font: verdana} /* Satır Yorumu */
H1 {color: red; font: verdana} /* Satır Yorumu */
--> </style>

Ayrıca her bir satırda C dilindeki yapıya benzer şekilde /* */ iki işaret arasında ilgili satırlar hakkında yorum ekleyebilirsiniz.

Her bir sayfada farklı stil kullanmak için bu yöntemi tercih edebiliriz.

CSS’nin Temel Yapısı

Tarih: Ağustos 10, 2008 Yazar:  
Kategori: CSS Makaleleri

CSS’de tüm komutlar belirli bir düzene göre sıralanır. Genel olarak iki bölüme ayrılır. Birincisi en solda bulunan kuralı uygulayacağımız elementtir. Buna seçici (selector) denir.

CSS’nin temel yapısında bir diğer özellik de bildirim bloğu (declaration)’dur. Bildirim bloğu süslü bir parantez ile açılır; benzer şekilde noktalı virgülün ardından süslü parantez ile kapanır.

css-yapi

Bildirim bloğunda “seçici” için istediğimiz kadar “özellik” ve “değer” atayabiliriz. Birkaç örnek vermek gerekirse;

Tek bir özellik:

H1 {font-family: Arial}

Birden fazla özellik:

H1 {font-family: Arial; font-size: 2; font-weight: bold; color: red;}

Yukarıdaki CSS kod dizilimini açıklayalım;

H1, seçici özelliktir; genellikle yazı/paragraf başlıklarını tanımlamak için kullanılan bir tür HTML kodudur. H1 kodunu kullandığımız satırlarda yer alan yazılar bildirim bloğunda bulunan özelliklere göre şekillenecektir.

Seçicinin ardından süslü parantez açıyoruz. Özellik ve değerler arasında iki nokta üst üste [:] işareti yer alır. Her bir değerin sonuna noktalı virgül [;] gelmelidir.

Seçici için tanımlayacağımız yazı tipi, yazı boyutu, kalınlık/italic ve renk gibi özellikleri her bir satırda belirtiyoruz. Ardından bildirim bloğunu süslü parantez ile kapatıyoruz.

Bu satırda kullandığımız özellikler:

font-family (yazı tipi)
font-size (yazı boyutu)
font-weight (kalın, italic, altı çizili yazı)
color (yazı rengi)

CSS kod diziliminde her bir özelliği aynı satıra yerleştirmek zorunluluğu yoktur. Yukarıda verdiğimiz örnekte yer alan özellikleri aşağıdaki gibi birden fazla satıra yayabiliriz:

H1 {
font-family: Arial;
font-size: 2;
font-weight: bold;
color: red;
}

Sınıf Seçicileri (CSS)

Tarih: Ağustos 10, 2008 Yazar:  
Kategori: CSS Makaleleri

HTML dokümanlar içerisinde sınıf (class) olarak tanımladığımız birimler vardır. İşte bu sınıf birimlerinin özelliklerini CSS ile ayarlayabiliriz. Diyelim ki html tabanlı bir sayfada aşağıdaki kod yer alıyor:

<p align=”center” class=”paragraf”>Yazı...</p>

Sınıfı “paragraf” olan imleri CSS içerisinde şöyle tanımlayabiliriz:

.paragraf {color: black; font: Arial;}

Böylece “paragraf” sınıfıyla tanımlanan birimlerde yazı rengi siyah ve yazı tipi Arial olacaktır.

“Paragraf” sınıfını birimlere göre farklı ayarlamak için aşağıdakine benzer seçiciler kullanabiliriz:

p.paragraf {color: black; font: Arial;}
h1.paragraf {color: red; font: Arial;}

Böylece <p> biriminin kullanıldığı tüm alanlarda sınıf “paragraf” olarak belirlendiğinde yazı rengi siyah; <h1> biriminin kullanıldığı alanlarda sınıf “paragraf” olarak belirlendiğinde yazı rengi kırmızı olacaktır.

Ayrıca sınıf seçicileri yerine ID seçicileri de kullanabiliriz. ID seçici ile sınıf seçicileri arasındaki önemli bir fark, CSS içerisinde ID’lerin # işareti ile belirtilmesidir.

<p align=”right” ID="baslik2">Merhaba Dünya!</p>
<h1 ID="baslik2">Merhaba Dünya!</h1>

Böylece “baslik2” buyruğunu CSS içerisinde şu şekilde tanımlayabiliriz:

#baslik2 {color: blue;}

Böylece “baslik2” ID’sini kullandığımız birimlerde yazı rengi mavi olacaktır. Bu özellikleri arttırabilirsiniz.

Temel Meta Etiketleri

Tarih: Ağustos 10, 2008 Yazar:  
Kategori: CSS Makaleleri

Temel Meta Etiketleri

Abstract:
Tüm site hakkında bilgi veren cümledir.
<META name=”Abstract” content=”Site özeti”>

Author:
Site yapımcısının adı, iletişim bilgilerinin bulunduğu etikettir.
<META name=”Author” content=”Adınız, E-Posta Adresiniz”>

Copyright:
Sitenin telif hakları konusunda bilgi veren etikettir.
<META name=”Copyright” content=”telif hakkı cümlesi”>

Description:
Bazı arama motorlarının temel aldığı, site hakkında bilgi veren temel etiketlerden biridir.
<meta name=”description” content=”Sitenizin içeriği hakkında geniş bilgi”>

Expires:
Sitenin içeriğinin hangi tarihte zaman aşımına uğradğını arama motorlarına ileten etiket.
<META name=”Expires” content=”Mon, 12 Jan 2007 17:45:05 GMT”>

Keywords:
Yine arama motorlarının temel aldığı, sitenizin içeriğini oluşturan kelimelerin bulunduğu etiket.
<meta name=”keywords” content=”kelime1 kelime2 kelime3 kelime4 kelime5″>

Language:
Sitenizin varsayılan dilini belirten etiket.
<meta http-equiv=”content-language” content=”tr”>

Revisit-After Tag:
Arama motorlarına, sitenin içeriğinin kaç günde bir güncellendiğini ileten etiket.
<meta name=”revisit-after” content=”7 days”>

Refresh:
Belli aralıklarla sayfanın yeilenmesini sağlayan etiket. Örnekteki 60, sayfanın 60 saniyede bir yenileneceğini belirtir.
<meta http-equiv=”refresh” content=”60″>

Redirect:
Sayfanın, belli bir zaman sonra başka bir sayfaya yönlenmesini sağlar. Örnekte, sayfa 2 saniye sonra başka bir sayfaya yönlenir.
<meta http-equiv=”refresh” content=”2;url=http://www.sanalbilisim.net”>

Robots:
Arama motoru robotlarının,  site içerisindeki linkleri takip edip etmeyeceklerini gösteren etikettir.
<meta name=”robots” content=”none”>
<meta name=”robots” content=”index,follow”>
<meta name=”robots” content=”noindex,follow”>
<meta name=”robots” content=”index,nofollow”>
<meta name=”robots” content=”noindex,nofollow”>
gibi kullanımları mevcuttur.

Bunlar dışında;
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859″>
gibi bir kodla, sayfanın karakter kodlamasını belirtebilirsiniz. Bu kod, sayfanızdaki Türkçe karakterlerin düzgün görünmesini sağlar.

Not:
Tüm meta etiketleri <head> .. </head> kodları arasına yazılır.
Ayrıca XHTML standartlarına göre, meta etiketleri > ile değil /> ile kapatılır.
Örnek: <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859″>

8 Önemli Seo İpucu

Tarih: Ağustos 9, 2008 Yazar:  
Kategori: Seo Makaleleri

Deneyimli Web tasarımcıları size, “Yalnızca siteyi kurarsanız kimse gelmez” diyecektir. Bu doğru. Yalnızca bir Web sitesi kurmak ziyaretçi çekmez. Müşterileri bir kez sitenize gelmeleri için ayartmak çaba gerektirir, tekrar gelmeleri içinse daha fazla çaba harcamanız gerekir.

Çoğu insanın Web sitelerini bulma yöntemlerinden biri Google.com gibi arama motorları kullanmaktır. Google, tüm Internet aramalarının yaklaşık yarısını oluşturmaktadır. Yahoo! ve MSN en sık kullanılan diğer arama siteleridir.

Arama sonuçlarında iyi bir sıralama derecesine sahip olmak, insanların sitenizi bulmalarına yardımcı olmak için şarttır. Çoğu insan ilk arama sayfasından ileri gitmez. Ayrıca listenin en yukarısında olmak en altında olmaktan iyidir.

Arama motorları arama sonuçlarını sıralamak için ileri düzeyde algoritmalar kullanır. İyi sayfa sıralama dereceleri rastlantısal değildir. Üst sıralamalarda görünecek Web sayfaları oluşturma sürecine Arama motoru optimizasyonu veya SEO denir.

Her arama motoru biraz farklı bir algoritma kullanır. Üstelik bunların çoğu algoritmalarını düzenli aralıklarla ayarlar. Ancak tüm arama motorlarında temel bir SEO geçerlidir. SEO ustalık gerektirse de, dikkatle planlanan bir yaklaşım Web sitenize gelen trafiği artırabilir.

Başarılı bir SEO’ya giden sekiz adım aşağıda verilmektedir.

1. Anahtar Sözcükleri Akıllıca Seçin
2. Anahtar Sözcükleri Akıllıca Kullanın
3. Anahtar Sözcükleri Tıklatma Başına Ödeme Reklamlarıyla Sınayın
4. Diğer Sitelerden Kendi Sitenize Bağlantılar Oluşturun
5. SEO Kampanyanızda Etik Değerlere Uyun
6. Sitenizi Arama Motorlarına Gönderin
7. SEO’nuzun İlerlemesini Takip Edin, Ancak Sabırlı Olun
8. Dış Kaynak Kullanmayı Düşünün

Sayfa 1 - 212