آموزش زبان HTML (جلسه ۳۸)

آشنایی با پلاگین Firebug در مرورگر فایرفاکس

یکی از راه های فراگیری زبان اچ تی ام ال (HTML) مشاهده کدهای وب سایت های مختلف است. به طور مثال فرض کنیم در حین گشت زنی در اینترنت به سایتی بر می خوریم که خیلی برای ما جذاب به نظر می رسد و تمایل داریم کدهای به کارگرفته شده در آن سایت را ببینیم و چیدمان تگ های اچ تی ام ال (HTML) آن سایت را مورد بررسی قرار دهیم.
اگر از مرورگر فایرفاکس استفاده کنیم، پلاگین بسیار مفیدی در اختیار طراحان وب قرار دارد که در این زمینه بسیار مفید است. ابتدا بایستی این پلاگین را روی مرورگر خود نصب کنیم. برای این منظور طبق روش زیر کار خود را شروع می کنیم:

آشنایی_با_منوی_addson_در_فایرفاکس

همانطور که در تصویر فوق مشخص است، پس از ورود به منوی اصلی مرورگر فایرفاکس، روی گزینه Add-ons کلیک می کنیم:

فایرباگ_در_مرورگر_فایرفاکس

همانطور که در تصویر فوق مشخص است، در بخش جستجوی صفحه فوق عبارت firebug را تایپ کرده و دکمه اینتر را فشار می دهیم:

نصب_فایرباگ_روی_فایرفاکس

می بینیم که فایرفاکس این پلاگین را پیدا نموده و در این مرحله به سادگی می توانیم روی گزینه Install کلیک کرده تا این پلاگین را روی مرورگر خود نصب کنیم:

آیکان_فایرباگ_روی_فایرفاکس

پس از نصب این پلاگین می بینیم که در صفحه اصلی مرورگر همانطور که در تصویر فوق نشان داده شده است آیکانی به شکل یک حشره اضافه می شود (به نظر می رسد که نام فایرباگ و لوگوی این پلاگین با یکدیگر هارمونی خوبی دارند!).

پیش از ادامه کار نیاز است تا یک تگ <P> حاوی عبارت This is a paragraph داخل سند اچ تی ام ال (HTML) خود ایجاد نماییم تا بهتر بتوان عملکرد پلاگین Firebug را مشاهده نمود:

تست_کردن_پلاگین_فایرباگ

اکنون روی عکس حشره کلیک می کنیم:

اجرای_فایرباگ_در_مرورگر_فایرفاکس

می بینیم که در پایین مرورگر پنجره ای به صورت فوق نمایان می شود. در حقیقت وظیفه ای که این پنجره دارد این است که Source Code یا همان کدهای اچ تی ام ال (HTML) صفحات وب را به برنامه نویس نمایش دهد. همانطور که در پنجره سمت راست می بینیم، بخش های اصلی یک سند اچ تی ام ال (HTML) که عبارتند از html, head, body به نمایش در آمده اند و چنانچه روی علامت به علاوه کنار مثلا body کلیک کنیم، کلیه عناصر قرار گرفته در body این صفحه از سایت برای ما به نمایش در خواهد آمد.
خصوصیت بسیار جذاب دیگری که این پلاگین دارد این است که می توانیم به صورت دینامیک کد مربوط به بخش های مختلف یک سند را بیابیم. برای این منظور به شکل زیر عمل می کنیم:

نمایش_دینامیک_عناصر_روی_فایرباگ_در_فایرفاکس

همانطور که در تصویر فوق مشخص است، روی گزینه ای که عکس نشانگر موس روی آن قرار گرفته است یک بار کلیک می کنیم تا فعال شود. از این پس با قرار دادن نشانگر موس خود روی عناصر قرار گرفته روی یک صفحه از سایت، در پنجره مرتبط با Source Code کدهای آن آیتم به نمایش در خواهد آمد. برای روشن شدن این مطلب همانطور که در تصویر زیر خواهیم دید نشانگر موس خود را روی عبارت This is a paragraph قرار می دهیم:

استفاده_از_فایرباگ_برای_نمایش_عناصر_روی_صفحه

همانطور که در تصویر فوق می بینیم، با قرار دادن نشانگر موس خود روی عبارت مد نظر، در بخش پایین مرورگر به ما نشان داده خواهد شد که آن آیتم یک پاراگراف است که داخل تگ body قرار گرفته است. در صورتی که بخواهیم پنجره مرتبط با فایرباگ را ببندیم مجدد می توانیم روی دکمه فوق که لوگوی حشره روی آن قرار گرفته است مجدد کلیک کنیم (در ادامه آموزش های بیشتر از این پلاگین استفاده خواهیم کرد).

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)