تست کردن و اشکال زدایی صفحات وب

h2ac01ke1r · May 29, 2007

تست کردن و اشکال زدایی صفحات وب
خوب, شما یک صفحه ی وب جدید را نوشته اید و وقتی آن را در مرورگرتان نمایش می دهید می فهمید که همه چیز آنطور که شما می خواهید به نظر نمی رسد.یا اینکه صفحه اصلا ًبه نمایش در نمی آید.یا اینکه ممکن است صفحه در مرورگر پیش فرض شما عالی به نظر برسد٬ اما وقتی از کلاینت سؤال می کنید٬ او می گوید که صفحه روی کامپیوتر او کمی عجیب و غریب به نظر می رسد.
بین Html٬ Xhtml٬ Css و تعداد فراوان مرورگرها و پلات فرم هایی که روی آنها می توانید صفحات وب را مشاهده کنید٬به آسانی مشکلاتی بروز می کند.در این جا در مورد بعضی خطاهای متداول به شما هشدار خواهد داد وبه شما کمک خواهد کرد تا از دست آن خطاها و اشکالات٬خلاص شوید.
بعضی از تکنیک های اشکال زدایی ممکن است ابتدایی به نظر برسند. نکته این است که بیشتر مشکلات در رابطه با صفحات وب هم کاملاً ابتدایی هستند.قبل از اینکه به دنبال یک مشکل بزرگ بگردید٬ اطمینان حاصل کنید که هیچ مشکل کوچکتری وجود ندارد.من چگونگی انجام این کار را در بخش اول این توضیحات به شما نشان خواهم داد.
همین که کد شما صحیح از آب در آمد٬باید سایت تان را ه طور عمیق روی یک یا چند مرورگر و در یک یا چند پلات فرم تست کنید٬تا ببینید آیا هر صفحه آنطور که شما می خواهید کار می کند٬یا خیر.

h2ac01ke1r · May 29, 2007

چند تکنیک اشکال زدایی
در اینجا تکنیک های آزموده شده و درست من برای اشکال زدایی یک صفحهٴ وب ارائه می شوند.
ابتدا مطالب ساده را چک کنید.
تصور کنید که یک دانشمند هستید.تیز بین و پیرو روش ها باشید.
قدم به قدم و به تدریج کار کنید.تغییرات کوچک را اعمال کنبد و پس از هر تغییر کارتان را تست کنید.به این روش شما خواهید توانست منبع یک مشکل را در صورت بروز پیدا کنید.به همین ترتیب٬وقتی مشغول اشکال زدایی هستید٬با چیزهایی که میدانید درست کار می کنند٬شروع کنید.فقط پس از آن باید بخش های مشکل تر را قسمت به قسمت اضافه کنید٬پس از هر اضافه کردن٬صفحه را در یک مرورگر تست کنید تا زمانی که منبع مشکل را پیدا نمایید.
بر عکس٬از فرایند حذف کردن استفاده کنید تا بفهمید کدام قسمت ها از کد شما سبب بروز مشکل می شوند.برای مثال٬می توانید نیمی از کد را با تبدیل کردن آن به توضیحات کنار بگذارید تا ببینید آیا مشکل در نیمهٴ دیگر است یا خیر.سپس نیم دیگری از بخش باقیمانده را به توضیحات تبدیل کنید و به همین ترتیب ادامه دهید٬تا زمانی که مشکل را پیدا کنید.
در مورد اشتباهات انجام گرفته در تایپ کردن کد واقعا ً دقت به خرج دهید.بسیاری از پیچیده ترین مشکلاتی که من با آنها روبه رو بوده ام ٬در نهایت ناشی از یک اشتباه ساده در نوشتن عبارت ها بوده است.
در css٬اگر مطمئن نیستید که مشکل در رابطه با ویژگی یا انتخاب کننده آن است ٬یک اعلان خیلی ساده را به انتخاب کننده تان اضافه کنید٬مانند color:red.اگر در عنصر مرود نظر به رنگ قرمز در آمد ٬مشکل در رابطه با ویژگی شما است٬اگر چنین نشد مشکل در رابطه با انتخاب کننده است.
یک وقفه به کارتان بدهید.زمان خطا نیست.گاهی شما میتوانید در مدت زمان 15 دقیقه پس از یک ساعت استراخت فکری به نتایجی برسید که هرگز در یک ساعت کار بدون استراحت به آن نتایج نمی رسیدید

h2ac01ke1r · May 29, 2007

