• <canvas>: Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir.
• <audio>: Sayfaya ses oynatıcı bir modül ekler.
• <video> : Video oynatıcı bir modül ekler.
• <progress> : İşlem süreci göstergesi ekler.
• <caption> : Başlık olarak düşünülen metinleri düzenler.
• <header> : Sitenin başlık ve açıklama içeriğini alır.
• <nav> : Menüleri ve bir takım zaruri işlevleri içine alır.
• <footer> : Sitelerin en alt kısmını içine alır.
• <section> : Sitelerin ana içerik kısmını içine alır.
• <aside> : Ana içerikte ayrı yazılan kısımdır.
• <article> : Makale, deneme tarzı yazıları kapsar.
• <embed> : Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar)
• <details> : Detay bilgisi içerir.
• <summary> : Yazının başlığını belirler.
• <time> : Tarih, saat verilerini kapsar.
• <mark> : Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.
• <fig>
• <figure>
• <hgroup>

HTML5 yapısını şu anda Mozilla Firefox 3.6.3, Opera 10.53, Apple Safari 5, Google Chrome 5 tarayıcıları kısmen desteklemektedir. Ancak Internet Explorer 8 bu yapıyı hiç tanımamaktadır. Yeni geliştirilen Internet Explorer 9’un ise test aşamasında şu anda %88 olarak desteklediği söylenmektedir Microsoft tarafından. Bu değerleri http://samples.msdn.microsoft.com/ietestcenter/#html5Canvas adresinden takip edebilirsiniz.

http://html5demos.com/ sitesinden ise HTML5’in yeni özelliklerini ve bunların demolarını inceleyebilirsiniz.

http://www.whatwg.org/specs/web-apps/current-work/ adresinden HTML5 hakkında geniş kapsamlı bilgiye ulaşabilirsiniz.

Brusheezy.com
Brusheezy.com adresinden birçok fırça ile birlikte, doku ve desenlere de ulaşabilirsiniz.

Myphotoshopbrushes.com
Yine bu sitede de fırçalara, dokulara, desenlere, şekillere (shapes), gradient çeşitlerine, style dosyalarına ulaşabilirsiniz.

Psbrushes.net
Psbrushes sitesi fırçaları kategorilere ayırmış ve geniş bir kütüphane oluşturmuş. İstediğniz kategoriden, istediğiniz fırçayı bulabilirsiniz. Sitede bu yazıyı yazdığımda toplam 511 fırça bulunmaktaydı.

Qbrushes.net
Psbrushes sitesi gibi çeşitli kategorilerden fırçalara ulaşabilirsiniz. Geniş arşivinde çok güzel fırçalar bulunmakta.

Brushking.eu
Bu sitenin de çok geniş bir arşivi bulunkata.

Findbrushes.com – Fırça Arama
Bu site ise aradığınız fırçayı bulmanızda size yardımcı olmak için var. Bünyesinde bulundurduğu 14954 fırçadan ve 745 fırça setinden arama yaparak en uygun sonuçları gösteriyor. Yapmanız gereken tek şey aradığınız fırçaya en uygun kelimeyi (İngizce kelime) girip ara butonuna basmanız.

Umarım bu siteler çok işinize yarar.

Photoshop kullanmaya başlamadan önce ise programın arayüzü, menüleri, vs. hakkında bilgi edinmeniz yararlı olabilir. Çünkü marifetleri çok olan bu program doğal olarak ilk başlarda çok karmaşık görünebilir. Bu aşamada ise en verimli bilgiyi heralde programın üreticisi Adobe’un Türkçe olarak hazırladığı yardım dosyasında bulabiliriz. Aynı zamanda bu kaynakda renk bilgisi, filtreler, rötuşlar, çizimler hakkında da başlangıç düzeyinde bilgilere ulaşabilirsiniz. Photoshop yardım dosyalarının ise linkleri ise şöyle:
Adobe Photoshop CS3 Yardım Dosyası
Adobe Photoshop CS4 Yardım Dosyası
Adobe Photoshop CS5 Yardım Dosyası

Photoshop’un çalışma prensibini ve renk konusunu anladıktan sonra ise internette bir çok örnek çalışmaya ve bu çalışmanın nasıl yapıldığını gösteren açıklamalara ulaşabilirsiniz.

Bu arada uzun bi aradan sonraki ilk yazımda geçenlerde rastladığım bir siteyi tanıtmak istiyorum: “300 Harf” adında bir sosya ağ… Site ile Cnet Turkiye’de site için yazılan bir makale ile tanıştım.

Site Twitter’ı andırsa da aslında tam olarak öyle değil. Sitede takipçiler söz sahibi. Yani siz bir profil yarattınız ve takipçileriniz var diyelim. Onlar profilinize sizin hakkınızda kişisel haklara bağlı kalarak istediklerini yazabiliyorlar. Eğer profil sahibi kendisi hakkında yapılan yorumlardan hoşnut değilse bu yorumları şikayet edebiliyor.

Siteden bahsetmişken adresini de vereyim: 300harf.com

Evet yanlış duymadınız Google artık Internet Explorer’in eski versiyonlarını desteklemeyecekmiş. Yani artık Internet Explorer’ın artık dönemi kapanmasına rağmen kullanılan ve web site tasarımcılarını deli eden eski versiyonlarıyla Google siteleri ziyaret edilemeyecek. Bu müthiş haber bende heyecan yarattı hemen. Çünkü artık bu sayede Internet Explorer 6′nın sonu gelebilir.

Şimdi haberin ayrıntılarına gelelim. Google 1 Mart tarihinden itibaren eski versiyon tarayıcılarda düzgün görüntülenemeyecek. Ben başlıkta IE6 yazdım fakat bunun yanı sıra diğer eski versiyon tarayıcılar da aynı şekilde destekten yoksun.

Ayrıca yapılan açıklamada kullanıcıların Internet Explorer 7 ve üstü, Mozilla Firefox 3 ve üstü, Google Chrome 4 ve üstü, Safari 3 ve üstü versiyonları kullanmaları öneriliyor.

Ben de böylece bu güzel haberle tekrar yazı yazmış oldum. Çifte mutluluk.

Sadece İngilizce, Fransızca, Almanca, Japonca ve İspanyolca olarak indirilmeye hazır. Tabii sonra dil eklentilerini de kurabilirsiniz. Şunu da söylemekte fayda var: Sadece sınırlı sayıda indirilecektir. İşte indirme bağlantıları:

Windows 7 Enterprise 90 Günlük Deneme Sürümü :
http://technet.microsoft.com/en-us/evalcenter/cc442495.aspx

Windows Server 2009 R2 180 Günlük Deneme Sürümü :
http://www.microsoft.com/windowsserver2008/en/us/try-it.aspx

Güvenlik, kendini güvende hissetme dürtüsü ise insanın var oluşunda birincil ihtiyaçlardan olduğuna göre her türlü güvenlik de bizim için önemlidir. O yüzden sanal ortamda da verilerimizi veya maddi kaynaklarımızın bir kısmını yada tamamını kaybetmek istemiyorsak sanal tehtidlerin başında gelen virüslerden korunmamız gerekmektedir. Bu amaçla oluşturulan VirusTotal projesi de dosyalarımızı çevrimiçi olarak 39 anti-virüs yazılımına göre tarayarak o dosyada virüs var mı, yok mu bize bildiriyor. 39 anti-virüs yazılımı hiç de azımsanmayacak bi rakam. Üstelik Türkçe desteği de mevcut.

Tabii bu site bilgisayarınızı tam olarak taramıyor. Sadece sizin gönderdiğiniz dosyalarınızı tarıyor. Bu yüzden bilgisayarınızda mutlaka bir virüs yazılımı bulundurmalısınız.

VirusTotal, PC World Dergisi Amerika versiyonu tarafından 2007 yılının en iyi Güvenlik Web siteleri kategorisinde en iyi 100 siteden biri olarak ödüllendirilmiştir.

Hangi virüs yazılımlarının desteği ile bu taramaları gerçekleştirdiğini merak edebilirsiniz. İşte o virüs yazılımları:

# AhnLab (V3)
# Antiy Labs (Antiy-AVL)
# Aladdin (eSafe)
# ALWIL (Avast! Antivirus)
# Authentium (Command Antivirus)
# AVG Technologies (AVG)
# Avira (AntiVir)
# Cat Computer Services (Quick Heal)
# ClamAV (ClamAV)
# Comodo (Comodo)
# CA Inc. (Vet)
# Doctor Web, Ltd. (DrWeb)
# Emsi Software GmbH (a-squared)
# Eset Software (ESET NOD32)
# Fortinet (Fortinet)
# FRISK Software (F-Prot)
# F-Secure (F-Secure)
# G DATA Software (GData)
# Hacksoft (The Hacker)
# Hauri (ViRobot)
# Ikarus Software (Ikarus)
# INCA Internet (nProtect)
# K7 Computing (K7AntiVirus)
# Kaspersky Lab (AVP)
# McAfee (VirusScan)
# Microsoft (Malware Protection)
# Norman (Norman Antivirus)
# Panda Security (Panda Platinum)
# PC Tools (PCTools)
# Prevx (Prevx1)
# Rising Antivirus (Rising)
# Secure Computing (SecureWeb)
# BitDefender GmbH (BitDefender)
# Sophos (SAV)
# Sunbelt Software (Antivirus)
# Symantec (Norton Antivirus)
# VirusBlokAda (VBA32)
# Trend Micro (TrendMicro)
# VirusBuster (VirusBuster)

