HTML ve CSS'de Temel Web Sayfası Yapısı
HTML(Hyper Text Markup Language)Türkçe ifadesi ile Hiper Metin İşaretleme Dili, bilgisayarlarımızdaki 80 portu üzerinden ağdaki bilgisayarların dosyalarını HTTP protokolü ile diğer bilgisayarlara paylaşım ortamıdır. Dosyalar html betik dile programlanmış sayfalar şeklindedir. <html> tagları ile başlayan kodlama işlemi yine aynı tagların </html> şeklinde önüne / işeti eklenmesi ile sonlandırılır.
Temel bir web sayfanın html kodları aşağıdaki gibidir.
<html> //ana etiket kodudur. Tüm kodları kapsayan etiket tagdır.
<head>
<title>web sayfalarının üst başlıkarını belirlemeye yarar </title>
<meta> bu etiket alanında web sayfanın tanımlayıcı bilgileri bulunmaktadır. Bunlar açıklama, anahtar kelime, yazar bilgileri, telif hakkı, web sitesinin sitenin dili gibi temel tanımlayıcıların bulunduğu alandır.
Yine bu alana link veya script kodları ile web sayfamıza ekleyeceğimiz harici css, jqueri, javascript gibi dosyaların web sayfasına dahil edildiği ve tanımlandığı alandır.
</meta>
</head>
<body>
Bu alanda kullanıcıların web sayfasına girdiklerinde karşılarına çıkacak bilgilerin eklendiği alandır. Web sayfalarında gördüğünüz her şey burada tanımlanmaktadır. Kısaca sitenin ara yüzü yani vitrini dediğimiz alandır.
</body>
</html>
CSS Cascading Style Sheets (Basamaklı Stil Şablonlar)’de Temel Web Sayfası Yapısı
Temel html tagları arasında kullandığımız css kodları html yapısının nesne tabanlı bir web sayfasına dönüştürülmesi ihtiyacından ortaya çıkmaktadır. Bunun en temel sebep dinamik web sayfalarının ortaya çıkması ile artan sayfa yapısı ve bu sayfa yapılarındaki içeriklerin istenilen şekle veya görüntüye çevrilme ihtiyacı sonucunda artan kod sayısını azaltmak ve web sayfalarının daha hızlı ve etkin kod yapısına dönüştürülmesi ihtiyacından çıkmıştır.
Css yapılarında nesne tabanlı sistemlerde olduğu gibi sınıf/fonksiyon adını verdiğimiz yapılar oluşturarak, oluşturduğumuz bir etiket yapısını yüzlerce binlerce defa bir daha yazmadan sadece ismi ile istenilen yapıya uygulamamıza olanak vermesidir. Bu da kod tekrarlanması azaltmakta ve sayfa yapısının da işler ve basit hale getirmektedir. Katmanlı yapısı sayesinde web sayfasındaki <body> etiketi arasındaki alanı istediğimiz şekilde bölümlemeye ve her bölümü birbirinden bağımsız bir şekilde müdahale etmemize olanak vermektedir.
Genelde anlamda piyasada css tabanlı bir web sayfasının tasarımı aşağıdaki gibidir.
<html>
<head>
<body>
<div class=”header,ust,banner vs”>
Üst banner kısmı
</div>
<div class=”main,orta,gövde,vs”>
Site içerik kısmı, gövde yapısı
<div class=”sol,içerik,makale vs”>
Orta kısım genelde 2 pencereye ayrılır sol taraf site içeriklerinin olduğu kısımdır.
</div>
<div class=”sağ,menü,kategori vs”>
Sağ tarafta ise menüler, kategoriler, son yazılar, reklamlar vs gibi dar bir alanda listelenerek kişilerin daha kolay erişim sağlamalarını sağlar.
</div>
</div>
<div class=”footer, Copyright,altkisim vs”>
Sitenin alt taraf tanımla , Copyright vs
</div>
</body>
</html>
Class etiketleri tamamıyla bizim tercihimize bağlı olarak verdiğimiz isimlerdir. Ama genel anlamda bu etiket isimleri kullanıldığından ve aynı proje üzerinden birden fazla kişi çalışacaksa neyin ne olduğunun bilinmesi ve daha kolay yayılması açısından bu etiketleri kullanmak daha yararlı olacaktır.