مشاهده نسخه کامل
: raika17metal
29-05-2007, 18:38
تست کردن و اشکال زدایی صفحات وب
خوب, شما یک صفحه ی وب جدید را نوشته اید و وقتی آن را در مرورگرتان نمایش میدهید می فهمید که همه چیز آنطور که شما می خواهید به نظر نمی رسد.یا اینکه صفحهاصلا ًبه نمایش در نمی آید.یا اینکه ممکن است صفحه در مرورگر پیش فرض شما عالی بهنظر برسد٬ اما وقتی از کلاینت سؤال می کنید٬ او می گوید که صفحه روی کامپیوتر اوکمی عجیب و غریب به نظر می رسد.
بین HTML٬ XHTML٬ CSS و تعداد فراوان مرورگرها و پلات فرم هایی که روی آنها میتوانید صفحات وب را مشاهده کنید٬به آسانی مشکلاتی بروز می کند.در این جا در موردبعضی خطاهای متداول به شما هشدار خواهد داد وبه شما کمک خواهد کرد تا از دست آنخطاها و اشکالات٬خلاص شوید.
بعضی از تکنیک های اشکال زدایی ممکن است ابتدایی به نظر برسند. نکته این است کهبیشتر مشکلات در رابطه با صفحات وب هم کاملاً ابتدایی هستند.قبل از اینکه به دنبالیک مشکل بزرگ بگردید٬ اطمینان حاصل کنید که هیچ مشکل کوچکتری وجود ندارد.من چگونگیانجام این کار را در بخش اول این توضیحات به شما نشان خواهم داد.
همین که کد شما صحیح از آب در آمد٬باید سایت تان را ه طور عمیق روی یک یا چندمرورگر و در یک یا چند پلات فرم تست کنید٬تا ببینید آیا هر صفحه آنطور که شما میخواهید کار می کند٬یا خیر.
چند تکنیک اشکال زدایی
در اینجا تکنیک های آزموده شده و درست من برای اشکال زدایی یک صفحهٴ وب ارائه میشوند.
ابتدا مطالب ساده را چک کنید.
تصور کنید که یک دانشمند هستید.تیز بین و پیرو روش ها باشید.
قدم به قدم و به تدریج کار کنید.تغییرات کوچک را اعمال کنبد و پس از هر تغییرکارتان را تست کنید.به این روش شما خواهید توانست منبع یک مشکل را در صورت بروزپیدا کنید.به همین ترتیب٬وقتی مشغول اشکال زدایی هستید٬با چیزهایی که میدانید درستکار می کنند٬شروع کنید.فقط پس از آن باید بخش های مشکل تر را قسمت به قسمت اضافهکنید٬پس از هر اضافه کردن٬صفحه را در یک مرورگر تست کنید تا زمانی که منبع مشکل راپیدا نمایید.
بر عکس٬از فرایند حذف کردن استفاده کنید تا بفهمید کدام قسمت ها از کد شما سبببروز مشکل می شوند.برای مثال٬می توانید نیمی از کد را با تبدیل کردن آن به توضیحاتکنار بگذارید تا ببینید آیا مشکل در نیمهٴ دیگر است یا خیر.سپس نیم دیگری از بخشباقیمانده را به توضیحات تبدیل کنید و به همین ترتیب ادامه دهید٬تا زمانی که مشکلرا پیدا کنید.
در مورد اشتباهات انجام گرفته در تایپ کردن کد واقعا ً دقت به خرج دهید.بسیاریاز پیچیده ترین مشکلاتی که من با آنها روبه رو بوده ام ٬در نهایت ناشی از یک اشتباهساده در نوشتن عبارت ها بوده است.
در css٬اگر مطمئن نیستید که مشکل در رابطه با ویژگی یا انتخاب کننده آن است ٬یکاعلان خیلی ساده را به انتخاب کننده تان اضافه کنید٬مانند color:red.اگر در عنصرمرود نظر به رنگ قرمز در آمد ٬مشکل در رابطه با ویژگی شما است٬اگر چنین نشد مشکل دررابطه با انتخاب کننده است.
یک وقفه به کارتان بدهید.زمان خطا نیست.گاهی شما میتوانید در مدت زمان 15 دقیقهپس از یک ساعت استراخت فکری به نتایجی برسید که هرگز در یک ساعت کار بدون استراحتبه آن نتایج نمی رسیدید.
اول نکات ساده را چک کنید
در حالی که تفاوت هایی که شما بین مرورگرها مشاهده می کنید٬ ممکن است ناشی ازبعضی باگ های مبهم مربوط به خود مرورگر یا بعضی تکنیک های جدیدی که شما استفاده میکنید باشد٬ 90% اوقات منشإ مشکل یک چیز ساده است. به سادگی می توان به مشکلی دررابطه با یک تکنیک جدید ایراد گرفت و ساعت ها وقت را صرف اشکال زدایی آن کرد٬تا درآخر بفهمید که شما یک فایل را تغییر داده اید٬اما یک فایل دیگر را آپلود کرده ومشاهده می کنید.
نکات ساده ٴمتداول
اطمینان حاصل کنید که در عمل همان فایلی که می خواهید آن را تست کنید را آپلودکرده اید.
اطمینان حاصل کنید که شما فایل را در همان مکانی که فکر میکنید درست است آپلودکرده اید.
اطمینان حاصل کنید که URL که تایپ کرده اید مربوط به همان فایلی است که میخواهید آن را تست کنید.
اطمینان حاصل کنید که فایل را با در نظر گرفتن آخرین تغییرات اعمال شده در آن٬قبل از آپلود کردن ذخیره کرده اید.
اطمینان حاصل کنید که تمام فایل های کمکی ٬از جمله فایل های css٬تصاویر٬موسیقی٬ ویدیوها و غیره را آپلود کرده اید.
اطمینان حاصل کنید که حروف بزرگ و کوچک در URL شما دقیقا ًبا حروف بزرگ و کوچکدر نام فایل های تان مطابقت دارد و اطمینان حاصل کنید که از فاصله های خالی یا سایرعلائم نقطه گذاری در نام های فایل تان استفاده نکرده اید.
اطمینان حاصل کنید که مشکل ناشی از نقص موجود در مرورگر نمی باشد.ساده ترین روشبرای انجام این کار این است که صفحه را در مرورگر دیگری تست کنید.
در سه بخش بعدی٬ایده هایی را به شما در مورد چگونگی چک کردن نکات آسان و پیش پاافتاده در کد HTML٬ XHTML٬CSS خواهم داد.
چک کردن نکات ساده :HTML
در این جا بعضی از مشکلات متداول در رابطه با کد HTML ارائه می شود.بسیاری ازآنها در مورد XHTML هم به کار می روند.
برای چک نکات ساده در رابطه با کد HTML:
اطمینان حاصل کنید که املای همه چیز را درست تایپ کرده اید. من نمیتوانم به شمابگویم که چند بار جای src تایپ کرده ام scr (که به هر صورت کوتاه نوشت کلمهٴ source می باشد).
در رابطه با عناصری که درون یکدیگر قرار می گیرند مراقب باشید. اگرابتدا<p> را باز می کنید و سپس از <b> استفاده می کنید٬اطمینان حاصلکنید که ابتدا تگ بستهٴ</b > را قرار داده و سپس تگ نهایی <</p را تایپمی کنید.
علامت / در تگ های خالی XHTML بخشی از مشخصهٴ رسمی HTML محسوب نمی شود.اگر میخواهید فایل به عنوان HTMLتطبیق داده شود٬ باید همهٴ آنها را حذف کنید.( بهتر از آناین است که به سراغ XHTML رفت).
اطمینان حاصل کنید که DOCTYPE با HTML که در عمل مورد استفاده قرار می دهیدمنطبق است. برای مثال ٬ اگر می خواهید از تگ های کنار گذاشته شده استفاده کنید ٬ ازسلیقهٴ strict در HTMLاستفاده نکنید بلکه از سلیقهٴ transitional در HTML استفادهکنید.
از تگ های غیر استاندارد اجتناب کنید.پشتیبانی از آنها در مرورگرهای مختلف اصلاً قابل اطمینان نیست.
مراقب باشید که بیشتر اعلان های معتبر DOCTYPE سبب می شود تا IE و firefoxبه مداستاندارد برده شوند. اگر می خواهید به روش های غیر استاندارد قدیمی تکیه کنید٬ممکن است این سبب ناامید شدن شما شود.
اگر کاراکترهای اکسنت دار یا نمادهای ویژه به طور مناسب نمایش داده نشوند٬بهمباحث قبلی ((نمادها و کاراکترهای غیر انگلیسی )) مراجعه کنید.
img scr="image.gif"alt="Woody the cat"/>>
در کدشماره 2 آیا می توانید ببینید مشکل در کجا قرار دارد؟ من srcرا اشتباه نوشتم. نمیتوانم به شما بگویم چند بار فقط برای پیدا کردن یک اشتباه تایپی ناجور مثل اینزمین و زمان را زیرورو کردم.
<img src="image.gif"alt="Woodythe cat">
کد شماره 3 نسخهٴ تصحیح شده نشان می دهد که شاخص srcبا املای درست نوشته شده٬ بهاضافه این که من / نهایی را فقط درXHTML و نه HTMLبه کار برده شده را حذف کردهام.
چک کردن نکات آسان XHTML:
اگر می خواهید به XHTML جهش کنید٬ به آسانی ممکن است تعدادی از قواعد دستوری آنرا از قلم بیندازید. اطمینان حاصل کنید که اول آنها را چک کرده اید.
برای چک کردن نکات ساده را در رابطه با XHTML:
اطمینان حاصل کنید که تمام مقادیر شاخص ها بین علامت های نقل قول مستقیم و نهانحنا دار قرار گرفته اند. اگر خود مقدار حاوی علامت های نقل قول است٬ از کدهایکاراکتر استفاده کنید.همچنین توجه داشته باشید که یک مقدار می تواند حاوی علامت هاینقل قول تکی باشد .اگر خود مقدار بین علامت های نقل قول جفتی قرار بگیرد یا حاویعلامت های نقل قول جفتی باشد.اگر خود مقدار بین علامت های نقل قول تکی قراربگیرد(شکل های 4 و5)
اطمینان حاصل کنید که تمام عناصر دارای تگ های باز و بسته یا یک تگ ترکیبی (با/نهایی)می باشند.همیشه یک فاصلهٴ خالی را قبل از / قرار دهید تا سازگاری بامرورگرهای قدیمی تر حاصل شود.
تگ های باز و بسته برای عناصری که معمولا ًحاوی مطالب هستند را با هم ترکیبنکنید. برای مثال٬ در حالی که </ p> از نظر تکنیکی در XHTMLصحیح میباشد٬مرورگرها همیشه نمی دانند که با آن چه کنند.به همین ترتیب٬برای عناصر خالی ازتگ های باز و بستهٴ مجزا استفاده نکنید مانند</img> <"cat"= woody.gif " alt"=src img >.باز هم می گوییم ٬ در حالی که این کاملا ًدر XHTMLمعتبر است٬مرورگرها سر درگم خواهند شد(کد شماره 6و7).
در رابطه با بزرگی و کوچکی حروف دقت کنید.تمام عنصرها٬شاخص ها و مقادیر از پیشتعریف شده باید با حروف کوچک نوشته شوند.
وقتی کدهای هگزا دسی مال برای رنگ ها را مشخص می کنید علامت # را فراموش نکنید.
اگر نمادها یا کاراکترهای اکسنت دار به طور مناسب نمایش داده نمی شوند به ((نمادها و کاراکترهای غیر انگلیسی )) مراجعه کنید.
<img src="jungle.ipg"alt="LIumi's iungle"/>
کد شماره 4.اگر مقدار یک شاخص حاوی علامت های نقل قول تکی باشد٬شما می توانیدآن را مانند همیشه بین علامت های نقل قول جفتی قرار دهید.
<img src="cookie.ipg"alt=cookie's saying
&qout;Enough!""/>
<img src='tough-llumi.ipg"alt='Llumi replies,"this
is_my_iungle."/>
کد شماره 5.اگر مقدار یک شاخص حاوی علامت های نقل قول جفتی باشد٬ یا از کدهای کاراکتر( خط بالا) استفاده کنید یا مقدار شاخص را بین علامت های نقل قول تکی قرار دهید( خطپایین ).
<p />
<img src="iungle.ipg"alt="Llumi's iungle">
</img>
کد شماره 6. در این جا دو مثال از کد XHTMLمعتبر آمده که بیشتر مرورگرهارا سر درگم خواهند کرد.
<p></p>
<img src="jungle.ipg"alt="Lluumi's iungle"/ >
کد شماره 7.در عوض٬ تگ های باز و بستهٴ عناصری که معمولا ً خالی نیستند را با همترکیب نکنید
مانندp)و از تگ های باز و بستهٴ مجزا برای عناصری که معمولاً خالی هستند ( مانند img)استفاد نکنید.)
چک کردن نکات ساده:css
در حالی که قواعد cssکاملاً سر راست هستند٬تله های متداولی وجود دارند که ممکناست در آنها گیر بیفتید٬خصوصا ً اگر به نوشتن کد HTMLیا XHTML عادت کرده باشید.
برای چک کردن نکات آسان در رابطه با CSS:
اطمینان حاصل کنید که ویژگی ها را از مقادیرشان به وسیلهٴ یک علامت کولون (:) جدا کرده اید٬ نه توسط یک علامت مساوی همان طور که در HTML (X)انجام می دهید(شکلهای 8 و9).
اطمینان حاصل کنید که هر زوج ویژگی- مقدار را با یک علامت سمی کالون (؛) کاملکرده اید.اطمینان حاصل کنید که هیچ علامت سمی کالون اضافه وجود ندارد(شکل های 10و11).
فاصله های خالی را بین اعداد و واحدهای شان اضافه نکنید(شکل های 12و13).
فراموش نکنید که آکولادها را ببندید.
مقادیر را بین نقل قول قرار ندهید٬همان طور که در HTML(X) انجام می دادید.تنهامقادیری که درCSS بین علامت های نقل قول قرار می گیرند نام های چند کلمه ای قلم هامی باشند.
اطمینان حاصل کنید که از یک مقدار قابل قبول استفاده می کنید.چیزی شبیهبه:nonefont-style کار نمی کند چون به جای مقدار "none"باید مقدار normal قرارگیرد.شما می توانید فهرست کاملی از ویژگی ها و مقدارهای cssرا در ضمیمهٴب٬ ((ویژگیها و مقدارهای css))مشاهده کنید.
تگ بستهٴ> style/ > را در رابطه با صفحات سبک داخلی فراموش نکنید.اطمینانحاصل کنید که سند HTML (X) را به فایل CSSمناسب پیوند داده اید و URLمشخص شده بهفایل مورد نظر اشاره می کند.URLها نسبت به فایل CSSدر نظر گرفته می شوند٬نهفایلHTML (X).
مراقب فضاهای خالی و علائم بین انتخاب کننده ها باشید.
اطمینان حاصل کنید که مرورگر ازآنچه شما انجام می دهید پشتیبانی می کند. پشتیبانی مرورگرها برای CSSمتغیر است.
p{font-size=24px}
کد شماره 8.ترک این عادت که بین ویژگی ها و مقدارها علامت مساوی قراربدهید مشکل است .اما باید این کار را بکنید.
p{font-size:24px}
کد شماره 9.همیشه از یک کولون بین ویژگی و مقدار استفاده کنید. توجه کنیدکه اهمیتی ندارد اگر فضاهای اضافی را قبل و بعد از کولون اضافه کنید.
p{font-size:24px font-weight:blod;;font-style:italic}
کد شماره 10. شما باید یک و فقط یک سمی کالون را بین هر زوج ویژگی_ مقدارقرار دهید. در این جا یک سمی کاالون کم گذاشته شده و یک سمی کالون کم گذاشته شده ویک سمی کالون اضافه است.
p{
Font-size:24px ;
Font-weight:blod;
Font-style:italic;
}
کد شماره 11.یک روش برای اطمینان حاصل کردن از اینکه هر زوج ویژگی- مقدار توسط یک سمیکالون از بعدی جدا شده این است که هر کدام از آنها را روی یک خط مجزا قرار دهید.بهاین ترتیب مشاهده اینکه آیا سنی کالون ها در جای خود قرار گرفته اند آسان تر میشود.
p{font-size:2 em}
کد شماره 12.هیچ وقت بین عدد و واحد آن فاصلهٴ خالی قرار ندهید.
p{font-style: 2em}
کد شماره 13.این کد کار میکند.توجه کنید که فاصلهٴ خالی بین کولون ومقدار اختیاری می باشد.
تطبیق دادن کد با استانداردها
یک ابزار خوب برای پیدا کردن خطاها در یک صفحه اجرا کردن آن از طریق یک تطبیق گرمی باشد. یک تطبیق گرHTML (X) به DOCTYPE نگاه می کند تا ببیند شما از کدام نسخهٴ HTMLیا XHTMLاستفاده می کنید٬سپس کد را با مشخصه های رسمی مربوط به آن نسخه مقایسهمی کند و سپس هر ناسازگاری که یافته شود را نمایش می دهد. یک تطبیق گر CSSبه همینروش کار می کند.
برای تطبیق دادن کد تان با استانداردها:
ابتدا کدHTML(X)را با تطبیق گر w3c درآدرس /org.w3.validator//:http چک کنید.
2.همین که کد HTML(X) معتبر شناخته شد٬می توانیدبا استفاده از تطبیق گر موجود درآدرس [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] اطمینان حاصل کنید که کد cssشما هم خالیاز خطا می باشد.
راهنمایی ها
تطبیق گرها اغلب در به دست آوردن یک تصویر کلی از صفحهٴشما به مشکل بر می خورند.در حالی که آنها در پیدا کردن تگ های بسته جا افتاده٬یا علامت های نقل قول جا افتاده٬خیلی خوب عمل می کنند٬اما همیشه در مورد اینکه در بقیهٴفایل چه می گذرد خیلی باهوش نیستند. برای مثال٬یک تگ بستهٴجا افتاده ممکن است سبب نمایش داده شدن تعداد فراوانی پیغام های خطا در سرتاسرسند شما شود.اگر آن تگ بسته را در جای خود قرار دهید٬ تمام آن خطاهای پشت سرهم ناپدید می شوند٬بنابراین روش کار این است که تعداد کمی از خطاها را به صورت هم زمان تصحیح کنید و سپس فایل را دوباره تطبیق دهید تا ببینید آیا سایر مشکلات هم حل شده اند یا خیر.
بسیاری از ویراستارهای متن مانندBBEdit٬دارای قابلیت های درونی برای چک کردن قواعد دستوری می باشند.آنها می توانند به خوبی قبل از این که شما به تطبیق گرهای رسمی متوسل شوید٬ خطاها را پیدا کنند.
با استفاده ازDOCTYPEبه تطبیق گر بگویید که با استفاده از کدام مشخصه های رسمی کد HTML و XHTMLشما را بررسی کند.
تطبیق گرهای دیگری هم وجود داند. من فکر می کنم کهw3c بهترین آنها را ارائه می کند.
تست کردن صفحه
حتی اگر کد شما معتبر شناخته شود٬هنوز هم ممکن است صفحهٴ شما به آن روشی که می خواهید کار نکند ٬یا اینکه ممکن است در یک مرورگر به طور مناسب کار کند٬ اما در مرورگر دیگر کار نکند. اهمیت دارد که صفحه تان رادر هر تعداد مرورگر و روی هر پلات فرم ممکن است امتحان کنید.حداقل٬صفحه تان را روی نسخه های فعلی هر دو مرورگر Explorer و Netscape روی هر دو سیستم windows و Macintosh تست کنید.
برای تست کردن صفحات (X) HTML
کد (X) HTML وCSS را با استانداردها تطبیق دهید.هر تغییری که لازم است را اعمال کنید.
یک مرورگر را باز کنید و گزینه File>Open File را انتخاب کنید.
صفحهٴ وبی که می خواهید آن را امتحان کنید را روی یک دیسک سخت پیدا کرده و روی openکلیک کنید.صفحه در مرورگر ظاهر می شود.
تمام صفحه را بررسی کنید و اطمینان حاصل کنید که دقیقاً به همان روشی که شما می خواهید به نظر می رسد.برای مثال:
آیا قالب دهی همان طوری است که شمات می خواهید؟
آیا هر کدام از URLهای تان به سند مورد نظر اشاره می کند؟(شما می توانید با کلیک کردن روی URLها اگر فایل های هدف روی همان مکان های نسبی در کامپیوتر محلی ذخیره شده باشند٬آنها را امتحان کنید.)
آیا به فایل CSS شما به طور مناسب اشاره شده است؟
آیا تمام تصاویر شما ظاهر می شوند؟آیا آنها به طور مناسب در جای خود قرار گرفته و ردیف شده اند؟آیا شما نام وآدرس ایمیل تان را در صفحهٴ وب قرار داده اید به طوری که کاربران بتوانند با شما تماس بگیرند و در مورد صفحهٴ شما اظهار نظر کرده و پیشنهادهای شان را ارائه کنند؟(یا برای اجتناب از کشف آدرس ایمیل تان توسط sambotها٬یک فرم را در صفحه تان گنجانیده اید که مردم بتوانند با استفاده از آن اظهار نظرهای شان را برای شما بفرستند؟)
5.بدون اینکه صفحه را در مرورگر ببندید ٬سند (X) HTMLیا CSS مناسب را باز کرده و تغییرات لازم را در آن اعمال کنید.
6.تغییرات را ذخیره کنید.
7.به مرورگرها برگردید و دکمهٴ Refresh یا Reload را کلیک کنید تا تغییرات را ببندید.
8.مراحل 1 تا 7 را تکرار کنید تا از صفحهٴوب تان احساس رضایت کنید. اگر این کار مستلزم تلاش های متعدد بود٬ ناامید نشوید.
9.کد را مجددا ًبا استانداردها تطبیق دهید٬ تا اطمینان حاصل کنید که هیچ خطای جدیدی وارد کار نشده است.
10.فایل ها را به سرور آپلود کنید.
11.به مرورگر برگردید و URLصفحه تان را در نوار آدرس تایپ کرده و کلید Returnرا فشار دهید.صفحه در مرورگر ظاهر می شود.
12.در حالی که صفحهٴشما روی سرور قرار دارد٬دوباره آن را بررسی کنید تا اطمینان حاصل کنید که همه چیز درست است.
راهنمایی ها
دوباره٬اگر می توانید سند های HTML(X) را در مرورگرهای متعدد روی پلات فرم های مختلف تست کنید.شما هرگز نمی دانید که مراجعه کنندگان شما از کدام مرورگر(یا کامپیوتر)استفاده خواهند کرد.
بقیهٴ این توضیحات با مشکلات متداولی که ممکن است در یک کد معتبر بروز کند و همچنین راه حل های آنها سروکار دارند.
گاهی ایراد کار از شما نیست٬خصوصا ً در رابطه با سبک ها.اطمینان حاصل کنید که یک مرورگر از ویژگی که شما با آن مشکل دارید٬پشتیبانی می کند؛قبل از اینکه بخواهید آن مشکل را در کد خودتان جستجو کنید.
چه زمانی مرورگرکد را نمایش می دهد
اگر چه ممکن است وقتی که فایل تان را در یک مرور گر مشاهده می کنید٬از کدHTML(X)احساس غرور کنید٬اما می خواهید کدی که تبدیل به یک چنین صفحهٴ وب زیبایی شده در معرض دید همه قرار نگیرد.
چه زمانی مرورگر به جای صفحه کد را نمایش می دهد:
آیا شما فایل را در قالب متن (که گاهی سند متنی یا متن ساده نامیده می شود) ذخیره کرده اید؟ گاهی ٬اگر شما قبلا ً فایل را مثلا ً به صورت یک سند word ذخیره کرده باشید٬ذخیره کردن آن به صورت فقط متن کافی نیست. شما باید یک سند جدید را از نو ایجاد کنید٬کد را به سند جدید copy و paste کنید و سپس آن را به صورت فقط متن ذخیره کنید.
آیا شما فایل را با یک دنباله نام فایل htm.یا html. ذخیره کرده اید؟باید این کار را بکنید.
آیا در ابتدای صفحه DOCTYPE مناسب قرار داده اید؟
آیا از فرمان save as web page یا save as HTML در word (یا هر واژه پرداز دیگری)برای ذخیره کردن فایل های تان در قالب صفحهٴ وب استفاده کرده اید؟ آن فرمان به هر شکلی که ظاهر شود٬فقط سبب می شود متن معمولی به آنچه نرم افزار word به عنوان یک صفحهٴ وب در نظر می گیرد تبدیل شود.اگر کد خودتان را می نویسید٬این فرمان سبب نوشته شدن کد دیگری برای کد شما می شود. در عوض٬فرمان save as را انتخاب کنید و سپس فایل را با دنبالهٴ htm. یا html. در قالب Text Documentذخیره کنید.
<!DOCTYPE html PUBLIC"-/ / W3C/ /DTD XHTML
1.0 Transitional/ / EN" "[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] / [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] / [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">
<head>
<title>Mary Anna,the lguana</title>
<link rel="stylesheel"type="text /css"
href="teshterpage.css"/></head>
<body>
<img src="iguana.ipg"alt="lguana"width="220"
hiegh="165" />
<h1>Mary Anna,the laguana</h1>
<p>There once was an iguana
whose name was <em>Mary Anna</em>
her skin was so dry
that she'd have to cry
Here's some cream:would you please put it
Onna?</p>
</body></html>
شکل14.مشکل در پیوند به فایل cssاست٬نام فایلtestpage.css می باشد و در این جا من به یک فایل با نام testerpage.cssپیوند ایجاد می کنم. تعجبی ندارد که مرورگر نمی تواند فایل cssرا پیدا کند و بنابراین صفحه را به اشتباه نمایش می دهد.
در windowsاضافه کردن دنبالهٴنام فایل txt.به فایل هایی به شکل page.html ذخیره می کنید سبب ایجاد شدن چیزی شبیه به page.html.txt می شود.با دیدن دنبالهٴ نام فایل در پوشهٴ مربوطه از بروز این مشکل جلوگیری کنید٬نام فایل را د کادر محاوره ای save as بین علامت های نقل قول قرار دهید.
چه زمانی تصاویر ظاهر نمی شوند
علامت های xکوچک به رنگ قرمز٬نمادهای شکسته شده٬متن جایگزین یا اصلا ً هیچ چیز.اگر انتظار داشته اید به جای همهٴاینها یک تصویر نمایش داده شود٬وضعیت تان نا امید کننده است.
چه زمانی تصاویر ظاهر نمی شوند:
اول چک کنید که نام فایل مربوط به تصویر روی سرور با نامی که شما در تگ img به آن اشاره کرده اید دقیقاً منطبق باشند٬از جمله کوچک و بزرگ بودن حروف و دنبالهٴ نام فایل(شکل 15).
در نام فایل ها از فاصله های خالی استفاده نکنید. اگر چه ممکن است آنها به طور محلی (روی کامپیوترشخصی تان)٬کارکنند٬سرورها با آنها مشکل پیدا می کنند.
سپس ٬اطمینان حاصل کنید که مکان تصویر به درستی در URL تگ imgمشخص شده است. یک آزمایش آسان این است که تصویر را در همان دایرکتوری که صفحهٴHTML(X) در آن قرار دارد٬قرار دهید.این به آن معنی است که شما فقط باید مراقب نام و دنبالهٴ نام فایل در تگ imgباشید٬نه اطلاعات مربوط به مسیر .اگر تصویر نمایش داده شود٬می توانید کاملا ًمطمئن شوید که مشکل به مسیر ارتباط دارد.
اگر وقتی صفحه تان را روی کامپیوتر خودتان مشاهده می کنید٬تصویر ظاهر شد٬اما وقتی صفحه را به سرور آپلود می کنید تصویر ظاهر نشود٬اطمینان حاصل کنید که تصویر را به سرور آپلود کرده اید٬و مکان آن روی سرور در URL تگ imgمنعکس شده است.
تصویر را درقالب GIF یا JPG ذخیره کرده اید؟ من کاربرانwindows ای را دیدم که تصاویر را در قالب BMPایجاد می کنند(که Internet Explor برای windows هیچ مشکلی با آنها ندارد)٬ ولی نمی فهمند که چرا یک مرورگر دیگر(روی windows یا Mac) به جای تصویر٬یک نماد شکسته را نمایش می دهد.
<body>
<img src="lguana.ipg"alt="lguana"width="220"
height="165"/>
<h1>Mary Anna, the lguana</h1>
<p>There once was an iguana
شکل15.نام فایل برای تصویرiguana.jpgاست اما در این جا به اشتباه به صورت Iguana.jpبا یک I بزرگ به آن اشاره شده است.
اختلاف ها از یک مرورگر به مرورگر دیگر
این یکی احتمالا ًتقصیر شما نیست.متاٴسفانه٬هیچ مرورگری به صورت صد در صد از مشخصه های استاندارد پشتیبانی نمی کند.در حالی که بیشتر آنها تقریباً از تمام HTML(X) پشتیبانی می کنند٬پشتیبانی آنها از CSS متغیر می باشد.فعلاًfirefox و opera بهترین پشتیبانی را ارائه می کنند و به دنبال آنها IE 6 و IE 7قرار دارند.
چه زمانی صفحهٴشما از یک مرورگر به مرورگر دیگر٬متفاوت دیده می شود:
صفحه تان را در هر تعداد مرورگر و پلات فرم که می توانید تست کنید.لوگ های سرور را بخوانید تا ببینید مراجعه کنندگان از کدام مرورگرها استفاده می کنند و از کدام مرورگرها استفاده نمی کنند٬بدین ترتیب شما می توانید در مورد اینکه روی کدام مرورگر تمرکز کنید٬اطلاعاتی را به دست آورید.
در مورد اینکه کدام ویژگی های CSSتوسط مرورگرهای فعلی پشتیبانی می شوند و کدام یک از آنها از همه بیشتر مشکل دارند٬مراقب باشید.تعدادی منابع خوب وجود دارند. برای مثال٬شما می توانید به آدرس زیر مراجعه کنید(css.discuss Wiki([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] .
صفحه تان را به صورتی طراحی کنید که اگر بعضی از چیزهایی که شما مورد استفاده قرار می دهید پشتیبانی نمی شوند٬صفحهٴشما هنوز به درستی کار کند. این روش <<کاهش تدریجی >> نامیده می شود.
صفحه تان را در اختیار مخاطب مورد نظرتان قرار دهید. ممکن است انتظار برود که طراحان وب آخرین برنامه های American Iguana Club را داشته باشند٬اما کسانی که صفحات وب را می بینند چنین نیستند.
راهنمایی ها
صفحهٴweb standards project در آدرس [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) را برای اطلاعات بیشتر در مورد آنچه شما می توانید انجام دهید تا تبعیت استانداردها توسط سازندگان عمدهٴمرورگر وب (و همچنین هر تازه وارد به این بازی) ارتقإ یابد٬مشاهده کنید.
#choices label {position:absolute;padding-
top:.2em;left:20px}
select{margin-left:9em;margin-bottom:0}
#size{font-size:90%}
#size input{margin-left:9em}
#size input+input{margin-left:1em}
#size br+input{margin-left:9em}
#extras{font-size:90%}
#extras input{margin-left:9em}
#extras input+input{margin-left:1em}
#extras br+input{margin-left:9em}
شکل 16.این کد css از مثال اصلی مربوط به ((فرم ها)) می باشد.
آیا هنوز هم مشکلی وجود دارد؟
اگر به این جا رسیده اید ٬احتمالا ًمستاصل شده اید. فکر نکنید که وقتی به شما پیشنهاد کردم حین کار به خودتان استراحت بدهید٬قصد نصیحت داشتم. گاهی بهترین کاری که شما می توانید در رابطه با یک مشکل انجام دهید این است که برای دقایقی آن مشکل را به به حال خود بگذارید.وقتی به سراغ آن برگشتید٬ممکن است پاسخ مقابل چشمان شما قرار داشته باشد.اگر چنین نیست٬اجازه بدهید پیشنهاد های زیر را ارائه کنم.
دوباره به دنبال خطاهای تایپی بگردید.مجددا ًکدتان را با استانداردها تطبیق دهید.
ابتدا بخش های ساده را چک کنید.بسیاری از اوقات٬من ساعت های زیادی را صرف کلنجار رفتن با یک تگ جدید جالب توجه که به درستی کار نمی کرد٬کرده ام٬تا اینکه در آخر بفهمم مشکل کار یک خطای تایپی در تگی بوده که قبلاً هزاران با آن را به کار برده ام.آشنایی بیش از حد منشإخیلی از اشتباهات است٬آن بخش هایی که فکر می کنید به خوبی می شناسید را قبل از بخش های جدیدی که نگران آنها هستید چک کنید.
مشکلات را ساده کنید.به آخرین نسخه از صفحه تان که به خوبی کار می کند برگردید(که گاهی مواقع ممکن است یک صفحه خالی باشد).سپس صفحه را پس از اضافه کردن هر عنصر جدید تست کنید.
پست های پشت سر هم ادغام شد.
Reza_S
خوب, شما یک صفحه ی وب جدید را نوشته اید و وقتی آن را در مرورگرتان نمایش میدهید می فهمید که همه چیز آنطور که شما می خواهید به نظر نمی رسد.یا اینکه صفحهاصلا ًبه نمایش در نمی آید.یا اینکه ممکن است صفحه در مرورگر پیش فرض شما عالی بهنظر برسد٬ اما وقتی از کلاینت سؤال می کنید٬ او می گوید که صفحه روی کامپیوتر اوکمی عجیب و غریب به نظر می رسد.
بین HTML٬ XHTML٬ CSS و تعداد فراوان مرورگرها و پلات فرم هایی که روی آنها میتوانید صفحات وب را مشاهده کنید٬به آسانی مشکلاتی بروز می کند.در این جا در موردبعضی خطاهای متداول به شما هشدار خواهد داد وبه شما کمک خواهد کرد تا از دست آنخطاها و اشکالات٬خلاص شوید.
بعضی از تکنیک های اشکال زدایی ممکن است ابتدایی به نظر برسند. نکته این است کهبیشتر مشکلات در رابطه با صفحات وب هم کاملاً ابتدایی هستند.قبل از اینکه به دنبالیک مشکل بزرگ بگردید٬ اطمینان حاصل کنید که هیچ مشکل کوچکتری وجود ندارد.من چگونگیانجام این کار را در بخش اول این توضیحات به شما نشان خواهم داد.
همین که کد شما صحیح از آب در آمد٬باید سایت تان را ه طور عمیق روی یک یا چندمرورگر و در یک یا چند پلات فرم تست کنید٬تا ببینید آیا هر صفحه آنطور که شما میخواهید کار می کند٬یا خیر.
چند تکنیک اشکال زدایی
در اینجا تکنیک های آزموده شده و درست من برای اشکال زدایی یک صفحهٴ وب ارائه میشوند.
ابتدا مطالب ساده را چک کنید.
تصور کنید که یک دانشمند هستید.تیز بین و پیرو روش ها باشید.
قدم به قدم و به تدریج کار کنید.تغییرات کوچک را اعمال کنبد و پس از هر تغییرکارتان را تست کنید.به این روش شما خواهید توانست منبع یک مشکل را در صورت بروزپیدا کنید.به همین ترتیب٬وقتی مشغول اشکال زدایی هستید٬با چیزهایی که میدانید درستکار می کنند٬شروع کنید.فقط پس از آن باید بخش های مشکل تر را قسمت به قسمت اضافهکنید٬پس از هر اضافه کردن٬صفحه را در یک مرورگر تست کنید تا زمانی که منبع مشکل راپیدا نمایید.
بر عکس٬از فرایند حذف کردن استفاده کنید تا بفهمید کدام قسمت ها از کد شما سبببروز مشکل می شوند.برای مثال٬می توانید نیمی از کد را با تبدیل کردن آن به توضیحاتکنار بگذارید تا ببینید آیا مشکل در نیمهٴ دیگر است یا خیر.سپس نیم دیگری از بخشباقیمانده را به توضیحات تبدیل کنید و به همین ترتیب ادامه دهید٬تا زمانی که مشکلرا پیدا کنید.
در مورد اشتباهات انجام گرفته در تایپ کردن کد واقعا ً دقت به خرج دهید.بسیاریاز پیچیده ترین مشکلاتی که من با آنها روبه رو بوده ام ٬در نهایت ناشی از یک اشتباهساده در نوشتن عبارت ها بوده است.
در css٬اگر مطمئن نیستید که مشکل در رابطه با ویژگی یا انتخاب کننده آن است ٬یکاعلان خیلی ساده را به انتخاب کننده تان اضافه کنید٬مانند color:red.اگر در عنصرمرود نظر به رنگ قرمز در آمد ٬مشکل در رابطه با ویژگی شما است٬اگر چنین نشد مشکل دررابطه با انتخاب کننده است.
یک وقفه به کارتان بدهید.زمان خطا نیست.گاهی شما میتوانید در مدت زمان 15 دقیقهپس از یک ساعت استراخت فکری به نتایجی برسید که هرگز در یک ساعت کار بدون استراحتبه آن نتایج نمی رسیدید.
اول نکات ساده را چک کنید
در حالی که تفاوت هایی که شما بین مرورگرها مشاهده می کنید٬ ممکن است ناشی ازبعضی باگ های مبهم مربوط به خود مرورگر یا بعضی تکنیک های جدیدی که شما استفاده میکنید باشد٬ 90% اوقات منشإ مشکل یک چیز ساده است. به سادگی می توان به مشکلی دررابطه با یک تکنیک جدید ایراد گرفت و ساعت ها وقت را صرف اشکال زدایی آن کرد٬تا درآخر بفهمید که شما یک فایل را تغییر داده اید٬اما یک فایل دیگر را آپلود کرده ومشاهده می کنید.
نکات ساده ٴمتداول
اطمینان حاصل کنید که در عمل همان فایلی که می خواهید آن را تست کنید را آپلودکرده اید.
اطمینان حاصل کنید که شما فایل را در همان مکانی که فکر میکنید درست است آپلودکرده اید.
اطمینان حاصل کنید که URL که تایپ کرده اید مربوط به همان فایلی است که میخواهید آن را تست کنید.
اطمینان حاصل کنید که فایل را با در نظر گرفتن آخرین تغییرات اعمال شده در آن٬قبل از آپلود کردن ذخیره کرده اید.
اطمینان حاصل کنید که تمام فایل های کمکی ٬از جمله فایل های css٬تصاویر٬موسیقی٬ ویدیوها و غیره را آپلود کرده اید.
اطمینان حاصل کنید که حروف بزرگ و کوچک در URL شما دقیقا ًبا حروف بزرگ و کوچکدر نام فایل های تان مطابقت دارد و اطمینان حاصل کنید که از فاصله های خالی یا سایرعلائم نقطه گذاری در نام های فایل تان استفاده نکرده اید.
اطمینان حاصل کنید که مشکل ناشی از نقص موجود در مرورگر نمی باشد.ساده ترین روشبرای انجام این کار این است که صفحه را در مرورگر دیگری تست کنید.
در سه بخش بعدی٬ایده هایی را به شما در مورد چگونگی چک کردن نکات آسان و پیش پاافتاده در کد HTML٬ XHTML٬CSS خواهم داد.
چک کردن نکات ساده :HTML
در این جا بعضی از مشکلات متداول در رابطه با کد HTML ارائه می شود.بسیاری ازآنها در مورد XHTML هم به کار می روند.
برای چک نکات ساده در رابطه با کد HTML:
اطمینان حاصل کنید که املای همه چیز را درست تایپ کرده اید. من نمیتوانم به شمابگویم که چند بار جای src تایپ کرده ام scr (که به هر صورت کوتاه نوشت کلمهٴ source می باشد).
در رابطه با عناصری که درون یکدیگر قرار می گیرند مراقب باشید. اگرابتدا<p> را باز می کنید و سپس از <b> استفاده می کنید٬اطمینان حاصلکنید که ابتدا تگ بستهٴ</b > را قرار داده و سپس تگ نهایی <</p را تایپمی کنید.
علامت / در تگ های خالی XHTML بخشی از مشخصهٴ رسمی HTML محسوب نمی شود.اگر میخواهید فایل به عنوان HTMLتطبیق داده شود٬ باید همهٴ آنها را حذف کنید.( بهتر از آناین است که به سراغ XHTML رفت).
اطمینان حاصل کنید که DOCTYPE با HTML که در عمل مورد استفاده قرار می دهیدمنطبق است. برای مثال ٬ اگر می خواهید از تگ های کنار گذاشته شده استفاده کنید ٬ ازسلیقهٴ strict در HTMLاستفاده نکنید بلکه از سلیقهٴ transitional در HTML استفادهکنید.
از تگ های غیر استاندارد اجتناب کنید.پشتیبانی از آنها در مرورگرهای مختلف اصلاً قابل اطمینان نیست.
مراقب باشید که بیشتر اعلان های معتبر DOCTYPE سبب می شود تا IE و firefoxبه مداستاندارد برده شوند. اگر می خواهید به روش های غیر استاندارد قدیمی تکیه کنید٬ممکن است این سبب ناامید شدن شما شود.
اگر کاراکترهای اکسنت دار یا نمادهای ویژه به طور مناسب نمایش داده نشوند٬بهمباحث قبلی ((نمادها و کاراکترهای غیر انگلیسی )) مراجعه کنید.
img scr="image.gif"alt="Woody the cat"/>>
در کدشماره 2 آیا می توانید ببینید مشکل در کجا قرار دارد؟ من srcرا اشتباه نوشتم. نمیتوانم به شما بگویم چند بار فقط برای پیدا کردن یک اشتباه تایپی ناجور مثل اینزمین و زمان را زیرورو کردم.
<img src="image.gif"alt="Woodythe cat">
کد شماره 3 نسخهٴ تصحیح شده نشان می دهد که شاخص srcبا املای درست نوشته شده٬ بهاضافه این که من / نهایی را فقط درXHTML و نه HTMLبه کار برده شده را حذف کردهام.
چک کردن نکات آسان XHTML:
اگر می خواهید به XHTML جهش کنید٬ به آسانی ممکن است تعدادی از قواعد دستوری آنرا از قلم بیندازید. اطمینان حاصل کنید که اول آنها را چک کرده اید.
برای چک کردن نکات ساده را در رابطه با XHTML:
اطمینان حاصل کنید که تمام مقادیر شاخص ها بین علامت های نقل قول مستقیم و نهانحنا دار قرار گرفته اند. اگر خود مقدار حاوی علامت های نقل قول است٬ از کدهایکاراکتر استفاده کنید.همچنین توجه داشته باشید که یک مقدار می تواند حاوی علامت هاینقل قول تکی باشد .اگر خود مقدار بین علامت های نقل قول جفتی قرار بگیرد یا حاویعلامت های نقل قول جفتی باشد.اگر خود مقدار بین علامت های نقل قول تکی قراربگیرد(شکل های 4 و5)
اطمینان حاصل کنید که تمام عناصر دارای تگ های باز و بسته یا یک تگ ترکیبی (با/نهایی)می باشند.همیشه یک فاصلهٴ خالی را قبل از / قرار دهید تا سازگاری بامرورگرهای قدیمی تر حاصل شود.
تگ های باز و بسته برای عناصری که معمولا ًحاوی مطالب هستند را با هم ترکیبنکنید. برای مثال٬ در حالی که </ p> از نظر تکنیکی در XHTMLصحیح میباشد٬مرورگرها همیشه نمی دانند که با آن چه کنند.به همین ترتیب٬برای عناصر خالی ازتگ های باز و بستهٴ مجزا استفاده نکنید مانند</img> <"cat"= woody.gif " alt"=src img >.باز هم می گوییم ٬ در حالی که این کاملا ًدر XHTMLمعتبر است٬مرورگرها سر درگم خواهند شد(کد شماره 6و7).
در رابطه با بزرگی و کوچکی حروف دقت کنید.تمام عنصرها٬شاخص ها و مقادیر از پیشتعریف شده باید با حروف کوچک نوشته شوند.
وقتی کدهای هگزا دسی مال برای رنگ ها را مشخص می کنید علامت # را فراموش نکنید.
اگر نمادها یا کاراکترهای اکسنت دار به طور مناسب نمایش داده نمی شوند به ((نمادها و کاراکترهای غیر انگلیسی )) مراجعه کنید.
<img src="jungle.ipg"alt="LIumi's iungle"/>
کد شماره 4.اگر مقدار یک شاخص حاوی علامت های نقل قول تکی باشد٬شما می توانیدآن را مانند همیشه بین علامت های نقل قول جفتی قرار دهید.
<img src="cookie.ipg"alt=cookie's saying
&qout;Enough!""/>
<img src='tough-llumi.ipg"alt='Llumi replies,"this
is_my_iungle."/>
کد شماره 5.اگر مقدار یک شاخص حاوی علامت های نقل قول جفتی باشد٬ یا از کدهای کاراکتر( خط بالا) استفاده کنید یا مقدار شاخص را بین علامت های نقل قول تکی قرار دهید( خطپایین ).
<p />
<img src="iungle.ipg"alt="Llumi's iungle">
</img>
کد شماره 6. در این جا دو مثال از کد XHTMLمعتبر آمده که بیشتر مرورگرهارا سر درگم خواهند کرد.
<p></p>
<img src="jungle.ipg"alt="Lluumi's iungle"/ >
کد شماره 7.در عوض٬ تگ های باز و بستهٴ عناصری که معمولا ً خالی نیستند را با همترکیب نکنید
مانندp)و از تگ های باز و بستهٴ مجزا برای عناصری که معمولاً خالی هستند ( مانند img)استفاد نکنید.)
چک کردن نکات ساده:css
در حالی که قواعد cssکاملاً سر راست هستند٬تله های متداولی وجود دارند که ممکناست در آنها گیر بیفتید٬خصوصا ً اگر به نوشتن کد HTMLیا XHTML عادت کرده باشید.
برای چک کردن نکات آسان در رابطه با CSS:
اطمینان حاصل کنید که ویژگی ها را از مقادیرشان به وسیلهٴ یک علامت کولون (:) جدا کرده اید٬ نه توسط یک علامت مساوی همان طور که در HTML (X)انجام می دهید(شکلهای 8 و9).
اطمینان حاصل کنید که هر زوج ویژگی- مقدار را با یک علامت سمی کالون (؛) کاملکرده اید.اطمینان حاصل کنید که هیچ علامت سمی کالون اضافه وجود ندارد(شکل های 10و11).
فاصله های خالی را بین اعداد و واحدهای شان اضافه نکنید(شکل های 12و13).
فراموش نکنید که آکولادها را ببندید.
مقادیر را بین نقل قول قرار ندهید٬همان طور که در HTML(X) انجام می دادید.تنهامقادیری که درCSS بین علامت های نقل قول قرار می گیرند نام های چند کلمه ای قلم هامی باشند.
اطمینان حاصل کنید که از یک مقدار قابل قبول استفاده می کنید.چیزی شبیهبه:nonefont-style کار نمی کند چون به جای مقدار "none"باید مقدار normal قرارگیرد.شما می توانید فهرست کاملی از ویژگی ها و مقدارهای cssرا در ضمیمهٴب٬ ((ویژگیها و مقدارهای css))مشاهده کنید.
تگ بستهٴ> style/ > را در رابطه با صفحات سبک داخلی فراموش نکنید.اطمینانحاصل کنید که سند HTML (X) را به فایل CSSمناسب پیوند داده اید و URLمشخص شده بهفایل مورد نظر اشاره می کند.URLها نسبت به فایل CSSدر نظر گرفته می شوند٬نهفایلHTML (X).
مراقب فضاهای خالی و علائم بین انتخاب کننده ها باشید.
اطمینان حاصل کنید که مرورگر ازآنچه شما انجام می دهید پشتیبانی می کند. پشتیبانی مرورگرها برای CSSمتغیر است.
p{font-size=24px}
کد شماره 8.ترک این عادت که بین ویژگی ها و مقدارها علامت مساوی قراربدهید مشکل است .اما باید این کار را بکنید.
p{font-size:24px}
کد شماره 9.همیشه از یک کولون بین ویژگی و مقدار استفاده کنید. توجه کنیدکه اهمیتی ندارد اگر فضاهای اضافی را قبل و بعد از کولون اضافه کنید.
p{font-size:24px font-weight:blod;;font-style:italic}
کد شماره 10. شما باید یک و فقط یک سمی کالون را بین هر زوج ویژگی_ مقدارقرار دهید. در این جا یک سمی کاالون کم گذاشته شده و یک سمی کالون کم گذاشته شده ویک سمی کالون اضافه است.
p{
Font-size:24px ;
Font-weight:blod;
Font-style:italic;
}
کد شماره 11.یک روش برای اطمینان حاصل کردن از اینکه هر زوج ویژگی- مقدار توسط یک سمیکالون از بعدی جدا شده این است که هر کدام از آنها را روی یک خط مجزا قرار دهید.بهاین ترتیب مشاهده اینکه آیا سنی کالون ها در جای خود قرار گرفته اند آسان تر میشود.
p{font-size:2 em}
کد شماره 12.هیچ وقت بین عدد و واحد آن فاصلهٴ خالی قرار ندهید.
p{font-style: 2em}
کد شماره 13.این کد کار میکند.توجه کنید که فاصلهٴ خالی بین کولون ومقدار اختیاری می باشد.
تطبیق دادن کد با استانداردها
یک ابزار خوب برای پیدا کردن خطاها در یک صفحه اجرا کردن آن از طریق یک تطبیق گرمی باشد. یک تطبیق گرHTML (X) به DOCTYPE نگاه می کند تا ببیند شما از کدام نسخهٴ HTMLیا XHTMLاستفاده می کنید٬سپس کد را با مشخصه های رسمی مربوط به آن نسخه مقایسهمی کند و سپس هر ناسازگاری که یافته شود را نمایش می دهد. یک تطبیق گر CSSبه همینروش کار می کند.
برای تطبیق دادن کد تان با استانداردها:
ابتدا کدHTML(X)را با تطبیق گر w3c درآدرس /org.w3.validator//:http چک کنید.
2.همین که کد HTML(X) معتبر شناخته شد٬می توانیدبا استفاده از تطبیق گر موجود درآدرس [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] اطمینان حاصل کنید که کد cssشما هم خالیاز خطا می باشد.
راهنمایی ها
تطبیق گرها اغلب در به دست آوردن یک تصویر کلی از صفحهٴشما به مشکل بر می خورند.در حالی که آنها در پیدا کردن تگ های بسته جا افتاده٬یا علامت های نقل قول جا افتاده٬خیلی خوب عمل می کنند٬اما همیشه در مورد اینکه در بقیهٴفایل چه می گذرد خیلی باهوش نیستند. برای مثال٬یک تگ بستهٴجا افتاده ممکن است سبب نمایش داده شدن تعداد فراوانی پیغام های خطا در سرتاسرسند شما شود.اگر آن تگ بسته را در جای خود قرار دهید٬ تمام آن خطاهای پشت سرهم ناپدید می شوند٬بنابراین روش کار این است که تعداد کمی از خطاها را به صورت هم زمان تصحیح کنید و سپس فایل را دوباره تطبیق دهید تا ببینید آیا سایر مشکلات هم حل شده اند یا خیر.
بسیاری از ویراستارهای متن مانندBBEdit٬دارای قابلیت های درونی برای چک کردن قواعد دستوری می باشند.آنها می توانند به خوبی قبل از این که شما به تطبیق گرهای رسمی متوسل شوید٬ خطاها را پیدا کنند.
با استفاده ازDOCTYPEبه تطبیق گر بگویید که با استفاده از کدام مشخصه های رسمی کد HTML و XHTMLشما را بررسی کند.
تطبیق گرهای دیگری هم وجود داند. من فکر می کنم کهw3c بهترین آنها را ارائه می کند.
تست کردن صفحه
حتی اگر کد شما معتبر شناخته شود٬هنوز هم ممکن است صفحهٴ شما به آن روشی که می خواهید کار نکند ٬یا اینکه ممکن است در یک مرورگر به طور مناسب کار کند٬ اما در مرورگر دیگر کار نکند. اهمیت دارد که صفحه تان رادر هر تعداد مرورگر و روی هر پلات فرم ممکن است امتحان کنید.حداقل٬صفحه تان را روی نسخه های فعلی هر دو مرورگر Explorer و Netscape روی هر دو سیستم windows و Macintosh تست کنید.
برای تست کردن صفحات (X) HTML
کد (X) HTML وCSS را با استانداردها تطبیق دهید.هر تغییری که لازم است را اعمال کنید.
یک مرورگر را باز کنید و گزینه File>Open File را انتخاب کنید.
صفحهٴ وبی که می خواهید آن را امتحان کنید را روی یک دیسک سخت پیدا کرده و روی openکلیک کنید.صفحه در مرورگر ظاهر می شود.
تمام صفحه را بررسی کنید و اطمینان حاصل کنید که دقیقاً به همان روشی که شما می خواهید به نظر می رسد.برای مثال:
آیا قالب دهی همان طوری است که شمات می خواهید؟
آیا هر کدام از URLهای تان به سند مورد نظر اشاره می کند؟(شما می توانید با کلیک کردن روی URLها اگر فایل های هدف روی همان مکان های نسبی در کامپیوتر محلی ذخیره شده باشند٬آنها را امتحان کنید.)
آیا به فایل CSS شما به طور مناسب اشاره شده است؟
آیا تمام تصاویر شما ظاهر می شوند؟آیا آنها به طور مناسب در جای خود قرار گرفته و ردیف شده اند؟آیا شما نام وآدرس ایمیل تان را در صفحهٴ وب قرار داده اید به طوری که کاربران بتوانند با شما تماس بگیرند و در مورد صفحهٴ شما اظهار نظر کرده و پیشنهادهای شان را ارائه کنند؟(یا برای اجتناب از کشف آدرس ایمیل تان توسط sambotها٬یک فرم را در صفحه تان گنجانیده اید که مردم بتوانند با استفاده از آن اظهار نظرهای شان را برای شما بفرستند؟)
5.بدون اینکه صفحه را در مرورگر ببندید ٬سند (X) HTMLیا CSS مناسب را باز کرده و تغییرات لازم را در آن اعمال کنید.
6.تغییرات را ذخیره کنید.
7.به مرورگرها برگردید و دکمهٴ Refresh یا Reload را کلیک کنید تا تغییرات را ببندید.
8.مراحل 1 تا 7 را تکرار کنید تا از صفحهٴوب تان احساس رضایت کنید. اگر این کار مستلزم تلاش های متعدد بود٬ ناامید نشوید.
9.کد را مجددا ًبا استانداردها تطبیق دهید٬ تا اطمینان حاصل کنید که هیچ خطای جدیدی وارد کار نشده است.
10.فایل ها را به سرور آپلود کنید.
11.به مرورگر برگردید و URLصفحه تان را در نوار آدرس تایپ کرده و کلید Returnرا فشار دهید.صفحه در مرورگر ظاهر می شود.
12.در حالی که صفحهٴشما روی سرور قرار دارد٬دوباره آن را بررسی کنید تا اطمینان حاصل کنید که همه چیز درست است.
راهنمایی ها
دوباره٬اگر می توانید سند های HTML(X) را در مرورگرهای متعدد روی پلات فرم های مختلف تست کنید.شما هرگز نمی دانید که مراجعه کنندگان شما از کدام مرورگر(یا کامپیوتر)استفاده خواهند کرد.
بقیهٴ این توضیحات با مشکلات متداولی که ممکن است در یک کد معتبر بروز کند و همچنین راه حل های آنها سروکار دارند.
گاهی ایراد کار از شما نیست٬خصوصا ً در رابطه با سبک ها.اطمینان حاصل کنید که یک مرورگر از ویژگی که شما با آن مشکل دارید٬پشتیبانی می کند؛قبل از اینکه بخواهید آن مشکل را در کد خودتان جستجو کنید.
چه زمانی مرورگرکد را نمایش می دهد
اگر چه ممکن است وقتی که فایل تان را در یک مرور گر مشاهده می کنید٬از کدHTML(X)احساس غرور کنید٬اما می خواهید کدی که تبدیل به یک چنین صفحهٴ وب زیبایی شده در معرض دید همه قرار نگیرد.
چه زمانی مرورگر به جای صفحه کد را نمایش می دهد:
آیا شما فایل را در قالب متن (که گاهی سند متنی یا متن ساده نامیده می شود) ذخیره کرده اید؟ گاهی ٬اگر شما قبلا ً فایل را مثلا ً به صورت یک سند word ذخیره کرده باشید٬ذخیره کردن آن به صورت فقط متن کافی نیست. شما باید یک سند جدید را از نو ایجاد کنید٬کد را به سند جدید copy و paste کنید و سپس آن را به صورت فقط متن ذخیره کنید.
آیا شما فایل را با یک دنباله نام فایل htm.یا html. ذخیره کرده اید؟باید این کار را بکنید.
آیا در ابتدای صفحه DOCTYPE مناسب قرار داده اید؟
آیا از فرمان save as web page یا save as HTML در word (یا هر واژه پرداز دیگری)برای ذخیره کردن فایل های تان در قالب صفحهٴ وب استفاده کرده اید؟ آن فرمان به هر شکلی که ظاهر شود٬فقط سبب می شود متن معمولی به آنچه نرم افزار word به عنوان یک صفحهٴ وب در نظر می گیرد تبدیل شود.اگر کد خودتان را می نویسید٬این فرمان سبب نوشته شدن کد دیگری برای کد شما می شود. در عوض٬فرمان save as را انتخاب کنید و سپس فایل را با دنبالهٴ htm. یا html. در قالب Text Documentذخیره کنید.
<!DOCTYPE html PUBLIC"-/ / W3C/ /DTD XHTML
1.0 Transitional/ / EN" "[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] / [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] / [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">
<head>
<title>Mary Anna,the lguana</title>
<link rel="stylesheel"type="text /css"
href="teshterpage.css"/></head>
<body>
<img src="iguana.ipg"alt="lguana"width="220"
hiegh="165" />
<h1>Mary Anna,the laguana</h1>
<p>There once was an iguana
whose name was <em>Mary Anna</em>
her skin was so dry
that she'd have to cry
Here's some cream:would you please put it
Onna?</p>
</body></html>
شکل14.مشکل در پیوند به فایل cssاست٬نام فایلtestpage.css می باشد و در این جا من به یک فایل با نام testerpage.cssپیوند ایجاد می کنم. تعجبی ندارد که مرورگر نمی تواند فایل cssرا پیدا کند و بنابراین صفحه را به اشتباه نمایش می دهد.
در windowsاضافه کردن دنبالهٴنام فایل txt.به فایل هایی به شکل page.html ذخیره می کنید سبب ایجاد شدن چیزی شبیه به page.html.txt می شود.با دیدن دنبالهٴ نام فایل در پوشهٴ مربوطه از بروز این مشکل جلوگیری کنید٬نام فایل را د کادر محاوره ای save as بین علامت های نقل قول قرار دهید.
چه زمانی تصاویر ظاهر نمی شوند
علامت های xکوچک به رنگ قرمز٬نمادهای شکسته شده٬متن جایگزین یا اصلا ً هیچ چیز.اگر انتظار داشته اید به جای همهٴاینها یک تصویر نمایش داده شود٬وضعیت تان نا امید کننده است.
چه زمانی تصاویر ظاهر نمی شوند:
اول چک کنید که نام فایل مربوط به تصویر روی سرور با نامی که شما در تگ img به آن اشاره کرده اید دقیقاً منطبق باشند٬از جمله کوچک و بزرگ بودن حروف و دنبالهٴ نام فایل(شکل 15).
در نام فایل ها از فاصله های خالی استفاده نکنید. اگر چه ممکن است آنها به طور محلی (روی کامپیوترشخصی تان)٬کارکنند٬سرورها با آنها مشکل پیدا می کنند.
سپس ٬اطمینان حاصل کنید که مکان تصویر به درستی در URL تگ imgمشخص شده است. یک آزمایش آسان این است که تصویر را در همان دایرکتوری که صفحهٴHTML(X) در آن قرار دارد٬قرار دهید.این به آن معنی است که شما فقط باید مراقب نام و دنبالهٴ نام فایل در تگ imgباشید٬نه اطلاعات مربوط به مسیر .اگر تصویر نمایش داده شود٬می توانید کاملا ًمطمئن شوید که مشکل به مسیر ارتباط دارد.
اگر وقتی صفحه تان را روی کامپیوتر خودتان مشاهده می کنید٬تصویر ظاهر شد٬اما وقتی صفحه را به سرور آپلود می کنید تصویر ظاهر نشود٬اطمینان حاصل کنید که تصویر را به سرور آپلود کرده اید٬و مکان آن روی سرور در URL تگ imgمنعکس شده است.
تصویر را درقالب GIF یا JPG ذخیره کرده اید؟ من کاربرانwindows ای را دیدم که تصاویر را در قالب BMPایجاد می کنند(که Internet Explor برای windows هیچ مشکلی با آنها ندارد)٬ ولی نمی فهمند که چرا یک مرورگر دیگر(روی windows یا Mac) به جای تصویر٬یک نماد شکسته را نمایش می دهد.
<body>
<img src="lguana.ipg"alt="lguana"width="220"
height="165"/>
<h1>Mary Anna, the lguana</h1>
<p>There once was an iguana
شکل15.نام فایل برای تصویرiguana.jpgاست اما در این جا به اشتباه به صورت Iguana.jpبا یک I بزرگ به آن اشاره شده است.
اختلاف ها از یک مرورگر به مرورگر دیگر
این یکی احتمالا ًتقصیر شما نیست.متاٴسفانه٬هیچ مرورگری به صورت صد در صد از مشخصه های استاندارد پشتیبانی نمی کند.در حالی که بیشتر آنها تقریباً از تمام HTML(X) پشتیبانی می کنند٬پشتیبانی آنها از CSS متغیر می باشد.فعلاًfirefox و opera بهترین پشتیبانی را ارائه می کنند و به دنبال آنها IE 6 و IE 7قرار دارند.
چه زمانی صفحهٴشما از یک مرورگر به مرورگر دیگر٬متفاوت دیده می شود:
صفحه تان را در هر تعداد مرورگر و پلات فرم که می توانید تست کنید.لوگ های سرور را بخوانید تا ببینید مراجعه کنندگان از کدام مرورگرها استفاده می کنند و از کدام مرورگرها استفاده نمی کنند٬بدین ترتیب شما می توانید در مورد اینکه روی کدام مرورگر تمرکز کنید٬اطلاعاتی را به دست آورید.
در مورد اینکه کدام ویژگی های CSSتوسط مرورگرهای فعلی پشتیبانی می شوند و کدام یک از آنها از همه بیشتر مشکل دارند٬مراقب باشید.تعدادی منابع خوب وجود دارند. برای مثال٬شما می توانید به آدرس زیر مراجعه کنید(css.discuss Wiki([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] .
صفحه تان را به صورتی طراحی کنید که اگر بعضی از چیزهایی که شما مورد استفاده قرار می دهید پشتیبانی نمی شوند٬صفحهٴشما هنوز به درستی کار کند. این روش <<کاهش تدریجی >> نامیده می شود.
صفحه تان را در اختیار مخاطب مورد نظرتان قرار دهید. ممکن است انتظار برود که طراحان وب آخرین برنامه های American Iguana Club را داشته باشند٬اما کسانی که صفحات وب را می بینند چنین نیستند.
راهنمایی ها
صفحهٴweb standards project در آدرس [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) را برای اطلاعات بیشتر در مورد آنچه شما می توانید انجام دهید تا تبعیت استانداردها توسط سازندگان عمدهٴمرورگر وب (و همچنین هر تازه وارد به این بازی) ارتقإ یابد٬مشاهده کنید.
#choices label {position:absolute;padding-
top:.2em;left:20px}
select{margin-left:9em;margin-bottom:0}
#size{font-size:90%}
#size input{margin-left:9em}
#size input+input{margin-left:1em}
#size br+input{margin-left:9em}
#extras{font-size:90%}
#extras input{margin-left:9em}
#extras input+input{margin-left:1em}
#extras br+input{margin-left:9em}
شکل 16.این کد css از مثال اصلی مربوط به ((فرم ها)) می باشد.
آیا هنوز هم مشکلی وجود دارد؟
اگر به این جا رسیده اید ٬احتمالا ًمستاصل شده اید. فکر نکنید که وقتی به شما پیشنهاد کردم حین کار به خودتان استراحت بدهید٬قصد نصیحت داشتم. گاهی بهترین کاری که شما می توانید در رابطه با یک مشکل انجام دهید این است که برای دقایقی آن مشکل را به به حال خود بگذارید.وقتی به سراغ آن برگشتید٬ممکن است پاسخ مقابل چشمان شما قرار داشته باشد.اگر چنین نیست٬اجازه بدهید پیشنهاد های زیر را ارائه کنم.
دوباره به دنبال خطاهای تایپی بگردید.مجددا ًکدتان را با استانداردها تطبیق دهید.
ابتدا بخش های ساده را چک کنید.بسیاری از اوقات٬من ساعت های زیادی را صرف کلنجار رفتن با یک تگ جدید جالب توجه که به درستی کار نمی کرد٬کرده ام٬تا اینکه در آخر بفهمم مشکل کار یک خطای تایپی در تگی بوده که قبلاً هزاران با آن را به کار برده ام.آشنایی بیش از حد منشإخیلی از اشتباهات است٬آن بخش هایی که فکر می کنید به خوبی می شناسید را قبل از بخش های جدیدی که نگران آنها هستید چک کنید.
مشکلات را ساده کنید.به آخرین نسخه از صفحه تان که به خوبی کار می کند برگردید(که گاهی مواقع ممکن است یک صفحه خالی باشد).سپس صفحه را پس از اضافه کردن هر عنصر جدید تست کنید.
پست های پشت سر هم ادغام شد.
Reza_S