تست کردن و اشکال زدایی صفحات وب
خوب, شما یک صفحه ی وب جدید را نوشته اید و وقتی آن را در مرورگرتان نمایش میدهید می فهمید که همه چیز آنطور که شما می خواهید به نظر نمی رسد.یا اینکه صفحهاصلا ًبه نمایش در نمی آید.یا اینکه ممکن است صفحه در مرورگر پیش فرض شما عالی بهنظر برسد٬ اما وقتی از کلاینت سؤال می کنید٬ او می گوید که صفحه روی کامپیوتر اوکمی عجیب و غریب به نظر می رسد.
بین 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) معتبر شناخته شد٬می توانیدبا استفاده از تطبیق گر موجود درآدرس http:/jigsaw.w3.org/css-validator/ اطمینان حاصل کنید که کد 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
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ / www.w3.org/1999/xhtml">
<title>Mary Anna,the lguana</title>
<link rel="stylesheel"type="text /css"
href="teshterpage.css"/></head>
<img src="iguana.ipg"alt="lguana"width="220"
<h1>Mary Anna,the laguana</h1>
<p>There once was an iguana
whose name was <em>Mary Anna</em>
Here's some cream:would you please put it
شکل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) به جایتصویر٬یک نماد شکسته را نمایش می دهد.
<img src="lguana.ipg"alt="lguana"width="220"
<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-
select{margin-left:9em;margin-bottom:0}
#size input{margin-left:9em}
#size input+input{margin-left:1em}
#size br+input{margin-left:9em}
#extras input{margin-left:9em}
#extras input+input{margin-left:1em}
#extras br+input{margin-left:9em}
شکل 16.این کد css از مثال اصلی مربوط به ((فرم ها)) می باشد.
آیا هنوز هم مشکلی وجود دارد؟
اگر به این جا رسیده اید ٬احتمالا ًمستاصل شده اید. فکر نکنید که وقتی به شماپیشنهاد کردم حین کار به خودتان استراحت بدهید٬قصد نصیحت داشتم. گاهی بهترین کاریکه شما می توانید در رابطه با یک مشکل انجام دهید این است که برای دقایقی آن مشکلرا به به حال خود بگذارید.وقتی به سراغ آن برگشتید٬ممکن است پاسخ مقابل چشمان شماقرار داشته باشد.اگر چنین نیست٬اجازه بدهید پیشنهاد های زیر را ارائه کنم.
دوباره به دنبال خطاهای تایپی بگردید.مجددا ًکدتان را با استانداردها تطبیقدهید.
ابتدا بخش های ساده را چک کنید.بسیاری از اوقات٬من ساعت های زیادی را صرفکلنجار رفتن با یک تگ جدید جالب توجه که به درستی کار نمی کرد٬کرده ام٬تا اینکه درآخر بفهمم مشکل کار یک خطای تایپی در تگی بوده که قبلاً هزاران با آن را به کاربرده ام.آشنایی بیش از حد منشإخیلی از اشتباهات است٬آن بخش هایی که فکر می کنید بهخوبی می شناسید را قبل از بخش های جدیدی که نگران آنها هستید چک کنید.
مشکلات را ساده کنید.به آخرین نسخه از صفحه تان که به خوبی کار می کندبرگردید(که گاهی مواقع ممکن است یک صفحه خالی باشد).سپس صفحه را پس از اضافه کردنهر عنصر جدید تست کنید.
پست های پشت سر هم ادغام شد.
Reza_S
