کد صفحه Yandex را باز کنید. نحوه تغییر کد صفحه در گوگل کروم

در ابتدا ممکن است برخی فکر کنند که این اصلا ابزار ضروری نیست، اما مشاهده کل کد HTML یک سایت برای یافتن عناصر لازم در کد عالی است، اینها می توانند پیوندها، تگ ها، متا تگ ها، ویژگی ها و عناصر دیگر باشند. .

ترکیب کلیدهای میانبر +پنجره جستجو را باز کنید، در مرورگر کروم در بالا سمت راست ظاهر می شود:

شکل 3. جستجو بر اساس کد سایت

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

شکل 4. جستجو بر اساس کد سایت HTML

دستورالعمل 2: نحوه مشاهده و ویرایش کد HTML و CSS یک سایت در مرورگر Google Chrome

اکنون مهمترین بخش، که در آن نشان خواهم داد که چگونه می توانید کد HTML و CSS یک وب سایت را در مرورگر ویرایش کنید. سپس تغییرات را به مرورگر منتقل کنید.

این ابزار مفید همیشه در مرورگر شما در دسترس است با دستورات دیگری که ویرایش سایت را برای شما آسان تر می کند.

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

معلوم می شود که پاسخ بسیار ساده است. و اگر مهارت هایی دارید، می توانید تعداد زیادی از این ویژگی ها را جمع آوری کنید و وب سایت منحصر به فرد خود را در مدت زمان کوتاهی ایجاد کنید.

امروز ما در مورد نحوه باز کردن کد یک صفحه، یک عنصر خاص، و نحوه استفاده از این مهارت به نفع خود صحبت خواهیم کرد.

دانش اولیه کد

سایت من برای مبتدیان در نظر گرفته شده است و ابتدا می خواهم به طور خلاصه در مورد سایت ها و کدها به طور کلی صحبت کنم.

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

به این ترتیب وب سایت های با کیفیت بالا ایجاد می شوند. اگر می خواهی درگیر این موضوع شو و اگر نمی خواهی آن را مطالعه کن، هیچ کس نمی تواند شما را مجبور کند.

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

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

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

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

تنها حدود 150 تگ وجود دارد و هر کدام از آنها وظیفه خاصی را بر عهده دارند: پیوند، خط خطی، پررنگ، رنگ، عنوان و غیره. اگر میل داشته باشید و به زمان آن اهمیتی نمی دهید، درک آنها چندان دشوار نیست.

به لطف دانش این ویژگی ها، می توانید تقریباً هر مشکلی را حل کنید. اما هر توسعه دهنده راه های خود را برای رسیدن به هدف پیدا می کند.

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

کمی بعد یک مثال مشخص را به شما نشان خواهم داد.

مشاهده کد

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

بهترین راه

روشی که در ابتدا توضیح خواهم داد برای مبتدیان کمی پیچیده است، اما به عنوان مقدمه، آن را بخوانید. صفحه را باز کنید و روی دکمه سمت راست ماوس کلیک کنید. "ذخیره به عنوان..." را انتخاب کنید

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

هر چیزی که نیاز دارید اینجاست. هر عنصر اگر این را درک کنید، می توانید به سرعت هر آنچه را که نیاز دارید به دست آورید. اما چنین کاری به طور فزاینده ای غیرممکن می شود. دانلودی وجود ندارد. در صورت ممنوعیت کپی کردن صفحه چه باید کرد؟

این گوگل کروم است

همانطور که قبلاً متوجه شده اید، من اغلب از Google Chrome استفاده می کنم و یادگیری کد شخص دیگری در این مرورگر به آسانی پوست اندازی گلابی است. همانطور که در اصل با هر دیگری. این طرح نه تنها مشابه، بلکه یکسان خواهد بود. صفحه ای را که می خواهیم کد آن را بدانیم باز کرده و در هر نقطه راست کلیک کنید. در پنجره ای که ظاهر می شود، روی "مشاهده کد صفحه" کلیک کنید.

یک برگه کد در یک پنجره جدید باز می شود که درک آن برای یک مبتدی بسیار دشوار است. اما از قبل نگران نباشید.

اگر نیاز به دانستن کد تنها یک عنصر دارید، کافی است با ماوس روی آن حرکت کرده و راست کلیک کنید. یکی دیگر از عملکردهای Chrome را انتخاب کنید: "مشاهده کد عنصر".

به عنوان مثال، ممکن است به نحوه ساخت لوگو با استفاده از یک تصویر یا یک زبان برنامه نویسی علاقه مند باشم؟ پس از همه، شما می توانید یک مربع با استفاده از CSS رسم کنید. بسیاری از کارشناسان توصیه می کنند تا حد امکان اطلاعات را در کد یادداشت کنید. چگونه در سایت های محبوب کار می کنند؟

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

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

موزیلا فایرفاکس