Ayrıca VirusTotal sitesindeki şu uyarıyı da burada belirtmekte fayda var:

VirusTotal bilgisayarınızda yüklü olan bir antivirüs programının yerini tutmaz. Sadece gönderdiğiniz dosyaları tarar. Bilgisayarınızdaki tehtitleri yok etmez.

Burada yaptığınız taramalar 100% gerçek sonuçlar vermeyebilir. Bu yüzden buradaki sonuçlar bir dosyanın kötü niyetli yazılım taşıdığını garanti etmez.

Şu anda, 100% kötü niyetli yazılımları bulabilen bir çözüm yok. Bu yüzden sizde bir kurban olabilirsiniz.

VirusTotal sitesine buradan gidebilirsiniz.

Metne Gölge Ekleme

İstediğimiz metne, başlığa, paragrafa istediğimiz renkte istediğimiz ebatlarda gölge atayabiliriz. Bunu da sadece text-shadow kodu ile yapacağız. Hemen örnek kodumuz üzerinde gösterelim:

1
2
3
4
5

p{
	font-family:Arial, Helvetica, sans-serif;
	color:#ea9800;
	text-shadow: 4px 4px 7px #999;
}

Buradaki ilk iki kodu anlatmayı atlıyorum. Çükü bizim konumuzu ilgilendiren asıl kod kısmı son kısımdır. Text-shadow kodunda 4 değer görüyoruz. Bunlardan ilk 4px.lik değer gölgemizin metnin sağından uzaklığını belirler, ikinci değer olan 4px.lik değer ise gölgemizin metnin aşağısından uzaklığını belirler, üçüncü değerimiz (2px.lik değer) ise gölgemizin yoğunluğunu, bulanıklılık değerini belirler. Son değerimiz ise gölgemizin rengidir. Aşağıda bu kodların örnek görünümü de bulunmaktadır. Bu örneği görebilmeniz için sitemizi Firefox 3, Opera ve Safari ile görüntülemeniz gerekmektedir.

Bu metindeki gölgeyi görebilmeniz için sayfayı Opera, Firefox 3 ya da Safari ile görüntülemeniz gerekmektedir.

Kutulara Gölge Ekleme

Güzel yeniliklerden biri de kutularımıza gölge eklemek için eklenen box-shadow kodudur. Kullanımı text-shadow koduyla aynıdır. O yüzden fazla değinmeyeceğim. Hemen örnek kodumuza geçelim:

1
2
3
4
5
6
7
8

#kutu{
height:100px; 
width:550px; 
border:1px solid #000;
box-shadow: 4px 4px 4px #999; 
-moz-box-shadow: 4px 4px 4px #999; 
-webkit-box-shadow: 4px 4px 4px #999;
}

Bu kodlarda tek fark olarak “–moz” ve “–webkit” ile başlayan kodlar olduğunu fark etmişsiniz. Bu kodlardan –moz olanı Firefox tarayıcısıyla, -webkit olanı ise Safari tarayıcısıyla gölgeleri görmemizi sağlar. Aşağıdaki örnek uygulamayı görebilmeniz için sayfamızı Firefox ya da Safari ile görüntülemeniz gerekmektedir.

Köşelerde her pixele ayrı renk atama:

Evet bu özellik şu anda sadece Firefox tarayıcısında çalışıyor. Örnek kodlarımız da işte şöyle:

1
2
3
4
5
6
7
8

#kutu {
	border: 8px solid #000;
	-moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-top-colors:    #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-left-colors:   #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-right-colors:  #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	width:400px;
}

Aşağıda da örnek görünümü bulunuyor. Bu kutuyu görebilmeniz için Firefox ile sitemizi ziyaret etmeniz gerekir.

Kutuyu Görebilmeniz İçin Bu Sayfayı Firefox İle Açın.

Bordera arkaplan resmi atama:

Css3 ile borderlarımıza arkaplan atamak için kullanacağımız kod ise border-image kodudur. Örnek kodumuz şu şekildedir:

1
2
3

#kutu{
	border-image: url(resmin-yolu);
}

1
2
3

<div class=”oval-kutu”>
<p>Bu bir paragraftır.</p>
</div>

Gördüğünüz gibi div etiketimize oval-kutu sınıfını atadık. Şimdi de CSS ile oval-kutu sınıfının özelliklerini yazalım:

1
2
3
4
5
6
7
8
9

.oval-kutu {
	background-color: #666; 
	color: #fff; 
	line-height: 20px; 
	width: 200px; 
	padding: 10px; 
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
}

Yukarıdaki kodlardan ilk 5 özellik ve değeri bildiğimiz ve şu anda kullanılan CSS özelliklerdir. Ancak altta gördüğünüz iki özellik kodu biraz farklı. Bu kodlar sayesinde kutumuzu oval yapıyoruz. Bu kodlar 10px.lik değerler almışlardır. Bu demektir ki kutumuz 10px.lik oval köşelere sahip olacaktır.

Peki, bu webkit ve moz ne demek diyebilirsiniz. Webkit Safari için, moz da Firefox içindir.

Ayrıca her köşeye de ayrı ovallik değerleri verebiliriz. Aşağıda ayrı ayrı tüm köşeler için kodları verdim, onları inceleyebilirsiniz:

1
2
3
4
5
6
7
8
9

border-radius: 10px 10px 10px 10px; /* ÜstSol ÜstSağ AltSağ AltSol */
border-radius: 10px 10px 10px; /* ÜstSol ÜstSağ+AltSol AltSağ */
border-radius: 10px 10px; /* ÜstSol+AltSağ ÜstSağ+AltSol */
border-radius: 10px; /* Tüm Köşeler */
 
-webkit-border-bottom-left-radius: 10px; /* Alt Sağ Ovallik Değeri */
-webkit-border-top-right-radius: 10px; /* Üst Sağ Ovallik Değeri */
-moz-border-radius-bottomleft: 10px; /* Alt Sağ Ovallik Değeri */
-moz-border-radius-topright: 10px; /* Üst Sağ Ovallik Değeri */

Görüldüğü gibi köşelere ayrı ayrı değerler verirken son 4 kodda Firefox kodlarının ve Safari kodlarının yazılışı farklı. Çünkü bu standartlar tam oturmuş standartlar değildir.

Unutmayın! Bu özellikleri şu anda hiçbir IE sürümü desteklemiyor.

Not: Bu yazıyı kaynak ve site adres linkini belirterek paylaşabilirsiniz.

Ben CSS3 Hakkında adlı kategorimde yeni özelliklere değineceğim. Buradan yenilikleri takip edebilirsiniz.

1

secici-adi: pseudo-elementi {özellik:değer;}

Hemen pseudo-elementlerinde bahsetmeye başlayalım:

First-line Pseudo-elementi

“First-line” pseudo elementi bir metnin ilk satırı için özel bir stil eklemek için kullanılır. Yani bir metnin sadece ilk satırının rengini değiştirebilir, kalın yapabilir, fontunu değiştirebilirsiniz. Kullanımı şu şekildedir:

1
2
3
4
5

p:first-line 
{
color:#ff0000;
font-variant:small-caps;
}

First-letter Pseudo-elementi

“First-letter” pseudo elementi bir metnin ilk harfi için özel bir stil eklemek için kullanılır. Yani bir metnin ilk harfini gazetelerdeki gibi çok büyük yapabilir, rengini değiştirebilir, fontunu belirleyebilirsiniz. Kullanımı şu şekildedir:

1
2
3
4
5

p:first-letter 
{
color:#ff0000;
font-size:xx-large;
}

Yukarıda açıkladığım iki elementi tabi ki birlikte de kullanabilirsiniz. Tek yapmanız gereken iki kodu da css dosyanıza eklemek.

:before Pseudo-elementi

“Before” pseudo elementi bir içerikten önce içerik eklenmesi için kullanılır. Yani bir metinden önce bir metin yada resim eklenmesi gibi… Örnek kullanımı şu şekildedir:

1
2
3
4

h1:before 
{
content:url(smiley.gif);
}

Bu kod sayesinde h1 etiketi ile yazılan başlıklardan önce smiley.gif resmi görünecektir.

:after Pseudo-elementi

“After” pseudo elementi yukarıdaki kodun aynısını yapar. Tek farkı içeriği önce değil sonra koyar. Örnek kullanımı ise şu şekildedir:

1
2
3
4

h1:after
{
content:url(smiley.gif);
}

Bu kod sayesinde h1 etiketi ile yazılan başlıklardan sonra smiley.gif resmi görünecektir.

Eğer bir bağlantıda “after”ve “before” elementlerini kullanmak istiyorsak güzel sonuçlar ortaya çıkabilir. Bu konuyu da “CSS Nimetleri – Bağlantınızın (Linkinizin) Üzerine Geldiğinizde Yeni Yazı Gösterme” adlı yazımda işlemiştim.

Not: Bu yazıyı kaynak ve site adres linkini belirterek kullanabilirsiniz.
Not: Bu yazı w3schools.com adresindeki İngilizce makaleden uyarlanmıştır.

1

secici-adi: pseudo-sinifi {özellik:değer;}

Gördüğünüz gibi her zamanki gibi bir sınıf adımız yani secici adımız var. Bu ister id olsun isterse de class olsun. Daha sonra iki nokta işaretini kullanıyor ve bir boşluk bıraktıktan sonra pseudo sınıf adını yazıyoruz ve süslü parantezlerimizin arasına da özellik ve özellik değerlerini belirtiyoruz.

