Yazar arşivi admin

ileadmin

Formlar

Form ‘lar kullanıcıdan / ziyaretçiden bilgi almak için kullanılır. Yani formların esas görevi “veri taşımak” tır. Alınan bilgileri ise farklı yazılım dilleri (JavaScript, PHP vs.) ile kullanabiliriz. Örneğin bir giriş sayfasında bizden kullanıcı adı ve şifre istenir, bizde kullanıcı adı ve şifremizi gireriz. Diğer yazılım dilleri ile formlardan alınan bilgiler veritabanındaki kullanıcı adı ve şifre ile uyuşuyor mu diye kontrol edilir. Bilgiler uyuşursa siteye girebiliriz, uyuşmazsa bilgileri tekrar girmemiz istenir.

Sayfalarda form alanları oluşturmak için “<form>” etiketini kullanacağız. Bu formlar içerisinde kullanıcıya yazılabilir bir alan oluşturmak için ise “<input>” etiketini kullanacağız. “<input>” etiketine “type” ve “name” öznitelikleri eklenebilir. “type” özniteliği için ilk olarak “text” değerini yazacağız, “name” özniteliği için ise kendi belirlediğimiz bir isim yazacağız.

XHTML Radio Butonları – Radio Button

Kullanıcımızın 2 ya da daha fazla seçenekten sadece birini seçmesini istiyorsak “type” özniteliği için “radio” değerini kullanacağız. Dikkat edilmesi gereken nokta “type” özniteliği için “radio” değeri kullanılırsa “name” özniteliklerinin hepsi aynı isime sahip olmalıdır.

XHTML Seçim Kutuları – CheckBoxes

Kullanıcımızın birden fazla seçenek seçebilmesini istiyorsak “type” özniteliği için “checkbox” değerini kullanacağız.

XHTML Gönder Butonu – Submit Button

Kullanıcılarımızın girdiği bilgileri almak istiyorsak “type” özniteliği için “submit” değerini kullanacağız. Kullanıcı bilgileri girip “Gönder” isimli butona tıkladığında girmiş olduğu bilgiler “test.php” dosyasından erişilebilir olacak.

XHTML Yazılabilir Alan – Textarea

Sayfalarımızda yazılabilir esnek bir alan oluşturmak istiyorsak “<textarea>” etiketini kullanacağız. “rows” özniteliği yükseklik, “cols” özniteliği ise genişlik değeri tanımlamak kullanılmaktadır.

XHTML Açılır Seçim Kutusu – Drop Down

Bir açılır kutu içerisinde seçenekleri listelemek istiyorsak “<select>” etiketini kullanacağız. Menü içerisine seçenekleri eklemek için ise “<option>” etiketini kullanacağız. Menüde seçili olarak gelmesini istediğimiz seçenek için “selected” özniteliğini tanımlayıp değerini de “selected” yapmamız gerekiyor. Eğer seçim kutusunda ki seçenekleri gruplandırmak istersek <optgroup> etiketini kullanacağız.

 

XHTML Label etiketi – Label Tag

Öğrendiğimiz üzere Radio butonlarda sadece yuvarlak alan içine tıkladığımızda seçeneğimiz işaretleniyor. Biz radio butonun yanında ki yazıya tıklandığında da seçeneğimiz işaretlensin istiyorsak “<label>” etiketi kullanacağız.

“<label>” etiketi içerisine radio buton koyarak bu özelliği kullanabiliriz. Eğer “<label>” etiketini radio butonunun dışında (üstünde, altında, sağında ya da solunda) kullanacaksak “<input>” etiketine “id” vermemiz gerekir ve verilen “id”yi “<label>” etiketi içerisine “for” özniteliği olarak yazmamız gerekir.

 

XHTML Fieldset ve Legend Etiketleri – Fieldset and Legend Tags

“<fieldset>” etiketi form elemanlarını gruplamak için kullanılır ve “<div>” etiketinde olduğu gibi form elemanlarının çevresini çizerek kapsar. “<legend>” etiketi ise hem form elemanlarının çevresini çizerek kapsar hem de çerveye başlık ekler. İkisi ayrı ayrı ya da içi içe kullanılabilir.

ileadmin

Özel Karakterler

