ercani bilişim » Web Kodlama

web tarayıcılarında web sayfamızın doğru yorumlanması

22-07-2008
ercani Bunlarıda Bilin, html notları, püf noktaları, virüs

Dünya Çapında Ağ Birliği (World Wide Web Consortium ya da kısaca W3C) Ekim 1994′te Ağ’ın mucidi Sir Tim Berners-Lee tarafınan MIT ve CERN bünyesinde kurulmuş uluslarası Dünya Çapında Ağ (WWW) standartlarını belirleyen örgüttür.(vikipedia)

İşte bu örgütçe tanımlanan CSS ve HTML gidi diller tarayıcılar tarafından yorumlanır. Tarayıcılar bir web sayfasını yorumlarken iki çeşit yorumlama modu kullanır. standart mod(standards mode) ve garip mod(Quirks mode) .

Standart modda taraycı maksimum verime ulaşır. Kodlar en iyi şekilde ve ayrınlı olarak yorumlanır.
Garip modda ise rastgele yorumlanır ve css te bazı özellikleri desteklemez bunun sonucunda sayfada sorunlar ortaya çıkar.O yüzden bir web sayfası hazırlarken bunu dikkate alak hazırlamamız gerekir.

Peki web sayfamızın standart modda yorumlanmasını nasıl sağlayabiliriz derseniz anlatayım.

DTD(document type definition) döküman tipi tanımlamasıdır. Eğerki sayfamızda bu tanımlamayı yaparsak web tarayıcısı tanımladığımız şekilde web sayfasını yorumlar. örneğin;

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Bu tanımlama sayfanın sadece XHTML1.0 kurallarının geçerli oldugu bir XHTML sayfası oldugunu gösterir.

bu kodu sayfamızın başında kullanabiliriz genel kullanımı şu şekildedir;

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>doctype gösterimit</title>
</head>
<body>
</body>
</html>

şimdide bir web sayfasının kodlama diline göre hangi tanımları yapacağımızı gösterelim;

Document Type	DOCTYPE
HTML 3.2	<`!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">`
HTML 4.0 Transitional	<`!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">`
HTML 4.0 Frameset	<`!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">`
HTML 4.0 Strict	<`!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">`
HTML 4.01 Transitional	<`!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">`
HTML 4.01 Strict	<`!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">`
XHTML 1.0 Strict	<`!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">`

kaynak :http://www.ericmeyeroncss.com/bonus/render-mode.html

Bu tanımlamaları mutlaka yapmalıyız çünkü hala IE6 kullanan kullanıcılar var ve zaten css 3 tanımlamalarında oldukça düşük kalitede yorumlanıyor.Daha fazla hata olmaması için gerekli bir tanımlama.

Bunun dışında (X)HTML dökümanlarımızı onaylatmamız gerekir. Bu şu demektir; kod yazarı olarak yaptığınız çalışmayı birde onaylatmış ve sorunları varsa görüp gidermiş olursunuz.Bunu yapmak için http://validator.w3.org/
adresi hizmet veriyor. Bunun dışında zaten çoğu web sayfası editörü bu hizmeti veriyor.

Henüz Konuşma Yok

css te html elemanlarına müdahale etmek (devam)

19-07-2008
ercani css notları

Önceki yazıda birazda olsa css in bir html elemanına nasıl baktığını gördük. Şimdide bu bakışın tanımlamalarını yazarak örneklendirelim.

PADDİNG (kenar içi boşluk): Genel olarak şu tanımlamaları alır.

Üst kenar içi boslugu(padding-top)
Sag kenar içi boslugu (padding-right)
Alt kenar içi boslugu (padding-bottom)
Sol kenar içi boslugu (padding-left)
Kenar içi boslugu (padding)

sadece padding {2em;} diye tanımlanırsa tüm özellikleri aynı anda 2 em olarak kullanır.

veya kısa olarak

padding{2em 4em 3em 1em;} diye tanımlanarak 4 özellik atanmış olur. Aslında tüm tanımlamalar için genel özelik ataması şu şekilde işler.

Eğer tek bir değer belirtilmişse, bu değer tüm kenarlara uygulanır.
İki değer belirtilmişse, ilk değer alt ve üst kenarların, ikinci değer ise sol ve sağ
kenarların iç boşluk genişlikleri olarak ele alınır.
Üç değer belirtilmişse,
birinci üst kenarın, ikinci sol ve sağ kenarın, üçüncü ise alt kenarıniç boşluk genişliği
için belirtilmiş sayılır.
Eğer dört değer belirtilmişse bunlar sırayla üst, sağ, alt ve sol kenar iç boşluk
genişlikleri olarak ele alınır.

