Sunuyu indir
Sunum yükleniyor. Lütfen bekleyiniz
1
HTML, XHTML and CSS XHTML
2
XHTML, EXtensible HyperText Markup Language’in kısaltmasıdır.
XHTML neredeyse HTML 4.01’ın aynısıdır. XHTML, HTML’in daha sıkı ve açık bir versiyonudur. XHTML, HTML’in XML olarak tanımlanmasıdır. XHTML,W3C tarafından önerilmektedir.
3
Neden XHTML? Birçok web sayfası kurallı yazılmamış HTML içermektedir.
<html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML </body>
4
XHTML, HTML ve XML’in bir bileşimidir.
XML’de bütün ifadeler doğru şekilde tanımlanmalıdır. XML veriyi tanımlamak için, HTML ise veriyi göstermek için kullanılmaktadır. XML ve HTML’in güçlü yanları birleştirilerek geleceğin web dili olan XHTML ortaya çıkmıştır.
5
En Önemli Farklar XHTML elemanları doğru şekilde bağlanmalıdırlar.
XHTML elemanlarının hepsi kapatılmalıdır. XHTML elemanları (tagları) küçük harflerle yazılmalıdırlar. XHTML elemanlarının bir kök elemanı bulunmalıdır.
6
Doğru Şekilde Bağlanmalıdırlar
HTML’de <b><i>This text is bold and italic</b></i> XHTML’de <b><i>This text is bold and italic</i></b>
7
Doğru: <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> Hatalı: <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> <li>Milk</li> </ul>
8
Taglerin hepsi kapatılmalıdır
Yanlış: <p>This is a paragraph <p>This is another paragraph Doğru: <p>This is a paragraph</p> <p>This is another paragraph</p>
9
Yanlış: A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face"> Doğru: A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" />
10
Tagler küçük harflerle yazılmalıdır
Yanlış: <BODY> <P>This is a paragraph</P> </BODY> Doğru: <body> <p>This is a paragraph</p> </body>
11
Bir kök elemanına ihtiyaç duyarlar
Bütün XHTML elemanları <html> kök elemanına ihtiyaç duyar. <html> <head> ... </head> <body> ... </body> </html>
12
Bazı yazım kuralları Özellik (Attribute) isimleri küçük harflerle yazılmalıdır. Özellik isimleri tırnak içine alınmalıdır. Özellik isimleri tam yazılmalıdır. Name özelliği yerine id özelliği kullanılmalıdır. XHTML DTD’si zorunlu elemanları tanımlamaktadır
13
<table width="100%"> <table width=100%>
Yanlış: <table WIDTH="100%"> Doğru: <table width="100%"> <table width=100%>
14
Yanlış: <input checked> <input readonly> <input disabled> <option selected> <frame noresize> Doğru: <input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" />
15
Yanlış: <img src="picture.gif" name="pic1" /> Doğru: <img src="picture.gif" id="pic1" />
16
Zorunlu XHTML elemanları
Bütün XHTML dosyaları DOCTYPE tanımını içermelidir. Ve <html>,<head>, <title> ve <body> taglarını bulundurmalıdır. <!DOCTYPE Doctype goes here> <html xmlns=" <head> <title>Title goes here</title> </head> <body> </body> </html>
17
<!DOCTYPE> Bir XHTML dosyası üç temel kısımdan oluşmaktadır.
DOCTYPE tanımlaması <head> kısmı <body> kısmı <!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html>
18
Örnek bir XHTML dosyası
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html>
19
Document Type Definitions (DTD)
DTD bir web sayfasının yazım kurallarını belirtmektedir. DTD, sayfada uygulanacak kuralları içermektedir. Üç tip DTD vardır STRICT TRANSITIONAL FRAMESET
20
XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Strict tipi, HTML’den vazgeçilen tagları içermemektedir.
21
XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " HTML’de vazgeçilen ve yeni tagleri desteklemektedir.
22
XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " HTML’de vazgeçilen ve yeni tagleri desteklemekte hem de frameleri içermektedir.
Benzer bir sunumlar