Bazı karakterler XHTML tarafından özel karakterler olarak saklı tutulmaktadır. Bu karakterleri XHTML içinde kullanamıyorsunuz çünkü XHTML bu karakterleri kod olarak algılayabiliyor. Eğer bu karakterleri sayfanızda kullanmak istiyorsanız aşağıdaki “Öğe Adı” veya “Öğe Numarası” karşılığını sayfanıza ekleyebilirsiniz.

ISO-8859-1

Karakter Öğe Numarası Öğe Adı Açıklama
&#34; &quot; Çift Tırnak
&#39; &apos; (Explorer’da çalışmaz) Tek Tırnak
& &#38; &amp; ve
< &#60; &lt; Küçüktür
> &#62; &gt; Büyüktür

ISO 8859-1 Sembolleri

Karakter Öğe Numarası Öğe Adı Açıklama
  &#160; &nbsp; boşluk
¡ &#161; &iexcl; inverted exclamation mark
¢ &#162; &cent; cent
£ &#163; &pound; pound
¤ &#164; &curren; currency
¥ &#165; &yen; yen
¦ &#166; &brvbar; broken vertical bar
§ &#167; &sect; section
¨ &#168; &uml; spacing diaeresis
© &#169; &copy; copyright
ª &#170; &ordf; feminine ordinal indicator
« &#171; &laquo; angle quotation mark (left)
¬ &#172; &not; negation
  &#173; &shy; soft hyphen
® &#174; &reg; registered trademark
¯ &#175; &macr; spacing macron
° &#176; &deg; degree
± &#177; &plusmn; plus-or-minus 
² &#178; &sup2; superscript 2
³ &#179; &sup3; superscript 3
´ &#180; &acute; spacing acute
µ &#181; &micro; micro
&#182; &para; paragraph
· &#183; &middot; middle dot
¸ &#184; &cedil; spacing cedilla
¹ &#185; &sup1; superscript 1
º &#186; &ordm; masculine ordinal indicator
» &#187; &raquo; angle quotation mark (right)
¼ &#188; &frac14; fraction 1/4
½ &#189; &frac12; fraction 1/2
¾ &#190; &frac34; fraction 3/4
¿ &#191; &iquest; inverted question mark
× &#215; &times; multiplication
÷ &#247; &divide; division

ISO 8859-1 Karakterleri

Karakter Öğe Numarası Öğe Adı Açıklama
À &#192; &Agrave; capital a, grave accent
Á &#193; &Aacute; capital a, acute accent
 &#194; &Acirc; capital a, circumflex accent
à &#195; &Atilde; capital a, tilde
Ä &#196; &Auml; capital a, umlaut mark
Å &#197; &Aring; capital a, ring
Æ &#198; &AElig; capital ae
Ç &#199; &Ccedil; capital c, cedilla
È &#200; &Egrave; capital e, grave accent
É &#201; &Eacute; capital e, acute accent
Ê &#202; &Ecirc; capital e, circumflex accent
Ë &#203; &Euml; capital e, umlaut mark
Ì &#204; &Igrave; capital i, grave accent
Í &#205; &Iacute; capital i, acute accent
Î &#206; &Icirc; capital i, circumflex accent
Ï &#207; &Iuml; capital i, umlaut mark
Ð &#208; &ETH; capital eth, Icelandic
Ñ &#209; &Ntilde; capital n, tilde
Ò &#210; &Ograve; capital o, grave accent
Ó &#211; &Oacute; capital o, acute accent
Ô &#212; &Ocirc; capital o, circumflex accent
Õ &#213; &Otilde; capital o, tilde
Ö &#214; &Ouml; capital o, umlaut mark
Ø &#216; &Oslash; capital o, slash
Ù &#217; &Ugrave; capital u, grave accent
Ú &#218; &Uacute; capital u, acute accent
Û &#219; &Ucirc; capital u, circumflex accent
Ü &#220; &Uuml; capital u, umlaut mark
Ý &#221; &Yacute; capital y, acute accent
Þ &#222; &THORN; capital THORN, Icelandic
ß &#223; &szlig; small sharp s, German
à &#224; &agrave; small a, grave accent
á &#225; &aacute; small a, acute accent
â &#226; &acirc; small a, circumflex accent
ã &#227; &atilde; small a, tilde
ä &#228; &auml; small a, umlaut mark
å &#229; &aring; small a, ring
æ &#230; &aelig; small ae
ç &#231; &ccedil; small c, cedilla
è &#232; &egrave; small e, grave accent
é &#233; &eacute; small e, acute accent
ê &#234; &ecirc; small e, circumflex accent
ë &#235; &euml; small e, umlaut mark
ì &#236; &igrave; small i, grave accent
í &#237; &iacute; small i, acute accent
î &#238; &icirc; small i, circumflex accent
ï &#239; &iuml; small i, umlaut mark
ð &#240; &eth; small eth, Icelandic
ñ &#241; &ntilde; small n, tilde
ò &#242; &ograve; small o, grave accent
ó &#243; &oacute; small o, acute accent
ô &#244; &ocirc; small o, circumflex accent
õ &#245; &otilde; small o, tilde
ö &#246; &ouml; small o, umlaut mark
ø &#248; &oslash; small o, slash
ù &#249; &ugrave; small u, grave accent
ú &#250; &uacute; small u, acute accent
û &#251; &ucirc; small u, circumflex accent
ü &#252; &uuml; small u, umlaut mark
ý &#253; &yacute; small y, acute accent
þ &#254; &thorn; small thorn, Icelandic
ÿ &#255; &yuml; small y, umlaut mark
ileadmin

