İnternet sayfaları için genelgeçer şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak harflerin stilini; yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliktir.

Bir web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılır ve bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfalarında ortak olarak kullanılabilir. Bu şekilde, sayfaların hafızadaki boyutu epey küçüldüğü gibi, güncelleme yapmak da kolaylaşır.

CSS kodları; HTML kodlarının içine yazılabildiği gibi harici bir CSS dosyası oluşturularak da işlem yaptırılabilir. Türüne göre veya bölümlerinde yer alabilirler.

CSS kodlarının, HTML dosyasına eklenmesi temelde 3 farklı şekilde yapılabilir.

Umarim İlerde Css ve Php derslerine başlarım.Pek bilmem ama bildiklerimi ve internette bulduklarımı yazsam yeterli olur herhalde.

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.

“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.

Dil Parametreleri
Bu parametreler base, br, frame, frameset, hr, iframe, param, ve script etiketlerinde geçerli değildir.

Klavye Parametreleri

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.

Form Element Olayları
Sadece form elemanları içinde geçerli olan olaylardır.

Klavye Olayları
Bu parametreler base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, ve title etiketlerinde geçerli değildir.

Fare Olayları
Bu parametreler base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, ve title etiketlerinde geçerli değildir.

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.

Xhtml, günümüzde W3C tarafından standart kabul edilen ve tavsiye edilen web biçimleme dilidir. 2 bölüm halinde yayınlamayı düşündüğüm bu xhtml derslerini hazırlamamdaki amaç, vakti zamanında bu tarz Türkçe içerikli Xhtml derslerini nette aramam ve çok az kaynağa ulaşabilmem. Bununla birlikte elimden geldiğince size bol örnekli ve anlatımlı bir xhtml dersi hazırlamayı düşünüyorum.

(aşağıda yer alan konular ve anlatımlar (yazar eklentileri ile birlikte) w3.org ve w3schools.com sitelerinden alınmıştır. lütfen doğru referans için bu siteleri sıklıkla ziyaret ediniz.)

BÖLÜM 1
Xhtml’ye Giriş

Maddeler halinde sıralayacak olursak Xhtml;

• Açılımı EXtensible HyperText Markup Language (Genişleyebilir Hiper Metin Anlamlandırma Dili) olan web biçimleme dilidir.
• Xhtml, Html dili üzerine kurulmuştur ve onun yerini almaktadır.
• Html 4.01′i ve bünyesindeki etiket ve parametreleri kendine referans alır.
• Temiz ve düzenli Html yazımını sağlar.
• Xhtml, W3C standardı ve tavsiyesidir.

Xhtml öğrenirken neleri bilmemiz gerekiyor?

Herşeyden önce temel Html bilgisine sahip olmalı ve düşük düzeyde de olsa bu dili kullanabilmelisiniz. eğer Html bilginiz yeterli değilse lütfen daha önce Html dilinin yazımını ve kurallarını öğrenin!

Xhtml W3C Tavsiyesidir!

Sizde Xhtml öğrenerek ve bu dili yaptığınız web sitelerinde kullanarak tüm modern browserlarda aynı görüntüyü elde edebilir, W3C standartlarına uygun, daha hızlı erişilebilir web siteleri yapabilirsiniz.

Xhtml ile geleceğin web teknolojilerine bir adım daha yakın olursunuz!

BÖLÜM 2
Neden Xhtml?

World Wide Web üzerinde gördüğümüz birçok web sitesi kötü Html yazımına sahiptir. Bu kodu taşıyan web siteleri bir browser üzerinde düzgün çalışabiliyor olsa bile bir başka browserda aynı doğrulukla görüntülenmeyecektir.

Lütfen aşağıdaki örneği inceleyiniz.
<html>
<head>
<TITLE>Kötü bir HTML sayfası</TITLE>
<body>
<h1>Kötü HTML kodu hiçbir zaman W3 standartlarında geçerli değildir!
</body>

Yukarıda yer alan kodda şayet Html bilginiz yerindeyse bazı etiketlerin kapanmadığını ve eğer Xhtml aşina bir kişiyseniz de Xhtml doküman tipinin tanımlanmadığını bununla birlikte kod yazımının standartlara uygun olmadığını göreceksiniz. Bu tür yazım ile yapılmış bir web sitesi internet üzerinde W3C standartlarına uymadığı gibi, browserlar üzerinde de görüntü bozukluğuna yol açmaktadır.