Bağlantılar (Linkler) İçin Pseudo Sınıfları

Pseudo sınıflarını bağlantılarda kullanarak onlara istediğimiz şekilleri verebiliriz. Bağlantılarda kullanabildiğimiz pseudo sınıfları ise şunlardır : hover, visited, active, link. Belki bunları siz de kullanıyordunuz ama bunların adının pseudo sınıfları olduğunu bilmiyordunuz. Şimdi örnek kodlarımızı da gösterelim:

1
2
3
4

a: link (color: # FF0000) /* ziyaret edilmemiş link */ 
a: visited (color: # 00FF00) /* ziyaret link */ 
a: hover (color: # FF00FF) /* fare ile üzerine gelinen link */ 
a: active (color: # 0000FF) /* seçilen link */

Buradaki a harfi anchordan gelir. Anchorun Türkçesi çapadır. Yani bağlantı, link demektir. Bu harf ile linklerin şekillerini belirleriz. Link kelimesi ise ziyaret edilmemiş linklerin biçimlendirilmesi içindir. Visited ziyaret edilmiş bağlantı, hover fare ile üzerine geldiğimiz bağllantıları, active ise aktif, seçilen bağlantıları şekillendirir. Yani ilk kodumuz ziyaret edilmemiş bağlantıların rengini, ikinci kodumuz ziyaret edilmiş bağlantıların rengini, üçüncü kodumuz fare ile üzerine geldiğimizde bağlantıların alacağı rengi, son kodumuz ise seçilen, aktif olan bağlantılarımızın rengini belirler. Tabii bunlara yazı fontu, yazı boyutu, arkaplan rengi gibi başka özellikler de ekleyebiliriz.

CSS – First-child (İlk Çocuk) Pseudo Sınıfı

First-child sınıfı bir elemanın ilkinin özelliklerini belirlemek için kullanılır. Bir paragrafı örnek olarak göstermek gerekirse bir yazıdaki ilk paragrafın özelliklerini belirlemek için first-child sınıfını kullanırız. Yine örnek kodumuzda paragrafı ele alalım:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style type="text/css"> 
p:first-child { color:blue; } 
</style> 
</head>
 
<body>
<p>Ben bir paragrafım.</p>
<p>Ben bir paragrafım.</p>
</body>
</html>

Bu örnek html kodumuzun içerisinde de gördüğünüz gibi style kodları da var. Bu style kodu ise “p: first-child” ile başlıyor. İşte bu kod paragraflar içerisinde ilk paragrafın rengi mavi olsun diyor. Örnek uygulamamızı da buradan inceleyebilirsiniz.

Şimdi de i etiketini deniyelim. i etiketi yazılarımızı italik yapar. Biz de aşağıdaki kodla her paragraftaki ilk i elementini düzenlemeye çalışalım, bakalım sonuç ne olacak:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
p > i:first-child
{
color:blue;
} 
</style>
</head>
 
<body>
<p>Ben bir <i>paragrafım</i>. Ben bir <i>paragrafım</i>.</p>
<p>Ben bir <i>paragrafım</i>. Ben bir <i>paragrafım</i>.</p>
</body>
</html>

Bu kodunda örnek uygulamasına buradan ulaşabilirsiniz. Böyle bir kodlama her paragrafın ilk i elementini mavi yapacak ondan sonraki i elementleri normal olacaktır.

Peki ilk paragraftaki tüm i elementlerini düzenleyemez miyiz bu yolla. Yani ilk paragraftaki i elementlerini belli şekle sokup diğer paragraflardaki normal olsun diye ayarlayamaz mıyız? Tabii ki ayarlarız. O da şu şekilde:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
p:first-child i
{
color:blue
} 
</style>
</head>
 
<body>
<p>Ben bir <i>paragrafım</i>. Ben bir <i>paragrafım</i>.</p>
<p>Ben bir <i>paragrafım</i>. Ben bir <i>paragrafım</i>.</p>
</body>
</html>

Bu kodunda örnek uygulamasına buradan ulaşabilirsiniz.

CSS : lang Pseudo-sınıfı

Bu sınıf ile istediğiniz elementteki yazının dilini belirleyebilirsiniz. Daha iyi anlaşılabilmesi için örnek uygulamaya geçelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<style type="text/css">
q:lang(tr)
{
color:red;
}
</style>
</head>
<body>
<p>Burada Türkçe karekter kullanılamaz. <q lang="tr">Burada Türkçe karakter bulunabilir. (ğ,ş,ı,ü,ö)</q> Burada kullanılamaz çünkü buranın dili tr değil.</p>
</body>
</html>

Örnek uygulama ise burada. Açıklamak gerekir ise kodları incelediğimizde sitenin genel anlamda dil karakterinin Windows-1250 olduğunu görüyoruz. Bu dil kodu Türkçe karakter desteklemez. Ama css’de belli bir bölümü gördüğümüz gibi Türkçe karakterlerin kabul edilmesini saplayabiliriz.

Not: Bu yazıyı kaynak ve site adres linkini belirterek kullanabilirsiniz.

Not: Bu yazı w3schools.com adresindeki İngilizce metinden uyarlanmıştır.

Her geçen gün buradaki ikon setlerinin sayısını arttıracağım. Eğer kırık link yada resmi gözükmeyen ikon seti bulunursa bana iletişim bölümünden lütfen ulaşın.

Sitemdeki ikon kütüphanesine yandaki Kategoriler menüsünden ulaşabilirsiniz.
İkon kütüphanem şu adreste: http://www.webilgic.com/category/icons/

Şimdi ilk olarak javascript dosyamızı sitemizde head kodları arasına şu kodla ekleyelim (Not: Dosyalar sitenizin ana dizininde olduğu düşünülerek dosya yolu belirtilmiştir. Eğer başka bir dizine koyarsanız o yolu değiştirmeyi unutmayın.):

1

<script language="JavaScript" type="Text/JavaScript" src=" arc90_linkthumb.js"></script>

Şimdi de css kodlarımız arasına şu kodu da ekleyelim:

1
2
3
4
5

.arc90_linkpic { display: none; position: absolute; left: 0; top: 1.5em; } 
.arc90_linkpicIMG {
 padding: 0 4px 4px 0; 
background: #FFF url(linkpic_shadow.gif) no-repeat bottom right;
 }

Böylece alt yapımızı hazıladık. Şimdi tek yapmamız gereken linklerimize class atamak. Örnek link kodumuz da şöyle olacak:

1

<a href="bağlantı adresi buraya" class="linkthumb">Bağlantı Metni</a>

Eğer bağlantılarımıza class atamak istemiyorsak ve bütün bağlantılarda önizleme gösterilmesini istiyorsak o zaman yine head kodları arasına şu kodu yazmamız gerek (Not: Bu şekilde bütün bağlantılarınızda önizleme resmi görülür. Unutmayın: Menülerde bağlatıdır.):

1

<script>arc90_linkThumbUseClassName = false;</script>

Böylece bağlantılarınıza class atamadan bütün bağlantılarda önizleme gösterebilirsiniz. Bu bağlantıdan örnek uygulamayı görebilirsiniz.

Uyumluluk:
Internet Explorer 6.0+
Mozilla Firefox 1.5+
Apple Safari 2.0
Opera Version 8.51+

Not: Bu yazıyı arc90.com adresindeki yazıyı Türkçe’ye uyarlayarak hazırladım.

1

<a href=”#”>Bağlantı Yazımız</a>

Sonrada css dosyamızı şu şekilde hazırlayalım :

1

a:hover:after{ content: “ (Yazının Üstüne geldiğimizde görünecek yazı)”;}

Buradaki hover ve a kodlarını biliyoruz varsayıyorum. Eğer after kodunu bilmiyorsanız after kelimesinin Türkçe anlamı sonra demektir. Yani ondan önceki yapılacak işlemlerden sonra yani hover işleminden sonraki işlemleri ele alır. “content” kodu da eklenecek metni belirler. Yukarıdaki kodlarımızın nasıl işlediğine buraya tıklayarak bakabilirsiniz.

Eğer bağlantımızın üzerine geldiğimizde oradaki yazının değişmesini istiyorsak da aşağıdaki kodu kullanacağız:

1
2

a:hover{visibility:hidden;}
a:hover:after{ content:"Yazının Üstüne geldiğimizde görünecek yazı";	visibility:visible;}

Bu kodlarla yaptığımız ilk olarak var olan yazının fare ile üzerine geldiğimizde gizlenmesidir. Bunu da ilk sıradaki kod ile yapıyoruz. Sonra ise after kodu ile belirecek metni yazıyor ve bu kısmı görünür kılıyoruz. Bu şekilde var olan metnimiz kaybolacak ve yeni metnimiz gözükecektir. Bu kodun da nasıl çalıştığını buradan görebilirsiniz.

Not:Bu yazıyı kaynak ve site adres bağlantısını vererek kullanabilirsiniz.

1
2
3
4

@font-face { 
font-family: SketchRockwell; 
src: url(‘SketchRockwell.ttf’); 
}

Sonrasında bu fontu dilediğimizce istediğimiz yerde kullanabiliriz:

1
2
3
4
5
6

.ornek-sinif { 
font-family: SketchRockwell; 
font-size: 3.2em; 
letter-spacing: 1px; 
text-align: center; 
}

Şu anda bu özelliği destekleyen tarayıcılar: Firefox 3.5, Safari (3.2.1, Windows), Internet Explorer 7 ve 8 (Eğer. eot uzantılı yazı fontu kullanıyorsanız, pek fazla mümkün değil.)

Eğer listenizi float değil de display özelliği ile yatay duruma getirirseniz, istediğiniz şekilde bu listeyi ortalayabilirsiniz. Bunun için de display:inline değerini kullanmanız gerekir ve asıl listeyi ortalayacak olan ise ul etiketinde yazıları text-align:center kodu ile ortalamanızdır. İşte örnek XHTML VE CSS kodları. Css’de display:inline ve text-align:center kodlarının hangi etiketlerde olduğuna dikkat edin:

1
2
3
4
5
6
7
8
9

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#navcontainer ul
{
list-style-type: none;
width: 100%;
text-align: center;
}
 
li { display: inline; }
 
li a
{
text-decoration: none;
padding: .2em 1em;
}

1
2
3

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
...

Rss etiketinizde istediğiniz elementleri görünür kılıp istediğiniz elementleri de gizlemek için ise örnek kodumuz şu şekilde:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

rss {
display: block;
font-family: verdana, arial;
}
title {
display: block;
margin: 5px;
padding: 2px;
color: gray;
border-bottom: 1px solid silver;
}
link {
display: block;
font-size: small;
padding-left: 10px;
}
item {
display: block;
padding: 2px 30px 2px 30px;
}
docs {
display: block;
background-color: #ffffe6;
margin: 20px;
text-align: center;
padding: 5px;
color: #7f7f7f;
border: 1px solid silver;
}
 
/* Gizlenecek elementler */
language, lastBuildDate, ttl, guid, category, description, pubDate {
display: none;
}

Görüldüğü gibi istediğimiz elementi display:none kodu sayesinde gizleyebiliyoruz.

Not: Bu yazıyı kaynak ve site adres linkini belirterek kullanabilirsiniz.

İlk adım olarak XHTML dokümanımızı hazırlayalım.

1
2
3
4
5
6
7
8
9

<div class="yildiz">
    	<ul>
                <li><a href="#" class="bir-yildiz">1</a></li>
                <li><a href="#" class="iki-yildiz">2</a></li>
                <li><a href="#" class="uc-yildiz">3</a></li>
                <li><a href="#" class="dort-yildiz">4</a></li>
                <li><a href="#" class="bes-yildiz">5</a></li>
        </ul>
</div>

Css kodlarımıza başlamadan önce yıldız grafiğimizi buradan sağ tıklayıp farklı kaydedelim.

Şimdi de css dosyamızı hazırlamaya başlayalım.

1
2
3
4
5
6
7
8
9
10
11

.yildiz ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
	width:100px;
	height:20px;
	background-image:url(star_dimensions.gif);
	background-position:left top;
	background-repeat:repeat-x;
	position:relative;
}

Burada position:relative çok önemli. Çünkü bundan sonraki kodlarımızda position:absolute kodunu kullanacağız. Burada ise relative değerini atayarak absolute değeri alan elementin sınırını çizmiş oluyoruz. Yine kodlarımızı incelediğimizde yükseklik olarak 20 px. Değer verdiğimizi görüyoruz ki bu grafiğimizin yüksekliğinin yarısıdır. Daha sonra da background-position:left top kodunu da kullanarak grafiğimizin sadece üst kısmının gözükmesini sağlıyoruz. Böylece üzerine gelmediğimiz de grafiğimizin sadece üst yarısı gözükecektir.

Şimdi kodlarımıza devam edelim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.yildiz ul li{
	float:left;
	margin:0px;
	padding:0px;
	list-style-type:none;
}
 
.yildiz ul li a{
	display:block;
	width:20px; 
	height: 20px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
	background-image:none;
}

Yine burada text-indent değerini -9000px vererek listemizdeki yazıları görünmez yapıyoruz. Gördüğünüz gibi position:absolute komutunu burada kullandık. Bu şekilde de left, right komutlarıyla konumlandırma yapabileceğiz.

1
2
3
4
5
6

.yildiz ul li a:hover{
	background-image:url(star_dimensions.gif);
	background-position:left bottom;
	z-index: 1;
	background-repeat:repeat-x;
}

Burada ise backgroun-position olarak left ve bottom değerlerini verdik. Böylece de fare ile üzerine gittiğimizde grafiğin alt tarafının görünmesini sağlayacağız.

En son olarak da şu kodları kullanacağız:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

.yildiz ul li a.bir-yildiz{
	left:0;
}
 
 
.yildiz ul li a.bir-yildiz:hover{
	width:20px;
}
 
.yildiz ul li a.iki-yildiz{
	left:20px;
}
 
.yildiz ul li a.iki-yildiz:hover{
	width:40px;
	left:0;
}
 
.yildiz ul li a.uc-yildiz{
	left:40px;
}
 
.yildiz ul li a.uc-yildiz:hover{
	width:60px;
	left:0;
}
 
.yildiz ul li a.dort-yildiz{
	left:60px;
}
 
.yildiz ul li a.dort-yildiz:hover{
	width:80px;
	left:0;
}
 
.yildiz ul li a.bes-yildiz{
	left:80px;
}
 
.yildiz ul li a.bes-yildiz:hover{
	width:100px;
	left:0;
}

Burada da her bir yıldıza sınıf atıyoruz ve o yıldızın konumlarını ayarlıyoruz. Yıldızın genişliği 20px olduğundan pozisyon değişimlerinde de 20px.lik değişimler oluyor. Yani mesela iki-yildiz sınıfını el alırsak fare üzerinde değilken soldan 20px ötede olacak. Ancak üzerine yıldız geldiğinde genişliği 40px.e çıkacak ve soldan boşluk sıfır olacak ki birinci yıldız da yansın.

İşte örnek uygulamaya da buradan bakabilirsiniz.

<< Download >>

Bu yöntemi her türlü font ile kullanabilirsiniz. İlk önce yapmamız gereken şöyle bir başlık oluşturmak:

1

<h1><span></span>Başlık Burada</h1>

CSS ile h1 etiketinize position:relative; komutunu vermek zorundayız. Çünkü span etiketine vereceğimiz position:absolute komutunu relative ile h1 etiketine bağlamaktır. Eğer bunu yapmazsak absolute komutu alan span h1’e göre değil sayfaya göre pozisyon alacaktır.

1
2
3
4
5
6
7
8
9
10
11
12
13

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
 
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

Gördüğünüz gibi span etiketimizin “gradient.png” adında arkaplanımız mevcut. Arkaplanımızın yüksekliği 31px olduğundan span etiketine de 31px yükseklik veriyoruz. Başlık fontunu da arkaplan resmimizin yüksekliğine göre ayarlamamız lazım ki gradient özelliği tam otursun. Yukarıda da gördüğünüz gibi h1 fontuna 100% değeri vererek yüksekliğinin tam oturmasını sağlıyoruz.

Eğer kodlarınızda boş span etiketi istemiyorsanız o zaman javascript kullanmak zorundasınız. Eklenecek olan jquery.js dosyası da aşağıdaki demo dosyada bulunmakta. Javascript kodumuzu ise <head></head> kodları arasına yerleştirin.

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
 
  //prepend span tag to H1
  $("h1").prepend("<span></span>");
 
});
</script>

Eğer bu özelliği IE6 kullanan ziyaretçilerinizin de görmesini istiyorsanız JQuery İle IE6 İçin Transparan PNG (Hem Arkaplanda Hem de Resimlerde) başlıklı konumdaki özelliği kullanmanız gerekiyor. Ben bu özelliği kullanmanızı tavsiye ederim. Çünkü her türlü transparan png dosyalarınızda css yada resim dosyanıza ek bir kod eklemeden kullanabilirsiniz. Ancak alternatif olarak şu kodu yine <head></head> kodları arasına yerleştirin:

1
2
3
4
5
6
7
8
9
10

<!--[if lt IE 7]>
 
<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
 
<![endif]-->

Demo dosyaya buradan ulaşabilirsiniz.

Not: Eğer gradient arkaplan dosyanız yazıdan uzun kalırsa yazıyı seçemezsiniz. Gradyan renginizin arkaplanınız ile aynı olmasına özen gösterin.

Not: Bu içerik hiçbir şekilde kopyalanamaz.

1. Yöntem

Bu yöntemde iki adet div kullanılıyor. Html kod örneğimiz şu şekilde:

1
2
3
4
5
6

<body>
	<div id="floater"></div>
	<div id="ortalanmis">
 	İçeriğimiz buraya gelecek
	</div>
</body>

Css dosyamızda şu şekilde olmalı:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

html, body {
	margin:0; padding:0;
	height:100%;
}
 
body {
	background:url('page_bg.jpg') 50% 50% no-repeat #FC3;
	font-family:Georgia, Times, serifs;
}
 
#floater {
	position:relative; float:left;
	height:50%;	margin-bottom:-200px;
	width:1px;
}
 
