ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"]
HTML[/caption]
به زبان ساده،
XHTML همان HTML است که به صورت XML نوشته شده باشد.(
ایران گستر)
XHTML مخفف EXtensible HyperText Markup Language و به معنی زبان امتدادپذیر نشانه‌گذاری فرامتنی» است اما نگذارید این اسم های قلمبه و سلمبه شما را فریب دهد! XHTML دقیقا مانند HTML نوشته می شود اما قوانین سخت گیرانه تری دارد و همانطور که گفتیم انگار می خواهیم HTML را به صورت یک برنامه ی XML بنویسیم. همچنین قابل ذکر است که XHTML توسط تمام مرورگر های مطرح پشتیبانی می شود.(
ایران گستر)
بسیاری از
صفحات وب دارای HTML بد و غیر معتبر هستند. به طور مثال کد HTML زیر در تمام مرورگر ها کار می کند اما از نظر فنی غیر صحیح است:(
ایران گستر)
|
1 2 3 4 5 6 7 8 |
<html> <head> <title>This is bad HTML</title>
<body> <h1>Bad HTML <p>This is a paragraph </body> |
به نظر شما مشکل کد بالا چیست؟
کد بالا در وهله ی اول هیچ DOCTYPE ای ندارد و مشخص نکرده است که از چه ورژنی از HTML استفاده می کند. همچنین تگ <html> را در آخر سند بسته نشده است و هیچ تگ پایانی را مشاهده نمی کنیم. این اتفاق برای
تگ های <head> و <h1> و <p> نیز اتفاق افتاده است.(
ایران گستر)
این کد HTML کاملا غیر معتبر و غیر صحیح است اما در اکثر مرورگر های وب بدون مشکل به نمایش در می آید چرا که خود مرورگر ها متوجه اشکالات می شوند و آن ها را در هنگام نمایش تصحیح می کنند. اما این مسئله برای مرورگر های تلفن های همراه اتفاق نمی افتد. معمولا گوشی های هوشمند آنقدر پیشرفته نشده اند که هر نوع خطایی را متوجه شوند و تصحیحش کنند. بنابراین علاوه بر ضربه خوردن از جهت سئو، ممکن است کاربران تلفن های هوشمند نتوانند سایت شما را ببینند و کاربران زیادی را از دست بدهید.(
ایران گستر)
از طرفی XML نوعی زبان نشانه گذاری است که در آن باید قوانین نشانه گذاری را به طور کامل رعایت کرد. همانطور که حدس می زنید ترکیب XML و HTML همان XHTML می باشد.(
ایران گستر)
برخی از مهم ترین خصوصیات زبان XHTML از این قرار اند:(
ایران گستر)
DOCTYPE در این زبان اجباری است
attribute ها باید در Quotation قرار بگیرد
1- خلاصه سازی attribute ها یعنی مواردی مثل مورد زیر:(
ایران گستر)
اگر به جای نوشتن <"option selected="selected> بنویسید <option selected> می گوییم attribute (در اینجا selected) را خلاصه کرده اید.
می خواهیم این موارد را به صورت خلاصه بررسی کنیم.(
ایران گستر)
یک سند XHTML باید علاوه بر DOCTYPE شامل تگ های <html> و <head> و <title> و <body> باشد.
یک نمونه سند صحیح به این شکل است:(
ایران گستر)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Title of document</title> </head>
<body> some content </body>
</html> |
DOCTYPE ای که در بالا می بینید، نحوه ی اعلام DOCTYPE به عنوان XHTML است.
در زبان HTML بعضا می توانیم اشتباها عناصر را nest کنیم:(
ایران گستر)
1 |
<b><i>This text is bold and italic</b></i> |
در این کد تگ های پایانی جا به جا بسته شده اند.
اما در XHTML باید کاملا صحیح nest شوند:
1 |
<b><i>This text is bold and italic</i></b> |
در HTML این کد غلط است:(
ایران گستر)
|
1 2 |
<p>This is a paragraph <p>This is another paragraph |
و این حالت صحیح است:(
ایران گستر)
|
1 2 |
<p>This is a paragraph</p> <p>This is another paragraph</p> |
حتی تگ هایی که در HTML تگ پایانی ندارند باید در XHTML بسته شوند. در HTML این تگ ها به این صورت هستند:(
ایران گستر)
|
1 2 3 |
A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face"> |
اما در XHTML باید به این شکل نوشته شوند:
|
1 2 3 |
A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" /> |
همچنین همیشه باید تگ هایتان با حروف کوچک باشند بنابراین کد زیر غلط است:(
ایران گستر)
|
1 2 3 |
<BODY> <P>This is a paragraph</P> </BODY> |
حالت صحیح این کد به این صورت است:(
ایران گستر)
|
1 2 3 |
<body> <p>This is a paragraph</p> </body> |
کوچک بودن حروف برای attribute ها نیز صدق می کند، بنابراین کد زیر غلط است:(
ایران گستر)
1 |
<table WIDTH="100%"> |
و شکل صحیح آن بدین صورت است:
1 |
<table width="100%"> |
همچنین باید مقدار این attribute ها در quotation باشد. کد زیر غلط است:(
ایران گستر)
1 |
<table width=100%> |
و شکل صحیح آن بدین صورت است:
1 |
<table width="100%"> |
خلاصه سازی attribute ها نیز غیر مجاز است. به نمونه های صحیح و غلط زیر نگاه کنید.(
ایران گستر)
کد غلط:
1 |
<input type="checkbox" name="vehicle" value="car" checked /> |
حالت صحیح آن:(
ایران گستر)
1 |
<input type="checkbox" name="vehicle" value="car" checked="checked" /> |
کد غلط:(
ایران گستر)
1 |
<input type="text" name="lastname" disabled /> |
حالت صحیح آن:(
ایران گستر)
1 |
<input type="text" name="lastname" disabled="disabled" /> |
سوال: چطور می توانیم از HTML به XHTML مهاجرت کنیم؟(
ایران گستر)
پاسخ: ابتدا باید یک DOCTYPE برای XHTML بنویسید و DOCTYPE قبلی را حذف کنید. سپس attribute ای به نام xmlns را به خودِ عنصر html اضافه کنید. سپس نام تمامی عناصر را با حروف کوچک بنویسید و این کار را با attribute ها نیز انجام دهید. در آخر تگ های خالی (تگ هایی که تگ پایانی ندارند) را ببندید و برای مقادیر attribute ها Quotation قرار دهید.(
ایران گستر)
یک مثال از یک سند XHTML برای شما آورده ام:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Strict DTD XHTML Example </title> </head> <body> <p> Please Choose a Day: <br /><br /> <select name="day"> <option selected="selected">Monday</option> <option>Tuesday</option> <option>Wednesday</option> </select> </p> </body> </html> |
با نگاهی به این سند کوتاه متوجه می شوید که تمام موارد بالا در آن رعایت شده است.(
ایران گستر)
درباره این سایت