نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی پرتال اطلاعاتی

کد منبع صفحه آنلاین است. Google Chrome Webmaster Tools

06.09.2019 جالب هست

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 به ترتیب به این انتخاب اختصاص داده شده اند. در منوی زمینه متصل به کلیک کنید صفحاتکلیک راست کنید، همچنین مورد "منبع" وجود دارد کد". منبع اپرا صفحاتدر یک برنامه خارجی که در سیستم عامل یا تنظیمات مرورگر برای ویرایش فایل های HTML اختصاص داده شده است.

مرورگر گوگل کروم بدون شک بهترین سازماندهی مرورگر مبدأ را دارد. کدولی. با کلیک راست روی ماوس می توانید View را انتخاب کنید کدولی صفحات” و سپس کد منبع با برجسته سازی نحو در یک تب جداگانه باز می شود. یا می توانید در همان منو خط "View کدیک عنصر" و در همان تب دو فریم اضافی باز می شود که در آنها می توانید HTML و CSS را بررسی کنید - کدعنصر صفحات. مرورگر به حرکت مکان نما در خطوط پاسخ می دهد کدو برجسته کردن عناصر موجود در صفحه که با این بخش از HTML مطابقت دارند- کدولی.

مهارت کد منبع صفحه را تغییر دهید- یک مهارت مفید برای یک کاربر پیشرفته اینترنت. با کمک جایگزینی کد HTML، می توانید صفحه وب باز را به دلخواه تغییر دهید. در این مقاله خواهیم گفت نحوه تغییر کد صفحهدر گوگل کروم با این حال، در سایر مرورگرها همه چیز به همین ترتیب انجام می شود، بنابراین نباید مشکلی وجود داشته باشد.

کد HTML یک صفحه چیست؟

هر صفحه ای که در مرورگر خود باز می کنید کد مخصوص به خود را در زبان نشانه گذاری HTML دارد. این کد برچسب و متن است. برچسب ها نوعی برچسب هستند که به مرورگر می گویند چگونه قسمت خاصی از سایت را نمایش دهد. متن محتوای صفحه است، چیزی که کاربر می بیند. همچنین، سبک های CSS را می توان به صفحه متصل کرد که ظاهر عناصر صفحه را تعیین می کند. به کد منبع سایت را تغییر دهیدشما نیازی به دانستن HTML و CSS ندارید و به زودی خودتان آن را خواهید دید.

چرا یک صفحه وب را تغییر دهید؟

می توانید داده های سایت را تغییر دهید، متن پیام را تغییر دهید، اسکرین شات جعلی بگیرید. لطفاً توجه داشته باشید که همه تغییرات فقط برای شما قابل مشاهده است و با بارگذاری مجدد صفحه ناپدید می شوند. همچنین داده های تغییر یافته واقعی نخواهد بود. به عنوان مثال، اگر من 10 دلار نداشته باشم و آن را به 100 دلار تغییر دهم، دیگر پولی نخواهم داشت. این فقط رندر صفحه توسط مرورگر است. مثال:

بعد از:

به عنوان مثال، من همان سایت را می گیرم و اعلان قبلی مقاله را تغییر می دهم "" صفحه اصلی را در گوگل کروم باز می کنم. من روی عنصری که می خواهم تغییر دهم، مثلاً عنوان اعلامیه را کلیک راست می کنم و "View Code" را انتخاب می کنم.

در پنجره باز شده به تب Elements رفته و کد HTML صفحه را مشاهده کنید. ما باید متن مورد علاقه خود را پیدا کنیم. (با رنگ قرمز مشخص شده است)

حالا متن قبلی را حذف می کنم و متن جدید را وارد می کنم.

تمام شد، نام اطلاعیه تغییر کرد. حالا خود اعلامیه، برچسب ها و دسته بندی را تغییر می دهم.

با تغییر ویژگی src در تگ img می توانید تصویر دیگری را وارد کنید.

احتمال بررسی اولیه کدوب صفحات، دریافت شده توسط مرورگر در نتیجه درخواست از سرور، در واقع در هر مرورگر اینترنتی وجود دارد. دسترسی به دستور مربوطه تقریباً به طور یکسان سازماندهی شده است، اما تفاوت های قابل توجهی در این که چه روشی و به چه شکلی با دستور اولیه به شما ارائه می شود وجود دارد. کد .

دستورالعمل

1. در مرورگر Mozilla FireFox، بخش "View" را از منو باز کنید و روی "Initial" کلیک کنید. کد صفحات". همین مورد نیز در منوی زمینه است که با کلیک راست روی متن ظاهر می شود صفحات. میانبر صفحه کلید CTRL + U نیز مجاز است. Mozilla FireFox از برنامه های خارجی استفاده نمی کند - ابتدا کد صفحاتبا برجسته کردن نحو در یک پنجره مرورگر جداگانه باز می شود.

