Site Rehberi

TG Sitede sadece CSS ve kısmen Javascript dersleri bulunuyor.Javascript sadece ek özelliklerde kullandığım için %90 oranında CSS dersleri bulunuyor.Zaten tr.gg içinde en sade ve en açık yönlü kod dili CSS olduğu için diğer kod dilleriyle uğraşmanızı tavsiye etmem.Site hakkıda açıklama için.

» Burayı Tıklayın

CSS Tasarımlar

Boş Banner

icon Şimdilik bu bannere eklenecek bir oluşum düşünülmüyor sizdende istekler,düşünceler alabilirim.Bu banner hakkında fikir verin.Ve sizinde sitede imzanız olsun.

» İletişim için

TG The Codebreaker

Webmasterın önerileri

Webmaster'dan İpuçları ve Öneriler


CSS'yi Sayfa İçine Yerleştirme Metotları

a) HTML Ögesi İçine Yerleştirmek;
Şurada bir html kodumuz olsun: mesela link kodu ekleyelim bir tane;
<a href="Linkimizin Adresi">Linkimizin Adı</a>
Bu şekilde eklenen bir link sayfamızda varsayılan link özelliğiyle, yani mavi renkte ve altı çizili olarak görünecektir. HTML içine yerleştireceğimiz style tagının içine ekleyeceğimiz CSS kurallarıyla bu linkimize farklı özellikler kazandırabiliriz. Örnek olarak kodumuz:
<a href="Linkimizin Adresi" style="color:white; background:blue; font:10pt Comic Sans MS;">Linkimizin Adı</a>
Bu şekilde yazılmış bir kodda style="" içindeki CSS kuralları linkin özelliğini belirler.
color:red; -> linkin renginin kırmızı olmasını,
background:blue; -> Linkin arkaplanının mavi olmasını,
font:10pt Comic Sans MS; -> Linkin 10pt yazı boyutuyla ve Comic Sans MS fontuyla yazılmasını ifade ediyor. Bu linkin görünümü aşağıdaki gibi olacaktır;
Linkimizin Adı
Bu şekilde HTML tagları içine entegre edilmiş CSS kuralları sadece içine eklendiği HTML nesnesini etkiler.

b)Sayfa İçerisine Yerleştirmek;
Sayfanızın içerisine ekleyeceğimiz birkaç CSS kuralı ile o sayfadaki bütün HTML ögelerini etkileyebiliriz. Sayfa içerisine ekleyeceğimiz CSS kuralları, genellikle <head> tagından sonra <style> ve </style> tagları arasına yazılır. Örnek olarak aşağıda basit bir sayfanın CSS kodlarını verdim.
<html>
<head>
<style>
a{color:green;font:15pt;}
p{width:100px; height:25px; background-color:black;}

</style>
</head>
<body>
<p><a href="http://linkin_adresi">Linkin Kelimesi</a></p>
</body>
</html>


Görüldüğü gibi bu şekilde birden fazla CSS kuralını peş peşe dizebiliyoruz ve bu şekilde yazdığımız bir kod bütün sayfaya etki ediyor. Yani a{ diye başlayan kural sayfadaki bütün linkleri, p diye başlayan kural da sayfadaki bütün p HTML taglarını etkiliyor.

c) Bir CSS Dosyasından Sayfamıza Çağırmak;
CSS dosyası, uzantısı .css olan dosyadır. Amacı çağrıldığı bütün sayfaların CSS kurallarını taşımaktır. Sayfa içine yerleştirilen CSS kodlarından tek farkı sadece bir sayfaya değil, çağrıldığı bütün sayfalara etki etmesidir. Bir CSS dosyasının içerisinde sadece CSS kuralları bulunur. Örneğin bir CSS dosyasının içeriği;
a{font-color: blue; margin: 5px;}
p{font:12px;}
div{width:100px; height;100%;}
gibi olabilir. CSS dosyası oluşturmak için içine yerleştireceğiniz bütün CSS kurallarını bir not defterine yazıp uzantısını .css olacak şekilde kaydetmeniz yeterlidir.
Tamam, CSS dosyamızı oluşturduk. Peki bu dosyayı nasıl istediğimiz HTML sayfalarına ekleyeceğiz? Onu da HTML sayfamızdaki <head> tagından sonra ekleyeceğimiz <link> koduyla başaracağız. Bu kod;
<link rel="stylesheet" type="text/css" href="http://dosyanın-bulunduğu-adres/stildosyanızınadı.css">
kodudur. Kodu kendinize göre düzenleyip HTML sayfanıza eklediğinizde CSS dosyanızdaki kurallar sayfanıza etki etmeye başlayacaktır.