اول نکات ساده را چک کنید
در حالی که تفاوت هایی که شما بین مرورگرها مشاهده می کنید٬ ممکن است ناشی از بعضی باگ های مبهم مربوط به خود مرورگر یا بعضی تکنیک های جدیدی که شما استفاده می کنید باشد٬ 90% اوقات منشإ مشکل یک چیز ساده است. به سادگی می توان به مشکلی در رابطه با یک تکنیک جدید ایراد گرفت و ساعت ها وقت را صرف اشکال زدایی آن کرد٬تا در آخر بفهمید که شما یک فایل را تغییر داده اید٬اما یک فایل دیگر را آپلود کرده و مشاهده می کنید.

نکات ساده ٴمتداول
اطمینان حاصل کنید که در عمل همان فایلی که می خواهید آن را تست کنید را آپلود کرده اید.
اطمینان حاصل کنید که شما فایل را در همان مکانی که فکر میکنید درست است آپلود کرده اید.
اطمینان حاصل کنید که URL که تایپ کرده اید مربوط به همان فایلی است که می خواهید آن را تست کنید.
اطمینان حاصل کنید که فایل را با در نظر گرفتن آخرین تغییرات اعمال شده در آن٬ قبل از آپلود کردن ذخیره کرده اید.
اطمینان حاصل کنید که تمام فایل های کمکی ٬از جمله فایل های css٬ تصاویر٬موسیقی٬ ویدیوها و غیره را آپلود کرده اید.
اطمینان حاصل کنید که حروف بزرگ و کوچک در URL شما دقیقا ًبا حروف بزرگ و کوچک در نام فایل های تان مطابقت دارد و اطمینان حاصل کنید که از فاصله های خالی یا سایر علائم نقطه گذاری در نام های فایل تان استفاده نکرده اید.
اطمینان حاصل کنید که مشکل ناشی از نقص موجود در مرورگر نمی باشد.ساده ترین روش برای انجام این کار این است که صفحه را در مرورگر دیگری تست کنید.
در سه بخش بعدی٬ایده هایی را به شما در مورد چگونگی چک کردن نکات آسان و پیش پا افتاده در کد HTML٬ XHTML٬CSS خواهم داد.

h2ac01ke1r · May 29, 2007

چک کردن نکات ساده :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به کار برده شده را حذف کرده ام.

h2ac01ke1r · May 29, 2007

چک کردن نکات آسان 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)استفاد نکنید.)

h2ac01ke1r · May 29, 2007

چک کردن نکات ساده: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شما هم خالی از خطا می باشد.

h2ac01ke1r · May 29, 2007

راهنمایی ها
تطبیق گرها اغلب در به دست آوردن یک تصویر کلی از صفحهٴشما به مشکل بر می خورند.در حالی که آنها در پیدا کردن تگ های بسته جا افتاده٬یا علامت های نقل قول جا افتاده٬خیلی خوب عمل می کنند٬اما همیشه در مورد اینکه در بقیهٴفایل چه می گذرد خیلی باهوش نیستند. برای مثال٬یک تگ بستهٴجا افتاده ممکن است سبب نمایش داده شدن تعداد فراوانی پیغام های خطا در سرتاسرسند شما شود.اگر آن تگ بسته را در جای خود قرار دهید٬ تمام آن خطاهای پشت سرهم ناپدید می شوند٬بنابراین روش کار این است که تعداد کمی از خطاها را به صورت هم زمان تصحیح کنید و سپس فایل را دوباره تطبیق دهید تا ببینید آیا سایر مشکلات هم حل شده اند یا خیر.
بسیاری از ویراستارهای متن مانندBBEdit٬دارای قابلیت های درونی برای چک کردن قواعد دستوری می باشند.آنها می توانند به خوبی قبل از این که شما به تطبیق گرهای رسمی متوسل شوید٬ خطاها را پیدا کنند.
با استفاده ازDOCTYPEبه تطبیق گر بگویید که با استفاده از کدام مشخصه های رسمی کد HTML و XHTMLشما را بررسی کند.
تطبیق گرهای دیگری هم وجود داند. من فکر می کنم کهw3c بهترین آنها را ارائه می کند.

h2ac01ke1r · May 29, 2007

تست کردن صفحه
حتی اگر کد شما معتبر شناخته شود٬هنوز هم ممکن است صفحهٴ شما به آن روشی که می خواهید کار نکند ٬یا اینکه ممکن است در یک مرورگر به طور مناسب کار کند٬ اما در مرورگر دیگر کار نکند. اهمیت دارد که صفحه تان رادر هر تعداد مرورگر و روی هر پلات فرم ممکن است امتحان کنید.حداقل٬صفحه تان را روی نسخه های فعلی هر دو مرورگر 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" "http:/ / www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ / www.w3.org/1999/xhtml">
<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 بزرگ به آن اشاره شده است.

h2ac01ke1r · May 29, 2007