#ortalanmis {
	position:relative; clear:left;
	height:400px; width:80%; max-width:800px; min-width:400px;
	margin:0 auto;
	background:#fff;
	border:4px solid #666;
}

İşte asıl önemli alan burası. Floater’daki margin-bottom kodunun değeri ortalanmis div’in yüksekliğinin yarısı kadar olmalıdır. Aynı zamanda floater’a mutlaka genişlik verilmeli ve bu genişli 1px olmalıdır.

Bu yöntem tüm tarayıcılarda kusursuz çalışır ve yeterli alan olmadığında içerik kesilmez ve kaydırma çubuğu gözükür. Örnek uygulama resmi ise aşağıdaki gibidir:

2. Yöntem

Bu yöntem nispeten daha kolay bir yöntemdir ve sadece tek div kullanılır. Html örneği şöyledir:

1
2
3
4
5

<body>
	<div id="ortalanmis">
	İçerik Buraya
	</div>
</body>

Css örneğimiz ise şu şekilde:

1
2
3
4
5
6
7
8
9
10

body {
	background:#FC3;
	font-family:Georgia, Times, serifs;
}
 
#ortalanmis {
        position:absolute; top:0; bottom:0; left:0; right:0; 
        background-color:#fff;
	margin:auto; height:240px; width:70%;
}

Görüldüğü gibi çok kolay bir yöntem. Ancak IE8 hariç hiçbir IE versiyonunda çalışmaz ve yeterli alan olmadığı zaman içeriği keser ve devamını göstermez.

Chalkwork HTML Royalty-free Icons

<< Download >>

File Status Icons

<< Download >>

Web Application Icons Set

<< Download >>

Function Social Icons

<< Download >>

Web Social Icons

<< Download >>

1. DOCTYPE

Doctype sitemizin türünü belirler. Yani site xhtml mi, html mi, sürümü nedir gibi sorulara cevap verir. Doğru kullanımı için Xhtml sitenizdeki doctype kodunuzu aşağıdaki kodla kontrol edin:

1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

2. CSS Kodlarınız İçin Ayrı Bir Dosya Oluşturun

Style kodları html belgeniz içinde de olabilir ancak kod sadeliği, aradığınızı daha kolay bulabilmeniz ve vara olan hataları daha çabuk görebilmeniz için ayrı bir dosya oluşturmanız önemlidir. Hatta gerekirse kolaylık açısından birden fazla css dosyası oluşturun.

3. Her Etiket Mutlaka Kapatılmalıdır

Xhtml dokümanlarda her etiket mutlaka kapatılmalıdır. Bu hata daha çok img ve br etiketlerinde yapılır. Örnek kodlamalar şu şekilde olmalıdır:

1
2
3
4
5
6
7

<img src=”resmin adresi” > <!--Yanlış Kullanım -->
<img src=”resmin adresi” /> <!--Doğru Kullanım -->
 
<br> <!--Yanlış Kullanım -->
<br /> <!--Doğru Kullanım -->
 
<div></div> <!-- Doğru Kullanım -->

Görüldüğü gibi her etiket mutlaka kapatılmalıdır.

4. Resimlere Mutlaka Açıklama Eklenmelidir

Xhtml kurallarına göre resimlerinize mutlaka başlık eklenmelidir. Eğer başlık eklemezseniz kodlamada hata var demektir ve W3 doğrulamada da hata olduğunu görürsünüz. Doğru ve örnek kodumuz şu şekildedir:

1

<img src=”resmin adresi” alt=”Açıklama” />

5. Bağlantılarınız Başlık Ekleyin

Arama motorlarının bağlantılarınızı daha iyi okuyabilmesi için bağlantı kodlarınıza başlık ekleyin. Örnekteki kod bu anlamda çok işe yaramaktadır:

1

<a href=”adres” title=”Başlık”></a>

6. Etiketler ve Özellikleri Mutlaka Küçük Harfle Yazılmalıdır

Xhtml sitenizde etiketlerinizin ve özelliklerinin mutlaka küçük harfle yazılmış olmasına özen gösterin. Çünkü kural bunu gerektiriyor.

1
2

<IMG src=”resim adresi” alt=”Açıklama” /> <!-- Yanlış Kodlama -->
<img src=”resim adresi” alt=”Açıklama” />

7. Etiket Özelliklerinin Değerleri Yazılırken Mutlaka Tırnak İşareti Kullanın

Etiketlerinizin özellik değerlerini belirlerken bu değerleri tırnak işareti içerisinde yazın.

1

<img src”resmin adresi” width=”100” height=”100” alt=”Açıklama” />

8. Başlıklar İçin h1 … h6 Etiketlerini Kullanın

Xhtml’de başlıkları belirtebilmek için h1’den h6’ya kadar olan etiketler kullanılmaktadır. Başlıklarınızı bu kodlar içerisinde alırsanız arama motorları bu metinlerin başlık olduğunu anlayacaktır.

1

<h1>Başlık Yazısı</h1>

9. p ve br Etiketlerini Doğru Kullanın

Bu konuyu “Xhtml Kodlamada br ve p Etiketlerinin Farkı” adlı konumda ayrıntılı olarak anlatmıştım.

10. Kodlarınıza Açıklamalar Girin

Eğer html dosyanız çok karmaşık ve uzunsa size kodların yerini hatırlatacak örnekteki gibi açıklamalar girin.

1
2
3

<!-- Burada Menü Başlıyor -->
<div id="menu">
</div>

11. Sitenizin Hatalarını Bulmak İçin W3 Validator Kullanın

Sitenizin tam düzgün olarak kodlanıp kodlanmadığını anlamak için W3 Validator kullanın. Eğer hata sayısı az ise genel anlamda başarılısınız demektir. Ama yine de o hataları da gidermeye çalışın.

Eksik gördüğünüz, hatalı gördüğünüz maddeleri bana ulaşarak belirtebilirsiniz.

Bu yazıyı kaynak ve site adres linkini belirterek yayınlayabilirsiniz.

Resimde görüyoruz ki bir kutumuz var ve bu kutular border ile çevrelenmiş. Resimde yer alan “Margin boşluklarını” görüyoruz. İşte kutunun bulunduğu yere kutunun dışından boşluk bırakmak için margin kodunu kullanırız. Kullanımı ise şöyledir:

1
2
3
4
5
6
7
8
9

margin: 20px; /* Kutunun dört yanından 20px.lik boş alan bırakır */
margin: 20px 20px 20px 20px; /* Uzunluklar sırasıyla üst, sağ, alt, sol taraftan bırakılacak boşluk */
margin: 20px 20px 20px; /* Sırasıyla üst, sağ ve sol, alt taraftan bırakılacak boşluk */
margin: 20px 20px; /* Sırasıyla üst ve alt, sağ ve sol taraftan bırakılacak boşluk */
 
margin-top:20px; /* Üstten bırakılacak boşlu */
margin-bottom:20px; /*Alttan bırakılacak boşluk */
margin-left:20px; /*Soldan bırakılacak boşluk */
margin-right:20px; /* Sağdan bırakılacak boşluk */

İşte bu kodlar yardımıyla kutunun dışından bulunduğu yere göre belirli boşluklar bırakarak kutunun konumunu belirleriz.

Yine resimde görüldüğü şekilde eğer kutunun içinden boşluk bırakmak istiyorsak padding kodunu kullanırız. Padding sayesinde kutunun içerisine gelecek elementlerin (metin, resim, başka bir kutu, …) kutunun kenarından nekadar uzaklıkta yer alacağını belirleriz. Kullanım şekli padding ile aynıdır:

1
2
3
4
5
6
7
8
9

padding: 20px; /* Kutunun dört yanından 20px.lik boş alan bırakır */
padding: 20px 20px 20px 20px; /* Uzunluklar sırasıyla üst, sağ, alt, sol taraftan bırakılacak boşluk */
padding: 20px 20px 20px; /* Sırasıyla üst, sağ ve sol, alt taraftan bırakılacak boşluk */
padding: 20px 20px; /* Sırasıyla üst ve alt, sağ ve sol taraftan bırakılacak boşluk */
 
padding-top:20px; /* Üstten bırakılacak boşlu */
padding-bottom:20px; /*Alttan bırakılacak boşluk */
padding-left:20px; /*Soldan bırakılacak boşluk */
padding-right:20px; /* Sağdan bırakılacak boşluk */

İki şablonu da indirmek için tıklayın
Alternatif Link

Güle güle kullanın.

Bu dosyaları kaynak ve site adresi belirterek paylaşabilirsiniz.

CSS kodlama mantığı konulu yazımda html etiketlerini Css’de sınıf olarak kullanabildiğimizi söylemiştim. Eğer CSS konusunda fikir sahibi değilseniz o konuyla başlamanızı öneririm. Her neyse devam edelim. İşte link etiketi olan <a> da bir html etiketi olduğuna göre bu etiketi Css’ de sınıf olarak kullanabiliriz demektir. Nasıl mı? İşte örnek kodumuz:

1
2
3
4

a{
color:#000;
text-decoration:none;
}

Görüldüğü gibi a etiketini bir sınıf adı olarak kullandım. Böylece sitedeki tüm linkler bu kodlara göre şekillenecektir. Yani linklerimizin rengi siyah olacak ve yazı dekorasyonu olarak da hiçbir şey kullanılmayacak. Eğer text-decoration ile yazı dekorasyonunu belirlemezsek varsayılan olarak bağlantılarımız altı çizili olacaktır.

Linkimizi şekillendirdik, ama üstüne fareyle gelince bu sefer yine şekil değiştirmesini istiyorsak o zaman da şöyle bir kodu örnek alabilirsiniz:

1
2
3
4

a:hover{
color:#f00;
text-decoration: underline;
}

Böylece bağlantılarımızın üstüne geldiğimizde bağlantımızın rengi kırmızı ve dekorasyon olarak da altı çizili olacaktır.

Eee ziyaret edilen bağlantılarında farklı şekilde olsun istiyoruz. O zaman da a:visited kullanacağız:

1
2
3
4

a:visited{
color:#00f;
text-decoration:none;
}

İşte ziyaret edilen bağlantılarımız bu sayede de mavi olacak.