HTML Kodlarındaki Sınıf(class) ve Kimlik(id)
HTML kodlarındaki sınıflar ve kimlikler CSS kodları için çok güzel seçici'lerdir. Tabi seçicileri HTML içine entegre CSS kurallarında kullanamıyorduk. Bu nedenle seçicileri .css dosyamızda veya sayfa içindeki CSS kodları arasında kullanıyoruz. Neyse. Bir HTML kodu yazayım da başlayalım;
<img src="http://resimlinki/resimismi.jpg" border="0" class="ali1" id="veli2" />
-Bu kodda class="ali1" sınıfını seçici olarak kullanmak istersek, CSS kurallarını yazdığımız bölüme kuralımızı şu şekilde yazacağız;
.ali1 {width:100px; height:100px;}
Görüldüğü gibi sınıflar(class) seçici olarak kullanılırken başına nokta alıyor.
-Eğer üstteki HTML kodundaki id="veli2" kimliğini seçici olarak kullanmak istersek, CSS kuralını şu şekilde oluşturacağız;
#veli2 {width:100px; height:100px;}
Görüldüğü gibi kimlikler(id) seçici olarak kullanılırken başına kare(#) alıyor.
Eğer aynı id ve class'ları başka HTML ögelerine de verirseniz, bu CSS kuralları onları da etkiler. Örneğin veli2 id'sini bir resime(img) de ekleseniz bir bir div'e bir linke(a) de ekleseniz CSS kuralı çalışır. Ama kuralın seçicisini a veya img gibi herhangi bir HTML tagıyla kısıtlarsanız, yani şunun gibi bir biçimde yazarsanız;
img.ali1 {width:100px; height:100px;}
Seçiciyi bu şekilde kısıtlarsak, CSS kuralımız sadece sınıfı(class) ali1 olan resimleri(img) etkileyecektir. Kural seçicisindeki img yerine a yazarsak da sadece sınıfı(class) ali1 olan linkleri(a) etkileyecektir.

-> ÖNEMLİ NOT; Bir kuralın yazılışında kelimeler arası boşlukların hiçbir anlamı yoktur. Örneğin;
a{color:black; font:12pt;}
kuralı ile
a {
color: black;

font: 12pt;

}

kuralı arasında hiçbir fark yoktur.

Soru Cevap Şeklinde Dersler:

• Menü gizleme kodu kullanmadan CSS tasarım nasıl yapılır?

• Yorum vb. ekstraların font boyutlarını nasıl küçültebilirim?

• Yorum ekstrasında mesaj yazılan yere nasıl yazı koyabilirim?


• İntroyu Giriş Butonu olmadan kullanmak mümkün mü ?

• Herhangi bir CSS tasarımı (free yada kendime ait) siteme nasıl uygulayabilirim?


• Ek bir menüye ihtiyaç olmadan, CSS tasarım yapabilir miyim?

• Sayfalara geniş yer ayırmak istiyorum. Beğendiğim herhangi bir tasarımı bu duruma nasıl getirebilirim ?

• Google Meta Tag'leri sitemize ekleyebilir miyiz?

• Site içi arama motoru nasıl yapabilirim?
 
• Ücretsiz oluşturduğum bir forumu, yönlendirme yapmadan kendi sitem içinde nasıl gösterebilirim?


• Tek tık ile site içi arama motorunu nasıl çağırabilirim?

• Farklı tarayıcılara göre sitemi nasıl optimize edebilirim?

• Google arama sonuçları için siteme alt bağlantı nasıl verebilirim?


• CSS Tasarımlarda menüyü siteme göre nasıl düzenleyebilirim?

• Sitenizdeki gibi CSS kodlarımı KAYNAK'ta tek satırda nasıl gösterebilirim?

• Bedava-sitem.com reklamlarını nasıl ortalayabilirim?



Site Hiti 13367 ziyaretçi (23219 klik)
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol