Ağustos 2007
Web Teknolojileri

HTML ve CSS ile Web Tasarımı

Önceki sayılarımızda, HTML'i ve CSS'i tanıtmış, kullanımları hakkında örnekler vermiştik. Bu sayımızda, HTML ve CSS'i beraber kullanarak nasıl daha kaliteli ve esnek web sayfaları yapabileceğimizi göreceğiz.

Şimdi web sitemizi iç içe kutucuklar olarak hayal edip tasarlayabilmek için CSS'in kutu modelini (CSS box model) inceleyelim:

CSS Kutu Modeli

CSS Kutu ModeliBu modelde, HTML belge ağacında oluşturulan her eleman, dikdörtgen şeklinde bir kutucuk ile temsil edilir. Her kutucuğun içeriğinin bulunduğu bir alanı vardır. Bunun yanında çerçeveleri ile (border), iç ve dış kenar boşlukları da bulunabilir. (padding ve margin) Bir kutucuğun neye benzediğini ve bahsettiğimiz kısımların yerlerini yandaki şekilde görebilirsiniz.

HTML'de her görsel etiket bir kutucuk tarafından temsil edilse de sadece tasarıma yönelik kutucuklar oluşturmak için genelde div etiketi kullanılır. Bu etikete şekil vermek için de css'in left, right, top, bottom, width, height, margin, padding, border, position, float gibi özelliklerinden yararlanılır.

Şimdi, basit bir kutucuk oluşturmak için nasıl bir kod yazmamız gerektiğini görelim. Kırmızı renkli, 5px kalınlığında çerçevesi bulunan, iç boşluğu (çerçeve ile içerik arasındaki uzaklık) 20 px, dış boşluğu (çerçeve ile dıştaki nesneler arası uzaklık) 100px olan bir "div"in stili aşağıdaki gibi olacaktır:

#kutu
{
    background: red;
    padding: 20px;
    margin: 100px;
    border: 5px solid black;
}

Bu nesnenin tarayıcıda nasıl görüneceğini incelemek için İlk Kutucuk sayfasına bakabilirsiniz. Kaynak koduna göz atmak için açılan sayfaya sağ tıklayıp "sayfa kaynağını göster" seçeneğini kullanabileceğinizi unutmayın.

İsterseniz sağ, sol, üst ve alt kenar boşluklarını ayrı ayrı belirleyebilirsiniz. Bunun için padding-left, padding-bottom gibi ayrı ayrı özellikler kullanabileceğiniz gibi, padding özelliğinin yanına boşluklarla ayrılmış birden fazla değer de verebilirsiniz. İçinde açıklamalar da bulunan Boşluklar örnek dosyasını inceleyebilirsiniz. Bu örnekte padding özelliği için yapılanlar, margin için de yapılabilir.

Satır İçi ve Blok Seviyesi Kutucuklar

HTML dosyasında tanımladığımız etiketlere şekil vermek için kullanılan özelliklerden bir tanesi de display özelliğidir. Bu özellik, bir web sayfasındaki her elemanın ne şekilde gösterileceğini bize açıklar. inline değerini aldığında satıriçi bir kutucuk; (örneğin, paragrafın içinde koyu yazılmış bir sözcük ya da bir resim) block değerini aldığında ise blok seviyesinde bir kutucuk (örneğin, bir liste, bir paragraf, bir başlık) oluşturulması gerektiği anlaşılır. Bunun yanında display özelliği daha az kullanılan farklı değerler de alabilir. (list-item, inline-block, table gibi)

Konumlama Yöntemleri

Bir nesnenin, web sayfasının görünür alanında hangi yöntemle konumlanacağı, position özelliği ile belirtilir. Bu özellik, aşağıdaki değerleri alabilir:

static

Bu seçenek, kutucukların konumunun standart akışa (normal flow) göre hesaplanacağını belirtir. Standart akışta, her eleman belli bir alan kaplar. Bundan sonra gelecek elemanların konumları, bu elemana göre hesaplanır. Normal akış, blok seviyesindeki kutucuklar için bu kutucuğun altından, satır içi kutucuklar içinse bu kutucuğun yanından devam eder. static konumlamada left, right, top, bottom özellikleri kullanılmaz.

Statik konumlama yapılan nesneler hakkında bir örnek görmek için static yerleşim dosyasına bakınız.

relative

Bu değer de kutucukların konumlarının standart akışa göre hesaplanacağını belirtir. Ancak bu sefer left, right, top, bottom özellikleriyle kutucuğu istenen miktarda istenen yöne kaydırmak mümkün olur. Bu kaydırma işlemi, sonraki kutucukların yerlerini etkilemez.

Relative konumlamaya örnek için relative yerleşim dosyasına göz atabilirsiniz.

absolute

