شما باید به سرعت همه تغییرات را در خود سایت مشاهده کنید، بدون اینکه روی فایل ها و کدهای سایت ارسال شده در اینترنت تأثیری داشته باشید. به عنوان مثال، طرح رنگ یک بلوک را تغییر دهید، عنصری را که خارج شده است حرکت دهید و غیره.
برای انجام این کار، بسیاری از وب مسترها از سرورهای محلی Denwer یا OpenServer استفاده می کنند و یک نسخه کامل از سایت را روی رایانه خود اجرا می کنند. این روش جهانی و مناسب برای افراد حرفه ای است؛ می توان از آن برای تست عملکرد اسکریپت ها و پلاگین های مختلف، آزمایش تغییر طراحی و ویرایش تمامی فایل های سایت استفاده کرد و پس از تست، تغییرات مناسب را مستقیماً به سایت منتقل کرد.
برای کاربرانی که از هنر وب مستر دور هستند، استفاده از مرورگر را برای این اهداف توصیه می کنم. از آنجایی که من از کروم استفاده می کنم، دستورالعمل هایی را با اسکرین شات برای این مرورگر خاص ارائه خواهم کرد. بر اساس قیاس، می توانید با مرورگرهای Opera، Yandex.Browser، Mozilla Firefox و سایر مرورگرها کار کنید؛ اصل ابزارهای آنها مشابه است.
دستورالعمل 1: نحوه مشاهده کل کد HTML یک سایت در یک مرورگر
صفحه وب مورد نیاز سایت خود را باز کنید. با کلیک راست بر روی عنصر مورد نیاز، یک منوی کشویی متنی مرورگر با دستورات موجود ظاهر می شود:
شکل 1. مشاهده کل کد HTML یک صفحه وب در مرورگر کروم
مهم:دستورات موجود در منوی کشویی ممکن است متفاوت باشد، به عنوان مثال، برای عناصر فعال (پیوندها، تصاویر، ویدیوها) و عناصر غیر فعال (متن، پس زمینه، divs):
شکل 2. منوی کشویی مرورگر کروم
بنابراین اگر دستور مورد نیاز خود را پیدا نکردید، کافی است در جای دیگری راست کلیک کنید یا از کلیدهای میانبر مرورگر خود استفاده کنید.
بیایید به شکل 1 برگردیم، دستور لازم برای مشاهده تمام کدهای HTML صفحه وب منبع را نشان می دهد، به نام " مشاهده کد صفحه". روی دستور کلیک کنید، یک برگه جدید با کد کامل صفحه وب منبع باز می شود، یک مزیت بزرگ برای همه چیز - مشاهده با برجسته کردن نحو در دسترس است:
شکل 3. قطعه کد این سایت
این ابزار برای یافتن و ویرایش عناصر مورد نظر شما بسیار مفید است.
روش های جایگزین برای مشاهده تمام کدهای HTML یک صفحه وب
برای دسترسی سریعتر می توانید از راه های دیگری برای فراخوانی این ابزار استفاده کنید
- در شکل 1 نیز می بینیم که این دستور از طریق میانبر صفحه کلید در دسترس است
+ ; - view-source:site را به جای دامنه من در نوار آدرس مرورگر جایگذاری کنید، آدرس خود را وارد کنید.
هر دو روش جهانی هستند و باید در همه مرورگرها کار کنند.
در ابتدا ممکن است برخی فکر کنند که این اصلا ابزار ضروری نیست، اما مشاهده کل کد HTML یک سایت برای یافتن عناصر ضروری در کد عالی است، اینها می توانند پیوندها، تگ ها، متا تگ ها، ویژگی ها و عناصر دیگر باشند. .
ترکیب کلید میانبر
شکل 3. جستجو بر اساس کد سایت
پس از اینکه درخواستی را در فرم جستجو وارد کردید، صفحه به اولین عنصر یافت شده منتقل می شود، با استفاده از فلش ها می توانید بین آنها حرکت کنید و مورد نیاز خود را انتخاب کنید:
شکل 4. جستجو بر اساس کد سایت HTML
دستورالعمل 2: نحوه مشاهده و ویرایش کد HTML و CSS یک سایت در مرورگر Google Chrome
اکنون مهمترین بخش، که در آن نشان خواهم داد که چگونه می توانید کد HTML و CSS یک وب سایت را در مرورگر ویرایش کنید. سپس تغییرات را به مرورگر منتقل کنید.
![](https://i0.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%9A%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0-%D0%9F%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B5%D1%82%D1%8C-%D0%BA%D0%BE%D0%B4.jpg)
این ابزار مفید همیشه در مرورگر شما موجود است؛ دستورات دیگری را آزمایش کنید که ویرایش سایت را برای شما آسان تر می کند.
اگر هر صفحه وب را باز کنید، حاوی عناصر معمولی است که بسته به نوع و تمرکز سایت تغییر نمی کند. مثال 4.1 کد یک سند ساده حاوی تگ های اساسی را نشان می دهد.
مثال 4.1. کد منبع صفحه وب
سرفصل
پراگراف اول.
پاراگراف دوم.
محتویات این مثال را کپی کرده و در پوشه c:\www\ به عنوان example41.html ذخیره کنید. پس از آن، مرورگر را راه اندازی کنید و فایل را از طریق آیتم منو باز کنید File > Open File (Ctrl+O). در گفتگوی انتخاب سند، فایل example41.html را انتخاب کنید. صفحه وب نشان داده شده در شکل 1 در مرورگر باز می شود. 4.1.
برنج. 4.1. نتیجه اجرای مثال
عنصربرای نشان دادن نوع سند فعلی - DTD (تعریف نوع سند، شرح نوع سند) در نظر گرفته شده است. این لازم است تا مرورگر بفهمد که چگونه صفحه وب فعلی را تفسیر کند، زیرا HTML در چندین نسخه وجود دارد، علاوه بر این، XHTML (Extensible HyperText Markup Language) نیز وجود دارد که شبیه به HTML است، اما از نظر نحو با آن متفاوت است. برای اینکه مرورگر "گیج نشود" و بفهمد که طبق کدام استاندارد صفحه وب را نمایش می دهد، باید در خط اول کد تنظیم شود. .
چندین نوع وجود دارد، بسته به نسخه HTML مورد نظر آنها متفاوت است. روی میز 4.1. انواع اصلی اسناد با توضیحات آنها آورده شده است.
DOCTYPE | شرح |
---|---|
HTML 4.01 | |
نحو دقیق HTML | |
نحو انتقالی HTML. | |
یک سند HTML از فریم ها استفاده می کند. | |
HTML 5 | |
این نسخه از HTML تنها یک نوع doctype دارد. | |
XHTML 1.0 | |
نحو دقیق XHTML. | |
نحو XHTML انتقالی. | |
سند به زبان XHTML نوشته شده و حاوی فریم است. | |
XHTML 1.1 | |
توسعه دهندگان XHTML 1.1 انتظار دارند که به تدریج جایگزین HTML شود. همانطور که می بینید، این تعریف به انواع تقسیم نمی شود، زیرا نحو یکسان است و از قوانین واضح پیروی می کند. |
تفاوت بین توصیف دقیق و انتقالی سند، رویکرد متفاوتی برای نوشتن کد سند است. HTML دقیق مستلزم رعایت دقیق مشخصات HTML است و خطاها را نمی بخشد. HTML انتقالی در مورد برخی از نقص های کد راحت تر است، بنابراین استفاده از این نوع در موارد خاص ترجیح داده می شود.
به عنوان مثال، در HTML و XHTML دقیق وجود تگ الزامی است
در آینده عمدتاً از سختگیرانه استفاده خواهیم کرد، مگر اینکه خلاف آن مشخص شده باشد. این به ما امکان می دهد از اشتباهات رایج اجتناب کنیم و به ما یاد می دهد که کدهای نحوی درست بنویسیم.
اغلب می توانید کدهای HTML را بدون استفاده از هیچ کدی پیدا کنید، صفحه وب همچنان در این مورد نشان داده می شود. با این حال، ممکن است زمانی که شما از آن استفاده می کنید، همان سند به طور متفاوتی در مرورگر ظاهر شودو بدون آن علاوه بر این، مرورگرها می توانند چنین اسنادی را به روش خود نمایش دهند، در نتیجه صفحه "فشرده" می شود، یعنی. کاملا متفاوت از آنچه توسعه دهنده نیاز دارد نمایش داده می شود. برای جلوگیری از چنین موقعیت هایی، همیشه اضافه کنیدتا ابتدای سند
برچسب بزنید ابتدای فایل HTML را تعریف می کند، هدر داخل آن ذخیره می شود (
) و بدنه سند (عنوان سند که بلوک نیز نامیده می شود
، می تواند حاوی متن و برچسب باشد، اما محتوای این بخش به طور مستقیم در صفحه نشان داده نمی شود، مگر در ظرف
برچسب بزنید جهانی است و یک کلاس کامل از قابلیت ها را اضافه می کند، به ویژه، با کمک تگ های متا، همانطور که معمولاً این تگ نامیده می شود، می توانید رمزگذاری صفحه را تغییر دهید، کلمات کلیدی، توضیحات سند و موارد دیگر را اضافه کنید. به طوری که مرورگر متوجه می شود که با رمزگذاری UTF-8 (فرمت تبدیل یونیکد) سروکار دارد و این خط اضافه می شود.
برچسب بزنید
برنج. 4.2. نمای هدر در مرورگر
برچسب بزنید
باید یک تگ پایانی اضافه کنیدبرای نشان دادن کامل بودن بلوک عنوان سند.
بدنه سند
سرفصل
HTML شش عنوان متنی در سطوح مختلف ارائه می دهد که نشان دهنده اهمیت نسبی بخش بعد از عنوان است. بله تگ کنید
مهمترین عنوان سطح اول و تگ را نشان می دهد نشان دهنده سرفصل سطح ششم است و کمترین اهمیت را دارد. بهطور پیشفرض، عنوان سطح اول با بزرگترین فونت پررنگ نمایش داده میشود و عنوانهای سطح بعدی از نظر اندازه کوچکتر هستند. برچسب ها ...رجوع به عناصر بلوک شود، آنها همیشه از یک خط جدید شروع می شوند و بعد از آنها عناصر دیگر در خط بعدی ظاهر می شوند. علاوه بر این، فضای سفید قبل و بعد از عنوان اضافه می شود.
...رجوع به عناصر بلوک شود، آنها همیشه از یک خط جدید شروع می شوند و بعد از آنها عناصر دیگر در خط بعدی ظاهر می شوند. علاوه بر این، فضای سفید قبل و بعد از عنوان اضافه می شود.
برخی از متن ها را می توان با گذاشتن نظر در مرورگر از نمایش آن پنهان کرد. اگرچه این متن توسط کاربر دیده نمی شود، اما همچنان در سند منتقل می شود، بنابراین اگر به کد منبع نگاه کنید، می توانید یادداشت های پنهان را کشف کنید.
Ctrl+U
چگونه می توانم کد منبع یک عنصر را مشاهده کنم؟
روی عنصر صفحه مورد نظر کلیک راست کنید.
گوگل کروم: "مشاهده کد عنصر"
اپرا: "بازرسی عنصر"
فایرفاکس: "آنالیز عنصر"
در مرورگرهای دیگر، به دنبال آیتم منو با معنای مشابه باشید.
سلام به همه!
من به خصوص برای کسانی که به دنبال پاسخ سریع هستند، در ابتدای مقاله کل موضوع را بیان کردم.
اطلاعات ممکن است برای بسیاری شناخته شده باشد، اما از آنجایی که من برای وبلاگ نویسان تازه کار، برنامه نویسان وب و سایر جستجوگران می نویسم، این مقاله مرجع ضروری است.
در آینده قطعا کد منبع صفحات و عناصر تکی را مطالعه خواهید کرد.
بیایید به یک مثال خاص از نحوه استفاده از مشاهده کد منبع یک صفحه نگاه کنیم.
به عنوان مثال، می خواهیم ببینیم چه کلمات کلیدی برای یک صفحه خاص استفاده می شود. به صفحه وب مورد علاقه خود می رویم و Ctrl+U را فشار می دهیم. کد منبع این صفحه در یک پنجره جداگانه یا در یک تب جداگانه باز می شود. Ctrl+F را فشار دهید برای جستجوی یک قطعه کد. در این حالت کلمه « کلید واژه ها".شما به طور خودکار به یک قطعه کد با این متا تگ هدایت می شوید و کلمه جستجو شده هایلایت می شود.
بر اساس قیاس، می توانید سایر قطعات کد را جستجو و مطالعه کنید.
مشاهده کل کد منبع یک صفحه در بیشتر موارد خیلی راحت نیست، بنابراین در همه مرورگرها امکان مشاهده کد یک عنصر یا قطعه جداگانه وجود دارد.
بیایید از یک مثال خاص برای مشاهده کد یک عنصر استفاده کنیم. به عنوان مثال، بیایید ببینیم آیا پیوند دارای ویژگی nofollow است یا خیر. روی پیوند مورد علاقه ما کلیک راست کنید و در منوی زمینه کشویی، روی مورد کلیک چپ کنید. "مشاهده کد عنصر"یا مشابه (بسته به مرورگر شما). در زیر، در یک پنجره ویژه برای تجزیه و تحلیل کد، چیزی مشابه دریافت می کنیم.
می بینیم که کد پیوند حاوی rel=”nofollow” است. این بدان معنی است که روابط عمومی از طریق این پیوند "نشت" نخواهد کرد. در مقالات بعدی در این مورد با جزئیات بیشتری صحبت خواهیم کرد. اکنون نکته مهم این است که اکنون می دانید چگونه کد منبع صفحه و کد منبع یک عنصر را مشاهده کنید.
" همین مورد نیز در منوی زمینه وجود دارد که اگر روی متن کلیک راست کنید صفحات. همچنین می توانید از میانبر صفحه کلید CTRL + U استفاده کنید. Mozilla FireFox از برنامه های خارجی استفاده نمی کند - اصلی کد صفحاتبا برجسته کردن نحو در یک پنجره مرورگر جداگانه باز می شود.
در اینترنت اکسپلورر، روی منوی File کلیک کرده و Edit in Notepad را انتخاب کنید. به جای نام Notepad، ممکن است نام دیگری نوشته شود، شما آن را در تنظیمات مرورگر برای مشاهده نسخه اصلی اختصاص داده اید. کدآ. روی کلیک صفحاتبا دکمه سمت راست ماوس، یک منوی زمینه ظاهر می شود، که همچنین دارای آیتمی است که به شما امکان می دهد منبع را باز کنید کد صفحاتدر یک برنامه خارجی - "مشاهده HTML- کدآ".
در مرورگر Opera، منو را باز کنید، به بخش "صفحه" بروید و این فرصت را خواهید داشت که "منبع" را در زیربخش "ابزارهای توسعه" انتخاب کنید. کد"یا مورد "اصلی کدقاب." به این انتخاب ها به ترتیب کلیدهای میانبر CTRL + U و CTRL + SHIFT + U اختصاص داده شده است. در یک منوی زمینه محدود به یک کلیک صفحاتکلیک راست کنید، یک مورد نیز وجود دارد "Initial کد" منبع اپرا صفحاتدر یک برنامه خارجی که در سیستم عامل یا در تنظیمات مرورگر برای ویرایش فایل های HTML اختصاص داده شده است.
مرورگر گوگل کروم بدون شک بهترین سازماندهی را برای مشاهده نسخه اصلی دارد کدآ. با کلیک راست ماوس می توانید View را انتخاب کنید کدآ صفحاتو سپس کد منبع با برجسته سازی نحو در یک برگه جداگانه باز می شود. یا می توانید خط "View" را در همان منو انتخاب کنید کد element” و در همان تب دو فریم اضافی باز می شود که در آنها می توانید HTML و CSS را بررسی کنید کدعنصر صفحات. مرورگر به حرکت مکان نما در خطوط پاسخ می دهد کدو برجسته کردن عناصر در صفحه که با این بخش از HTML مطابقت دارند کدآ.
احتمال بررسی اولیه کدوب صفحات، که توسط مرورگر در نتیجه درخواست از سرور دریافت می شود، تقریباً در هر مرورگر اینترنتی موجود است. دسترسی به دستور مربوطه تقریباً به طور یکسان سازماندهی شده است، اما تفاوت های قابل توجهی در روش و شکل اولیه وجود دارد. کد .
دستورالعمل ها
1. در مرورگر Mozilla FireFox، بخش "View" را در منو گسترش دهید و روی "Initial" کلیک کنید. کد صفحات" همین مورد در منوی زمینه نیز وجود دارد که اگر روی متن کلیک راست کنید ظاهر می شود صفحات. همچنین می توانید از کلیدهای ترکیبی CTRL + U استفاده کنید. Mozilla FireFox از برنامه های خارجی استفاده نمی کند - اولیه کد صفحاتبا برجسته کردن نحو در یک پنجره مرورگر جداگانه باز می شود.
2. در اینترنت اکسپلورر، روی منوی File کلیک کرده و Edit in Notepad را انتخاب کنید. به جای نام Notepad می توان برنامه دیگری نوشت که در تنظیمات مرورگر برای مشاهده اولیه تعیین کرده اید. کدآ. روی کلیک صفحاتبا دکمه سمت راست ماوس، یک منوی زمینه ظاهر می شود، که همچنین دارای یک آیتم است که به شما امکان می دهد تا اولیه را باز کنید کد صفحاتدر یک برنامه خارجی - "مشاهده HTML- کدآ".
3. در مرورگر Opera، منو را باز کنید، به بخش "صفحه" بروید و فرصتی خواهید داشت که مورد "شروع" را در زیربخش "ابزارهای توسعه" انتخاب کنید. کد"یا مورد "ابتدایی کدقاب." کلیدهای میانبر CTRL + U و CTRL + SHIFT + U به ترتیب به این انتخاب اختصاص داده شده اند. در یک منوی زمینه محدود به یک کلیک صفحاتکلیک راست کنید، یک مورد نیز وجود دارد "Initial کد" اپرا منبع باز می شود صفحاتدر یک برنامه خارجی که در سیستم عامل یا در تنظیمات مرورگر برای ویرایش فایل های HTML اختصاص داده شده است.
4. مرورگر گوگل کروم بدون شک بهترین سازماندهی را برای مشاهده اولیه دارد کدآ. با کلیک راست بر روی صفحه، می توانید مشاهده کنید کدآ صفحاتو سپس کد منبع با برجسته سازی نحو در یک برگه جداگانه باز می شود. یا ممکن است خط "View" را در همان منو ترجیح دهید کدعنصر» و مرورگر در همان تب دو فریم اضافی را باز می کند که در آنها می توانید HTML و CSS را بررسی کنید کدهر عنصر صفحات. مرورگر به حرکت مکان نما در خطوط پاسخ می دهد کدو برجسته کردن عناصر در صفحه که با این بخش از HTML مطابقت دارند کدآ.
5. در مرورگر Apple Safari، بخش View را باز کرده و View HTML را انتخاب کنید کدآ". در منوی که با کلیک راست روی باز کردن ظاهر می شود صفحات، مورد مربوطه "مشاهده منبع" نامیده می شود. این عمل به کلیدهای میانبر CTRL + ALT + U. Initial اختصاص دارد کددر یک پنجره مرورگر جداگانه باز می شود.