2. در اینترنت اکسپلورر، روی منوی File کلیک کرده و Edit in Notepad را انتخاب کنید. به جای نام Notepad، برنامه دیگری را می توان نوشت که در تنظیمات مرورگر خود برای مشاهده اولیه تعیین کرده اید. کدولی. روی کلیک کنید صفحاتبا دکمه سمت راست ماوس، یک منوی زمینه ظاهر می شود، که همچنین دارای یک آیتم است که به شما اجازه می دهد تا اولیه را باز کنید. کد صفحاتدر یک برنامه خارجی - "مشاهده HTML- کدولی".

3. در مرورگر اپرا، منو را باز کنید، به بخش "صفحه" بروید و احتمالاً مورد "ابتدای" را در زیربخش "ابزارهای توسعه" ترجیح می دهید. کد” یا مورد ” اولیه کدقاب". کلیدهای میانبر CTRL+U و CTRL+SHIFT+U به ترتیب به این انتخاب اختصاص داده شده اند. در منوی زمینه متصل به کلیک کنید صفحاتکلیک راست کنید، همچنین مورد "Initial کد". منبع باز اپرا صفحاتدر یک برنامه خارجی که در سیستم عامل یا تنظیمات مرورگر برای ویرایش فایل های HTML اختصاص داده شده است.

4. مرورگر گوگل کروم بدون شک بهترین سازماندهی را برای مرور اولیه دارد کدولی. با کلیک راست روی یک صفحه، ممکن است View را ترجیح دهید کدولی صفحاتو سپس کد منبع با برجسته سازی نحو در یک تب جداگانه باز می شود. یا می توانید در همان منو خط "مشاهده" را ترجیح دهید کدیک عنصر" و مرورگر در همان تب دو فریم اضافی را باز می کند که در آنها می توانید HTML و CSS را بررسی کنید - کدهر عنصر صفحات. مرورگر به حرکت مکان نما در خطوط پاسخ می دهد کدو برجسته کردن عناصر موجود در صفحه که با این بخش از HTML مطابقت دارند- کدولی.

5. در مرورگر Apple Safari، بخش "View" را گسترش دهید و خط "View HTML" را انتخاب کنید کدولی". در منوی که با کلیک راست روی باز کردن ظاهر می شود صفحات، مورد مربوطه با عنوان "نمایش منبع" است. کلیدهای میانبر CTRL + ALT + U به این عمل اختصاص داده شده است. کددر یک پنجره مرورگر جداگانه باز می شود.

اگر هر صفحه وب را باز کنید، حاوی عناصر معمولی است که بسته به نوع و جهت سایت تغییر نمی کند. مثال 4-1 کد یک سند ساده حاوی تگ های اساسی را نشان می دهد.

مثال 4.1. کد منبع صفحه وب

نمونه صفحه وب

سرتیتر

پراگراف اول.

پاراگراف دوم.

محتویات این مثال را کپی کرده و در پوشه c:\www\ به عنوان example41.html ذخیره کنید. پس از آن، مرورگر را راه اندازی کنید و فایل را از طریق آیتم منو باز کنید File > Open File (Ctrl+O). در گفتگوی انتخاب سند، فایل example41.html را مشخص کنید. صفحه وب نشان داده شده در شکل. 4.1.

برنج. 4.1. نتیجه اجرای مثال

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

چندین نوع وجود دارد، بسته به نسخه HTML مورد نظر آنها متفاوت است. روی میز. 4.1. انواع اصلی اسناد با شرح آنها آورده شده است.

برگه 4.1. DTD های معتبر
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 انتقالی می توان آن را حذف کرد و مشخص نکرد. در عین حال، به یاد داشته باشید که مرورگر در هر صورت سند را صرف نظر از مطابقت یا عدم مطابقت آن با نحو نمایش می دهد. چنین اعتبار سنجی با استفاده از یک اعتبارسنجی انجام می شود و در درجه اول برای توسعه دهندگان در نظر گرفته شده است تا خطاهای یک سند را ردیابی کنند.</p> <p>در ادامه، عمدتاً از سخت گیر استفاده خواهیم کرد<!DOCTYPE>، به جز مواردی که به طور خاص ذکر شده است. این به ما امکان می دهد از اشتباهات رایج اجتناب کنیم و به ما یاد می دهد که کدهای نحوی درست بنویسیم.</p> <p>اغلب ممکن است بدون استفاده از کدهای HTML برخورد کنید<!DOCTYPE>، صفحه وب همچنان در چنین حالتی نمایش داده می شود. با این حال، ممکن است اتفاق بیفتد که هنگام استفاده، همان سند به طور متفاوتی در مرورگر نمایش داده شود<!DOCTYPE>و بدون آن علاوه بر این، مرورگرها می توانند چنین اسنادی را به روش خود نمایش دهند، در نتیجه، صفحه "فشرده" می شود، یعنی. مطابق با نیاز توسعه دهنده به روشی کاملاً متفاوت نمایش داده می شود. برای جلوگیری از چنین موقعیت هایی، همیشه اضافه کنید<!DOCTYPE>تا ابتدای سند</p><p>برچسب بزنید <html>ابتدای فایل HTML را تعریف می کند، هدر داخل آن ذخیره می شود ( <head>) و بدنه سند ( <body> ).</p><p>عنوان سند، به عنوان بلوک نیز نامیده می شود <head>، ممکن است حاوی متن و برچسب باشد، اما محتوای این بخش به جز ظرف، مستقیماً در صفحه نمایش داده نمی شود. <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>برچسب بزنید <meta>جهانی است و یک کلاس کامل از ویژگی ها را اضافه می کند، به ویژه، با کمک تگ های متا، همانطور که معمولاً به این تگ گفته می شود، می توانید کدگذاری صفحه را تغییر دهید، کلمات کلیدی، توضیحات سند و موارد دیگر را اضافه کنید. به طوری که مرورگر بفهمد که با رمزگذاری UTF-8 سر و کار دارد (فرمت تبدیل یونیکد، فرمت تبدیل یونیکد) و این خط اضافه می شود.</p><p> <title>نمونه صفحه وب