XML dili her zaman geçerli ve “tam uygun” (well-formed) kod bütünlüğü sağlayarak en doğru sonucu almanızı sağlar. XML Html dosyalarınızda oluşturduğunuz yada elde ettiğiniz dataları en iyi ve doğru şekilde webe aktarabilmeniz için kurulmuştur. Ayrıca esnek yapısı ile kullanıcılarına birçok avantaj sağlar.

Günümüzde webe bağlı iş istasyonları, ev kullanıcı bilgisayarları, mobil cihazlar internete browserlar aracılığı ile bağlanmakta ve yukarıda sözünü ettiğimiz “Kötü Html” yazımına sahip siteler bu cihazlar ve platformlar üzerinde doğru sonuç vermemektedir.
Bu nedenle XML ve HTML kombinasyonu ile oluşturulan ve geleceğe yön verecek dil ortaya çıkarılmıştır: XHTML!

Xhtml ve Xhtml ile oluşturulan sayfalar XML standardını destekleyen tüm cihazlarda ve modern tarayıcılarda (IE, FF, Safari, Opera) “Tam ve standartlara uygun” kod yazımı ile web sayfanızın tüm dünya üzerinde doğru olarak görüntülenebilmesini sağlayan bir fırsattır. Eğer hala Xhtml kullanımını bilmiyor yada web siteleriniz üzerinde Xhtml yazımını kullanmıyorsanız bu yazı dizisini takip edin.
BÖLÜM 3
XHTML ile HTML arasındaki farklar

Xhtml dili, Html’den çokta farklı değildir. Xhtml geçerli parametre ve etiketleri Html 4.01 üzerinden alınmış ve dile entegre edilmiştir. Bununla birlikte, şimdiden HTML kodlarınızı küçük harflerle yazmaya başlayın. Zira Xhtml yazım biçemi, bunun dışında olan (HTML’nin kabul ettiği ancak Xhtml’nin kabul etmediği) yazım biçimlerini ve etiket sonlandırılmalarını standartlara uygun bulmamaktadır.

İki Dil Arasındaki Bazı Önemli Farklar

Maddeler halinde sıralayacak olursak iki dil arasında temel olarak şu farklar vardır:

• Xhtml etiketleri gereği gibi dizilmelidir.
• Xhtml dokümanları “tam ve uygun kod” yazımı ile yazılmalıdır.
• Etiket ve parametre isimleri “küçük harflerle” yazılmalıdır.
• Tüm Xhtml etiketleri mutlaka “kapatılmalıdır”

Xhtml Etiketleri Gereği Gibi Dizilmelidir!
Aşağıdaki örneği inceleyecek olursanız bu yazım tarzının Xhtml’ye uygun olmadığını göreceksiniz. Çünkü bu yazımda etiketler sırasız olarak kapatılmışlardır. Bu tarz bir yazım Xhtml’de yine aşağıdaki gibi olmalıdır.

HTML Format: <b>Bu yazı kalın ve italik olarak yazılmıştır</b></i>
XHTML Format: <b>Bu yazı kalın ve italik olarak yazılmıştır</i></b>

Yukarıda görüldüğü üzere Html formatta etiketlerin kapanma sırası önemli değil. Bu tarz bir yazımı browser bir hata vermeden görüntüleyecektir. Ancak ikinci yazımda Xhtml’ye uygun olan kod daha temiz ve daha iyi bir kullanımdır.

Xhtml dokümanları “tam ve uygun kod” yazımı ile yazılmalıdır!
Xhtml üzerinde kodlar, özellikle html, body, head gibileri çift olmalı yani açılan head etiketi komutlar icra edildikten sonra bitirilmeli bu etiket içine standarda uygun olmayan başka eklenti veya kod yazılmamalıdır. Aşağıdaki örnek Xhtml yazımına uygun bir Html kabuğunu bizlere veriyor.

<html>
<head> … </head>
<body> sayfamızda yer alan görsel öğelerin tümü </body>
</html>