Bunu tüm tanımlamalar için düşünebiliriz.

padding ve margin de tüm uzunluk değerlerini kullanabiliriz. (px,in,em,ex..)

MARGİN(kenardışı boşluğu). aynen padding teki gibi değerler alır. aşağıdaki bir örnekteki gibi.

margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;

BORDER(kenar çizgisi): YAZININ TAMAMINA BAK »

Henüz Konuşma Yok

css te html elemanlarına müdahale etmek

19-07-2008
ercani css notları

CSS html elemanlarına(<p>,<h1>…) bakarken onları bir kutu içindeymiş gibi algılar.Yani bir paragrafımız olsun; css le paragrafa müdahale ederken, css paragrafa bir kenar çizgisi ekler (bu değer ‘0′ sa görünmez) yani border. border ile paragraf arasındaki alan kenar içi boşluğudur (padding).padding uzunluk değeri aldıkça boşluk büyür. Diğer bir boşluk border ile yani çerçeve ile diğer nesneler arasındaki boşluktur.Yani kenardışı boşluk (margin). Margin bir paragraf içindeki bir resmin , paragrafa yakınlık uzaklık değerini tanımlar.Biraz karışık bir durum gibi görülüyor ama aşağıdaki resme bakarak daha iyi anlayabiliriz.

Kenar iç boşluk alanının yüzey rengi veya resmi background niteliği ile belirtilir.
background{color:red;} gibi.

Bir örnekle daha iyi açıklayalım.

      li.cizgili {          /* LI için kenar çizgileri */
        border-style: dashed;  /* Kesik çizgili */
        border-width: medium;  /* Orta kalınlıkta */
        border-color: lime;    /* Açık yeşil renkte */
        background:#bb55cc;    /*mor renkte kenar içi boşluk*/
      }

Bu paragraf orta kalınlıkta kesik çigili ve yeşil renkte
border içerir.


Bu kodun görüntüsü şu şekildedir;
 
Genel olarak tanım bu şekildedir. yani kenar içi boşluk(padding),
kenar çizgisi(border) ve
kenar dışı boşluk(margin). Bu üç özelliğin tanımlamaları farklı farklıdır.
Örneğin border için;
kenar çizgisi tipi border-style, kenar çizgisi genişliği border-width ,
kenar çizgisi rengi border-color tanımlanabilir.
 Bu tanımlamarıda diğer yazımda vermek istiyorum.

Henüz Konuşma Yok

css te ‘a’ (link elemanı) özellikleri

18-07-2008
ercani css notları

css in bize sunduğu sonsuz nimetlerden biriside HTML veya XHTML deki <a/> elemanına
kendimizce uygun gördüğümüz renkleri ve özellikleri atayabilmemizdir.aslında biz bu
tanımlamaları yapmasakta tarayıcı varsayılan değerleri kullanır ve renklendirir.
ama bir web sayfası tasarım istediğinden bize yeterli olmaz.aşağıda verilen
örnekte bu uygulanmıştır.

Genel işleyişini anlatırsak bu iş sözde sınıflarla ve elemanlarla gerçekleşir.
Sözde sınıf; bir elemanı farklı sınıflara böler.(örn: link elemanını
active, visited vd. sınıflarına böler).
:visited bir sözde sınıf tanımlamasıdır. ':' sözde sınıflandırma işaretidir. visited
sözde sınıf seçicisidir.kullanımı aşağıdaki gibidir. isterseniz css tanımlamalarıyla
daha çok tanım yapabilirsiniz.Örneğin a:hover tanımlamasını kullanarak mouse
linkin üzerine
geldiğinde yazı tipini,boyutunu,rengini,yapısını ayarlayabilirsiniz.

a:link    { color: red }    /* ziyaret edilmemiş bağlantı */

a:visited { color: blue }   /* ziyaret edilmiş bağlantı   */

a:hover   { color: yellow } /* kullanıcı rastlarsa dikkatini çekmek için */

a:active  { color: lime }   /* etkin bağlantılar */

Bu tanımlamaları tek bir eleman için kullanmak isterseniz.ID yada sınıf seçiciside
kullanabilirsiniz
#deneme td.ilk:hover {background-color: #fff; } gibi.

Henüz Konuşma Yok

