Sayfalar

27 Mayıs 2016 Cuma

XHTML Belge Yapısı Nasıldır?

Sevgili ziyaretçilerimiz, belli bir düzenin olmasını istediğimiz her yerde belli kuralların da olması gerektiği gerçeğini siz de takdir edersiniz. Dünyanın çok farklı bölgelerinden milyonlarca insanın, değişik tip ve modeldeki cihazlarla (bilgisayar, mobil telefonlar vb.) görüntülediği web sayfalarının da belli standartlara oturtulması kaçınılmazdır. (Bu amaçla kurulan W3C' den bahsetmiştik.)

İşte bu gerçek, haliyle XHTML dili söz konusu olduğunda da geçerlidir. XHTML dili için oluşturulan standartların belgeye uygulanabilmesi için öncelikle elimizdeki belgenin bir XHTML belgesi olduğunun tarayıcılar tarafından algılanması gerekmektedir. Bu sebeple de biz, oluşturacağımız belgelerin başına belge türü bildirimini (DOCTYPE) muhakkak koyacağız.

XHTML belgemizde kullanacağımız belge türü bildirimi:

<!DOCTYPE HTML PUBLİC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml!-transitional.dtd">

Bu bildirimin anlamı; belgemizin bir XHTML belgesi olduğu ve belgemizde http://www.w3.org/TR/xhtml!-transitional.dtd  adresindeki dtd dosyasında belirtilen standartların geçerli olacağıdır. DTD ve kullanımı konusunda XML kategorisinde paylaşımlara başladığımızda gerekli bilgiler verilecektir.

Üç tip belge türü kullanabiliriz. Birinci tür yukarıdaki örnekte gördüğünüz Geçişli (Transitional), diğeri ise Kesin' dir (Strict). Geçişli türünde eski HTML standartları da geçerli olmaktadır. Kesin türü ise onaylanmamış etiketleri kabul etmez. Ayrıca XHTML dilinin bir takım üst düzey özelliklerini kullanmak için de bu türü seçmemiz gerekmektedir. Çerçeve (frameset) türü ise çerçeve kullanımı içindir.

Biz makalelerimizde genel olması sebebiyle Geçişli (Transitional) türünü kullanacağız.


XHTML Belge Şablonu

<!DOCTYPE HTML PUBLİC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml!-transitional.dtd">
<html xlmns="http://www.w3org/1999/xhtml">
<head>
</head>
<body>
TARAYICILAR TARAFINDAN GÖRÜNTÜLENECEK <br /> TÜM BELGE İÇERİĞİ BURADA YER ALIR.
</body>
</html>


Yukarıda gördüğünüz kalıp, XHTML belgelerinin yapısını göstermektedir. En üstte belge türü tanımlaması gelmektedir. Ardından belgenin bir html belgesi olduğunu gösteren <html> etiketi (tag) gelmektedir. Gördüğünüz gibi belgemiz başladığı gibi yine </html> etiketi ile bitmektedir. Tek farkı / işareti ile başlamasıdır. "html" etiketi tüm belgeyi içine alan kapsayıcı bir etikettir. Ek olarak html etiketine xlmns="http://www.w3org/1999/xhtml" şeklinde bir XML ad alanı (namespace) ekliyoruz.

XHTML' de sadece html etiketi değil tüm etiketler (<head> </head> ; <body></body> etiketlerinde olduğu gibi) / işareti ile başlayan kapanış etiketi ile mutlaka kapatılır. Tek taraflı etiketler ise (Örneğin; satırbaşı etiketi olan br) bir boşluk bırakılarak ve / işareti eklenerek <br /> şeklinde yazılır.

Açma ve kapama etiketleri, içerikler ve bu arada yer alan tüm unsurlar öğe (element) diye adlandırılır. Örneğin; <h1 align="center">METİN</h1> satırı komple bir XHTML öğesidir.

Örneğimizdeki diğer etiket olan <head></head> etiketi, belgemizin web tarayıcılarında görüntülenecek sayfa başlığını ve meta bilgilerini ifade eder. Ayrıca bazı tip CSS ve JavaScript dosyalarını çalıştıracak satırlar da burada yer alabilir.

<body> </body> etiketleri belgemizin tarayıcılarda görüntülenecek kısmını ifade eder. Yani tarayıcılarda gösterilmesi gereken her şeyi bu etiketlerin arasına yazacağız.

bu belge şablonunu alarak Notepad programına yapıştırıp tüm çalışmalarınızda kullanabilirsiniz. Size, Notepad programına yapıştırdığınız belgenizi ilk_belgem.html adıyla kaydedip hatıra olarak saklamanızı öneririm. Ne de olsa ilk olan şeyler önemlidir, değil mi?

Hatta bu anı daha da unutulmaz yapmak için <body> </body> etiketleri arasındaki ifadeyi istediğiniz bir cümle ile değiştirelim.

Mesela...

YAŞASIN İLK BELGEMİ YAPTIM. <br /> BEN BU İŞİ ÖĞRENECEĞİM. <p> ARTIK BENİ HİÇ KİMSE TUTAMAZ. </p>

yazıp belgenizi tekrar kaydedin ve bu ilk HTML belgenizi monitörünüzden doya doya seyredin. 

Cümle aralarına da <br /> etiketini koyalım ki cümleler alt alta gelsin. Hatta yeri gelmişken paragraf etiketini de görelim. Paragraf etiketi <p>, <br> etiketinden farklı olarak sadece satırbaşı değil, aynı zamanda da yeni paragraf başlatır. Bir diğer farkı da <p></p> şeklinde kullanılan çift taraflı bir etiket olmasıdır.

Bu arada size, çalışmalarınızı daha verimli olarak sürdürebilmeniz için NOTEPAD++ programını öneririm. Programı buradan indirebilirsiniz.

Belgemizi şekillendirmek ve geliştirmek için heyecan duymaktayız (siz ve ben elbette). Ama öncelikle <head> </head> etiketleri arasında görmemiz gereken iki husus var. Bunlardan birincisi tarayıcılarda görüntülenecek sayfa başlığını oluşturma meselesi.

Bunun için <title> </title> etiketlerini kullanıyoruz. Mesela; <title>İlk Belgem</title> şeklinde bir örnek yapmul olalım. Bunu belgenize ekleyip tarayıcıdan sayfanıza tekrar bakarsanız, sayfa başlığınızda İlk Belgem ifadesinin yer aldığını görürsünüz.

 <head></head> kısmındaki bahsetmemiz gereken ikinci husus ise, meta etiketleridir. Bu etiket sayfanıza, sayfanız ile ilgili ve sayfa içeriğinize uygun anahtar sözcükler eklemenize imkan tanır. Bu anahtar sözcükler arama motorlarında (Örneğin; MSN) arama yapan kişiler tarafından sitenizin daha kolay bulunabilmesi içindir. Bazı arama motorları arama sonuçlarını belirlemede buraya eklenecek anahtar sözcüklere önem verirler.

<meta name="keywords" content="kelime1, kelime2, kelime3" />

name ve content özelliklerini açıklayacak olursak; name, meta etiketimizde kullanılacak içeriğin türünün ne olacağını, (Örneğin, keyword, yani anahtar kelime) content ise bizzat içeriklerin kendilerini ifade eder. Etiketimizin tek taraflı bir etiket (br gibi) olduğundan bir boşluk ve / işareti ile kapadığımıza ikkat edin.

Şimdi de cümlemizde geçen ve bundan sonra da sık sık geçecek olan Öznitelik (Attributes) kavramından bahsedelim. Öznitelikler; birlikte kullanıldıkları etiketlerin nasıl kullanılacaklarını belirleyen, her biri farklı işlevlere sahip öğelerdir. Örneğin; yukarıdaki meta etiketi, anlattığımız anahtar kelime belirleme işlemindeki görevini birlikte kullanıldığı name ve content öznitelikleri sayesinde yapmaktadır.

Bir başka öznitelik kullanarak meta etiketinin farklı bir işlevi; (Öreğin başka bir sayfaya yönlendirme işlemi) ne şekilde yapacağını belirleyebiliriz. Bir başka ifade ile etiketlerin nasıl davranacaklarını öznitelikler ile belirliyoruz diyebiliriz. 

<meta> etiketi, sayfanızı ziyaret edecek kişileri bir başka sayfaya yönlendirmek için de (mesela başka adrese taşındığınızı ifade etmek için) kullanılabilir.

<meta http-equiv="refresh" content="5"; url="http://www.vuslatbilisimhizmetleri.com" />

Bu örnek 5 saniye sonra ziyaretçileri verdiğiniz adrese yönlendirecektir.

Hiç yorum yok :

Yorum Gönder