URL Karakterleri

URL (Link) Nedir?

Web adreslerinin resmi ismi URL’dir. Açılımı ise ( Uniform Resource Locator ) dır. Türkçesi ise “Standart Kaynak Bulucu” anlamına gelmektedir. Bu adresler sayesinde aradığımız Web sayfalarını buluruz. Her Web sayfası kendine ait bir URL ‘e sahiptir. Örneğin “http://www.sercaneraslan.com/xhtml” bir URL’dir. URL üç bölümden oluşur;

  • Protokol : http://, https://, ftp://, news: vb.
  • Alan adı : Protokolden sonra ilk slash işaretine kadar olan kısım. (www.sercaneraslan.com)
  • Dosya yolu : Alan adından sonraki kısım. (xhtml)

URL Karakterleri Nedir?

URL’ler, güvenllik sebebiyle güvenli karakterlere dönüştürülmektedir. URL’lerde sadece ASCII karakter seti kullanılabilmektedir. Örneğin, bir Web sayfasından bir link / URL aldınız ve sayfanızda paylaştınız sonra kodunuz geçerli mi diye kontrol ettiniz ve kodunuzda hatalar çıktığını gördünüz. İşte bu durumda kodunuzda hata veren karakteri güvenli karakter ile değiştirerek huzura kavuşabilirsiniz.