Bir bağlantı üzerine tıkladığımızda artık o bağlantı aktifdir. Aktif bağlantıları da aynı şekilde şekillendirebiliriz ki bunu da a:active kodu ile yaparız.

Buraya kadar sınıf adı olarak html kodlamada kullandığımız bağlantı etiketi olan <a> etiketini kullandık. Ama her linke ayrı id yada class da belirleyebiliriz. Ben bu noktada class kullanacağım ve class (sınıf) adı da menu olsun. Toplu kodları şimdi veriyorum.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.menu {
color:#000;
text-decoration:none;
}
 
.menu:visited{
color:#00f;
text-decoration:none;
}
 
.menu:hover{
color:#f00;
text-decoration:underline;
}
 
.menu:active{
color:#f00;
text-decoration:none;
}

Böyle bir css kodlamadan sonra html kodlamada bu sınıfı bağlantıya tanıtmak gerek. İşte bunu da şu şekilde yapacağız:

1

<a class="”menu”" href="”baglanti-adresi.html”">Bağlantı Metni</a>

Son olarak eğer bağlantı metninin yanına bir resim, ikon koymak istiyorsak css kodlamada arkaplan resmi belirlememiz gerek. Bu yöntem ile bağlantılarınızı görsel olarak ilgi çekici kılabilirsiniz:

1
2
3
4
5
6
7
8

a{
background-image:url(resmin-adresi);
background-repaet:no-repeat;
background-position: left;
height:resmin yüksekliği;
padding-left: (resmin durumuna göre genişlik verin);  /* Bu durumu aşağıda açıklayacağım */
color:#000;
}

Bu kodları açıklamak gerekirse ilk olarak resmimizin yolunu tanıttık, ikinci olarak resmin sadece bir defa tekrar etmesini istedik. Üçüncüsünde metnin sol kenardan ne kadar boşluk bıraktıktan sonra başlayacağını belirledik. Eğer bunu belirlemeseydik bağlantı metni resmin üzerinde olurdu. Duruma göre dikey olarak ortalamak için de padding-top kodunu kullanabilirsiniz.

Böylece bu yazıyı da noktalayalım. Galiba padding ve margin özelliklerinden bahsetmek de şart oldu.

İster kağıt üzerine yazalım, istersek de bilgisayar üzerinde ofice uygulamaları üzerine yazalım her paragraftan sonra mutlaka yeni bir satıra başlarız. Bu yeni satır ve satır başı bize “Artık yeni bir paragraf okuyorsun.” der. İşte html kodlamada da tarayıcıya yeni bir paragrafın başladığını gösteren <p> kodudur. Tarayıcıya diyorum çünkü o kodları biz okumuyoruz, tarayıcı okuyor. Ancak bu konuda çok yaygın olan yanlış bir kullanım mevcut. Pek çok kişi <p> kodu ile başladığı metin içerisinde yeni bir paragraf oluşturmak için <br /> işaretini kullanıyor ve tüm metin bittikten sonra p etiketini kapatıyor. Bu kodlama tarayıcıya şunu söyler: “Metin en baştan en sona paragraftır.” Halbuki öyle mi, biz öyle mi istiyoruz, ya da öyle mi görüyoruz. Hayır. Böyle bir kodlamada bizim gördüğümüz ve istediğimiz her <br /> etiketinden sonra yeni bir paragrafın başladığıdır. Ama doğrusunu tarayıcı görüyor. Size yanlış bir kullanım örneği sunayım:

1
2
3
4
5
6
7

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br />
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br />
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br />
</p>

İşte bu kodlamada <br/> etiketiyle yapılmak istenen yeni bir paragraftır. Ancak kodlama paragrafın </p> kodu ile bittiğini belirtiyor. Her paragraf p etiketinin kapatılması ile bitiyorsa o zaman doğru kullanım şu olmalıdır:

1
2
3
4
5
6
7
8
9

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</p>

Bu kod da bize metnimizde üç adet paragraf olduğunu belirtiyor. Demek ki paragraflarda sadece <p> etiketini kullanmalıyız.

Peki o zaman <br /> ne işe yarıyor? Paragraf haricinde tüm yeni satır oluşturma işlemlerinde ise bu kodu kullanmalıyız. Adres satırı buna örnektir, adres yazarken yeni bir satıra geçmek için bu kodu kullanabiliriz.

Unutmayın bu tür ufak ayrıntılar arama motoru optimizasyonu için önemlidir. Bu ufak ayrıntılar kaçırılmamalıdır.

Leopard kullanıcıları için: 29 Dolar – Aile Paketi 49 Dolar (5 Bilgisayar)
Tiger ve daha önceki OS kullanıcıları için: 169 Dolar – Aile Paketi 229 Dolar (5 Bilgisayar)
8 Hazira 2009 tarihi itibariyle satın alınan Mac bilgisayarları ise 10 Dolar ile Kar Leoparı’na sahip olabilirler.

Css kodlama sınıflar içerisinde yapılır. Yani sitedeki resimler grubu, paragraflar grubu, başlıklar grubu buna örnek olarak verilebilir. Sınıf adlarında kesinlikle Türkçe karakter, boşluk kullanmayın. Css kodlama için de ilk olarak grubumuzu belirlemeliyiz. İlk sınıf örneğimiz sitedeki tüm resimler olsun. Resimler grubunun etiketi Html’deki etiketidir yani img. Kodlamaya da bu etiket ile başlarız:

1
2

img{
}

Gördüğünüz gibi img etiketimizden sonra süslü parantez açtık ve kapattık. İşte sitemizdeki resimlerin görünümünü etkileyecek bütün kodlar bu parantezler içerisinde yazılır ve bir kod bittiyse sonuna noktalı virgül (;) konulmak zorundadır ki o kodun bittiğini anlasın tarayıcımız. Her kodun da aldığı bir değer mutlaka vardır. Eğer bu değer boş bırakılırsa o kod yok sayılır. Örnek uygulamamıza devam edersek:

1
2
3

img{
border:1px;
}

Burada görüldüğü gibi border kodunu sitedeki tüm resimlere atadık ve bu koda 1 değerini verdik. Bu demektir ki tüm resimlere 1px.lik çerçeve eklenecektir. Bu kodları arttırabiliriz:

1
2
3
4
5

img{
border:1px #000 solid;
width:50px;
height:50px;
}

Bu kodları da açıklamak gerekirse çerçevimize renk kodu ekledik ve çerçeve stilini de solid olarak belirledik. Aynı zamanda resimlere 50px.lik genişlik ve 50px.lik yükseklik vermiş olduk. Bu şekilde sitenin tümüne hitap eden sitede o sınıftaki tüm elementleri kapsayan ve html kodlamada kullanılan html etiketlerinin başında id (#) ya da class (.) işareti kullanılmaz. Daha da açıklamak gerekirse şu gibi etiketlerde bu işaretler kullanılmaz: img, p, h2, table, ul, body, input, a, form, … Ve biz bu etiketleri kullanarak sınıf oluşturduğumuzda html dosyası içerisinde bu elementlere ayrı bir kod eklemek zorunda değiliz. Tarayıcı otomatik olarak bu etiketleri bulup bu özellikleri o etiketlere uygulayacaktır.

Tabii sürekli html etiketleri kullanarak sınıf oluşturmak zorunda değiliz. Html içinde istediğimiz bir gruba istediğimiz adda bir sınıf oluşturabiliriz. Tabii bu sınıfı oluşturduktan sonra bu sınıfın kodlamasına id ya da class durumuna göre, o durumun işaretiyle başlarız. Örnek olarak html dosyasında bir menü grubumuz varsayalım. Bu menüye id sınıfı oluşturacaksak ve sınıf adı olarak da menu belirleyeceksek eğer şu şekilde bir kod yapısı oluştururuz:

1
2

#menu{
}

Görüldüğü gibi sınıfımız id olduğundan dolayı “#” işareti ile başladık ve sonrasında sınıf adımızı yazdık. Şimdi de sitemizde 200 px. Genişliğinde sağ blok olduğunu varsayalım. Bu bloğumuza da sınıf adı olarak da sag-blok belirleyelim ve sınıf yapısı da bu sefer class olsun. Görüldüğü gibi sınıf adında boşluk yerine “-“ işareti kullandım ve Türkçe karakter kullanmadık. Örnek kodlama olarak da şu şekilde yapabiliriz:

1
2
3
4

.sag-blok{
width: 200px;
background-color:#333;
}

İşte bu sınıf da class olduğundan “.” işareti ile başladık.

Şimdi gelelim kodlardaki değerlerin nasıl yazılması gerektiğine. Eğer sayısal bir değer ve bu değer büyüklük belirten bir değerse ilk olarak sayımızı yazarız ve sonrasında o büyüklüğün cinsi ne olacaksa boşluk bırakmadan ekleriz. Örnek olarak “width: 500px”, “font-size:12pt”, “width:10%”,… Eğer ki değerimiz yine sayısal değer fakat renk belirten bir değerse rakamlardan önce “#” işaretini kullanırız.

Eğer bir sınıf içerisinde başka bir sınıfı belirleyeceksek ilk olarak ilk sınıfımız yazılır bir boşluk bırakılır ve ikinci sınıfımız yazılır. Örnek kodlamamız ise:

1
2
3
4

.sag-blok img{
width: 10px;
height:10px;
}