برچسب بزنید عنوان یک صفحه وب را تعریف می کند، این یکی از عناصر مهمی است که برای حل بسیاری از مشکلات طراحی شده است. در سیستم عامل ویندوز، متن عنوان در گوشه سمت چپ بالای پنجره مرورگر نمایش داده می شود (شکل 4.2).</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>برنج. 4.2. نمای هدر در مرورگر</p> <p>برچسب بزنید <title>الزامی است و باید در کد سند موجود باشد.</p><p>حتماً یک تگ پایانی اضافه کنید</head>برای نشان دادن کامل بودن بلوک عنوان سند.</p><p>بدنه سند <body>برای قرار دادن برچسب ها و محتوای صفحه وب در نظر گرفته شده است.</p><p> <h1>سرتیتر</h1> </p><p>HTML شش سطح مختلف از عناوین متن را ارائه می دهد که نشان دهنده اهمیت نسبی بخش بعد از عنوان است. بله تگ کنید <h1>مهمترین عنوان سطح اول و تگ را نشان می دهد <h6>برای تعیین سرفصل سطح ششم کاربرد دارد و کمترین اهمیت را دارد. به طور پیش فرض، عنوان سطح اول با بزرگترین فونت پررنگ نمایش داده می شود، عنوان سطح بعدی کوچکتر است. برچسب ها <h1>...<h6>عناصر سطح بلوک هستند، همیشه از یک خط جدید شروع می شوند و بعد از آنها عناصر دیگر در خط بعدی ظاهر می شوند. علاوه بر این، یک فضای خالی قبل و بعد از عنوان اضافه می شود.</p><p> <!-- Комментарий --> </p><p>برخی از متن ها را می توان با گذاشتن نظر در مرورگر از نمایش آن پنهان کرد. اگرچه کاربر چنین متنی را نخواهد دید، اما همچنان در سند منتقل می شود، بنابراین با مشاهده کد منبع، می توانید یادداشت های پنهان را پیدا کنید.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">برترین مقالات مرتبط</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/fa/v-kontakte-dobro-pozhalovat-0-vkontakte-moya-stranica-vhod-na.html"> <div class="img_container"><img src="/uploads/2b167d692715137c3ce02b4c3c1380ca.jpg" border="0" alt="صفحه من VKontakte (ورودی به صفحه VK)" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">صفحه من VKontakte (ورودی به صفحه VK)</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/fa/smm-prodvizhenie-v-socialnyh-setyah-prodvizhenie-v-socialnoi.html"> <div class="img_container"><img src="/uploads/19da2b2a3bad96baa4845402986107f5.jpg" border="0" alt="تبلیغ در یک شبکه اجتماعی: نحوه تبلیغ یک گروه VKontakte ارتقاء یک گروه در شبکه های اجتماعی" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">تبلیغ در یک شبکه اجتماعی: نحوه تبلیغ یک گروه VKontakte ارتقاء یک گروه در شبکه های اجتماعی</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/fa/mail-nacionalnaya-voiti-v-moi-mir-voiti-na-moyu-stranicu-v-moi-mir.html"> <div class="img_container"><img src="/uploads/8c4dfa4a4a682db0bce546e8b330786f.jpg" border="0" alt="ملی مایل. وارد دنیای من شو وارد صفحه من در دنیای من شوید" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">ملی مایل. وارد دنیای من شو وارد صفحه من در دنیای من شوید</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">دسته بندی ها:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/fa/category/programs/">برنامه ها</a></li> <li class=""><a href="https://bumotors.ru/fa/category/safety/">امنیت</a></li> <li class=""><a href="https://bumotors.ru/fa/category/windows-10/">ویندوز 10</a></li> <li class=""><a href="https://bumotors.ru/fa/category/iron/">اهن</a></li> <li class=""><a href="https://bumotors.ru/fa/category/windows-8/">ویندوز 8</a></li> <li class=""><a href="https://bumotors.ru/fa/category/vkontakte/">در تماس با</a></li> <li class=""><a href="https://bumotors.ru/fa/category/errors/">اشتباهات</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="" class="vk social-ico"></a> <a href="https://facebook.com/" class="fb social-ico"></a> <a href="https://twitter.com/" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12">© 2022 bumotors.ru. نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی پرتال اطلاعاتی</span> </div> </div> </div> </div> </body> </html>