URL’de Hata Veren Karakter Yerine Geçecek Kod Açıklama
&#32; boşluk
! &#33; exclamation mark
&#34; quotation mark
# &#35; number sign
$ &#36; dollar sign
% &#37; percent sign
& &#38; ampersand
&#39; apostrophe
( &#40; left parenthesis
) &#41; right parenthesis
* &#42; asterisk
+ &#43; plus sign
, &#44; comma
&#45; hyphen
. &#46; period
/ &#47; slash
0 &#48; digit 0
1 &#49; digit 1
2 &#50; digit 2
3 &#51; digit 3
4 &#52; digit 4
5 &#53; digit 5
6 &#54; digit 6
7 &#55; digit 7
8 &#56; digit 8
9 &#57; digit 9
: &#58; colon
; &#59; semicolon
< &#60; less-than
= &#61; equals-to
> &#62; greater-than
? &#63; question mark
@ &#64; at sign
A &#65; uppercase A
B &#66; uppercase B
C &#67; uppercase C
D &#68; uppercase D
E &#69; uppercase E
F &#70; uppercase F
G &#71; uppercase G
H &#72; uppercase H
I &#73; uppercase I
J &#74; uppercase J
K &#75; uppercase K
L &#76; uppercase L
M &#77; uppercase M
N &#78; uppercase N
O &#79; uppercase O
P &#80; uppercase P
Q &#81; uppercase Q
R &#82; uppercase R
S &#83; uppercase S
T &#84; uppercase T
U &#85; uppercase U
V &#86; uppercase V
W &#87; uppercase W
X &#88; uppercase X
Y &#89; uppercase Y
Z &#90; uppercase Z
[ &#91; left square bracket
\ &#92; backslash
] &#93; right square bracket
^ &#94; caret
_ &#95; underscore
` &#96; grave accent
a &#97; lowercase a
b &#98; lowercase b
c &#99; lowercase c
d &#100; lowercase d
e &#101; lowercase e
f &#102; lowercase f
g &#103; lowercase g
h &#104; lowercase h
i &#105; lowercase i
j &#106; lowercase j
k &#107; lowercase k
l &#108; lowercase l
m &#109; lowercase m
n &#110; lowercase n
o &#111; lowercase o
p &#112; lowercase p
q &#113; lowercase q
r &#114; lowercase r
s &#115; lowercase s
t &#116; lowercase t
u &#117; lowercase u
v &#118; lowercase v
w &#119; lowercase w
x &#120; lowercase x
y &#121; lowercase y
z &#122; lowercase z
{ &#123; left curly brace
| &#124; vertical bar
} &#125; right curly brace
~ &#126; tilde
ileadmin

Head ve Meta

XHTML Head Etiketi – Head Tag

<head> etiketi içerisinde genel bilgiler ve sayfa bilgileri bulunur. Bu bilgiler tarayıcı tarafından okunmaktadır. XHTML standartlarına göre sadece aşağıdaki etiketler <head> etiketi içerisinde kullanılmalıdır.


Head Etiketleri Açıklama
<title> Eklenen başlık tarayıcının durum çubuğunda yer alır.
<base> Bu etiket içinde verdiğimiz link, sayfada öntanımlı olur.
<link> Web sayfalarınıza CSS eklemek için kullanabilirsiniz.
<meta> Web siteniz ile ilgili bilgileri bu etiketlerde tanımlayabilirsiniz.

Örnek olarak görelim…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8;">
        <meta name="Keywords" content="sercan, eraslan, xhtml, html, css, javascript"> 
        <meta name="Resource-Type" content="Document">
        <meta name="Distribution" content="Global">
        <meta name="Author" content="Sercan Eraslan, example@example.com">
        <meta name="Description" content="XHTML , HTML5 ve CSS hakkında herşey">
        <meta name="Robots" content="Index, Follow">
        <meta name="Revisit-After" content="1 Days>

        <base href="http://www.siteadresi.com/klasoradi/" />

        <!-- Yukarıda tanımlanan URL sayfada öntanımlı oldu. -->

        <!-- Bu sayfada kullanacağınız herhangi bir dosya artık -->

        <!-- http://www.siteadresi.com/klasoradi/ altında arancak. -->

        <link rel="stylesheet" type="text/css" href="style.css">

        <title>Sercan Eraslan Web Page</title>

    </head>
    <body>

        Sayfamızın içeriği burada.

    </body>
</html>

XHTML Meta Etiketi – Meta Tag

Meta Adı Meta kodu Açıklama
Abstract <meta name=”Abstract” content=”Site özeti”/> Tüm site hakkında bilgi veren etikettir.
Author <meta name=”Author” content=”Ad Soyad, E-Posta Adresi”/> Site yapımcısının adı ve iletişim bilgilerinin bulunduğu etikettir.
Copyright <meta name= “Copyright” content=”telif hakkı cümlesi”/> Sitenin telif hakları konusunda bilgi veren etikettir.
Description <meta name=”Description” content=”Sitenizin içeriği hakkında geniş bilgi”/> Bazı arama motorlarının temel aldığı, site hakkında bilgi veren temel etiketlerden biridir. Maksimum 139 karakter.
Expires <meta name=”Expires” content=”Mon, 12 Jan 2007 17:45:05 GMT/> Sitenin içeriğinin hangi tarihte zaman aşımına uğradığını arama motorlarına ileten etiket.
Keywords <meta name=”Keywords” content=”kelime1, kelime2, kelime3″/> Yine arama motorlarının temel aldığı, sitenizin içeriğini oluşturan kelimelerin bulunduğu etiket. Anahtar kelimeler virgül ile ayrılır 10 taneyi geçmez.
Language <meta http-equiv=”content-language” content=”tr”/> Sitenizin varsayılan dilini belirten etiket.
Revisit-After <meta name=”Revisit-After” content=”1 days”/> Arama motorlarına, sitenin içeriğinin kaç günde bir güncellendiğini ileten etiket.
Refresh <meta http-equiv=”Refresh” content=”60″/> Belli aralıklarla sayfanın yeilenmesini sağlayan etiket. Örnekteki 60, sayfanın 60 saniyede bir yenileneceğini belirtir.
Redirect <meta http-equiv=”Refresh” content= “5; url= http://www.site.com”/> Sayfanın, belli bir zaman sonra başka bir sayfaya yönlenmesini sağlar. Bu örnekte sayfa 5 saniye sonra başka bir sayfaya yönlenecek.
Robots <meta name=”robots” content=”all”/> Arama motoru robotları site içerisinde herşeyi yapsın.
Robots <meta name=”robots” content=”none”/> Arama motoru robotları site içerisinde hiçbirşey yapmasın.
Robots <meta name=”robots” content=”index, follow”/> Arama motoru robotları site içerisinde ki bilgileri indekslesin ve izlesin.
Robots <meta name=”robots” content=”noindex, follow”/> Arama motoru robotları site içerisinde ki bilgileri indekslemesin ama izlesin.
Robots <meta name=”robots” content=”index, nofollow”/> Arama motoru robotları site içerisinde ki bilgileri indekslesin ama izlemesin.
Robots <meta name=”robots” content=”noindex, nofollow”/> Arama motoru robotları site içerisinde ki bilgileri indekslemesin ve izlemesin.
Charset <meta http-equiv= “Content-Type” content=”text/html; charset=utf-8″/> Sayfanın karakter kodlamasını belirtmek için kullanılır. Türkçe karakterlerin düzgün görünmesini sağlar.
Resource-Type <meta name=”Resource-Type” content=”Document”/> Sayfanın kaynak tipini göstermek için kullanılır.
Distribution <meta name=”Distribution” Content=”Global”/> Sayfayı tüm dünyaya açtığımızı gösteriyor. Lokal ve Internet seçenekleride var.
Subject <meta name=”Subject” Content=”Sayfanın konusu”/> Sayfanın konusu belirtmek için kullanılır.
Generator <meta name=”Generator” Content=”WordPress”/> Sayfayı üreten uygulamanın adı için kullanılır.
Copyright <meta name=”Copyright” Content=”2009″/> Sayfanın oluştuğu yıl için kullanılır.
Designer <meta name=”Designer” Content=”Ad Soyad”/> Sayfanın tasarlayan kişinin adı soyadı için kullanılır.
ileadmin

Geçerli Etiketler

HTML için ve XHTML için geçerli olan kodları aşağıda ki tabloda görebilirsiniz.

Etiketler Transitional Strict Frameset XHTML 1.1
<a> Evet Evet Evet Evet
<abbr> Evet Evet Evet Evet
<acronym> Evet Evet Evet Evet
<address> Evet Evet Evet Evet
<applet> Evet Hayır Evet Hayır
<area /> Evet Evet Evet Hayır
<b> Evet Evet Evet Evet
<base /> Evet Evet Evet Evet
<basefont /> Evet Hayır Evet Hayır
<bdo> Evet Evet Evet Hayır
<big> Evet Evet Evet Evet
<blockquote> Evet Evet Evet Evet
<body> Evet Evet Evet Evet
<br /> Evet Evet Evet Evet
<button> Evet Evet Evet Evet
<caption> Evet Evet Evet Evet
<center> Evet Hayır Evet Hayır
<cite> Evet Evet Evet Evet
<code> Evet Evet Evet Evet
<col /> Evet Evet Evet Hayır
<colgroup> Evet Evet Evet Hayır
<dd> Evet Evet Evet Evet
<del> Evet Evet Evet Hayır
<dfn> Evet Evet Evet Evet
<dir> Evet Hayır Evet Hayır
<div> Evet Evet Evet Evet
<dl> Evet Evet Evet Evet
<dt> Evet Evet Evet Evet
<em> Evet Evet Evet Evet
<fieldset> Evet Evet Evet Evet
<font> Evet Hayır Evet Hayır
<form> Evet Evet Evet Evet
<frame /> Hayır Hayır Evet Hayır
<frameset> Hayır Hayır Evet Hayır
<h1> to <h6> Evet Evet Evet Evet
<head> Evet Evet Evet Evet
<hr /> Evet Evet Evet Evet
<html> Evet Evet Evet Evet
<i> Evet Evet Evet Evet
<iframe> Evet Hayır Evet Hayır
<img /> Evet Evet Evet Evet
<input /> Evet Evet Evet Evet
<ins> Evet Evet Evet Hayır
<isindex> Evet Hayır Evet Hayır
<kbd> Evet Evet Evet Evet
<label> Evet Evet Evet Evet
<legend> Evet Evet Evet Evet
<li> Evet Evet Evet Evet
<link /> Evet Evet Evet Evet
<map> Evet Evet Evet Hayır
<menu> Evet Hayır Evet Hayır
<meta /> Evet Evet Evet Evet
<noframes> Evet Hayır Evet Hayır
<noscript> Evet Evet Evet Evet
<object> Evet Evet Evet Evet
<ol> Evet Evet Evet Evet
<optgroup> Evet Evet Evet Evet
<option> Evet Evet Evet Evet
<p> Evet Evet Evet Evet
<param /> Evet Evet Evet Evet
<pre> Evet Evet Evet Evet
<q> Evet Evet Evet Evet
<s> Evet Hayır Evet Hayır
<samp> Evet Evet Evet Evet
<script> Evet Evet Evet Evet
<select> Evet Evet Evet Evet
<small> Evet Evet Evet Evet
<span> Evet Evet Evet Evet
<strike> Evet Hayır Evet Hayır
<strong> Evet Evet Evet Evet
<style> Evet Evet Evet Evet
<sub> Evet Evet Evet Evet
<sup> Evet Evet Evet Evet
<table> Evet Evet Evet Evet
<tbody> Evet Evet Evet Hayır
<td> Evet Evet Evet Evet
<textarea> Evet Evet Evet Evet
<tfoot> Evet Evet Evet Hayır
<th> Evet Evet Evet Evet
<thead> Evet Evet Evet Hayır
<title> Evet Evet Evet Evet
<tr> Evet Evet Evet Evet
<tt> Evet Evet Evet Evet
<u> Evet Hayır Evet Hayır
<ul> Evet Evet Evet Evet
<var> Evet Evet Evet Evet
ileadmin

Geçerli Kod

XHTML Geçerli Kod Yazmak – Valid Code

Geçerli bir kodumuzun olması için şimdiye kadar yazılanların hepsini uygulamış olmamız gerekir. Şimdiye kadar öğrendiklerimize ek olarak aşağıda ki maddeleri sıralayabiliriz.

  • Etiketlere “inline” CSS kodu yazmamalıyız. (style=”background-color: blue;” gibi.)
  • Olabildiğince az kodlama yapararak çalışmalıyız, gereksiz kod yazmaktan kaçınmalıyız.
  • XHTML kodumuz ne kadar temiz ve düzenli gözükürse o kadar güzel olur. (Sayfa girintilemeye ve kod düzenine dikkat etmeliyiz.)
  • Herşeyi gruplamalıyız. Örneğin, Sayfamızı yazmaya başlarken sayfamızda büyük bir div (container) oluşturmalıyız ve onun içinde çalışmaya başlamalıyız. O div içinde bir üst bölüm (header) oluşturmalıyız ve bir de alt bölüm (footer) oluşturmalıyız. Sayfamızın içeriğini ise orta bölüm içinde kodlamalıyız.
  • XHTML sayfanızın en üstüne sayfanızı hangi standartlara uygun olarak yazdığınızı belirten DOCTYPE etiketini eklemeniz gerekiyor.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • Son olarak “html” etiketimiz “xmlns” özniteliği içermelidir diyoruz.

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    

XHTML Sayfam Geçerli mi?

XHTML

  • XHTML sayfanız web üzerinde ise geçerlilik kontrolü buradan yapılabilir.
  • XHTML sayfanız bilgisayarınızda ise geçerlilik kontrolü buradan yapılabilir.
  • Web sayfası üzerinde geçerlilik kontrolü yapmak istiyorsanız buradan kontrol edebilirsiniz.

CSS

  • CSS dosyanız, Web üzerinde ise geçerlilik kontrolü buradan yapılabilir.
  • CSS dosyanız, bilgisayarınızda ise geçerlilik kontrolü buradan yapılabilir.
  • Web sayfası üzerinde geçerlilik kontrolü yapmak istiyorsanız buradan kontrol edebilirsiniz.
ileadmin

Farklar

1. Etiketler düzgün biçimde iç içe geçmelidir.

Aşağıdaki kod yanlıştır.


<strong><i>Bu yazı vurgulu ve yatıktır</strong></i>

Aşağıdaki kod ise doğrudur.


<strong>
    <i>Bu yazı vurgulu ve yatıktır</i>
</strong>

2. Tüm etiketler küçük harflerle yazılmalıdır.

Aşağıdaki kod yanlıştır.


<BODY>
    <P>Bu bir paragraftır.</P>
</BODY>

Aşağıdaki kod ise doğrudur.


<body>
    <p>Bu bir paragraftır.</p>
</body>

3. Tüm XHTML etiketleri kapanmalıdır.

Aşağıdaki kod yanlıştır.


<p>Bu bir paragraftır.
<li>Bu bır liste maddesidir.

Aşağıdaki kod ise doğrudur.


<p>Bu bir paragraftır.</p>
<li>Bu bir liste maddesidir.</li>

4. Boş elemanlarda sonlandırılmalıdır.

Aşağıdaki kod yanlıştır.


<br>
<hr>
<img src="dosyaismi.jpg">

Aşağıdaki kod ise doğrudur.


<br />
<hr />
<img src="dosyaismi.jpg" />

XHTML Web sayfalarınızı tarayıcılar ile uyumlu hale getirmek istiyorsanız “/” işaretinden önce bir boşluk bırakmalısınız.

5. Parametre isimleri küçük harf olmalıdır.

Aşağıdaki kod yanlıştır.


<table WIDTH="100%">

Aşağıdaki kod ise doğrudur.


<table width="100%">

6. Parametre değerleri tırnak işareti içinde olmalıdır.

Aşağıdaki kod yanlıştır.


<table width=100%>

Aşağıdaki kod ise doğrudur.


<table width="100%">

7. Parametre sadeleştirme kaldırılmıştır.

Aşağıdaki kod yanlıştır.


<input checked>
<option selected>

Aşağıdaki kod ise doğrudur.


<input checked="checked" />
<option selected="selected" />

8. “id” parametresi “name” parametresinin yerine geçer.

Aşağıdaki kod yanlıştır.


<img src="dosyaismi.jpg" name="resim1" />

Aşağıdaki kod ise doğrudur.


<img src="dosyaismi.jpg" id="resim1" />

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 html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=utf-8;" />
        <title>Başlık Buraya</title> 
    </head>
    <body>
        <p>İçerik Buraya</p>
    </body>
</html>

DOCTYPE elemanı bir XHTML elemanı değildir ve standartlara uymasına gerek yoktur. Ayrıca sonlandırılması da gerekmez.

DTD nedir?

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. DTD bir web sayfasının tipini SGML (Standard Generalized Markup Language) dili ile belirler.

DTD, HTML gibi SGML uygulamaları tarafından kullanılır. Amacı sayfa için geçerli olan markup sitilini belirtmektir. XHTML SGML döküman tipinde tanımlanmıştır. Bir XHTML DTD dökümanı sayfada uyulması gereken kuralları bilgisayarın anlayabileceği bir dille belirtir.

10. DOCTYPE zorunlu olarak mevcut olmalıdır.

Geçerli 3 adet XHTML döküman tipi vardır.

a) XHTML Strict DTD (Sıkı XHTML)

XHTML Strict eğer standartlara uygun kod yazmak istiyorsanız ve sayfanıza görünüm vermek için CSS (Cascading Style Sheets) kodlarını kullanacaksanız bu tip sizin için. (Bu DTD’yi kullanmanızı öneririm.)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

b) XHTML Transitional DTD (Geçiş XHTML)

Eğer standartlara uygun kod yazmak istiyorsanız ve XHTML’in görünüm yeniliklerini yani CSS’i kullanmayacaksanız, örneğin <font> gibi html etiketlerini kullanıyorsanız bu tip sizin için uygun. XHTML Strict DTD, <font> , <u> gibi etiketleri desteklemez.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

c) XHTML Frameset DTD (Çerçeveli XHTML)

Kullanımı oldukça çok az olan bir DTD çeşidir. Aşağıdaki kullanım sayfanın XHTML çerçeve (frame) sayfası olduğunu gösterir.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">