Görüldüğü gibi ikinci sınıfımızda yine id yada class işareti kullanmadık çünkü bu sınıfımız html kodlama etiketlerinin sınıfıdır. Eğer sınıf adını biz verseydik ikinci sınıfımızda da yine id ya da class adı kullanacaktık:

1
2
3
4

.sag-blok #menu{
background-color:#fff;
color:#000;
}

CSS sisteminin yapısı ve kodlama mantığı bu şekildedir. Bu şekilde bir css dosyası oluşturabilirsiniz. Unuttuğum, eksik bir nokta varsa yorumlardan yada iletişim bölümünden bana ulaşabilirsiniz ve ben bu eksikliği gideririm.

Bu yazıyı kaynak ve site adresini belirterek alıntı yapabilirsiniz.

IFrame virüsleri yerleştiği sitede görünmeyecek şekilde sayfalar açarak virüsü yayana hit kazandırırlar. Bazı IFrame’ler ise siteyi ziyaret eden kişilerin bilgisayarına karşıdan zararlı yazılımlar yüklerler. Böyle bir durumda genellikle Google sitenizi zararlı olarak etiketleyerek size hit kaybı olarak geri dönüş sağlar.

Bu virüslerin çalışma mantığına gelince sitenize öncelikle şöyle bir kod yerleştirir:

1
2

<iframe src="acilan sitenin adresi" style="visibility:hidden;position:absolute">
</iframe>

Bu kodu bazen php yardımıyla php’nin echo komutuyla siteye yazdırırlar. Echo komutunu bilmeyenler için biraz açalım. Bu kod php’nin yazdırma kodudur. Bu kod sayesinde siteye bir text ya da kod yazdırabiliriz.

Bu IFrame’nin bir diğer dikkat çeken özelliği ise sitenizde açtığı sitenin adresinde bol rakamların bulunmasıdır.

Peki, bu kodlar sitemize hangi yollarla bulaşıyor. En önemli sebep bilgisayarınıza bulaşan zararlı yazılımlardır. Bu yazılımlar siz ftp adresinize bağlandıktan sonra bütün ftp bilgilerini kaydederek bu bilgileri saldırgana iletirler. Öte yandan site dosyalarınızı yazma izinlerini gereksizse açmayın. Bazen bu kodların sebebi kullandığınız sunucu olabiliyor.

“IFrame kodlarını bulup siliyorum, ama her seferinde tekrar bulaşıyor.” Diyorsanız eksik uygulama yapıyorsunuz demektir. Yapmanız gerekenleri sıralamak gerekirse:

1. Bilgisayarınızı iyi bir anti virüs ve spyware yazılımı ile taratıp temizleyin.

2. Virüs ftp bilgilerinizi (şifre, k.adı) ele geçirmiş olabilir. Bu bilgilerinizi değiştirin.
.3 Sitenizdeki sayfaları bilgisayarınıza çekip kodları temizleyin.

Bu adımları yapmadan önce kullandığınız ftp programı eğer illegal, crackli yazılım ise kaldırın. Onun yerine legal, ücretsiz yazılımları kullanın.

Eğer hiçbir sonuca ulaşamıyorsanız sunucu sağlayıcısıyla konuşun sorunun kaynağını tespit etmeye çalışın. Ama bu arada bilgisayarınızda zararlı yazılımlar varsa onların tamamen kaldırıldığından emin olun.

Tarayıcı uyumsuzluğu elbette ki çok büyük bir dert… Bu konuda her türlü çözüm önemli ve bu da önemli çözümlerden biridir. Diyelim ki bir site yaptık ve sitemiz bir yada birkaç yer haricinde tüm browserlarda istediğimiz sonucu veriyor. Üstelik de tek bir css dosyası kullandık varsayalım. Bu bir yada birkaç hata için ayrı css yazmak istemiyoruz ki bence de istemeyiz. O zaman ne yapacağız. Aşağıdaki kodları inceleyin nasıl yapacağımızı anlayacaksınız:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/* IE 6 ve önceki versiyonlar */
* html #id-adi  { color: red }
 
/* IE 7 ve önceki versiyonlar */
*:first-child+html #id-adi { color: red }
 
/* IE 7 ve modern tarayıcılar */
html>body #id-adi { color: red }
 
/* Modern tarayıcılar (IE 7 hariç) */
html>/**/body #id-adi  { color: red }
 
/* Opera 9.27 ve önceki versiyonlar */
html:first-child #id-adi  { color: red }
 
/* Safari */
html[xmlns*=""] body:last-child #id-adi { color: red }
 
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #id-adi  { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #id-adi  {  color: red }
 
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#id-adi  { background: #FFDECE; border: 2px solid #ff0000  }
}
 
/***** ID yada Class İçinde Hackler ******/
 
/* ie6 ve öncesi */
#id-adi  { _color:blue }
 
/* ie7 ve öncesi */
#id-adi  { *color: blue } /* or #color:blue */

Gelelim nasıl kullanılacağına. Öncelikle şu dosyayı indirelim: jquery_pngfix.rar

Sonrasında içinden çıkan iki JavaScript dosyasını sitemizin ana dizinine atalım ve html kodlarından <head></head> tagları arasına şu kodları ekleyelim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<head> 
... 
 
<script type="text/javascript" src="jquery-latest.pack.js"></script> 
<script type="text/javascript" src="jquery.pngFix.js"></script> 
 
<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script> 
 
... 
</head>

Bu kodlardan ilk ikisi javascript dosyalarımızı sitemize ekler. Son ve yedinci satırdan başlayan kodumuz sitemizde pngFix sistemini aktif duruma getirir. Her şey hazır. Peki resim dosyalarını sitemizde nasıl kullanırsak png dosyalarımız IE6’da da transparan olur? Aşağıdaki örnek kodları inceleyerek siz de kullanabilirsiniz:

Resimlerde Kullanımı:

1
2
3
4
5
6
7
8
9
10
11

<img src="png dosyanızın yolu" alt="Bu alt etiketi yazısıdır" width="173" height="173" />
 
<img title=" Bu title etiketi yazısıdır" src="png dosyanızın yolu" alt=" Bu alt etiketi yazısıdır" width="173" height="173" /> 
 
<a href="#">
    <img title=" Bu title etiketi yazısıdır" src="png dosyanızın yolu" alt=" Bu alt etiketi yazısıdır" width="173" height="173" />
</a> 
 
<a href="#">
    <img style="border:1.0em dashed #090;padding:10px;margin:10px;" title=" Bu title etiketi yazısıdır" src="png dosyanızın yolu" alt=" Bu alt etiketi yazısıdır" width="173" height="173" />
</a>

Arkaplanda Kullanımı:

1
2
3
4
5
6

<div>
<div style="float: left; width: 173px; height: 173px;">
Arkaplanın üstündeki yazı</div>
<div style="background: white url(pngtest.png) repeat scroll 0% 0%; float: right; width: 346px; height: 346px;">
Arkaplan Üstündeki Yazı</div>
</div>

Gördüğünüz gibi normal kullanımdan hiçbir farkı yok, resim dosyalarınızın kodlarına yapılan hiçbir ekleme yok.

Bu yazı orijinal sitesindeki yazının İngilizce olmasından dolayı yazılmıştır. Bu yazıyı kaynak belirterek ve site linkini vererek kullanabilirsiniz.

Örnek uygulamaları ve orijinal sitesi: http://jquery.andreaseberhard.de/pngFix/

Aynı zamanda HTML site görünümü üzerinde size istediğiniz sonucu verecek esneklikte değildir. CSS oluşturulduktan sonra işte bu problem ortadan kalkmıştır. Çünkü CSS tamamıyla görünüm üzerinde etkinlik gösterdiğinden oldukça esnektir.

Eski HTML siteler tablolarla yapılırdı. Peki, bunun dezavantajları nelerdir? Öncelikle tablolar site trafiğini olumsuz etkiler çünkü yeni nesil XHTML sitelere göre yüklenmesi oldukça yavaştır. Aynı zamanda site görünümü üzerinde tam istediğiniz sonucu alabilmeniz için çok uğraşmanı gerektirir ve yukarıda bahsettiğim gibi esnek değildir. Oysa CSS ve XHTML ile birlikte tasarımcıların hayatını kolaylaştıran ve tabloların yerini alan div’ler tasarım konusunda çok esnektirler ve daha hızlı yüklenebilirler. Aynı zamanda div’ler sayesinde tabloların çok karmaşık olan yapısı daha kolay halde halledilebilir olmuştur. CSS sayesinde de div’ler üzerinde tam hâkimiyet kurarak istediğiniz sonucu alabilirsiniz.

Style Kodlarının Yazılışı

Style kodlarının yazımının birkaç yöntemi vardır ve bunları maddelerle ve örnekleyerek açıklamak gerekirse:

1. Html Dosyası İçinde: Eğer style kodlarını css dosyası içinde belirtmek istiyorsak <head></head> kodları arasına yazmamız gerekir. Örnek olarak aşağıdaki yapıyı inceleyebilirsiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
<title>Style Kodlarının Yazılışı</title> 
<style type="text/css">
<!--
p {  
font-size:12pt;  
color:#000;  
text-align:justify  
} 
h1 {  
font-size:18pt;  
color:#f00;  
text-align:left  
}
</style>
</head>
<body>

2. Html Dosyası içinde etiketler üzerinde: Eğer style kodlarını html yapımızdaki elementler üzerine html dosyası içinden eklemek istiyorsak şöyle bir yapı kullanırız:

1

<img style="”float:left;" src=”resmin" alt="" />

1

<div style=”background-color:#fff; font-size:12px”></div>