Etiket ve parametre isimleri “küçük harflerle” yazılmalıdır!
Xhtml yazımı kesinlikle etiket ve parametrelerin büyük harfle yazımını kabul etmez. Yazılan etiketler mutlaka küçük harflerle yazılmalıdır. Aşağıda html ve xhtml formatında örnekler bulabilirsiniz.

HTML Format: <BODY><FONT color=”red”>bu yazı kırmızı</FONT></body>
XHTML Format: <body><font color=”red”>bu yazı hem kırmızı hem de Xhtml ile yazıldı!</font></body>

Yukarıdaki örnekte gördüğünüz gibi Html format yazılan kodu aynen browserda icra edecektir, burada herhangi bir sorun olmamaktadır. Ancak Xhtml yazımında etiketleri ve parametreleri küçük yazmalıyız. Ancak bu şekilde bir yazım standart uyumu için geçerli olabilir.

Tüm Xhtml etiketleri mutlaka “kapatılmalıdır”!
Xhtml dilinde kodlama yaparken kesinlikte tüm açılan etiketler kapatılmalıdır. Açılan etiketlerin sırayla kapatılması Xhtml için doğru bir yazımdır. Yine örneğimizi inceleyelim:

HTML Format: <p>bu bir paragraf…
XHTML Format: <p>bu bir paragraf </p>

Boş etiketler kesinlikle kapatılmalıdır!
Html üzerinde bazı etiketlerin kapatılmasına ihtiyaç duyulmaz. Örneğin <br>, <img>, <hr> gibi. Xhtml dilinde bu etiketlerinde bir kapatılma biçimleri vardır. Etiketler sonuna /> işareti atılarak bu etiketler kapatılmalıdır. Lütfen aşağıdaki örnekleri dikkatlice inceleyiniz.

HTML Format:
Satır atlayalım<br>
Sayfamıza yatay çizgi atalım :<hr>
ve sayfamıza bir resim yerleştirelim <img xsrc=”xhtml.gif” alt=”xhtml dersleri”>

Xhtml Format:
Satır atlayalım<br />
Sayfamıza yatay çizgi atalım:<hr />
ve sayfamıza bir resim yerleştirelim <img xsrc=”xhtml.gif” alt=”xhtml dersleri” />

gördüğünüz gibi Html üzerinde kapatmaya ihtiyaç olmayan bu etiketler Xhtml dilinde etiket sonuna /> atılarak kapatılıyor. Günümüz browserlarına tam uyumlu olabilmesi için siz de bu tarz etiketlerin sonuna bir boşluk ve /> işaretleri atarak sonlandırınız. Tıpkı örnekte olduğu gibi.

Bir sonraki ders dizisinde biraz daha teknik konulara değineceğiz. Umarım faydalı olabilmişimdir.

Yazdığınız XHTML dökümanlarının hangi standartlara uyduğunu DTD belirtir ve sayfada ilk satır olarak yer almalıdır. Sayfalarınızın standarda uygunluğu testlerini W3C’nin doğrulama araçları ile yapabilirsiniz. http://validator.w3.org adresinden bu araçlara ulaşabilirsiniz.

Örütbağı üzerinde bir kaç kaynak adresi de işinize yarayacaktır.
W3C XHTML Anasayfa- http://www.w3c.org/MarkUp/
W3C standart bildirgesi - http://www.w3.org/TR/2000/REC-xhtml-basic-20001219/
W3Schools XHTML sayfaları - http://www.w3schools.com/xhtml
Web tasarımcılarının sanal kütüphanesi (WDVL) XHTML sayfaları - http://www.wdvl.com/Authoring/Languages/XML/XHTML/
Webmonkey XHTML Genel Bakış - http://hotwired.lycos.com/webmonkey/00/50/index2a.html
XHTML tartışmaları - http://www.webreview.com/tag/2000/09_01_00.shtml

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">

2. Tüm elemanlar küçük harfler kullanılarak yazılmalıdır. XHTML bir XML uygulamasıdır ve XML’de küçük büyük harf ayrımı vardır. Örneğin <BR> ve <br> tagları farklı biçimde yorumlanır.
Bu yazım yanlışdır.
<BODY>
<P>Bu bir paragrafdır</P>
</BODY>
Bu yazım ise doğrudur.
<body>
<p>Bu bir paragrafdır</p>
</body>
3. Tüm XHTML elemanlarının sonlandırılması gerekir. Boş olmayan her elemanın sonlandırılması gerekir, örneğin aşağıdaki yazım yanlışdır:
<p>Bu bir paragrafdır
<li>Bu bır liste maddesidir
Doğru olan:
<p>Bu bir paragrafdır</p>
<li>Bu bir liste maddesidir</li>

