Evet arkadaşlar daha önceki yazılarımda sizlere xhtml,css gibi kavramların yanında web tasarımda renklerin uyumu gibi konulardan bahsetmiştim. Şimdi tüm gerekli unsurların bulunduğunu (web sitesi’nin konusu, renk tonlamaları gibi) varsayarak sitemizi xhtml ve css yardımı ile kodlamaya başlayacağız.
Sitemizi Kodlamaya başlamadan önce sitemizi tanımlayan bir isimde klasör oluşturalım daha sonra o klasörün içine index.html dosyamızı, images ismi klasörümüzü ve style.css dosyamızı oluşturalım (dosya uzantılarını gösterme açıkken metin dosyası oluşturun isimlerini index.html ve style.css yaparak bu dosyaları oluşturabiliriz.)
Tüm gerekli unsurlarımız hazırsa index.html dosyamızı her hangi bir metin editörü yada Frontpage benzeri bir web tasarım editöründe açarak kod bölümüne geçişde yapabiliriz benim tercihim kod geliştiricilerinin en çok kullandığı derleme programlarından biri olan notepad++
Daha önceki klasik html kodlamalarında sayfanın başına eklenen <html> gibi tagların yanında xhtml DTD zorunlu elemanları tanımlar. Tüm XHTML dökümanlarının DOCTYPE tanımlama zorunluluğu vardır. Html, head ve body bulunmalı ve title head içinde yer almalıdır.
DOCTYPE zorunlu olarak mevcut olmalıdır. Geçerli 3 adet XHTML döküman tipi vardır:
a- XHTML Strict
XHTML Dökümanlarını css dökümanları ile beraber kullanmanız gerektiğinde kullanılır. HTML’nin dizayn unsurlarını içermez.
Tanımı:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
b- XHTML 1.0 Transitional (Önerilen)
CSS anlamayan web gezginlerini desteklemek ve HTML’nin dizayn unsurlarını kullanmak istiyorsanız bu döküman tipini kulanın.
Tanımı:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd”>
c- XHTML 1.0 Frameset
Eğer XHTML dökümanları pencerelere bölünmüş olarak gösterilecekse bu döküman tipini kullanın.
Tanımı:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
Bunları ekledikten sonra standart olan html taglarınıda sayfamıza ekliyoruz. Fakat bi fark var buda sayfamıza stil şablonumuz olan style.css dosyamızı import etmemiz.
Bunu 3 farklı biçimde yapabiliriz.
1. Yerel, yani sayfada sadece bir kez, Yerel stil şablonlar bir html etiketi
için özel olarak kullanılırlar.
2. Global, yani tüm sayfa için, Global stil şablonlar sayfadaki tüm html
etiketlerinin belirlenen özellikte olması istendiğinde kullanılırlar.
3. Bağlantılı, yani birden çok sayfa için, Bağlantılı stil şablonlar birçok
sayfada aynı biçimde olması istendiğinde kullanılırlar.(Önerilen)
Yerel Kullanım Örneği
<html>
<head>
<title>Css</title>
</head>
<body>
<h2>CSS Kullanımı</h2><br>
<h2 style=font-size:20pt; color:blue>CSS Kullanımı</h2>
</body>
</html>
Burada ilk h2 standart özelliklerinde gözükürken ikincisinde font büyüklüğü 20 ve rengi mavi olarak görüntülenir.
Global Kullanım Örneği
<html>
<head>
<title>Css</title>
<style>
<!– h2 {font-size:20pt; color:blue} –>
</style>
</head>
<body>
<h2>Web Teknikleri</h2>
</body>
</html>
Burada sayfanın <head> bölümünde tanımladığımız h2 özelliklerini tarayıcı tanıyarak <h2> tagının kullanıldığı yerlerde bu özelliklere göre bize sayfayı görüntüler
Bağlantılı Kullanım Örneği
<html>
<head>
<title>Css</title>
<link rel=”stylesheet” type=”text/css” href=”stil.css”> </head>
<body>
<h1>Web Teknikleri</h2>
<h2>Web Teknikleri</h2>
<h3>Web Teknikleri</h2>
</body>
</html>
Burada daha önceden oluşturduğumuz style.css stil şablonumuzu sayfamıza import ederek ordaki belirlediğimiz özellikleri sayfamızda çağırabiliriz bu yöntem daha düzenli bir kodlama için en çok tercih edilen yöntemdir.
Sanırım Bu sefer diğerlerine göre biraz uzun bir makale oldu fakat bu sadece başlangıç safası ön hazırlarımızı yapınca çok güzel işler çıkaracağımıza eminim
To Be Continued…