اگر دوست دارید در ماستیک کار کنید، همه چیز دقیقاً یکسان خواهد بود. صفحه را باز کنید و روی دکمه سمت راست ماوس کلیک کنید. اگر می‌خواهید کل کد را ببینید، «کد منبع صفحه» را انتخاب کنید.

هنگامی که ماوس را روی یک عنصر قرار می دهید، می توانید کد آن را باز کنید.

در اینجا داده ها در پایین صفحه نمایش داده می شوند، اما در غیر این صورت همه چیز دقیقاً یکسان است.

مرورگر Yandex

در مرورگر Yandex، همه چیز دقیقاً مانند دو گزینه قبلی است، صفحه را باز کنید، راست کلیک کنید، کد صفحه را ببینید.

اگر بخواهیم دقیقاً کد آن عنصر را پیدا کنیم، مکان نما را روی یک عنصر قرار می دهیم.

همه چیز در اینجا دقیقاً مانند کروم نمایش داده می شود.

اپرا

و در نهایت اپرا.

به هر حال، ممکن است متوجه شده باشید که نیازی به استفاده از ماوس نیست. یک میانبر صفحه کلید سریع برای باز کردن کد وجود دارد و برای همه مرورگرها یکسان است: CTRL+U.

برای عناصر: Ctrl+Shift+C.

این چیزی است که نتیجه به نظر می رسد.

این برای مبتدیان جالب خواهد بود

حالا ببینید همه چیز چگونه کار می کند. شما یک سایت پیدا می کنید و واقعاً برخی از عناصر را دوست دارید. مثلا این یکی شما قبلاً می دانید که چگونه کد عنصر را باز کنید.

حالا آن را کپی کنید.

من استفاده می کنم، این کد را در یک فایل html جدید، در تگ body (body در انگلیسی) قرار دهید.

حالا بیایید ببینیم که چگونه همه چیز در مرورگر به نظر می رسد.

آماده. برای اینکه متن روی لبه ها تراز شود و رنگ مایل به سبز پیدا کند، باید css را به این سند وصل کنید و کد دیگری را از سایتی که این یکی را از آن کپی کردیم کپی کنید.

من الان این کار را نمی کنم این به زمان بیشتری نیاز دارد: هم مال من و هم مال شما. فکر می کنم که تمام جزئیات را در انتشارات آینده خود شرح خواهم داد. در خبرنامه مشترک شوید و اولین کسی باشید که از ظاهر شدن مقاله مطلع می شوید.

اگر نمی توانید تحمل کنید، اما می خواهید در مورد html و css بیشتر بیاموزید، به طور سنتی می توانم دوره های آموزشی رایگان را به شما توصیه کنم.

در اینجا 33 درس وجود دارد که به شما امکان می دهد بر html مسلط شوید - "دوره رایگان HTML" .

و در اینجا اطلاعات کاملی در مورد css وجود دارد - "دوره رایگان در CSS (45 درس ویدئویی!)" .

حالا شما کمی بیشتر می دانید. برای شما آرزوی موفقیت در تلاش دارم. دوباره می بینمت!

هر کاربر اینترنتی سایت های مورد علاقه خود را دارد که زمان زیادی را در آنها صرف می کند. و فقط تنبل ها فکر نمی کردند که ببینند چگونه ایجاد شده و از چه چیزی تشکیل شده است. پاسخ به همه این سؤالات غیرممکن است، زیرا راه های زیادی برای ایجاد یک وب سایت وجود دارد، اما نگاه کردن به دستورات و کدهای تشکیل دهنده آن امکان پذیر است و در دسترس همگان است.

سوال دیگر این است که آیا شخصی که در برنامه نویسی فعالیت نمی کند، علائم تشکیل دهنده کد را درک می کند یا خیر؟ اما از مثال‌هایی که در زیر آورده می‌شود، هر کاربر Google Chrome می‌تواند عناصر تکی سایت‌ها را مشاهده کند.

نحوه مشاهده کد منبع یک صفحه html در مرورگر گوگل

برای اینکه بتوانید کد صفحه را در کروم مشاهده کنید، باید به سایت مورد نظر خود بروید و مراحل زیر را انجام دهید:

این دو مورد از نظر عملکرد و اطلاعات برای کاربر، برنامه نویس یا هکر متفاوت هستند.

تفاوت بین کد صفحه و فقط دستور "View Code" چیست؟

با تجزیه و تحلیل هر یک از این توابع، می توانید یک مقاله جداگانه بنویسید. برای برنامه نویسان، این تفاوت قابل توجه است و آنها می دانند که در چه مواردی باید از "View Code" و در کدام "View Page Code" در مرورگر Google Chrome استفاده کرد.

اما برای توضیح برای کاربر معمولی، این توابع را می توان به اهداف زیر تقسیم کرد:

1. "مشاهده کد صفحه" فقط برای دیدن ترکیب اصلی صفحه ضروری است. اساساً این ساختار سایت است (بدون مدل های اضافی به شکل فایل های CSS و سایر موارد اضافه که در پوشه سازنده سایت باقی می مانند). این ساختار برای ایجاد صفحه خود با "کپی پیست" مناسب نیست، اما به شما این امکان را می دهد که ببینید برنامه نویس دقیقا چه کاری انجام داده است و به چه ترتیبی اطمینان حاصل کنید که سایت در مرورگر گوگل کروم دارای چنین طراحی خارجی است.
2. "مشاهده کد" یک ساختار دقیق را نشان می دهد و تمام مناطقی را که در صفحه تحت تأثیر قرار می گیرند برجسته می کند. اگر ماوس را روی کد لیست خاصی نگه دارید، عنصر موجود در سایتی که به آن تعلق دارد برجسته می شود.
3. مشاهده کد صفحه در یک مرورگر جداگانه بدون امکان ویرایش آن باز می شود. یعنی فقط برای کپی و خواندن کد سایت مناسب است. اما این عملکرد کمتر مفید نیست.
4. "مشاهده کد" قابل تغییر است و می توانید هر عنصر را به روشی که برای شما مناسب است ویرایش کنید. البته، همه این تغییرات تا زمانی که صفحه به‌روزرسانی نشود، «زنده می‌شوند»، اما گاهی اوقات رفتن از طریق آن تنظیمات و درک اینکه چرا این یا آن مقدار مورد نیاز است و اگر آن را تغییر دهید چه اتفاقی می‌افتد، سرگرم کننده است. نباید تصور کنید که با چنین اقداماتی به خود یا سایت آسیب می رسانید - این تغییرات فقط بر روی کد Google Chrome شما تأثیر می گذارد و آنلاین نمی شود.

ما در حال بررسی این سوال هستیم که چگونه کد عنصر را مشاهده کنیم

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

عملکرد کد عنصر بسیار گسترده است، بنابراین یکی از کلمات را در وب سایت مرورگر گوگل کروم انتخاب می کنیم. ما می خواستیم در نظر بگیریم که چه کلمات کلیدی (در کد به عنوان "کلمات کلیدی" نوشته خواهد شد) برای سایت ما استفاده شده است. برای این کار الگوریتم زیر را اجرا می کنیم:

راه های دیگر استفاده از این ویژگی در مرورگر گوگل کروم

به طور کلی، در ادامه پاسخ به این سوال که چگونه به کد یک عنصر نگاه کنیم و چرا به آن نیاز است، باید عملکردهای آن را فهرست کنید. یعنی به لطف امکان مشاهده کد یک عنصر از هر سایت در مرورگر گوگل کروم، می توانیم:

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

این به هیچ وجه یک لیست محدود نیست. اما لازم به یادآوری است که بدون دانش خاص، "خواندن" کد یک صفحه Google Chrome تقریبا غیرممکن است و داده های دریافتی عملاً مورد نیاز یک کاربر عادی نیست.

مورد "مشاهده کد عنصر" کار نمی کند

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

• نمایه کاربر خراب است.
• وجود بدافزار در رایانه؛
• مسدود کردن توسط یک پسوند خاص برای افزایش عملکرد (حتی این ممکن است رخ دهد).

تعمیر نمایه کاربر آسیب دیده

برای ایجاد یک نمایه جدید، باید نمایه قدیمی را از رایانه خود حذف کنید. برای این کار موارد زیر را انجام می دهیم:

1. Google Chrome را ببندید و مرورگر Windows Explorer داخلی را راه اندازی کنید.
2. دستور زیر را در نوار آدرس وارد کنید: %LOCALAPPDATA%\Google\Chrome\User Data\.
3. وقتی دایرکتوری باز شد، به دنبال پوشه "Default" بگردید و "Backup" را به نام آن اضافه کنید تا به این صورت باشد: "Backup Default".
4. اکنون پس از راه اندازی مجدد مرورگر کروم، پروفایل جدیدی ایجاد می شود.

ما بدافزار یا بقایای آن را حذف می کنیم

اگر نمایه جدید به ما امکان دسترسی به کد عنصر صفحه را نمی دهد و همچنان خطا را می بینیم، باید کارهای زیر را انجام دهیم:

1. خط فرمان ویندوز ("Run") را باز کنید و دستور "cmd" را در آنجا وارد کنید.
2. دستور زیر را در خط وارد کنید: RD /S /Q "%WinDir%\System32\GroupPolicyUsers".
3. پس از تایید عمل، این را وارد کنید: RD /S /Q "%WinDir%\System32\GroupPolicy".
4. اکنون "gpupdate /force" (بدون نقل قول).

اگر همه چیز به درستی انجام شد، پس از راه اندازی مجدد رایانه، Google Chrome کد عناصر را باز می کند و مرورگر به طور معمول کار می کند.