اختلاف ها از یک مرورگر به مرورگر دیگر
این یکی احتمالا ًتقصیر شما نیست.متاٴسفانه٬هیچ مرورگری به صورت صد در صد از مشخصه های استاندارد پشتیبانی نمی کند.در حالی که بیشتر آنها تقریباً از تمام HTML(X) پشتیبانی می کنند٬پشتیبانی آنها از CSS متغیر می باشد.فعلاًfirefox و opera بهترین پشتیبانی را ارائه می کنند و به دنبال آنها IE 6 و IE 7قرار دارند.
چه زمانی صفحهٴشما از یک مرورگر به مرورگر دیگر٬متفاوت دیده می شود:
صفحه تان را در هر تعداد مرورگر و پلات فرم که می توانید تست کنید.لوگ های سرور را بخوانید تا ببینید مراجعه کنندگان از کدام مرورگرها استفاده می کنند و از کدام مرورگرها استفاده نمی کنند٬بدین ترتیب شما می توانید در مورد اینکه روی کدام مرورگر تمرکز کنید٬اطلاعاتی را به دست آورید.
در مورد اینکه کدام ویژگی های CSSتوسط مرورگرهای فعلی پشتیبانی می شوند و کدام یک از آنها از همه بیشتر مشکل دارند٬مراقب باشید.تعدادی منابع خوب وجود دارند. برای مثال٬شما می توانید به آدرس زیر مراجعه کنید(css.discuss Wiki(http://css-discuss.incutio.com/ .
صفحه تان را به صورتی طراحی کنید که اگر بعضی از چیزهایی که شما مورد استفاده قرار می دهید پشتیبانی نمی شوند٬صفحهٴشما هنوز به درستی کار کند. این روش <<کاهش تدریجی >> نامیده می شود.
صفحه تان را در اختیار مخاطب مورد نظرتان قرار دهید. ممکن است انتظار برود که طراحان وب آخرین برنامه های American Iguana Club را داشته باشند٬اما کسانی که صفحات وب را می بینند چنین نیستند.
راهنمایی ها
صفحهٴweb standards project در آدرس www.webstandards.org را برای اطلاعات بیشتر در مورد آنچه شما می توانید انجام دهید تا تبعیت استانداردها توسط سازندگان عمدهٴمرورگر وب (و همچنین هر تازه وارد به این بازی) ارتقإ یابد٬مشاهده کنید.
#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 از مثال اصلی مربوط به ((فرم ها)) می باشد.

h2ac01ke1r · May 29, 2007

آیا هنوز هم مشکلی وجود دارد؟
اگر به این جا رسیده اید ٬احتمالا ًمستاصل شده اید. فکر نکنید که وقتی به شما پیشنهاد کردم حین کار به خودتان استراحت بدهید٬قصد نصیحت داشتم. گاهی بهترین کاری که شما می توانید در رابطه با یک مشکل انجام دهید این است که برای دقایقی آن مشکل را به به حال خود بگذارید.وقتی به سراغ آن برگشتید٬ممکن است پاسخ مقابل چشمان شما قرار داشته باشد.اگر چنین نیست٬اجازه بدهید پیشنهاد های زیر را ارائه کنم.
دوباره به دنبال خطاهای تایپی بگردید.مجددا ًکدتان را با استانداردها تطبیق دهید.
ابتدا بخش های ساده را چک کنید.بسیاری از اوقات٬من ساعت های زیادی را صرف کلنجار رفتن با یک تگ جدید جالب توجه که به درستی کار نمی کرد٬کرده ام٬تا اینکه در آخر بفهمم مشکل کار یک خطای تایپی در تگی بوده که قبلاً هزاران با آن را به کار برده ام.آشنایی بیش از حد منشإخیلی از اشتباهات است٬آن بخش هایی که فکر می کنید به خوبی می شناسید را قبل از بخش های جدیدی که نگران آنها هستید چک کنید.
مشکلات را ساده کنید.به آخرین نسخه از صفحه تان که به خوبی کار می کند برگردید(که گاهی مواقع ممکن است یک صفحه خالی باشد).سپس صفحه را پس از اضافه کردن هر عنصر جدید تست کنید.
این مقاله را دوباره بخوانید.
یک بار برای آخرین دفعه به جستجوی خطاهای تایپی بپردازید.
بخشی از کد که درست کار نمیکند را به جلسهٴپرسش و پاسخ متعلق به من در آدرس (http;//www.cookwood.com/html/qanda/) بفرستید.اطمینان حاصل کنید که کد مربوطه (یا URL آن)را به همراه توضیحی از آنچه رخمی دهد و ار آنچه شما فکر می کنید باید رخ دهد را ضمیمه کنید.کسانی که در این جا هستند می توانند کمک زیادی بکنند.