Bu konumlama yönteminde kutucukların kesin koordinatları belirlenir. Bunun için left, right, width özelliklerinden ikisi ile nesnenin yatay konumu, top, bottom, height özelliklerinden ikisiyle de nesnenin dikey konumu verilir. Bu özelliğe sahip nesneler, standart akıştan tamamen bağımsızdır ve diğer nesnelerin konumlarını etkilemez.

Bir nesneyi nasıl koordinatları ile konumlayabileceğinizi görmek için absolute yerleşim örneğine bakabilirsiniz.

fixed

Fixed değeri de nesnenin kesin koordinatlarını belirtmek için kullanılır. Bu seçeneğin farkı, sayfanın göründüğü alan kaydırma çubukları (scrollbar) ile hareket ettirilse bile nesnenin aynı konumda kalmasını sağlamasıdır.

Sabit konumlu nesnelere örnek hakkında bir örnek için fixed yerleşim dosyasına bakınız.

Nesne Kaydırma

Kutucukları istediğimiz şekilde konumlandırmamızın bir başka yolu da onları kaydırmaktır. Bu işlem float özelliği ile gerçekleştirilir. Bu özellik sayesinde, satır genişliğinden küçük kutucukları sağa ya da sola kaydırarak, bir sonraki kutucuğun, bunun altına değil yanına gelmesini sağlayabiliriz. float özelliği, left, right, none değerini alabilir. Eğer bir sonraki nesnenin, öncekinin sağına ya da soluna girmesini istemiyorsak bu nesneye clear özelliği verebiliriz. Buna verilecek left, right, both değerleri ile kutucuğun alta kaydırılmasını sağlarız.

Şimdi, öğrendiğimiz teknikleri kullanarak çok basit bir sayfa tasarımı yapalım. Sayfa sabit genişlikli ve ortalanmış olsun. üst ve alt bilgi kısımları bulunsun ve sağda bir menüsü olsun. Aşağıda stil bilgisini görebileceğiniz Örnek tasarımımızı inceleyerek, siz de benzer çalışmalar yapabilirsiniz.

CSS ile yapılan daha çok örnek görmek istiyorsanız CSS Zen Garden sitesini ziyaret edebilir, beğendiğiniz web sitelerinin kaynak kodlarını inceleyebilirsiniz.

Dahası var mı?

Şimdiye kadarki beş sayımızda değindiğimiz gibi HTML, web sayfası hazırlamak için standart bir dil. Bu dilde kullandığımız etiketlere şekil vermek ve sayfamızın görünümünü değiştirmek için de CSS kullanıyoruz. Bu iki dil, değişken öğeler barındırmayan statik web sayfaları hazırlamak için yeterli. Ancak tabii ki web teknolojileri bunlarla sınırlı değil. Farklı amaçları gerçekleştirmek için farklı teknolojilerden yararlanmak gerekiyor. Örneğin, sitenize çeşitli animasyonlar eklemek için flash kullanabilirsiniz. Kullanıcı tarafında programlama gerektiren işler için javascript olmazsa olmaz hale geldi. AJAX adı verilen teknolojiyle de yerini iyice sağlamlaştırdı ve gelişmiş web uygulamaları hazırlamak için artık çok kişi tarafından tercih ediliyor. Yeni yeni popülerleşen Flex de web uygulamaları geliştirmek için kullanılıyor.

Sunucu tarafında programlama gerektiren işler için, örneğin kullanıcıların dolduracağı formlar üzerinde işlem yapmak, sitenize üyelik sistemi, ziyaretçi defteri, forum, anket, sayaç gibi çeşitli uygulamalar eklemek için sunucu tarafı programlama dillerinden birini tercih etmeniz gerekiyor. Şu anda PHP ve ASP bunlar arasında en çok tercih edilenleri. Yavaş yavaş yerini kaybetmesine rağmen Perl de hala kullanılıyor. Python ve Ruby ise dinamik yapıları ile yeni nesil web sayfalarında gitgide daha çok tercih ediliyor. Sunucu taraflı programlama dillerinin yanında sık sık veritabanları da kullanılıyor. MySQL, PostgreSQL gibi veritabanı motorları bu amaçları gerçekleştirmenizi sağlıyor.

Tabii ki web teknolojileri hızla gelişiyor ve hepsini birden takip etmek neredeyse imkansız. Bunun için ihtiyaçlarınızı iyi bir şekilde belirleyip, bunlar için en uygun araçları ve teknolojileri öğrenmek en akıllıca tercih olacaktır. Sonraki sayılarımızda yeri geldikçe, bahsettiğimiz teknolojilerin bir kısmına değineceğiz. Şimdilik iyi bir başlangıç yapmanızı sağladığımızı umarak, web hayatınızda başarılar dileriz :)




Murat Ongan
- 6 -