با جستجو در سایت های بی شماری در اینترنت، می توانید مواردی را که ما بسیار دوست داریم پیدا کنید. بلافاصله تعدادی سوال مطرح می شود. آیا سایت با استفاده از کدهای خودنویس یا نوعی CMS ساخته شده است؟ سبک های CSS او چیست؟ متا تگ های آن چیست؟ و غیره.
ابزارهای زیادی وجود دارد که می توان از آنها برای استخراج اطلاعات مربوط به کد صفحه یک سایت استفاده کرد. اما همیشه دکمه سمت راست ماوس را در دست داریم. ما با استفاده از مثال سایت من از آن استفاده خواهیم کرد.
چگونه کد صفحه را مشاهده کنیم؟
برای مشاهده کد منبع یک صفحه وب سایت، باید مکان نما ماوس را روی هر قسمت از صفحه وب (به جز تصاویر و پیوندها) حرکت دهید. پس از آن، روی دکمه سمت راست ماوس کلیک کنید. پنجره ای با چندین گزینه در مقابل ما باز می شود (در مرورگرهای مختلف ممکن است کمی متفاوت باشند). برای مثال، در مرورگر گوگل کروم، این دستورات هستند:
- بازگشت؛
- رو به جلو؛
- بارگذاری مجدد؛
- ذخیره به عنوان؛
- مهر؛
- ترجمه به روسی؛
- نمایش کد صفحه;
- مشاهده کد
باید روی آن کلیک کنیم نمایش کد صفحهو کد html صفحه سایت مقابل ما باز می شود.
مشاهده کد صفحه: به دنبال چه چیزی باشیم؟
بنابراین، کد صفحه Html یک لیست شماره گذاری شده از خطوط است که هر یک حاوی اطلاعاتی در مورد نحوه ساخت این سایت است. برای یادگیری سریع درک این تعداد زیاد علائم و کاراکترهای خاص، باید بین قسمت های مختلف کد تمایز قائل شوید.
به عنوان مثال، خطوط کد موجود در داخل تگ head حاوی اطلاعاتی برای موتورهای جستجو و مدیران وب سایت است. در سایت نمایش داده نمی شوند. در اینجا می توانید ببینید که این صفحه برای چه کلمات کلیدی تبلیغ می شود، عنوان و توضیحات آن چگونه نوشته شده است. همچنین می توانید پیوندی را در اینجا بیابید که با کلیک بر روی آن با خانواده فونت های گوگل استفاده شده در سایت آشنا می شویم.
اگر سایت بر روی سیستم مدیریت محتوا وردپرس یا جوملا ساخته شده باشد، در اینجا نیز قابل مشاهده خواهد بود. به عنوان مثال، این قسمت اطلاعاتی در مورد یک قالب وردپرس یا یک قالب سایت جوملا نمایش می دهد. می توانید با خواندن محتوای پیوندهای برجسته شده با رنگ آبی آن را مشاهده کنید. یک لینک قالب وب سایت را نشان می دهد.
مثلا:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
سبک های فونت CSS صفحه را مشاهده خواهیم کرد. در این مورد از فونت استفاده می شود. این را می توان در اینجا مشاهده کرد - font-family: "Source Sans Pro".
این سایت با استفاده از افزونه Yoast SEO بهینه شده است. این را می توان از این بخش نظری کد مشاهده کرد:
این سایت با افزونه Yoast SEO نسخه 3.4.2 بهینه شده است — https://yoast.com/wordpress/plugins/seo/
تمام اطلاعات داخل تگ بدنه توسط مرورگر بر روی صفحه نمایشگر نمایش داده می شود. در اینجا کد html صفحه را می بینیم و در پایین آن کد اسکریپت Yandex Metrics قرار دارد. این در یک برچسب نظر داده شده با متن پیچیده شده است:
/Yandex.Metrika counter
جمع بندی
با تجزیه و تحلیل نسبتا سطحی کد صفحه اصلی سایت، می توان نتیجه گرفت که با کمک چه ابزارهایی این صفحه ساخته شده است. روی آن دیدیم:
- CMS WordPress;
- فونت گوگل Source Sans Pro;
- قالب وردپرس - سیدنی;
- پلاگین های Yoast
- مقابله با معیارهای Yandex.
حال اصل تجزیه و تحلیل کدهای html یک صفحه سایت کاملاً مشخص است. لزومی ندارد که صفحه مورد بررسی در مرورگر باز بماند. با استفاده از کلیدهای ترکیبی ctrl + a، ctrl + c، ctrl + v می‌توانید کد صفحه را در رایانه خود ذخیره کنید. آن را در هر ویرایشگر متنی (ترجیحاً Notepad++) قرار دهید و با پسوند html ذخیره کنید. بنابراین، در هر زمان می توانید آن را عمیق تر مطالعه کنید و اطلاعات مفیدتری برای خود بیابید.
بنابراین، امروز ما به چندین ابزار مفید برای جادوگر وب نگاه خواهیم کرد که زندگی را هنگام طراحی سایت آسان‌تر می‌کنند. بیایید با کنسول وب مستر در گوگل کروم شروع کنیم. و بیایید به سوالاتی بپردازیم که اغلب از مدیر وب سایت در طول طرح بندی سایت ایجاد می شود.
برای دسترسی به کنسول، سایت خود را در Google Chrome باز کنید، در هر نقطه از صفحه وب کلیک راست کنید، و "View Page Code" را از منوی کشویی زمینه یا روی یک عنصر خاص برای کاوش با انتخاب "View Code" انتخاب کنید. عنصر".
در بالا چندین برگه فهرست شده خواهید داشت. امروز در مورد تب "Elements" صحبت خواهیم کرد , که عناصر یک صفحه وب را با برجسته کردن برچسب ها، ویژگی ها، تودرتوی عناصر، نمایش سلسله مراتب عنصر در درخت DOM (اشاره در پایین، از والد ریشه تا فعلی مورد بررسی)، قابلیت ویرایش ارائه می کند. عناصر، لیستی از خواص آنها، جستجو بر اساس عناصر را در نظر بگیرید و همچنین بیایید با مشاهده سبک های css مرتبط با عناصر و غیره آشنا شویم.
چگونه می توان تمام سبک هایی را که با یک عنصر خاص مرتبط هستند مشاهده کرد؟ کدام یک در حال حاضر در حال استفاده است؟ در چه فایل هایی هستند؟
بنابراین، هیچ چیز ساده تر نیست! مرورگر گوگل کروم را باز می کنیم، سایت خود را باز می کنیم - منبع سوالات، روی عنصر مورد نظر در صورتی که در زمینه صفحه قابل مشاهده است کلیک راست کرده و مورد "نمایش کد عنصر" را در منوی زمینه انتخاب کنید.
در پایین، یک کنسول با یک برگه برجسته در سمت چپ "Elements"و تمام سبک های مرتبط با عنصر سمت راست داریم، که در آن: سبک های محاسبه شده- اینها سبک های کلی "خلاصه" هستند که از قوانین css و تنظیمات مرورگر کاربر (محیط او) به عنصر اختصاص داده شده اند و در همان زمان برگه جمع می شود.
اما ما به برگه "Styles" علاقه مندیم که در زیر آن مستقر شده است، که به نوبه خود تمام سبک های اختصاص داده شده به عنصر و همچنین فایل هایی را که در آنها این قوانین برای این عنصر توسط نوع، شناسه، کلاس، نام، ویژگی، مشخص شده است، فهرست می کند. صفت و غیره در همان زمان، اگر قانون css خط خورده باشد، آنگاه تعریف قبلی/بعدی دوباره انجام می‌شود (که ردیابی کدام یک از قوانین css را آسان می‌کند و در این مورد روی عنصر اعمال می‌شود).
در زیر کنسول خطی وجود دارد که عنصر را در سلسله مراتب سند نشان می دهد و به راحتی به شما امکان می دهد کل لیست عناصر والد را از ریشه تا عنصر انتخاب شده مشاهده کنید. چیزی شبیه پودر سوخاری.
تگ Html در زمینه صفحه قابل مشاهده نیست؟ یا باید همه تگ ها را پیدا کنید، به عنوان مثال، بر اساس یک کلاس خاص، نام، ویژگی، نوع؟
سایت را در Google Chrome باز کنید، کلیک راست کنید، منوی زمینه را فراخوانی کنید، انتخاب کنید « مشاهده کد صفحه » . کلید ترکیبی "CTRL + F" را همزمان فشار دهید، عبارت مورد نیاز خود را وارد کنید ( مثلا: کلاس = "لایه گذاری") و در لیست نتایج یافت شده حرکت کنید و همزمان تمام سبک های مرتبط با عناصر مورد نظر را در سمت راست صفحه مشاهده کنید.
نحوه مشاهده کد html عنصر (عناصر) بارگذاری شده به صورت پویا (به عنوان مثال: توسط Ajax)
در حال انتظار برای بارگیری صفحه در Google Chrome. ما اقدامات لازم را برای کار آژاکس انجام می دهیم. ما روی داده های بارگیری شده کلیک راست می کنیم، "مشاهده کد عنصر" را در منوی زمینه انتخاب می کنیم، نتیجه را در کنسول در برگه "Elements" در سمت چپ بررسی می کنیم.
تغییرات سبک css را در زمان واقعی مشاهده کنید
به هر حال، در صورت لزوم، مشاهده سبک هایی که به یک عنصر در حال پرواز اختصاص داده می شود نیز راحت است، به عنوان مثال، هنگام پیمایش در گالری و سایر رویدادهای تایمر. تمام سبک های اختصاص داده شده از طریق جاوا اسکریپت در زمان واقعی در ویژگی نمایش داده می شود سبکعنصر انتخاب شده در پنجره تب Elements.
نمای تعاملی تاثیر قوانین css در ارائه تگ های html
Google Chrome یک کنسول تعاملی برای سبک های css ارائه می دهد. و این بدان معنی است که شما نه تنها می توانید ببینید که کدام سبک ها به عنصر اعمال می شود، بلکه نشانگر ماوس را روی یک ویژگی css حرکت دهید، آن را با یک علامت بازشو در سمت راست فعال کنید، یا با برداشتن علامت پرچم و مشاهده آن را غیرفعال کنید. نتیجه حاصل در صفحه
ما ساختار ارائه عناصر html را در لحظه تغییر می دهیم (درست در مرورگر)
بنابراین، ما قبلاً یاد گرفته‌ایم که چگونه ساختار یک سند وب را در Google Chrome کاوش کنیم، اکنون اجازه دهید نگاهی سریع به ویرایش عناصر در پرواز بیندازیم. ما به هر شکلی که برایمان مناسب باشد به سراغ کنسول می رویم. ما عنصر مورد نظر را در برگه "Elements" پیدا می کنیم، روی آن کلیک راست کرده و از این طریق منوی زمینه پاپ آپ را فراخوانی می کنیم:
- افزودن ویژگی- یک ویژگی به عنصر مشخص شده اضافه می کند. به محض فعال شدن مکان نما، شروع به تنظیم ویژگی مورد نظر می کنیم. مثلا: بیایید name="itemImage" را بنویسیم که بلافاصله به عنصر ما اضافه می شود.
- ویرایش ویژگی- اگر روی یک ویژگی یک عنصر کلیک راست کنید، مورد در دسترس قرار می گیرد ویرایش کنیدویژگی های. کلیک کنید، ویرایش کنید.
مثال استفاده:ما رمز عبور ذخیره شده در زیر ستاره در Google Chrome را فراموش کرده ایم (اگر رمز عبور در این مرورگر ذخیره شده باشد). بر روی عنصر دارای رمز عبور راست کلیک کنید، روی "View Element Code" کلیک کنید. , در کنسول سمت چپ برگه عناصرروی ویژگی type="password" راست کلیک کنید، روی آن کلیک چپ کنید ویرایش کنیدویژگی های،تغییر ویژگی نوع = "کلمه عبور"بر روی نوع = "متن"، و در اینجا ما از قبل همان رمز عبور را به صورت متن به جای ستاره داریم.
- ویرایش کنیدhtml- روی یک عنصر در کنسول کلیک راست کنید عناصر، انتخاب کنید ویرایش کنیدhtmlکد را به دلخواه تغییر دهید
- کپی 🀄مانندHTML- بخشی از HTML را که برای تحقیقات بیشتر نیاز داریم، مثلاً در یک دفترچه یادداشت، یا برای اهداف دیگری که دقیقاً باید همان طرح بندی را اعمال کنیم، کپی کنید. ما در زمان صرفه جویی می کنیم.
- کپی 🀄XPATH- نمایش XPATH ساختار را از ریشه عنصر والد به عنصر انتخاب شده کپی می کند.
- حذفگره- اگر لازم است عنصر انتخاب شده فعلی و همه فرزندان آن را از متن صفحه وب حذف کنید و نتیجه را مشاهده کنید.
- کلمهبسته بندی کردن- نمای صفحه وب را در زمینه کنسول نمایش می دهد عناصرخواندنی تر
در مقالات بعدی به بررسی ابزارهای وب مستر می پردازیم و به طور خاص با بقیه تب های ابزار وب مستر در گوگل کرومو همچنین اشکال زدایی خطاهای جاوا اسکریپت را با استفاده از مرورگرهای مختلف در نظر بگیرید
اندازه، رنگ برخی از عناصر مهم وبلاگ، مانند عنوان وبلاگ یا پست، برچسب بیشتر و موارد مشابه. من کد لازم را به صورت دستی جستجو کردم و با دامنه آزمایشی آزمایش کردم که بعداً مقاله بر اساس آن نوشته شد.
و اخیراً تغییر رنگ پیوندها طول کشید. با جمع آوری یک سری ادبیات در مورد این موضوع، به یک چیز ساده پی بردم: هرکسی از الگوهای خودش مثال می‌زند، اما همه ما قالب‌های متفاوتی داریم، و اگر کد مثال حداقل کمی شبیه باشد، خوب است: ناله نکن، بنابراین من آن را با چرخاندن به هر حال پیدا خواهم کرد - با استفاده از روش poke.
شماره با کد پیوند عبور نکرد. همه به مسیرهای کاملاً متفاوتی اشاره کردند. من تعجب کردم که آیا ابزار ساده و دقیقی وجود دارد، چگونه کد html مناسب را در هر سایتی پیدا کنیم.بسیاری از وبلاگ نویسان، حتی با تجربه، تغییر اندکی قالب را دشوار می دانند. جای نگرانی وجود ندارد، زیرا هر کسی علایق و اهداف خود را برای ایجاد یک سایت دارد.
اگر می خواهید تغییرات کوچکی در قالب ایجاد کنید لایک کنید تغییر هر عنوان، عنوان مقالات و سرفصل ها، رنگ و اندازه فونت ها و پیوندها،معمولاً برای یادگیری یک اصل ساده کافی است که در این مقاله به آن پرداخته شده است. اما موارد پیچیده ای نیز وجود دارد که به مطالعه عمیق html و css نیاز دارد یا به کمک یک متخصص.
یک روز، یکی از دوستان از من خواست که محل تغییر رنگ پانل عنوان را در قالب خود پیدا کنم. یک موضوع را در یک زیر دامنه آزمایشی آپلود کرد. تنظیمات این عنصر در style.css ذخیره نمی‌شود، بلکه در فایل دیگری ذخیره می‌شود، بنابراین شخصی نمی‌تواند آن را پیدا کند.
نحوه یافتن و تغییر کدهای html و css سایت
اگر مقالات طولانی را دوست ندارید، این برای شماست. در پایان مقالهیک فیلم آموزشی که نشان می دهد چگونه می توانید کد html سایت را با استفاده از Notepad ++ مشاهده کنید و با استفاده از مثالی از نحوه تغییر رنگ فونت، در طراحی هر قالبی تغییراتی ایجاد کنید. ظرافت های دیگری در برخورد با وبلاگ در ویدیو وجود دارد. و برای کسانی که به متن نزدیک تر و قابل درک تر هستند، در زیر تجزیه و تحلیل دقیق موضوع با اسکرین شات ارائه شده است.
httpv://youtu.be/uIlVvwCt2ho
اصطلاحات و مفاهیم
بهتر است عنوان مقاله را عنوان کنیم " نحوه پیدا کردن کد css"، اما من تصمیم گرفتم در نام "اشتباه" توقف کنم، زیرا اساسا پاسخ این سوال در html جستجو می شود. CSS و HTML چیزهای بسیار متفاوتی هستند، حتی اگر دو بخش از یک سیستم باشند. مقالات فنی زیادی در اینترنت وجود دارد، برای ما کافی است که در اینجا بفهمیم که:
- HTML- مسئول ساختار سایت (چه چیزی به دنبال چه، به چه ترتیب و غیره). این پایه ای است که سایت بر روی آن ساخته شده است. اگر آن را با یک خانه مقایسه کنیم، پس این چیدمان آن است، چیدمان اتاق ها.
- css- مسئول طراحی (چه فونت ها، اندازه ها، رنگ ها و غیره). این سبک کلی خانه و سبک اتاق های فردی آن است: کاغذ دیواری، لامپ، پرده، مبلمان. بنابراین، سند، که تجویز می کند کدهای css، به نام "style sheet"
و اگر تعجب کردید که چگونه رنگ هدر سایت، اندازه فونت در متون یا رنگ عناوین در نوار کناری را تغییر دهید، پس باید همه اینها را در شیوه نامه CSS جستجو کنید. این تنها چیزی است که برای شروع به درک آن ارزش دارد تا خودتان تغییراتی در کد ایجاد کنید.
من دوست دارم پیچیده را به ساده تبدیل کنم. یادم هست خیلی وقت پیش، وقتی اولین ماشینم را داشتم، خیلی قدیمی بود، سیم‌کشی‌ها پوسیده بود، فیوزها اغلب می‌سوختند و هر بار که آن را به سمت ایستگاه خدمات می‌کشیدم. تصور کنید با وجود اینکه یک جایگزین مستقل، همانطور که معلوم شد، یک پنی هزینه دارد، چقدر پول دور ریخته شد.
یک بار نگاه کردم که استاد دقیقا چه کار می کند. من هنوز نمی دانم فیوز چگونه کار می کند. اما من می دانم کجا آن را تغییر دهم). من خودم موتور را تعمیر نمی کنم و تعویض فیوز کار سختی نیست. در مورد وب سایت ها هم همینطور است.
اگر نمی خواهید یک برنامه نویس شوید، دیگر نیازی به درک عمیق برنامه نویسی نیست. کافی است به وضوح بفهمیم که چه چیزی برای چه چیزی در نظر گرفته شده است، کجا باید آن را جستجو کرد و چگونه آن را تغییر داد. بهتر است کاری را که خودتان می توانید انجام دهید تغییر دهید و بقیه کارها را به متخصصان بسپارید. مقاله درباره پیوند مفیدی در این زمینه دارد.
آیا باید در همه چیز متخصص باشید؟
در سئو بلاگ ها اغلب بحث هایی در مورد اینکه آیا یک مبتدی باید عمیقاً html را درک کند یا حتی بهتر است یاد بگیرد که چگونه سایت ها را به تنهایی بنویسد تا همه چیز منحصر به فرد باشد، وجود دارد. و اینجا کسی نزدیک تر است من کمی بیشتر علاقه مند هستم، بنابراین اکنون علاوه بر این با ولادیمیر تحصیل می کنم. در نوامبر سال جاری، ولادیمیر وبلاگ خود را افتتاح کرد. وبلاگ او بر اساس ساده ترین قالب رایگان ساخته شده است، او فقط کمی آن را برای خودش تغییر داده است.
این وبلاگ پس از 10 روز وجود، در رتبه بندی تمامی سایت های Runet با بازدید حدود 1.5 هزار نفر در روز، رتبه 104 را به خود اختصاص داد. به مدت 10 روز. پس قضیه چیه؟ ولادیمیر به خوبی به html مسلط است، او می تواند یک قالب منحصر به فرد برای خود سفارش دهد و بخرد. در اینجا شما باید آن را درک کنید راز در الگوها نیست، بلکه در مفید بودن اطلاعات است.
کد html کجا پنهان شده است؟
با عرض پوزش برای انحراف، بیایید به کدهای خود برگردیم). فرض کنید می خواهید رنگ فونت عنوان وبلاگ را تغییر دهید. نمونه سایت تست من را در نظر خواهیم گرفت.
- باز کردن سایت در مرورگر گوگل کروم (اگر هنوز از آن استفاده نکرده اید، آن را نصب کنید - برای کار با وب سایت ها به خوبی تیز شده است، ابزارهای داخلی زیادی دارد).
- نشانگر ماوس را روی عنصری که می خواهید تغییر دهید حرکت دهید . در این مورد، عنوان وبلاگ. با ماوس "راست" روی آن کلیک می کنیم و در پنجره ظاهر شده VIEW ELEMENT CODE را انتخاب می کنیم.
مهم: با مشاهده کد صفحه اشتباه نگیرید! ما اکنون به کل صفحه نیاز نداریم، فقط به یک عنصر جداگانه نیاز داریم.
ما روی آن کلیک می کنیم - یک پنجره مشاهده کد در پایین مرورگر ظاهر می شود:
خط کدی که در حال تغییر هستیم با رنگ قرمز مشخص شده است.
اما ناحیه ای که با رنگ آبی مشخص شده است حاوی چیزی است که ما به دنبال آن هستیم. اینجاست که می‌توانید خط کد دقیق (نه تقریبی) مربوط به فونت، رنگ، اندازه، برجسته‌سازی و موارد دیگر را پیدا کنید. به این ترتیب می توانید هر کدی از هر عنصر هر قالب را پیدا کنید.
خط مورد نظر را در بلوک با رنگ آبی مشخص می کنیم. در سمت راست یک نوار لغزنده وجود دارد که می توانید از طریق آن حرکت کنید و خط مورد نظر را پیدا کنید.
اصل کلی، جایی که چه چیزی جستجو می شود:
نام قلم - در خط FONT FAMILY
اندازه قلم - در خط FONT SIZE
رنگ فونت - در خط COLOR
در اینجا سه خط اصلی وجود دارد که نام، اندازه و رنگ فونت هر عنصر را تغییر می دهد. در سمت راست، خط سبک css موقعیت خط را در سند نشان می دهد. اگر نیاز به تغییر عنصر دیگری دارید (مثلاً باید بدانید که خط در کجا قرار دارد، که در آن می توانید رنگ نوار منو یا رنگ پیوندها را تغییر دهید)، همه چیز دقیقاً به همان روش انجام می شود. .
توجه:
خطی که ما کپی خواهیم کرد با رنگ قرمز در شکل مشخص شده است.
تا بعداً آن را در شیوه نامه پیدا کنید.
4. خط را کپی کنید. از آنجایی که در این مثال می خواهیم رنگ نام سایت را تغییر دهیم، خط برجسته شده در تصویر دوم را با یک مستطیل قرمز کپی می کنم. در قالب من، او مسئول تغییر رنگ نام سایت است:
#header h1 a, #header h1 a:visited (
خط مورد نظر را در فایل «style.css)» پیدا می کنیم. این قبلا در ادمین انجام شده است. من از شما می‌خواهم تا زمانی که اطمینان و درک کامل وجود دارد، تمام آزمایش‌ها را روی یک زیر دامنه آزمایشی انجام دهید تا حذف شود.
بنابراین، به پنل مدیریت بروید: CONSOLE - APPEARANCE - EDITOR. در نوار کناری سمت راست، فایل STYLE TABLE (STYLE.CSS) را پیدا می کنیم، آن را باز کنید.
اکنون نوار جستجو را با کلیدهای CTRL + F باز می کنیم: یک پنجره خط خالی در پنجره بالا ظاهر می شود. خطی را که در مرحله 4 کپی کردید در آن جایگذاری کنید.
و خواهید دید که چگونه این خط در استایل شیت برجسته شده است (در شکل - به رنگ نارنجی):
ما تغییری در عنصر ایجاد می کنیم. در مورد ما، ما رنگ فونت را تغییر می دهیم، بنابراین در خط COLOR مقدار دیگری را جایگزین می کنیم - رنگی که می خواهیم. در مثال، رنگ سیاه است، معنای آن این است:
شما می توانید یک رنگ را در هر سرویس پالت رنگ وب انتخاب کنید: در موتور جستجو "Web Color Palette" را تایپ کنید و رنگ مورد نظر خود را انتخاب کنید. یک رنگ را انتخاب می کنیم، مقدار دیجیتال آن را کپی می کنیم و با دقت آن را جایگزین رنگ قدیمی می کنیم. سپس روی UPDATE FILE کلیک کنید و بروید ببینید چه اتفاقی افتاده است.
اگر تغییرات نمایش داده نشد، برای یک ساعت گذشته و دوباره به صفحه بروید - این بار همه چیز باید نمایش داده شود.
این برای مدت طولانی توضیح داده شده است، اما در عمل همه چیز به سرعت انجام می شود، به خصوص زمانی که یک مهارت اولیه ظاهر می شود.
با جزئیات بیشتر، نحوه تغییر عناصر خاص:
این همه برای امروز است، من دیگر شما را با کدها شکنجه نمی دهم. امیدوارم اکنون شما خودتان بتوانید به راحتی هر عنصر کد html یا بهتر است بگوییم کد css را پیدا کرده و تغییر دهید - بله، کارشناسان من را برای ساده سازی می بخشند. و اگر متوجه نشدید، به هر حال از صفحه دیدن کنید. وقت خود را با بیهودگی تلف نکنید.
پیشنهاد می کنم ویدیویی از آرتم آبراموویچ را در مورد نحوه جستجو و یافتن هر کلمه یا عنصر در هر تم / قالب، برای هر موتور (وردپرس، جوملا و غیره) تماشا کنید و آن را با آنچه نیاز دارید جایگزین کنید:
لطفا اگر دوست داشتید به اشتراک بگذارید:
همچنین ممکن است برای شما جالب باشد که بدانید:
کتاب جدیدی با عنوان «بازاریابی محتوای رسانه‌های اجتماعی: چگونه وارد ذهن مشترکان شویم و آنها را عاشق برند خود کنیم» منتشر کرده‌ایم.
کد منبع یک سایت مجموعه ای از نشانه گذاری HTML، سبک های CSS و اسکریپت های جاوا اسکریپت است که مرورگر از وب سرور دریافت می کند.
ویدیوهای بیشتر در کانال ما - بازاریابی اینترنتی را با SEMANTICA یاد بگیرید
می توان آن را به مجموعه دستوراتی که فرمانده به سربازان می دهد تشبیه کرد. تصور کنید که مخاطب رئیس را نمی بیند یا نمی شنود. از دیدگاه آنها، ارتش به طور مستقل اقداماتی را انجام می دهد. در مورد ما، فرمانده مرورگر است، دستورات کد منبع هستند و سربازان در حال راهپیمایی نتیجه نهایی هستند.
سایت بر روی یک وب سرور ذخیره می شود که به درخواست کاربر صفحه را ارسال می کند. یک درخواست عبارت است از تایپ یک URL در نوار آدرس، کلیک کردن روی پیوند یا کلیک کردن روی دکمه ارسال در یک فرم. فرقی نمی کند صفحات وب به چه زبانی نوشته شده باشند، چه بخشی از نرم افزار را شامل شوند. نتیجه نهایی هر الگوریتم سمت سرور، مجموعه ای از تگ ها و متن های html است.
کد منبع صفحه مجموعه ای از داده ها است که شامل:
- نشانه گذاری html
- استایل شیت یا پیوند فایل ;
- برنامه های نوشته شده با جاوا اسکریپت یا پیوندهایی به فایل ها با کد.
این سه بخش توسط مرورگر مدیریت می شود. برای سرور، این فقط متنی است که باید در پاسخ به درخواست ارسال شود.
چرا ممکن است نیاز به مطالعه کد منبع داشته باشیم
هر چیزی را که می‌بینیم، می‌توانیم برای حل مشکلات خاصی که در جریان کار با سایت به وجود می‌آیند، تجزیه و تحلیل و اعمال کنیم، مخصوصاً هنگام بهینه‌سازی آن. با مشاهده کد منبع، می توانیم:
- برای تجزیه و تحلیل متا تگ های سایت خود یا دیگران را ببینید.
- وجود یا عدم وجود عناصر خاص را در سایت مشاهده کنید: شمارنده ها، کدهای شناسایی در سیستم های مختلف، اسکریپت های خاص و موارد دیگر.
- پارامترهای عناصر را بیابید: اندازه، رنگ، فونت.
- مسیر عکس ها و سایر عناصر را در صفحه پیدا کنید.
- پیوندهای صفحه را بررسی کنید.
- مشکلات کدهایی را پیدا کنید که در روند بهینه سازی سایت اختلال ایجاد می کنند: سبک هایی که به فایل های جداگانه منتقل نشده اند، اسکریپت ها، کدهای نامعتبر.
اینها ویژگی های اصلی هستند، اما در واقع، با خواندن کد، می توانید اطلاعات بیشتری در مورد صفحه کسب کنید.
نحوه مشاهده کد منبع یک سایت
به طور کامل به شکلی که روی سرور گذاشته شده است، این کار را نمی توان از مرورگر انجام داد. اما با کلیک بر روی صفحه با دکمه سمت راست ماوس می توانید کل نشانه گذاری را مشاهده کنید. در اینجا و در زیر به عنوان مثال گوگل کروم.
گزینه "مشاهده کد صفحه" را انتخاب کنید و لیست کامل را در یک برگه جداگانه دریافت کنید.
فقط متنی است که باید آن را تجزیه کنید تا بفهمید. اما می توانید کدهای تعاملی را با استفاده از ابزارهای توسعه دهنده دریافت کنید.
چگونه کد منبع یک صفحه وب سایت را پیدا کنیم
روی نماد منو در مرورگر کلیک کنید. اغلب در سمت راست قرار دارد و مانند سه نقطه یا راه راه به نظر می رسد.
در بخش ابزارهای اضافی، "ابزار توسعه دهنده" را انتخاب کنید.
پنجره ای باز می شود که وضعیت فعال کد را نشان می دهد. به این معنی که وقتی روی علامت گذاری کنار آن کلیک می کنید، سبک عنصر نمایش داده می شود و بلوک های انتخاب شده در صفحه برجسته می شوند.
در برگه "منبع" می توانید محتویات برخی از فایل ها را مشاهده کنید: اسکریپت ها، فونت ها، تصاویر.
در تب "امنیت"، تأیید گواهی سایت در دسترس است.
تب "حسابرسی" به شما کمک می کند تا منبع ارسال شده در میزبانی را بررسی کنید.
اگر مکان پنل سمت راست نامناسب است، می توانید روی سه نقطه کلیک کرده و با انتخاب مورد مورد نظر آن را تغییر دهید.
نحوه مشاهده متا تگ ها
هر سند html شامل تگ های ساختاری است. در اینجا به برخی از آنها اشاره می کنیم:
- html کل سند است.
- سر - بخش سرفصل های خدمات.
- عنوان – عنوان صفحه (نمایش داده شده در برگه).
- بدن - بدنه سند.
- H1-H6 - سرفصل های متن صفحه.
- مقاله - مقاله.
- بخش - بخش.
- منو - منو.
- Div - بلوک.
- Span یک رشته است.
- پ - پاراگراف
- میز - میز.
عناصر به گونه ای طراحی شده اند که به صورت منطقی بخش های یک صفحه را مشخص کنند و در صورت نیاز استایل دهی می شوند. آنها حاوی متنی هستند که به نوعی در صفحه قابل مشاهده است. اما تگ Head حاوی اطلاعات سرویس است. از متا تگ ها برای تعیین آن استفاده می شود. هر آنچه در آنها نوشته شده است برای سرور و موتورهای جستجو در نظر گرفته شده است.
به هیچ وجه نمی توان محتوای آنها را شناخت.
بیایید به تگ Link توجه کنیم. برای تعیین پیوندها به فایل های شامل خارجی استفاده می شود. در صورت تمایل، می توانید محتویات را ببینید و در دیسک ذخیره کنید. برای انجام این کار، ماوس را روی آدرس ببرید و کلیک راست کنید. "باز کردن در برگه جدید" را انتخاب کنید.
فایل مشخص شده در یک تب جدید باز می شود که می توانید آن را مشاهده یا ذخیره کنید.
نحوه مشاهده کد منبع یک صفحه برای اشکال زدایی یک اسکریپت
در این مورد، راحت ترین راه برای باز کردن صفحه در دستگاه محلی است. اگر فقط نیاز به اصلاح نشانه گذاری، سبک ها و اسکریپت ها دارید، این کار را می توانید مستقیماً از پوشه انجام دهید. کد Html به همین صورت مشاهده می شود. اما خطاهای کد جاوا اسکریپت را می توان در تب "کنسول" مشاهده کرد. شرح خطا و شماره خطی که روی آن رخ داده را نشان می دهد.
نحو را می توان مستقیماً در کد مشاهده کرد. این برگه منبع است.
نحوه مشاهده کد یک عنصر خاص
برای صفحات بزرگ با عناصر زیاد، یافتن کد مناسب در تمام نشانه گذاری ها دشوار است. در این حالت باید از دستور خاصی از منوی زمینه استفاده کنید. ماوس را روی قطعه قرار دهید و RMB را فشار دهید. دستور View Code را انتخاب کنید.
همان پنجره باز می شود، اما با فوکوس روی شی انتخاب شده.
خلاصه
ما به شما گفتیم که کد منبع یک صفحه چیست. کافی است به دانش ابتدایی HTML و CSS تسلط داشته باشید و با استفاده از ابزارهای توسعه دهنده مناسب، می توانید اسناد html خود را اشکال زدایی کنید.
مرور کد منابع در وب به شما این امکان را می دهد که نه تنها از تجربه خود یاد بگیرید، بلکه از نمونه های واقعی کار نیز استفاده کنید. و برای متخصصان سئو، متا تگ ها مفید خواهد بود، اطلاعاتی که در آن می تواند چیزهای زیادی در مورد سایت بگوید.
Ctrl+U
چگونه کد منبع یک عنصر را مشاهده کنیم؟
روی دکمه سمت راست ماوس در عنصر صفحه مورد نظر کلیک کنید.
گوگل کروم : "مشاهده کد عنصر"
اپرا: "بازرسی عنصر"
فایرفاکس: "آنالیز عنصر"
در مرورگرهای دیگر، به دنبال یک آیتم منوی مشابه باشید.
سلام!
به خصوص در ابتدای مقاله، برای کسانی که به دنبال پاسخی سریع هستند، کل موضوع را بیان کردم.
اطلاعات ممکن است برای بسیاری شناخته شده باشد، اما از آنجایی که من برای وبلاگ نویسان تازه کار، برنامه نویسان وب و سایر جستجوگران می نویسم، این مقاله کمکی باید وجود داشته باشد.
در آینده قطعا کد منبع صفحات و عناصر تکی را مطالعه خواهید کرد.
بیایید نگاهی به یک مثال خاص از نحوه استفاده از نمای منبع صفحه بیندازیم.
به عنوان مثال، می خواهیم ببینیم چه کلمات کلیدی برای یک صفحه خاص استفاده می شود. به صفحه وب مورد علاقه خود می رویم و Ctrl + U را فشار می دهیم. کد منبع این صفحه در یک پنجره جداگانه یا در یک تب جداگانه باز می شود. Ctrl+F را فشار دهید برای جستجوی یک قطعه کد در این حالت در کادر جستجو کلمه « کلید واژه ها".شما به طور خودکار به یک قطعه کد با این متا تگ هدایت می شوید و کلمه جستجو برجسته می شود.
بر اساس قیاس، می توانید سایر قطعه های کد را جستجو و مطالعه کنید.
مشاهده کل کد منبع یک صفحه در بیشتر موارد چندان راحت نیست، بنابراین در همه مرورگرها امکان مشاهده کد یک عنصر یا قطعه واحد وجود دارد.
بیایید از یک مثال عینی برای مشاهده کد عنصر استفاده کنیم. به عنوان مثال، بیایید ببینیم آیا پیوند دارای ویژگی nofollow است یا خیر. ما روی پیوند مورد علاقه خود کلیک راست می کنیم و در منوی زمینه کشویی، روی مورد کلیک چپ می کنیم. "مشاهده کد عنصر"یا مشابه (بسته به مرورگر شما). در زیر، در یک پنجره ویژه برای تجزیه و تحلیل کد، چیزی مشابه دریافت می کنیم.
می بینیم که rel=”nofollow” در کد لینک وجود دارد. این بدان معنی است که این پیوند "نشت" و روابط عمومی نخواهد داشت. در مقالات بعدی در این مورد با جزئیات بیشتری صحبت خواهیم کرد. در حال حاضر، نکته مهم این است که اکنون می دانید چگونه کد منبع صفحه و کد منبع یک عنصر را مشاهده کنید.