4. Boş elemanlarda sonlandırılmalıdır. Boş elemanlar ya bir sonlandırma elemanına yada “ />” işaretine ihtiyaç duyar. Örneğin aşağıdaki yazım yanlışdır.
Bu bir satır atlar<br>
Yatay çizgi böyle yapılır<hr>
Burada resim olacak <img src=”dosyaismi.gif”>
Doruları ise:
Bu bir satır atlar<br></br>
Yatay çizgi böyle yapılır<hr />
Burada resim olacak <img src=”dosyaismi.gif” />

XHTML web sayfalarınızı bugünün web gezginleri ile uyumlu hale getirmek istiyorsanız “/” işaretinden önce bir boşluk bırakmalısınız. <br /> yada <hr /> gibi.

5. Parametre isimleri küçük harf olmalıdır. Aşağıdaki örnek yanlıştır:
<table WIDTH=”100%”>
<div ALIGN=”center”>
Doğrusu:
<table width=”100%”>
<div align=”center”>

6. Parametre değerleri tırnak işareti içinde olmalıdır. Aşağıdaki örnek yanlıştır:
<table width=100%>
<div align=center>
Doğrusu:
<table width=”100%”>
<div align=”center”>

7. Parametre sadeleştirme kaldırılmıştır. Örneğin:
<input checked>
<option selected>
yanlıştır. Doğrusu:
<input checked=”checked” />
<option selected=”selected” />

8. “id” parametresi “name” parametresinin yerine geçer.
<img src=”dosyaismi.gif name=”resim1” />
<a name=”namedanchor”></a>
Yerine doğrusu:
<img src=”dosyaismi.gif id=”resim1” />
<a id=”namedanchor”></a>

9. XHMTL 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. Aşağıda minimum bir XHTML dökümanını görüyorsunuz.
<!DOCTYPE Doctype goes here>
<html>
<head>
<title>Title goes here</title>
</head>
<body>
Body text goes here
</body>
</html>
DOCTYPE elemanı bir XHTML elemanı değildir ve standartlara uymasına gerek yoktur. Ayrıca sonlandırılması da gerekmez.

10. DOCTYPE zorunlu olarak mevcut olmalıdır. Geçerli 3 adet XHTML döküman tipi vardır:

XHTML bir web standardı olarak 26 Ocak 2000’de W3C tarafından kabul edilmiştir. XHTML normalde kullanılan HTML’nin yeni nesil sürümü olduğu için web gezginleri ve diğer uygulamalar tarafından kabul edilmesi zaman alacaktır. Bu arada örütbağı uygulamalarınızı mevcut XHTML standardına getirmek istiyorsanız HTML 4.01 sürümü ile uygun hale getirmek ile işe başlayabilirsiniz. Aşağıdaki 10 kuralı da uygularsanız uygulamalarınız XHTML uyumlu hale gelecektir.

Css ile tekrarlanmayan arka plan resmi yapmak için öncelikle arka plana bir resim atamak gerekir. Bunu background-image : url(resmim); kodu ile yaparız.
Daha sonra bu resmin tekrarlanmasını önlemek için background-repeat:no-repeat komutunu vermek gerekir.
En son olarak resmi ortalamak için background-position : center komutunu vereceğiz

Şu kodda olduğu gibi :

BODY
{
BACKGROUND-IMAGE : URL(./bayrak.gif);
BACKGROUND-REPEAT: NO-REPEAT;
BACKGROUND-POSITION : CENTER;
}

.......................

SORU:

Web sitemde fare işaretlerini kendi belirlemiş olduğum fare işaretçisi ile değiştirmek istiyorum.. Bunu nasıl yapabilirim..

CEVAP:

Merhaba..Bunun için cursor dediğimiz dosya formatında olan ve sonu *.cur ile biten bir resim dosyasına ihtiyaçınız var ve bunları multimedia sitelerinde çok rahat bulabilirsiniz..