css te renkler ve uzunluk değerleri

18-07-2008
ercani css notları

css te renkler tanımlanırken ya bir anahtar sözcük yada sayısal olarak RGB(red-green-blue) tanımlanır.

anahtar tanımlama örnek verecek olursak;

body {color: black; background: white }

h1 { color: maroon }

h2 { color: olive }

verilebilir.

css te renklerin anahtar sözcükleri: black, YAZININ TAMAMINA BAK »

2 Konuşma

css’i web dökümanlarına eklemek

15-07-2008
ercani css notları

1. yöntem (x)HTML kodunun içine direkt olarak style özelliğini kullanmak. Bu aslında tavsiye edilen bir kodlama biçimi değildir. ama özel durumlarda kullanılır. örnek olarak;

<div style=”color:blue”>ben mavi bir yazıyım</div>

gibi.

2. olarak <style> Elemanı Kullanılarak. <head> kısmında <style> elemanı içinde CSS kodumuzu yazarak uygulamak.

<html>
<head>
<title>style uygulayarak kullanma</title>
<style type=”text/css”>
h1 { color:blue; }
</style>
</head>
<body><h1>bu mavi bir yazıdır</h1></body>
</html>

gibi.

3. olarak CSS Dosyası Kullanımı. bu kullanımda harici olarak .css uzantılı bir dosya hazırlanır ve dökümanın içine yerleştirilir.örnek olarak style. css dosyamızı şu şekilde hazırlayalım;
h1{color:#003344;
}
p{color:#000000;
size:18;
font-family:verdana;
}
bu style.css dosyamızı bir web sayfasındaki <head> etiketi içerisine

kodunu ekleyerek yerleştiririz.örnek;

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″
/>
<title>harici bir css uygulamak</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>

]
şeklindedir.

3 Konuşma

css nedir? ne işe yarar

15-07-2008
ercani css notları

CSS’in açılımı Cascading Style Sheets yani Stil Sablonları demektir. Web dokümanlarına stil eklemek için kullanılan basit ve güçlü bir dildir.
CSS, herhangi bir web sayfasındaki yazı, başlık, font, arka plan, imaj, katman, tablo ve liste gibi elemanların kolay ve temiz olarak biçimlendirilmesini sağlar.Genel olarak HTML ile ilişkilendirilir.XML sayfalarındada kullanılma yeteneği vardır.

CSS 1996Vda W3C tarafından duyuruldu. Son olarak(Ocak 2003’den beri) CSS2.1 sürümü yürürlüktedir. CSS3.0V da çalısmaları devam etmektedir.
CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work
adresinden ulasabilirsiniz. YAZININ TAMAMINA BAK »

Henüz Konuşma Yok

web tarayıcılarında web sayfamızın doğru yorumlanması

22-07-2008
ercani Bunlarıda Bilin, html notları, püf noktaları, virüs

css te html elemanlarına müdahale etmek (devam)

19-07-2008
ercani css notları

css te html elemanlarına müdahale etmek

19-07-2008
ercani css notları

css te ‘a’ (link elemanı) özellikleri

18-07-2008
ercani css notları

css te renkler ve uzunluk değerleri

18-07-2008
ercani css notları

css’i web dökümanlarına eklemek

15-07-2008
ercani css notları

css nedir? ne işe yarar

15-07-2008
ercani css notları

Takip Etmek İstiyorum

Yazılar e-mailine Gelsin

RSS İle Takip Edeceğim

Nerde Ne Var?

Sende Tıkla

Kim Ne Demiş?

Son Yazılar

Meta

Bağlantılar

İstatistik Bilgileri

22-07-2008 ercani Bunlarıda Bilin, html notları, püf noktaları, virüs

19-07-2008 ercani css notları

19-07-2008 ercani css notları

18-07-2008 ercani css notları

18-07-2008 ercani css notları

15-07-2008 ercani css notları

15-07-2008 ercani css notları

Takip Etmek İstiyorum

Yazılar e-mailine Gelsin

Nerde Ne Var?

Sende Tıkla

Kim Ne Demiş?

Son Yazılar

Meta

Bağlantılar

İstatistik Bilgileri

22-07-2008
ercani Bunlarıda Bilin, html notları, püf noktaları, virüs

19-07-2008
ercani css notları

19-07-2008
ercani css notları

18-07-2008
ercani css notları

18-07-2008
ercani css notları

15-07-2008
ercani css notları

15-07-2008
ercani css notları