اندازه، رنگ برخی از عناصر مهم وبلاگ، مانند عنوان وبلاگ یا پست، برچسب بیشتر و موارد مشابه. من کد لازم را به صورت دستی جستجو کردم و با دامنه آزمایشی آزمایش کردم که بعداً مقاله بر اساس آن نوشته شد.
و اخیراً تغییر رنگ پیوندها طول کشید. با جمع آوری یک سری ادبیات در مورد این موضوع، به یک چیز ساده پی بردم: هرکسی از الگوهای خودش مثال می‌زند، اما همه ما قالب‌های متفاوتی داریم و خوب است اگر کد مثال حداقل کمی شبیه باشد: ناله نیست، بنابراین به هر حال با چرخیدن آن را پیدا می کنم - با استفاده از روش 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 را پیدا کرده و تغییر دهید - بله، کارشناسان من را برای ساده سازی می بخشند. و اگر متوجه نشدید، به هر حال از صفحه دیدن کنید. وقت خود را با بیهودگی تلف نکنید.
پیشنهاد می‌کنم ویدیویی از آرتم آبراموویچ را در مورد نحوه جستجو و یافتن هر کلمه یا عنصر در هر تم/قالب، برای هر موتور (وردپرس، جوملا و غیره) تماشا کنید و آن را با آنچه نیاز دارید جایگزین کنید:
لطفا اگر دوست داشتید به اشتراک بگذارید:
همچنین ممکن است برای شما جالب باشد که بدانید:
1 رای روز بخیر، خوانندگان عزیز وبلاگ من. گاهی اوقات برخی از ویژگی های زیبا را در سایت پیدا می کنید و این سوال شروع به عذاب می کند که چگونه سازنده به چنین جلوه جالبی دست یافته است.
به نظر می رسد که پاسخ بسیار آسان است. و اگر مهارت هایی دارید، می توانید تعداد زیادی از این تراشه ها را جمع آوری کنید و وب سایت منحصر به فرد خود را در مدت زمان کوتاهی ایجاد کنید.
امروز در مورد نحوه باز کردن کد یک صفحه، یک عنصر خاص صحبت خواهیم کرد و یاد خواهیم گرفت که چگونه از این مهارت به نفع خود استفاده کنید.
دانش اولیه در مورد کد
سایت من برای مبتدیان است و ابتدا می خواهم به طور خلاصه در مورد سایت ها و کدها به طور کلی صحبت کنم.
برای کشیدن یک تصویر، سپس آن را به قطعات کوچک برش دهید، کد بنویسید، به لطف آن مرورگر دوباره تمام عناصر را در یک کل جمع می کند. به نظر می رسد همه چیز بسیار پیچیده است، اینطور نیست؟ اصلاً اینطور نیست و ارزش نگرانی در مورد آن را ندارد.
به این ترتیب وب سایت های با کیفیت ساخته می شوند. اگر می خواهید - وارد این تجارت شوید و مطالعه کنید، هیچ تمایلی وجود ندارد - هیچ کس نمی تواند شما را مجبور کند.
من فقط یک چیز را می گویم ... هیچ چیز خوشایندتر از این نیست که ببینید چگونه کلمات نامفهوم نوشته شده توسط شما به یک کل تبدیل می شوند و زنده می شوند: پیوندها کار می کنند ، دکمه ها حرکت می کنند ، تصاویر حرکت می کنند ، متن می خزد. فکر می کنم می دانم ویکتور فرانکنشتاین چه احساسی داشت.
وقتی شروع به درک زبان مخفی می کنید و می بینید که همه چیز در واقع بسیار ساده تر از آن چیزی است که در ابتدا به نظر می رسید، نمی توانید به قدرت ها و توانایی های مغز خود ایمان نداشته باشید. خیلی باحاله
وب سایت ها چگونه ساخته می شوند؟ در حالت ایده آل، ابتدا. او فقط یک عکس می کشد. به عنوان مثال، همانطور که در شکل زیر نشان داده شده است. تا اینجا، این فقط یک تصویر، یک عکس است. هیچ پیوندی کار نمی کند، وقتی کلیک می کنید جایی نمی روید، جستجو انجام نمی شود.
طبق این نقاشی به اسکرین شات زیر نگاه کنید. ممکن است فکر کنید که این مجموعه ای از شخصیت های مضحک و بسیار پیچیده است. در واقع، همه چیز چندان دشوار نیست، الگوریتم خاصی وجود دارد.
تنها حدود 150 تگ وجود دارد و هر کدام از آنها وظیفه خاصی را بر عهده دارند: پیوند، انتقال، پررنگ، رنگ، عنوان و غیره. اگر میل داشته باشید و به وقت آن اهمیتی ندارید درک آنها چندان دشوار نیست.
به لطف آگاهی از این ویژگی ها، تقریباً هر مشکلی قابل حل است. در اینجا فقط راه هایی برای دستیابی به هدف وجود دارد که هر توسعه دهنده راه خود را پیدا می کند.
سازندگان با تجربه بلافاصله نحوه دستیابی به نتایج را می بینند، در حالی که دیگران باید فکر کنند، به دنبال پاسخ در مقالات یا کد منبع رقبا باشند. آنها به سادگی بخش لازم را در یک سایت شخص ثالث می گیرند و آن را برای خود ویرایش می کنند. این به طور قابل توجهی روند کار را کوتاه می کند.
کمی بعد یک مثال عینی به شما نشان خواهم داد.
مشاهده کد
بنابراین، اجازه دهید ابتدا به شما نشان دهم که اگر نیاز به یادگیری html شخص دیگری دارید، چگونه ادامه دهید. سپس نگاهی دقیق تر به سایر مسائل خواهیم داشت.
بهترین راه
روشی که ابتدا توضیح خواهم داد برای مبتدیان کمی پیچیده است، اما به عنوان مقدمه، ادامه مطلب را بخوانید. صفحه را باز کنید و روی دکمه سمت راست ماوس کلیک کنید. "ذخیره به عنوان..." را انتخاب کنید
کل صفحه وب را ذخیره کنید همانطور که در تصویر مشاهده می کنید، من قبلاً همه چیز را دانلود کرده ام. در اینجا دو پوشه داریم.
هر چیزی که نیاز دارید اینجاست. هر عنصر اگر این را درک کنید، می توانید به سرعت هر آنچه را که نیاز دارید به دست آورید. اما، چنین کاری به طور فزاینده ای غیرممکن می شود. دانلود انجام نمی شود. در صورت ممنوعیت کپی کردن صفحه چه باید کرد؟
این گوگل کروم است
همانطور که ممکن است متوجه شده باشید، من اغلب از Google 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 درس ویدئویی!)" .
حالا شما کمی بیشتر می دانید. برای شما آرزوی موفقیت در تلاش دارم. به زودی میبینمت!
هر کاربر اینترنتی سایت های مورد علاقه خود را دارد که زمان زیادی را در آنها صرف می کند. و فقط تنبل ها فکر نمی کردند ببینند چگونه ایجاد شده و از چه چیزی تشکیل شده است. پاسخ به همه این سؤالات ممکن نخواهد بود، زیرا راه های زیادی برای ایجاد یک سایت وجود دارد، اما مشاهده دستورات و کدهایی که از آن تشکیل شده است امکان پذیر است و در دسترس همگان است.
سوال دیگر این است که آیا شخصی که به برنامه نویسی مشغول نیست، برخی از نمادهای سازنده کد را درک می کند؟ اما از نمونه هایی که در زیر نشان داده خواهد شد، هر کاربر گوگل کروم می تواند عناصر تکی سایت ها را مشاهده کند.
نحوه مشاهده کد منبع یک صفحه html در مرورگر گوگل
برای اینکه بتوانید کد صفحه را در کروم مشاهده کنید، باید به سایت مورد نظر خود بروید و مراحل زیر را دنبال کنید:
این دو نکته از نظر عملکرد و محتوای اطلاعاتی برای کاربر، برنامه نویس یا هکر متفاوت است. 
تفاوت کد صفحه با دستور "View Code" چیست؟
با تجزیه و تحلیل هر یک از این توابع، می توانید یک مقاله جداگانه بنویسید. برای برنامه نویسان، این تفاوت قابل توجه است و آنها می دانند که در چه مواردی باید از "View Code" و در کدام "View Page Code" در مرورگر Google Chrome استفاده کرد.
اما برای توضیح برای کاربر معمولی، این توابع را می توان به اهداف زیر تقسیم کرد:
- "نمایش کد صفحه" فقط برای دیدن ترکیب اصلی صفحه مورد نیاز است. اساساً ساختار سایت اینگونه است (بدون مدل های اضافی به صورت فایل های CSS و سایر اضافات که در پوشه سازنده سایت باقی مانده است). این ساختار برای ایجاد صفحه شخصی خود با کپی پیست مناسب نیست، اما به شما این امکان را می دهد که ببینید برنامه نویس دقیقا چه کاری انجام داده و به چه ترتیبی انجام داده است تا سایت در مرورگر گوگل کروم چنین طراحی خارجی داشته باشد.
- "مشاهده کد" یک ساختار دقیق را نشان می دهد که تمام مناطقی را که در صفحه تحت تأثیر قرار می گیرند برجسته می کند. اگر ماوس را روی یک کد لیست خاص نگه دارید، مورد را در سایتی که به آن تعلق دارد برجسته می کند.
- مشاهده کد صفحه در یک مرورگر جداگانه بدون امکان ویرایش آن باز می شود. یعنی فقط برای کپی و خواندن کد سایت مناسب است. اما این یک ویژگی به همان اندازه مفید است.
- "مشاهده کد" قابل تغییر است و شما می توانید هر عنصر را به روشی که مناسب شما باشد ویرایش کنید. البته، همه این تغییرات تا زمانی که صفحه به‌روزرسانی نشود، «زنده می‌شوند»، اما گاهی اوقات بالا رفتن از آن تنظیمات و درک اینکه این یا آن مقدار برای چیست و اگر آن را تغییر دهید چه اتفاقی می‌افتد، سرگرم کننده است. نباید تصور کنید که با چنین اقداماتی به خود یا سایت آسیب می رسانید - این تغییرات فقط روی کد Google Chrome شما تأثیر می گذارد و آنلاین نمی شود.
با توجه به این سوال که چگونه می توان کد عنصر را مشاهده کرد
اگر بخواهیم به چنین سؤالی پاسخ دهیم، آنگاه فقط یک نوع با مثال خود را نشان می دهد. زیرا تبدیل شدن به فردی که این موضوع را درک می کند (توسعه دهنده وب) در یک مقاله بسیار دشوار است، اما نشان دادن آن با یک مثال بسیار ساده تر است تا سوال حل شود.
عملکرد کد عنصر بسیار گسترده است، بنابراین یکی از کلمات را در وب سایت مرورگر گوگل کروم انتخاب می کنیم. ما می خواستیم در نظر بگیریم که چه کلمات کلیدی (در کد به عنوان "کلید واژه ها" نوشته خواهد شد) برای سایت ما استفاده شده است. برای این کار الگوریتم زیر را انجام می دهیم:
راه های دیگر استفاده از این ویژگی در مرورگر گوگل کروم
به طور کلی، در ادامه پاسخ به این سوال که چگونه به کد عنصر نگاه کنیم و چرا به آن نیاز داریم، باید عملکردهای آن را فهرست کنیم. یعنی، به لطف امکان مشاهده کد یک عنصر از هر سایت در مرورگر گوگل کروم، می توانیم:
- ساختار سایت را ببینید که از head ("سرصفحه سایت") شروع می شود و به پایان می رسد (فرمان نهایی هر برنامه).
- مشاهده تمام عملکردهای سایت، یعنی: پیوندها به سایت های دیگر، ماژول های اضافی از سایت های خارجی و وجود شمارنده های داخلی برای جمع آوری اطلاعات مختلف.
- بررسی کنید که آیا کپی برداری از سایت ممنوع است یا خیر.
- کد تمامی لینک های سایر صفحات سایت و همچنین طراحی و اقدامات بعدی آنها را پس از کلیک بر روی آنها ثبت می کند.
این دور از فهرست جامع است. اما لازم به یادآوری است که بدون دانش خاص تقریباً غیرممکن است که کد یک صفحه Google Chrome "خواندن" شود و داده های دریافتی عملاً مورد نیاز یک کاربر عادی نیست.
مورد "مشاهده کد عنصر" کار نمی کند
بلافاصله باید گفت که هر سایت به کدهای عنصر دسترسی آزاد خواهد داشت. یعنی حتی محبوب ترین و گران ترین سایت ها نیز برای مشاهده کد خود باز خواهند بود. بنابراین، اگر موردی در مرورگر گوگل کروم فعال نیست یا خطا می دهد، دلایل احتمالی زیر را دارد:
- نمایه کاربر خراب است.
- وجود بدافزار در رایانه؛
- مسدود کردن توسط یک پسوند خاص برای افزایش عملکرد (حتی ممکن است).
رفع خرابی پروفایل کاربری
برای ایجاد یک نمایه جدید، باید نمایه قدیمی را از رایانه خود حذف کنید. برای این کار موارد زیر را انجام دهید:
- Google Chrome را ببندید و مرورگر Windows Explorer داخلی را راه اندازی کنید.
- دستور زیر را در نوار آدرس وارد کنید: %LOCALAPPDATA%\Google\Chrome\User Data\.
- وقتی دایرکتوری باز شد، به دنبال پوشه "Default" بگردید و "Backup" را به نام آن اضافه کنید تا موارد زیر را دریافت کنید: "Backup Default".
- اکنون پس از راه اندازی جدید مرورگر کروم، نمایه جدیدی ایجاد خواهد شد.
حذف بدافزار یا بقایای آن
اگر نمایه جدید به ما امکان دسترسی به کد عنصر صفحه را نداد و همچنان خطا را مشاهده کردیم، باید به صورت زیر عمل کنیم:
- Command Prompt ویندوز (Run) را باز کرده و عبارت cmd را در آن تایپ کنید.
- دستور زیر را در خط وارد کنید: RD /S /Q "%WinDir%\System32\GroupPolicyUsers".
- پس از تأیید عمل، ما در این مورد رانندگی می کنیم: RD / S / Q "% WinDir% \ System32 \ GroupPolicy".
- اکنون "gpupdate /force" (بدون نقل قول).
اگر همه چیز به درستی انجام شد، پس از راه اندازی مجدد رایانه، Google Chrome کد عناصر را باز می کند و مرورگر به طور معمول کار می کند.
Ctrl+U
چگونه کد منبع یک عنصر را مشاهده کنیم؟
روی دکمه سمت راست ماوس در عنصر صفحه مورد نظر کلیک کنید.
گوگل کروم : "مشاهده کد عنصر"
اپرا: "بازرسی عنصر"
فایرفاکس: "آنالیز عنصر"
در مرورگرهای دیگر، به دنبال یک آیتم منوی مشابه باشید.
سلام به همه!
به خصوص در ابتدای مقاله، برای کسانی که به دنبال پاسخی سریع هستند، کل موضوع را بیان کردم.
اطلاعات ممکن است برای بسیاری شناخته شده باشد، اما از آنجایی که من برای وبلاگ نویسان تازه کار، برنامه نویسان وب و سایر ماینرها می نویسم، این مقاله کمکی باید وجود داشته باشد.
در آینده قطعا کد منبع صفحات و عناصر تکی را مطالعه خواهید کرد.
بیایید نگاهی به یک مثال خاص از نحوه استفاده از نمای منبع صفحه بیندازیم.
به عنوان مثال، می خواهیم ببینیم چه کلمات کلیدی برای یک صفحه خاص استفاده می شود. ما به صفحه وب مورد علاقه خود می رویم و Ctrl + U را فشار می دهیم. کد منبع این صفحه در یک پنجره جداگانه یا در یک تب جداگانه باز می شود. Ctrl+F را فشار دهید برای جستجوی یک قطعه کد در این حالت در کادر جستجو کلمه « کلید واژه ها".شما به طور خودکار به یک قطعه کد با این متا تگ هدایت می شوید و کلمه جستجو برجسته می شود.
بر اساس قیاس، می توانید سایر قطعه های کد را جستجو و مطالعه کنید.
مشاهده کل کد منبع یک صفحه در اکثر موارد چندان راحت نیست، بنابراین در همه مرورگرها امکان مشاهده کد یک عنصر یا قطعه واحد وجود دارد.
بیایید از یک مثال عینی برای مشاهده کد عنصر استفاده کنیم. به عنوان مثال، بیایید ببینیم آیا پیوند دارای ویژگی nofollow است یا خیر. ما روی پیوند مورد علاقه خود کلیک راست می کنیم و در منوی زمینه کشویی، روی مورد کلیک چپ می کنیم. "مشاهده کد عنصر"یا مشابه (بسته به مرورگر شما). در زیر، در یک پنجره ویژه برای تجزیه و تحلیل کد، چیزی مشابه دریافت می کنیم.
می بینیم که rel=”nofollow” در کد لینک وجود دارد. این بدان معنی است که این پیوند "نشت" و روابط عمومی نخواهد داشت. در مقالات بعدی در این مورد با جزئیات بیشتری صحبت خواهیم کرد. در حال حاضر، نکته مهم این است که اکنون می دانید چگونه کد منبع صفحه و کد منبع یک عنصر را مشاهده کنید.
کتاب جدیدی با عنوان «بازاریابی محتوای رسانه‌های اجتماعی: چگونه وارد ذهن مشترکان شویم و آنها را عاشق برند خود کنیم» منتشر کرده‌ایم.
کد منبع یک سایت مجموعه ای از نشانه گذاری HTML، سبک های CSS و اسکریپت های جاوا اسکریپت است که مرورگر از وب سرور دریافت می کند.
ویدیوهای بیشتر در کانال ما - بازاریابی اینترنتی را با SEMANTICA یاد بگیرید
می توان آن را به مجموعه دستوراتی که فرمانده به سربازان می دهد تشبیه کرد. تصور کنید که مخاطب رئیس را نمی بیند یا نمی شنود. از دیدگاه آنها، ارتش به طور مستقل اقداماتی را انجام می دهد. در مورد ما، فرمانده مرورگر است، دستورات کد منبع هستند و سربازان در حال راهپیمایی نتیجه نهایی هستند.
سایت بر روی یک وب سرور ذخیره می شود که به درخواست کاربر صفحه را ارسال می کند. یک درخواست عبارت است از تایپ یک URL در نوار آدرس، کلیک کردن روی پیوند یا کلیک کردن روی دکمه ارسال در یک فرم. فرقی نمی کند صفحات وب به چه زبانی نوشته شده باشند، چه بخشی از نرم افزار را شامل شوند. نتیجه نهایی هر الگوریتم سمت سرور، مجموعه ای از تگ ها و متن های html است.
کد منبع صفحه مجموعه ای از داده ها است که شامل:
- نشانه گذاری html
- استایل شیت یا پیوند فایل ;
- برنامه های نوشته شده با جاوا اسکریپت یا پیوندهایی به فایل ها با کد.
این سه بخش توسط مرورگر مدیریت می شود. برای سرور، این فقط متنی است که باید در پاسخ به درخواست ارسال شود.
چرا ممکن است نیاز به مطالعه کد منبع داشته باشیم
هر چیزی را که می‌بینیم، می‌توانیم برای حل مشکلات خاصی که در جریان کار با سایت به وجود می‌آیند، تجزیه و تحلیل و اعمال کنیم، مخصوصاً هنگام بهینه‌سازی آن. با مشاهده کد منبع، می توانیم:
- برای تجزیه و تحلیل متا تگ های سایت خود یا دیگران را ببینید.
- وجود یا عدم وجود عناصر خاص را در سایت مشاهده کنید: شمارنده ها، کدهای شناسایی در سیستم های مختلف، اسکریپت های خاص و موارد دیگر.
- پارامترهای عناصر را بیابید: اندازه، رنگ، فونت.
- مسیر عکس ها و سایر عناصر را در صفحه پیدا کنید.
- پیوندهای صفحه را بررسی کنید.
- مشکلات کدهایی که در روند بهینه سازی سایت اختلال ایجاد می کنند را پیدا کنید: سبک هایی که به فایل های جداگانه منتقل نشده اند، اسکریپت ها، کد نامعتبر.
اینها ویژگی های اصلی هستند، اما در واقع، با خواندن کد، می توانید اطلاعات بیشتری در مورد صفحه کسب کنید.
نحوه مشاهده کد منبع یک سایت
به طور کامل به شکلی که روی سرور گذاشته شده است، این کار را نمی توان از مرورگر انجام داد. اما با کلیک بر روی صفحه با دکمه سمت راست ماوس می توانید کل نشانه گذاری را مشاهده کنید. در اینجا و در زیر به عنوان مثال گوگل کروم.
گزینه "مشاهده کد صفحه" را انتخاب کنید و لیست کامل را در یک برگه جداگانه دریافت کنید.
فقط متنی است که باید آن را تجزیه کنید تا بفهمید. اما می توانید کدهای تعاملی را با استفاده از ابزارهای توسعه دهنده دریافت کنید.
چگونه کد منبع یک صفحه وب سایت را پیدا کنیم
روی نماد منو در مرورگر کلیک کنید. اغلب در سمت راست قرار دارد و مانند سه نقطه یا راه راه به نظر می رسد.
در بخش ابزارهای اضافی، "ابزار توسعه دهنده" را انتخاب کنید.
پنجره ای باز می شود که وضعیت فعال کد را نشان می دهد. به این معنی که وقتی روی علامت گذاری کنار آن کلیک می کنید، سبک عنصر نمایش داده می شود و بلوک های انتخاب شده در صفحه برجسته می شوند.
در برگه "منبع" می توانید محتویات برخی از فایل ها را مشاهده کنید: اسکریپت ها، فونت ها، تصاویر.
در تب "امنیت"، تأیید گواهی سایت در دسترس است.
تب "حسابرسی" به شما کمک می کند تا منبع ارسال شده در میزبانی را بررسی کنید.
اگر مکان پنل سمت راست نامناسب است، می توانید روی سه نقطه کلیک کرده و با انتخاب مورد مورد نظر آن را تغییر دهید.
نحوه مشاهده متا تگ ها
هر سند html شامل تگ های ساختاری است. در اینجا به برخی از آنها اشاره می کنیم:
- html کل سند است.
- سر - بخش سرفصل های خدمات.
- عنوان – عنوان صفحه (نمایش داده شده در برگه).
- بدن - بدنه سند.
- H1-H6 - سرفصل های متن صفحه.
- مقاله - مقاله.
- بخش - بخش.
- منو - منو.
- Div - بلوک.
- Span یک رشته است.
- پ - پاراگراف
- میز - میز.
عناصر به گونه ای طراحی شده اند که به صورت منطقی بخش های یک صفحه را مشخص کنند و در صورت نیاز استایل دهی می شوند. آنها حاوی متنی هستند که به نوعی در صفحه قابل مشاهده است. اما تگ Head حاوی اطلاعات سرویس است. از متا تگ ها برای مشخص کردن آن استفاده می شود. هر آنچه در آنها نوشته شده است برای سرور و موتورهای جستجو در نظر گرفته شده است.
به هیچ وجه نمی توان محتوای آنها را شناخت.
بیایید به تگ Link توجه کنیم. برای تعیین پیوند به فایل های شامل خارجی استفاده می شود. در صورت تمایل، می توانید محتویات را ببینید و در دیسک ذخیره کنید. برای انجام این کار، ماوس را روی آدرس ببرید و کلیک راست کنید. "باز کردن در برگه جدید" را انتخاب کنید.
فایل مشخص شده در یک تب جدید باز می شود که می توانید آن را مشاهده یا ذخیره کنید.
نحوه مشاهده کد منبع یک صفحه برای اشکال زدایی یک اسکریپت
در این مورد، راحت ترین راه برای باز کردن صفحه در دستگاه محلی است. اگر فقط نیاز به اصلاح نشانه گذاری، سبک ها و اسکریپت ها دارید، این کار را می توانید مستقیماً از پوشه انجام دهید. کد Html به همین صورت مشاهده می شود. اما خطاهای کد جاوا اسکریپت را می توان در تب "کنسول" مشاهده کرد. شرح خطا و شماره خطی که روی آن رخ داده را نشان می دهد.
نحو را می توان مستقیماً در کد مشاهده کرد. این برگه منبع است.
نحوه مشاهده کد یک عنصر خاص
برای صفحات بزرگ با عناصر زیاد، یافتن کد مناسب در تمام نشانه گذاری ها دشوار است. در این حالت باید از دستور خاصی از منوی زمینه استفاده کنید. ماوس را روی قطعه قرار دهید و RMB را فشار دهید. دستور View Code را انتخاب کنید.
همان پنجره باز می شود، اما با فوکوس روی شی انتخاب شده.
خلاصه
ما به شما گفتیم که کد منبع یک صفحه چیست. کافی است به دانش ابتدایی HTML و CSS تسلط داشته باشید و با استفاده از ابزارهای توسعه دهنده مناسب می توانید اسناد html خود را اشکال زدایی کنید.
مرور کد منابع در وب به شما این امکان را می دهد که نه تنها از تجربه خود یاد بگیرید، بلکه از نمونه های واقعی کار نیز استفاده کنید. و برای متخصصان سئو، متا تگ ها مفید خواهد بود، اطلاعاتی که در آن می تواند چیزهای زیادی در مورد سایت بگوید.
