XHtml ders(ler)i 2
Evet Xhtml Derslerimize kaldığımız yerden devam ediyoruz. Bu bölümde biraz daha detay ve açıklama ile Geçerli Xhtml yazımına dair bilgiler edineceğiz. Hemen başlayalım isterseniz.
BÖLÜM 4
XHTML ve Syntax (Sözdizimi, Sentaks)
Her dilde olduğu gibi Xhtml dilinde de bu dile has olan bir yazım stili vardır. Aşağıya bunları madde olarak yazmaya çalışalım.
- etiket ve parametreler küçük harfle yazılmalı
- parametre değerleri kesinlikle alıntılanmalı yani tırnak işareti içinde yazılmalı
- parametre değerlerinde kısaltılma yapılmamalı
- name parametresi yerine “id” parametresi kullanılmalı
- Xhtml dokümanlara zorunlu olarak DTD (Doküman Tipi) tanımlanmalı Etiket ve Parametreler küçük harfle yazılmalı!
Daha önceki konularımızda gördüğünüz gibi Xhtml üzerinde etiket ve parametre isimleri sürekli küçük harflerle yazılmalıdır. Bunun dışında kalan bir yazım uygulaması Xhtml’ye aykırıdır. Yine örneklem yoluyla devam edelim:
HTML Format: <table WIDTH=”100%”>
XHTML Format: <table width=”100%”>
Parametre değerleri kesinlikle alıntılanmalı yani tırnak işareti içinde yazılmalı!
Xhtml üzerinde yukarıdaki maddelerde belirttiğimiz gibi parametrelerin karşılığı olan değerler kesinlikle tırnak işaretleri içine yazılmalıdır.
HTML Format: <table width=100%>
XHTML Format: <table width=”100%”>
Parametre kısaltılma yapılamaz!
Html dokümanlar üzerinde bazı zamanlar (örneğin formlar) üzerinde tanımlanan bazı seçili değerler vardır. input etiketinde checkbox değeri kullanırken seçili öğeyi “checked” yazarak seçeriz. Xhtml de bu tarz bir yazım veya kısaltma yapılamaz. Bununla birlikte değerler tam ve doğru bir şekilde yazılıp tanımlanmalıdır. Örneklerimizi incelerseniz konuyu daha iyi kavrayabileceksiniz.
HTML Format: <frame noresize>, <input checked>
XHTML Format: <frame noresize=”noresize” />, <input checked=”checked” />
(yine boş etiketlerin yani kapatılması Html üzerinde gerekli olmayan etiketlerin Xhtml’de nasıl kapatıldığını görüyorsunuz, lütfen bu ayrıntıyı atlamayınız)
Aşağıdaki tabloda Html üzerinde tanımlanmayan ve kısa parametre değeri olarak yazılan bazı değerlerin Xhtml’deki yazım biçimini göreceksiniz. Lütfen tabloyu inceleyin.
|
HTML |
XHTML |
|
compact |
compact=”compact” |
|
checked |
checked=”checked” |
|
declare |
declare=”declare” |
|
readonly |
readonly=”readonly” |
|
disabled |
disabled=”disabled” |
|
selected |
selected=”selected” |
|
defer |
defer=”defer” |
|
ismap |
ismap=”ismap” |
|
nohref |
nohref=”nohref” |
|
noshade |
noshade=”noshade” |
|
nowrap |
nowrap=”nowrap” |
|
multiple |
multiple=”multiple” |
|
noresize |
noresize=”noresize” |
“name” parametresi yerine “id” parametresi kullanılmalı!
Html üzerinde a, applet, frame, iframe, img, map gibi etiketlerin tanımı olarak kullanılan “name” parametresi Xhtml üzerinde geçerliliğini yitirmiştir. “name” yerine “id” parametresi kullanılmalıdır.
HTML Format: <map name=”map_1” />
XHTML Format: <map id=”map_1″ />
(Not: bazı eski browserlar üzerinde id parametresi çalışmayabilir, bu gibi durumlarda hem name hem de id parametresini aynı etiket üzerinde tanımlayabilirsiniz. )
Xhtml dokümanlara zorunlu olarak DTD (Doküman Tipi) tanımlanmalı!
Xhtml dili ile kodlanan sayfalarda mutlaka DTD yani Doküman tipi tanımlanmalıdır. Doküman tipi tanımlama kodu kodlama itibariyle sayfanın en üstüne yapılır ve yapısal XML dosyalarının çağırılması ile geçerli olur. Doküman tanımlarına yazımızın ilerleyen bölümlerinde değineceğiz.
Dil Özelliği!
Xhtml üzerinde hemen hemen her sayfanın dil tanımlaması yapılmaktadır. Dil tanımlamasını aşağıdaki XML atıf kodu ile yapabilirsiniz.
<div lang=”tr” xml:lang=”tr”>Merhaba Dünya, Merhaba Xhtml!</div>
BÖLÜM 5
XHTML DTD (Doküman Tipi Tanımı)
Xhtml belgeler içinde doküman tipi tanımlamanın zorunlu olduğunu daha önceki bölümlerde dile getirmiştik. Bu bölümde ise kısaca Xhtml üzerinde kullanılan doküman tip tanımlarına değineceğiz.
Xhtml üzerinde doküman tipi tanımları sürekli olarak kodlamanın birinci satırında yer alır. Bu satırda yer alan doküman tipi tanımı ile sayfanın geri kalan kodları o tipe göre icra edilir. Bununla birlikte bir Xhtml dokümanı 3 öğeden oluşmaktadır. DOCTYPE, Body ve Head. Yaptığımız bu açıklamaya göre bir basit Xhtml kabuğu sunalım.
<!DOCTYPE …>
<html>
<head>
<title>… </title>
</head>
<body> … </body>
</html>
Yukarıda görmüş olduğunuz örnek Xhtml için geçerli bir doküman tipi tanımı ile başlamış, kodlar küçük harfle yazılmış, icra edilen kodlar sırasıyla kapatılmıştır. Bu tarz bir yazım Xhtml yazımına uygun ve geçerli bir yazım şeklidir.
DTD 3 Ana Türden Oluşur!
Xhtml üzerinde 3 tür doküman tanımlama tipi vardır. Bunlar STRICT, TRANSITIONAL ve FRAMESET olarak adlandırılmaktadır. Şimdi bu doküman tiplerinin nasıl kullanılacağından ziyade neler olduğuna bir göz atalım.
Strict, doküman tipi Türkçe’ye “Tam” manasında çevrilebilir. Bu doküman tipinin tanımlandığı dosyalarda hem Xhtml hem de Css bileşenleri rahatlıkla kullanılabilir.
Transitional, doküman tipi ise “Geçişli” olarak dilimize çevrilebilir. Bu tip dokümanlar Html etiketlerini tam kullanabilmek için tanımlanabilirler, modern tarayıcılar bu tarz doküman tipi tanımlanmış olan sayfalarda Css eklentilerini ve kodlarını icra etmezler. Adından da anlaşılacağı gibi bu tip Html geçiş tipidir.
Frameset, tip ise sayfalarında “Çerçeve” kullanan tasarımcılar için oluşturulmuştur. Bu doküman tipi iki yada daha fazla frame yani çerçeveye sahip sayfalar için kullanılabilir.
DTD Tanımlarını Kullanalım!
DTD kullanımının sitemizin birinci kod satırında yer aldığını söylemiştik. Şimdi aşağıdaki kodları inceleyerek her bölüm için tanımlanan doküman tipinin sitelerimizde nasıl uygulanacağını görebilirsiniz.
STRICT
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
TRANSITIONAL
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
FRAMESET
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
BÖLÜM 6
XHTML’de Parametre ve Olaylar
Xhtml dili üzerinde tasarımcıların kullanabilmesi ve işlerini kolaylaştırabilmesi için özel parametreler ve olaylar tanımlanmıştır. Herhangi bir etikete özel parametreler yardımı ile bir sınıf veya id tanımlayarak çok daha iyi bir kodlama ve tasarım yapılabilir. Bu parametreler bir etiketin değerlerini ve niteliklerini düzenlemek ve tanımlamak için de kullanılırlar. Aşağıdaki listede bu tür parametrelerin neler olduğu, değerleri ve geçerli olduğu temel etiketler verilmiştir.
Temel Parametreler
Bu parametreler head, html, meta, param, script, style, ve title etiketlerinde geçerli değildir.
|
Parametre |
Değer |
Tanım |
|
class |
Sınıf durumu |
Etiketin ait olduğu sınıfı belirtir |
|
id |
id ismi |
element için tanımlanan unique id |
|
style |
stil tanımı |
dahili stil tanımları için kullanılır |
|
title |
ipucu textler |
elementlerin ipucu yazıları için kullanılır |
Dil Parametreleri
Bu parametreler base, br, frame, frameset, hr, iframe, param, ve script etiketlerinde geçerli değildir.
|
Parametre |
Değer |
Tanım |
|
dir |
ltr | rtl |
metin yönünü ayarlar |
|
lang |
dil kodu |
dil kodunu ayarlar |
Klavye Parametreleri
|
Parametre |
Değer |
Tanım |
|
accesskey |
karakter |
elementin klavye kısayolunu ayarlar |
|
tabindex |
numara |
elementin tab sekme sayısını ayarlar |
Olaylar
Xhtml üzerinde tıpkı html sayfalarda kullandığımız gibi bazı olay süreçleri (event action) kullanırız. Örneğin Mouse ile tıklama, mouse ile elementin üzerine gelme, klavyede bir tuşa basma gibi. Bu tarz olaylar temelde Javascript ve Dhtml fonksiyonları ile sağlanmaktadır. Bizler sadece bu işi yapan fonksiyonu Xhtml belgemizde kullanarak çalışmasını sağlarız. Aşağıda yer alan listede bu tarz olayların neler olduğu, kullanım şekilleri ve verilen değerleri görebilirsiniz.
Pencere Olayları
Sadece body ve frameset etiketleri içinde geçerlidir.
|
Parametre |
Değer |
Tanım |
|
onload |
script |
Doküman yüklendiğinde çalışacak |
|
onunload |
script |
Doküman yüklenmediğinde çalışacak |
Form Element Olayları
Sadece form elemanları içinde geçerli olan olaylardır.
|
Parametre |
Değer |
Tanım |
|
onchange |
script |
Elementlerin değişimi sırasında çalışacak |
|
onsubmit |
script |
Form gönderimi sırasında çalışacak |
|
onreset |
script |
Form temizlenmesi sırasında çalışacak |
|
onselect |
script |
Element seçimlerinde çalışacak |
|
onblur |
script |
Form aktivasyonunda çalışacak |
|
onfocus |
script |
Formlarda yer alan focus özelliğinde çalışacak |
Klavye Olayları
Bu parametreler base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, ve title etiketlerinde geçerli değildir.
|
Parametre |
Değer |
Tanım |
|
onkeydown |
script |
Karakter değerine tıklandığında çalışacak |
|
onkeypress |
script |
Klavye tuşuna basıldığında çalışacak |
|
onkeyup |
script |
What to do when key is released |
Fare Olayları
Bu parametreler base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, ve title etiketlerinde geçerli değildir.
|
Parametre |
Değer |
Tanım |
|
onclick |
script |
Mouse tıklamasında çalışacak |
|
ondblclick |
script |
Mouse çift tıklamasında çalışacak |
|
onmousedown |
script |
Mouse aktive tıklamasında çalışacak |
|
onmousemove |
script |
Mouse hareketinde çalışacak |
|
onmouseover |
Script |
Mouse ile element üzerine gelindiğinde çalışacak |
|
onmouseout |
script |
Mouse ile element üzerinden uzaklaşılınca çalışacak |
|
onmouseup |
script |
Mouse aktivesi yenilendiğinde çalışacak |
BÖLÜM 7
Xhtml’ye Hazırsınız!
Artık sayfalarınızda Xhtml kodlar kullanabilmek için neredeyse hazırsınız. Yukarıda anlattığımız konuları ve bölümleri biraz özetleyelim ve neler olduğuna bakalım.
Öncelikle Xhtml üzerinde nelerin geçerli olduğun ve nelerin (hangi tür yazım şeklinin ve kod, parametre kullanımının) geçerli olmadığını öğrendik. Xhtml belgelerimizde küçük harflerle kodlarımızı yazacak ve etiketlerimizi açtığımız sıraya göre kapatacaktık.
Bununla birlikte Html üzerinde kapatılmayan etiketlerin (<br>, <img>, <hr> gibi) de kapatılması gerektiğini öğrendik. Çünkü artık biliyoruz ki “Xhtml üzerinde her etiket sonlandırılmalıdır!” Bu sonlandırmayı da Xhtml’ye uygun biçim olan <br />, <img />, <hr /> şeklinde yaptık.
Xhtml dokümanlarımızın başında DTD tanımlayarak hangi biçim tarafından değerlendirileceğini ayarladık. Tam, Geçişli ve Çerçeveli doküman tipi tanımları ile sayfamıza uygun olan tipi seçtik.
Daha sonra kodlamamızı Xhtml’ye uygun biçimde “Tam ve Standart” kod yazımı ile devam ettirdik. Yine Xhtml’de tanımlanan olay ve parametreler ile sayfamıza daha iyi özellikler kattık.
Standartları unutmayın!
Xhtml dokümanları hazırlamayı ve yazım kurallarını öğrenmiş bulunuyoruz. Ancak bu saatten sonra unutmamanız gereken bir şey daha var. O da standartlar!
W3C (World Wide Web Consortium) bize sıklıkta tavsiye ve öğüt ettiği standartları ve standart yazım biçemini lütfen sayfalarınızda uygulayın. Ancak bu şekilde hem hızlı erişilebilir hem de sadece pc değil tüm platformlar üzerinde doğru görüntülenir sayfalar yapabiliriz.
Yapmış olduğunuz sayfaların http://validator.w3.org sitesinden Xhtml standartlarına uygun olup olmadığını kontrol edin.
Artık Xhtml’ye aşina bir kişi olarak bundan sonra yapmanız gereken temel CSS dersleri alarak kendinizi daha da geliştirmek.
Kararlı ve standartlara uygun bir sayfa hazırlamak ihtiyacınız olan bileşim Xhtml ve Css yolundan geçiyor. Bunu kesinlikle unutmayınız.