3. CSS dosyasını dışarıdan çağırmak: İşte en çok kullanılması gereken yapı da budur. Çünkü style kodlarının html içinde gömülü olması demek ilk olarak html yapısını karmaşık hale getirir ve html dosyanızı kabartır. İkinci olarak ise birden fazla aynı yapıya sahip html dosyanız var ve bunların üzerinde değişiklik yapmanız gerekiyorsa o zaman bütün sayfaları tek tek incelemeniz gerekir. Ama CSS dosyasını dışarıdan çağırırsanız tek dosya ile istediğini tüm değişiklikleri yapabilirsiniz. Yazılım şekilleri de şöyledir:

1
2
3
4
5

<style type="text/css">
<!--
@import url("css dosyasının yolu");
-->
</style>

1

<link href="css dosyasının yolu" rel="stylesheet" type="text/css" />

Unutmadan şunu da belirteyim css dosyalarının uzantısı da css’dir. Yani dosya ismi şu şekildedir: style.css, dosyanizin-ismi.css,…

background-color: Bu kod sayesinde istediğimiz elemente yada sayfamıza renk verebiliriz. Değer olarak “red, blue” gibi renk adları html renk kodlarını kullanabiliriz.

background-image: Bu kod sayesinde arkaplan olarak bir resim kullanabiliriz. Örnek kullanımı ise şöyledir:

1

background-image:url(“resmin adresi”);

background-position: Bu kod ise arkaplan olarak belirlediğimiz resmin pozisyonunu belirler. Aldığı değerler “left, right, top, bottom, center” kelimeledir. Eğer bir değer atamazsak left ve top değerlerini otomatik olarak alır. Örnek kullanımı:

1
2

background-position: left;
background-position:right bottom;

background-repeat: Bu kod ile arkaplan resmimizin kendini tekrar edip etmeyeceğini belirleriz. Aldığı değerlerse:

repeat-x: Resmi analitik olarak x yönünde yani yatay olarak yineler.
repeat-y: Resmi analitik olarak y yönünde yani dikey olarak yineler.
repeat     : Her yöne yineler.
no-repeat: Resmi bir defa gösterir ve yinelemez.

background-attachment: Bu kod arkaplanın sayfa ile birlikte kaydırılıp kaydırılmayacağını belirler. Aldığı değerler:

fixed: Sayfa kaydırıldığında arkaplan resmi sabit kalır.
scroll: Sayfa kaydırıldığında arkaplan resmi de kayar.

background: Yukarıdaki tüm kodları tek satırda kullanabilmemizi sağlar. Her değer arasında boşluk bırakılarak yazılır. Örnek kullanımı şöyledir:

1

background: url(resmin adresi) #FFC repeat-x top;

1
2

<div id="kutu"></div>
Deneme Yazı Elementi

Css kodları ise şöyle belirleyelim:

1
2
3
4
5

#kutu{
float:left;
width:100px;
height:100px;
}

İşte bu kodlarla ise şöyle bir sonuç alırız. Kutu sayfanın solunda yer alır ve yazı de hemen kutunun bitişiğinde.

Eğer “Deneme Yazı Elementi” yazısının kutunun altında yer almasını istiyorsak yukarıda bahsettiğim clear kodunu kullanmamız gerek. İşte o zaman css dosyamıza şu kodu eklememiz gerek:

1
2
3

p{
clear:left;
}

İşte bu kodları css dosyamıza eklediğimizde <p> elementinin sağındaki float kodunu yok saydırırız. Böylece de şu sonuca varırız:

Float Kaynaklı Uzamayan Divler

Eğer bir div elementinin içinde bir elementte float kodunu kullanırsanız, ana element olan div yüksekliğini belirlerken içindeki float kodu kullanılmış divi yok sayar. Bu sorunu örneklemek gerekirse şöyle bir kodu kullanabiliriz:

1
2
3
4

<div id=”genel-cerceve”>
<div id=”kutu”></div>
Burası da yazı bölümü
</div>

Css kodları ise:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#genel-cerceve{
width:500px;
margin:auto;
background-color:#FFF;
border:1px solid #000;
text-align: left;
}
 
#kutu{
background-color:#f2ae29;
width:100px;
height:100px;
float:left;
margin-right:30px;
}

İşte böyle bir örnek ile o sorunu görebiliriz:

Bu sorunu ortadan kaldırıp genel çerçevenin uzamasını istiyorsak bunun birkaç çözümü var. Bu çözümlerden biri de css de clear kodunu kullanmaktır. Nasıl mı? Genel çerçevenin en altında görünmeyen bir div ekleyeceğiz yani yüksekliği 0 olacak ve bu dive clear ile both değerini vereceğiz. Örnek kod vermek gerekirse css dosyanıza şu kodları ekleyin:

1

.floatCozumu {clear: both; height:0;}

Daha sonra yine dediğimiz gibi genel cercevenin en altına bir div ekleyip class ile style kodlarını yukarıdaki gibi yapıcaz. Yani örnek kodumuz şöyle:

1
2
3
4
5

<div id=”genel-cerceve”>
<div id=”kutu”></div>
Burası da yazı bölümü
<div class=”floatCozumu”></div>
</div>

Böylece bu sorunu halletmiş olduk. Bir diğer çözüm yolu da – ki ben bu yolu tercih ederim – “Overflow Yöntemi”dir. Yani genel cercevemize css yardımıyla overflow ile hidden değerini vermek. Yapmanız gereken ise aşağıdaki kodu css dosyanızdan var olanıyla değiştirmek.

1
2
3
4
5
6
7
8

#genel-cerceve{
width: 500px;
margin: auto;
background-color: #FFF;
border: 1px solid #000;
overflow: hidden;
text-align: left;
}

Umarım yararlı bilgiler verebilmişimdir. Sonucu da gösterelim bari. İşte sonuç:

Öncelikle şöyle bir butonumuz olduğunu varsayalım:

<input type="submit" value="Submit" />

Bu kod bize standart butonumuzu sitemize eklememize yardımcı olur. Şimdi bunu css ile değiştirelim. Bunun iki yöntemi var. Birincisi butonumuza duruma göre id yada class etiketi atamak ki hangisini seçeceğinize karar vermelisiniz. Çünkü ikisinin kullanım şekillerinin farklı olduğunu “Css ile tasarımda id ve class farkı” adlı konumda değinmiştim. Ben id ekleyerek örneğe devam ediyorum:

<input type=submit" value="Submit" id="butonumuz" />

Id etiketimizin adını butonumuz olarak verdim. Eğer butona bir resim dosyasından arkaplan vereceksek css dosyamız şöyle olacak:

#butonumuz{
background-image:url(resmimizin adresi);
width: resmimizin genişliği;
height: resmimizin yüksekliği;
border: 0px;
}

Böylece butonumuza bir resimden arkaplan verdik. Bir buton resmi hazırlayıp butonumuzu bu şekilde kullanabiliriz. Eğer renk olarak butonumuzu değiştirmek istiyorsak da css dosyamız şöyle olacak:

#butonumuz{
background-color:#renk kodumuz;
border: #çerçeve renk kodumuz;
}

Butonumuza eğer id yada class değeri vermeden değiştirmek istiyorsak butonların genel css sınıf adını css dosyamıza eklememiz gerek. Ancak unutmamanız gerek ki bu kod o lanet tarayıcı olarak nitelendirdiğim IE6′da çalışmayacaktır. Ama olsun ben IE6 kullanıcılarını umursamıyorum diyorsanız buyrun css kodu:

input[type="submit"] {
...
}

Bu … ile dolu alanı önceki örnekteki gibi dilerseniz resimden buton yaparak, dilerseniz de renk ayarlarıyla oynayarak dilediğiniz gibi doldurabilirsiniz.

Eğer siteyi Css yardımıyla ortalamak istiyor ve bunun nasıl yapıldığını bilmiyorsanız kaynak burada. Öncelikle örnek bir sayfa yapısı oluşturalım.

<body>
<div id=”sayfamiz”></div>
</body>

Sitemizin genel çerçevesini sayamis id’si ile oluşturduk. Şimdi sıra bu sayfayı css ile ortalamaya geldi.

Sabit Genişlikte Site İçin:

Body {  text-align:center; }
#sayfamiz { width:800px; margin:auto; }

Pencereye Göre Değişen Genişlik İçin:

Body  { text-align:center; }
#sayfamiz { marrgin-left:10%; margin-right:10%; }

Her şey bu kadardı. Güle güle kullanın.

Id etiketi sayfa içerisinde her zaman tek kullanımlıktır. Eğer bir id etiketini birden fazla yerde kullanmışsanız w3 doğrulamada mutlaka size hata olduğunu söyleyecektir. Eğer css bilmeyen biriyseniz nasıl kullanıldığını göstereyim:

<div id=”id_adi”>

Görüldüğü gibi id adında türkçe karakter yada boşluk kullanılamaz ve eğer id=”id_adi” değerini birden fazla kullanırsanız hata yapmış olursunuz.

Class etiketiyse birden fazla kullanılabilir. Zaten class kelimesi İngilizcede sınıf anlamına gelmektedir. Burdan da anlaşılacağı gibi class etiketi bir sınıfı temsil eder ve o sınıfın tüm elemanlarında kullanılabilir. Kullanımında ise id yerine class yazarız. Tabii farklılıkları bu kadar değil, css yazılımınlarında da farklılık var. id etiketini “#” ile başlatırken class etiketini “.” ile başlatırız.