<style>
<!--
A           { cursor:url('resim.cur'); }
A:link      { cursor:url('resim.cur'); }
A:visited   { cursor:url('resim.cur'); }
A:hover     { cursor:url('resim.cur'); }
BODY        { cursor:url('resim.cur'); }
}
-->
</style>

......................

Web sitemde kaydırma çubuklarını (Scroll bar) nasıl renklendirebilirim..

CEVAP:Web sayfanızın Head Head bölümene aşağıdaki kodu yazınız..

<style>
<!--
solid; BORDER-LEFT: #1F9FFF 0px solid; BORDER-RIGHT: #1F9FFF 0px
solid; BORDER-TOP: #1F9FFF 0px
solid; COLOR: #1F9FFF; FONT-FAMILY: Trebuschet MS; FONT-SIZE: 9pt;
FONT-WEIGHT: bold}body
{	scrollbar-face-color:#CCCCCC;
	scrollbar-shadow-color:#FFFFFF;
	scrollbar-highlight-color:#FFFFFF;
	scrollbar-3dlight-color:#FFFFFF;
	scrollbar-darkshadow-color:#FFFFFF;
	scrollbar-track-color:#FFFFFF;
	scrollbar-arrow-color:#CCCCCC;
; font-size: xx-small; border-top-width: thin}
-->
</style>

CSS Nedir? Cascading Style Sheets

Css’in açılımı ile söze başlayalım. Cascading Style Sheets. Biz kısaca konularımız dahilinde Stil Şablon olarak bahsedeceğiz. Gelelim Stil Şablonun varoluş amacına. Sizinde bildiğiniz üzere Html yazım şekli olarak etiket türünde bir yazım dili. Bu yüzden pek fazla özelliklere sahip değil. Bu sahip olamadığı özellikler nedeniyle sayfanın dizaynında bize tam esneklik veremiyor. Css bu amaçla üretilmiş bir dil. Kullanım kolaylığı ve kullanışlılığı ile Html’e eklenmesinden itibaren çoğu web tasarımcısının gözdesi oldu. Çünkü her türlü sayfa dizaynını bize bırakarak müthiş bir esneklik sağlıyor. Ayrıca ileriki konularımızda bahsedeceğimiz üzere bağlantılı stil şablonlar aracılığı ile de birden çok sayfaya etkiyebiliyor. Bu da bize sitenin görünümün değiştirmek istediğimizde elimizdeki onlarca belki de yüzlerce sayfanın kodlarını değiştirmeden sadece css dosyasının değiştirerek bu imkanı sağlıyor.

Stil Şablon’un tarayıcılara eklenmesinden sonra iki versiyonu çıktı. Bunlar Css 1 ve Css 2. Ayrıca bazı konularda MSIE (Internet Explorer) ve NN (Netscape Navigator) tarayıcıları aynı kodları kabul etmiyorlar. Biz derslerimizde her iki tarayıcıda da etkin olan veya etkin olmayıp dizaynı bozmayan (A:hover gibi) Stil Şablon özelliklerini göreceğiz. Şimdi derslerin içeriğinde neler var onları görelim :

1. Stil Şablon çeşitleri :
Css’in en çok beğenilen yönü istendiğinde sadece bir öğeye etkimesi, istendiğinde tüm sayfaya etkimesi, istendiğinde site içindeki tüm html dosyalarına etkimesidir. Bunlar kısaca Stil Şablonun kullanım çeşitleridir.

2. Html etiketleri ile Css :
Bu dersimizde Html’deki font,background gibi çeşitli özelliklerin Stil Şablon tarafından nasıl belirlenebileceğini göreceğiz.

3. Seçiciler (Selectors) :
Kimi zaman Html etiketlerinden fontu hepimiz kullanırız. Örneğin bir sayfa içerisinde font etiketine birden çok görünüm eklemek isteriz. Bu durumda seçiciler imdadımıza yetişir. Bu dersimizde de seçicilerin nasıl kullanıldığını ve yazım kurallarını öğrenceğiz.

4. Genel kullanım şekilleri :
Bu dersimizde ise A (link) etiketinin çeşitli kullanım biçimleri ile birlikte bir Stil Şablonun nasıl kullanırsak işimize daha fazla yarayacağını göreceğiz. Siz buradaki kullanım tarzına göre Css’i kullanırken kendinize nasıl bir yön izleyeceğinize karar vereceksiniz.