Bütünleşik Biçembentler, 2. Aşama
ÖncekiYukarıSonraki

2 BB2'ye Giriş

İçindekiler

    2.1 HTML için kısa bir BB2 öğretici
    2.2 XML için kısa bir BB2 öğretici
    2.3 BB2 İşlem Modeli
          2.3.1 Tuval
          2.3.2 BB2 adresleme modeli
    2.4 BB tasarım ilkeleri

2.1 HTML için kısa bir BB2 öğretici

Bu öğreticide, basit bir biçembendi kolayca nasıl tasarlayabileceğinizi göstereceğiz. Bu öğretici için, azcık İngilizce, biraz HTML [HTML40] az buçuk da yayıncılık terminolojisi bilmeniz yetecek.

Küçük bir HTML belge ile başlayalım:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
  <title>Dede Efendi'nin Sayfası</title>
  </head>
  <body>
    <h1>Dede Efendi'nin Sayfası</h1>
    <p>Hamamizade İsmail Dede Efendi 500'den fazla bestesiyle
       oldukça üretken bir besteciydi.</p>
  </body>
</html>

<h1> elemanının içerdiği metnin rengini mavi yapmak için şu BB kuralını yazabilirsiniz:

h1 { color: blue }

Bir BB kuralı iki ana parçadan oluşur: seçici ('h1') ve bildirim ('color: blue'). Bildirim de kendi içinde iki parçadan oluşur: nitelik (color) ve değeri (blue). Yukarıdaki örnekte bir HTML belgeyi oluşturmak için niteliklerden biri yeterliymiş gibi görünüyorsa da, gerçekte o, bir biçembent olarak sadece kendini nitelemektedir; ancak, diğer biçembentlerle birlikte sonuç için belirleyici olacaktır (BB'nin temel özelliklerinden biri biçembentlerin birleştirilerek uygulanmasıdır).

HTML 4.0 belirtimi biçembent kurallarının HTML belgelerde nasıl belirtilebileceğini tanımlamıştır: ya HTML belgenin içinde ya da harici bir biçembent üzerinden. Bir biçembendi belgeye yerleştirmek için <style> elemanı kullanılır:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
  <title>Dede Efendi'nin Sayfası</title>
  <STYLE type="text/css">
    h1 { color: blue }
  </STYLE>
  </head>
  <body>
    <h1>Dede Efendi'nin Sayfası</h1>
    <p>Hamamizade İsmail Dede Efendi 500'den fazla bestesiyle
       oldukça üretken bir besteciydi.</p>
  </body>
</html>

Olası en fazla esneklik için belge yazarlarına harici biçembentler kullanmalarını öneriyoruz; HTML belgenin kaynak koduyla oynamaksızın üzerlerinde değişiklik yapılabilir ve birden fazla HTML belge için aynı biçembent kullanılabilir. Bir harici biçembendi HTML belge ile ilintilemek için <link> elemanı kullanılabilir:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
  <title>Dede Efendi'nin Sayfası</title>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </head>
  <body>
    <h1>Dede Efendi'nin Sayfası</h1>
    <p>Hamamizade İsmail Dede Efendi 500'den fazla bestesiyle
       oldukça üretken bir besteciydi.</p>
  </body>
</html>

<link> elemanı şunları belirtir:

Bir biçembentle imlenim arasındaki yakın ilişkiyi gösterebilmek amacıyla, bu öğreticide <style> etiketini kullanmaya devam edeceğiz. Biraz daha renk ilave edelim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
  <title>Dede Efendi'nin Sayfası</title>
  <style type="text/css">
    body { color: red }
    h1 { color: blue }
  </style>
  </head>
  <body>
    <h1>Dede Efendi'nin Sayfası</h1>
    <p>Hamamizade İsmail Dede Efendi 500'den fazla bestesiyle
       oldukça üretken bir besteciydi.</p>
  </body>
</html>

Biçembent şimdi iki kural içeriyor: ilkinde <body> elemanının metin rengi kırmızı yapılırken ikincisinde <h1> elemanının içerdiği metnin rengi mavi yapılmaktadır. <p> elemanı için bir renk değeri belirtilmediğinden rengi ebeveyninden yani <body> elemanından miras almaktadır. <h1> elemanı da <body> elemanının çocuğu olduğu halde, ikinci kuralla miras aldığı değer geçersiz kılınmaktadır. BB'de farklı değerlerin birbiriyle çeliştiği durumlara rastlandığı olur ve bu belirtim bu gibi durumların nasıl çözümleneceğini de açıklar.

BB2, color niteliği dahil, 100'den fazla nitelik içerir. Biraz da başka niteliklere de bakalım:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
  <title>Dede Efendi'nin Sayfası</title>
  <style type="text/css">
    body {
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em;
    }
  </style>
  </head>
  <body>
    <h1>Dede Efendi'nin Sayfası</h1>
    <p>Hamamizade İsmail Dede Efendi 500'den fazla bestesiyle
       oldukça üretken bir besteciydi.</p>
  </body>
</html>

Burada dikkat çeken ilk şey çok sayıda bildirimin kaşlı ayraçlar içine alınarak ({...}) gruplanmış oluşudur; ayrıca her kural diğerinden sonuna bir noktalı virgül eklenerek ayrılmıştır. Grubun son kuralının sonunda noktalı virgül bulunması zorunlu değildir.

<body> elemanının ilk bildiriminde yazıtipi ailesi "Gill Sans" olarak ayarlanmaktadır. Eğer bu yazıtipi mevcut değilse, tarayıcı, bütün tarayıcıların bildiği beş soysal yazıtipi ailesinden biri olan sans-serif yazıtipi ailesini kullanacaktır. <body> elemanının çocukları font-family niteliğinin değerini miras alacaklardır.

İkinci bildirimde <body> elemanının yazıtipi yüksekliği 12 punto yapılmaktadır. "Punto" birimi genellikle matbaacılıkta uzunluk birimi olarak değil de yazıtipi yüksekliği belirtmek için kullanılır. Bu örnek, ortama göre ölçeklenmiş bir değer değil, mutlak ölçü belirtilen bir örnektir.

Üçüncü bildirimde çevredeki şeylerle ölçeklenen bir göreli birim kullanılmıştır. "em" birimi elemanın yazıtipi genişliğine atıf yapan bir birim olup, küçük "m" harfinin genişliğine eşit bir uzunluk belirtir. Bu durumda <body> elemanını kuşatan kenar girintileri bu elemanda geçerli yazıtipinin küçük "m" harfinin genişliğinin üç katı uzunlukta olacaktır.

2.2 XML için kısa bir BB2 öğretici

BB2 herhangi bir imlenim diliyle kullanılabilir, genişletilebilir imlenim dili [XML10] bunlardan biridir. Aslında XML, biçembentlere HTML'den çok daha fazla bağımlıdır. Çünkü tarayıcılar, XML yazarlarının kullandıkları elemanları nasıl yorumlayacaklarını bilemezler.

Basit bir XML belge:

<article>
  <headline>Kestirme nitelikler</headline>
  <translator>N. B. Bugüner</translator>
  <para>
    Belge yazarlarının çeşitli niteliklerin değerlerini bir tek
    nitelikte belirtebilmelerine imkan veren niteliklere
    <term>kestirme nitelikler</term> adı verilir.
  </para>
</article>

Bu belgeciği bir belgeye yaraşır şekilde göstermek için önce hangi elemanların satıriçi (satır sonlandırmayan), hangilerinin bloklama (satır sonlandıran) elemanları olduklarını belirtmeliyiz.

term { display: inline }
article, headline, translator, para { display: block }
article { background: #eee }

İlk kural <term> elemanının satıriçi eleman olduğunu, ikincisi ise virgüllerle ayrılmış olarak diğer elemanların bloklama elemanı olduğunu belirtmektedir.

Bir XML belgeyi bir biçembentle ilintilendirmenin tek yolu bir işlem yönergesi kullanmaktır:

<?xml-stylesheet type="text/css" href="bach.css"?>
<article>
  <headline>Kestirme nitelikler</headline>
  <translator>N. B. Bugüner</translator>
  <para>
    Belge yazarlarının çeşitli niteliklerin değerlerini bir tek
    nitelikte belirtebilmelerine imkan veren niteliklere
    <term>kestirme nitelikler</term> adı verilir.
  </para>
</article>

Bir görsel tarayıcı bu örneği şöyle biçimleyecektir:

XML belge gösterim örneği
[Açıklama]

"kestirme nitelikler", satıriçi bir eleman olan <term>'in içeriği olduğundan paragrafın içinde kalacaktır.

Hala metin istediğimiz gibi biçimlenmiş değil. Örneğin, <headline> yazıtipini metnin kalanından daha büyük yapmamız ve çevirmenin ismini eğik yazıyla göstermemiz lazım:

term { display: inline }
article, headline, translator, para { display: block }
article { background: #eee }
headline { font-size: 130% }
translator:before { content: "\c7 eviren: " }
translator { font-style: italic }
article, headline, translator, para { margin: 0.5em }

Bir görsel tarayıcı bu örneği şöyle biçimleyecektir:

XML belge gösterim örneği
[Açıklama]

Biçembente başka kurallar da ekleyerek belgenin görünümünü iyileştirebilirsiniz.

2.3 BB2 İşlem Modeli

Bu bölümde bir tarayıcının BB'yi nasıl desteklediği ile ilgili olası bir model sunulacaktır. Tamamen kavramsal bir model olup, asıl gerçeklenim biraz farklı olabilir.

Bu modelde, bir tarayıcı bir belge kaynağını işlerken şu aşamaları izler:

  1. Kaynak belgeyi çözümler ve bir belge ağacı oluşturur.

  2. Hedef ortam türünü belirler..

  3. Hedef ortam türü için belirtilmiş bütün biçembentleri toplar.

  4. Hedef ortam türünde uygulanabilen her nitelik için tek bir değer atayarak belge ağacının her elemanını imler. Nitelikler Nitelik Değerlerinin Atanması, Bütünleşme ve Kalıtım bölümünde açıklanan mekanizmalarla ilgili olarak atanmış değerlerdir.

    Değerin hesaplanan parçası hedef ortam türüne uygun biçimleme algoritmasına bağımlıdır. Örneğin, hedef ortam ekran ise, tarayıcılar görsel biçimleme modelini uygulayacaklardır. Eğer hedef ortam türü bir yazıcı sayfası ise, tarayıcı sayfalama modelini uygulayacaktır. Eğer hedef ortam örneğin bir konuşma bireştirici ise tarayıcı işitsel biçimleme modelini uygulayacaktır.

  5. İmlenmiş bir belgeden bir biçimleme yapısı üretilir. Biçimleme yapısı belge ağacına çok benzemekle birlikte oldukça da farklıdır; bilhassa yazarlar sözde elemanları ve üretilen içeriği kullanmaya kalktıklarında bu ortaya çıkar. Öncelikle, biçimleme yapısının genelinde belge ağacı "şeklinde" olması gerekmektedir; ancak, eninde sonunda yapının doğası gerçeklenime bağlıdır. İkinci olarak, biçimleme yapısı belge ağacındaki bilgiden daha azını veya daha çoğunu taşıyabilir. Örneğin, belge ağacındaki bir elemanın display niteliği none değerine sahip olsun; bu eleman biçimleme yapısında hiçbir şey üretmeyecektir. Diğer taraftan bir liste elemanı biçimleme yapısında belge ağacındakinden daha fazla bilgi üretebilir: liste elemanlarının içerikleri ve liste biçem bilgisi (madde imlerinin resimleri gibi).

    BB destekli tarayıcıların bu aşamada belge ağacını değiştirmediğine dikkat ediniz. Özellikle, içerik üretimi biçembentlerden dolayı belge dili işlemcisine bir geri besleme sağlamaz (yeniden çözümleme gibi).

  6. Biçimleme yapısı hedef ortama aktarılır (yani, yazıcı sayfayı basar, ekranda belge görüntülenir, konuşma bireştirici belgeyi seslendirir).

1. adım bu belirtimin kapsamı dışında kalır (örn, [DOM]'a bakabilirsiniz).

2.den 5.ye kadar olan adımlar bu belirtimin kapsamındadır.

6. adım da bu belirtimin kapsamı dışında kalır.

2.3.1 Tuval

Bütün ortamlar için, tuval denilince, biçimleme yapısının gerçeklendiği uzayı anlayacağız. Tuval uzayda her boyutta sonsuz genişliktedir, fakat gerçekleme genelde hedef ortamla ilişkili tarayıcı tarafından kurgulanan tuvalin belli bir bölümünde yer alır. Örneğin, ekranı tuval olarak kullanan tarayıcılar için bir en küçük genişlik sözkonusudur ve duyusal bölgenin boyutlarına dayalı bir başlangıç genişliği seçilir. Bir sayfayı tuval olarak kullanan tarayıcılar için genelde yükseklik ve genişlik kısıtlanır. İşitsel tarayıcılar ise ses uzayı ile sınırlıdırlar, fakat zaman boyutunda sınırlı değillerdir.

2.3.2 BB2 adresleme modeli

BB2 seçicileri ve nitelikleri biçembentlerin bir belgenin veya tarayıcının şu parçalarına başvurulmasını mümkün kılar:

  • Belge ağacındaki elemanlar ve bunlar arasındaki belli ilişkiler (Seçiciler bölümüne bakınız).

  • Belge ağacındaki elemanların öznitelikleri ve bu özniteliklerin değerleri (Öznitelik seçiciler bölümüne bakınız).

  • Eleman içeriğini bazı parçaları (:first-line ve :first-letter sözde elemanlarının açıklamalarına bakınız).

  • Belli bir durumda olduklarında belge ağacındaki elemanlar (Sözde elemanlar ve sözde sınıflar bölümüne bakınız).

  • Belge gerçekleneceği zaman tuvalin bazı özellikleri.

  • Bazı sistem bilgiler (Kullanıcı Arayüzü bölümüne bakınız).

2.4 BB tasarım ilkeleri

BB2, ondan da önce BB1, belli tasarım ilkelerine dayandırılmışlardır:

ÖncekiYukarıSonraki
BB2 Belirtimi HakkındaBir Linux Kitaplığı SayfasıUyumluluk: gereksinimler ve öneriler