یاد بگیرید که چگونه یک وب سایت با مشاهده کد منبع آن ساخته شده است
هنگامی که ابتدا حرفه خود را به عنوان یک طراح وب آغاز کردم، به بررسی بسیاری از کارهای دیگر طراحان وب که آنها را تحسین می کردم، بسیار یاد گرفتم. من تنها در این نیستم این که آیا شما به صنعت وب و یا سرپرست چاشنی جدید است، مشاهده منبع HTML از صفحات مختلف وب چیزی است که شما احتمالا در طول دوره حرفه ای خود را بارها و بارها انجام می دهید.
برای کسانی که برای طراحی وب جدید هستند، مشاهده کد منبع سایت یکی از ساده ترین راه ها برای دیدن موارد خاصی است که شما می توانید از آن کار یاد بگیرند و شروع به استفاده از برخی از کد یا تکنیک های خود را در کار خود. همانطور که هر طراح وب که امروزه کار می کند، به خصوص کسانی که از آن روزهای اول صنعت بوده اند، و شرحی امن است که آنها به شما می گویند که آنها فقط با دیدن منبع صفحات وب که آنها را دیدند و جذاب بودند توسط. علاوه بر خواندن کتاب های طراحی وب و یا شرکت در کنفرانس های حرفه ای ، مشاهده کد منبع سایت راه بسیار خوبی برای مبتدیان برای یادگیری HTML است.
بیشتر از فقط HTML
یکی از چیزهایی که باید به یاد بیاورد این است که فایل های منبع بسیار پیچیده هستند (و پیچیده تر وب سایت شما در حال مشاهده است، پیچیده تر است که کد سایت احتمالا وجود دارد). علاوه بر ساختار HTML که صفحه ای را که مشاهده می کنید، ایجاد می شود، CSS نیز وجود خواهد داشت ( ظاهر بصری آن سایت). علاوه بر این، امروزه بسیاری از وبسایتها شامل فایلهای اسکریپت همراه با HTML خواهند بود.
احتمالا چندین فایل اسکریپت وجود دارد، در واقع هر یک از جنبه های مختلف سایت را فعال می کند. صادقانه بگویم، یک کد منبع سایت به نظر می رسد قریب به اتفاق، به خصوص اگر شما برای انجام این جدید. اگر نمی توانید بلافاصله متوجه شوید چه اتفاقی افتاده است، از دست ندهید. مشاهده منبع HTML فقط اولین قدم در این فرآیند است. با تجربه کمی، شروع به درک بهتر این می کنید که چگونه تمام این قطعات با یکدیگر هماهنگ می شوند تا وبسایتی را که در مرورگر مشاهده می کنید ایجاد کنید. همانطور که با کد آشنا می شوید، می توانید بیشتر از آن یاد بگیرید و به نظر نمی رسد برای شما دلهره آور باشد.
پس چگونه کد منبع یک وب سایت را مشاهده می کنید؟ در اینجا دستورالعمل های گام به گام برای انجام این کار با استفاده از مرورگر گوگل کروم است.
گام به گام دستورالعمل
- مرورگر وب Google Chrome را باز کنید (اگر شما نصب Google Chrome را ندارید، این یک دانلود رایگان است).
- به صفحه وب مورد نظر خود بروید .
- روی صفحه راست کلیک کرده و به منوی ظاهر شده نگاه کنید. از آن منو، روی View page source کلیک کنید.
- کد منبع آن صفحه اکنون به عنوان یک برگه جدید در مرورگر ظاهر خواهد شد.
- همچنین می توانید از میانبرهای صفحه کلید CTRL + U در یک کامپیوتر برای باز کردن یک پنجره با کد منبع سایت نمایش داده شده استفاده کنید. در مک، این میانبر Command + Alt + U است .
ابزارهای برنامه نویسی
علاوه بر توانایی منبع نمایش ساده صفحه نمایش که گوگل کروم نیز ارائه می دهد، شما همچنین می توانید از ابزارهای پیشرفته خود برای استخراج عمیق تر در سایت استفاده کنید. این ابزار به شما این امکان را می دهد که نه تنها HTML را مشاهده کنید، بلکه همچنین CSS که برای مشاهده عناصر در آن سند HTML استفاده می شود.
برای استفاده از ابزارهای توسعهدهنده Chrome:
- باز کردن گوگل کروم
- به صفحه وب مورد نظر خود بروید .
- روی نماد با سه خط در گوشه سمت راست بالای پنجره مرورگر کلیک کنید.
- از منو، روی ابزارهای بیشتر کلیک کرده و سپس روی ابزارهای توسعهدهنده در منوی ظاهر شده کلیک کنید.
- این یک پنجره باز می شود که کد منبع HTML را در سمت چپ پنجره و CSS مرتبط در سمت راست نشان می دهد.
- به طور خلاصه، اگر یک عنصر را در یک صفحه وب راست کلیک کنید و از منوی ظاهر شده Inspection را انتخاب کنید، ابزار توسعهدهنده Chrome ظاهر خواهد شد و عنصر دقیقی که انتخاب کردهاید در HTML با CSS مربوط به سمت راست نشان داده میشود. این فوق العاده مفید است اگر شما می خواهید برای کسب اطلاعات بیشتر در مورد اینکه چگونه یک قطعه خاص از یک سایت ساخته شده است.
آیا مشاهده کد منبع قانونی است؟
در طی سالها، من بسیاری از طراحان وب جدید را در نظر داشتم که آیا قابل قبول است که کد منبع سایت را مشاهده کنم و از آن برای آموزش آنها و در نهایت برای کارهایی که انجام می دهند استفاده کنم. در حالی که کپی کردن یک کد سایت بزرگ و انتقال آن به عنوان خود را در سایت قطعا قابل قبول نیست، استفاده از این کد به عنوان یک استادیو برای یادگیری از در واقع است که چگونه بسیاری از پیشرفت در این صنعت ساخته شده است.
همانطور که در ابتدای این مقاله ذکر شد، امروزه شما برای پیدا کردن یک حرفه ای حرفه ای وب حرفه ای سخت است که چیزی را با مشاهده یک منبع سایت آموخته اید! بله، مشاهده کد منبع سایت قانونی است. استفاده از این کد به عنوان یک منبع برای ساختن چیزی شبیه نیز خوب است. با در نظر گرفتن کد و انتقال آن به عنوان کار شما جایی است که شما شروع به مشکلی می کنید.
در نهایت، متخصصان وب از یکدیگر یاد می گیرند و اغلب کارهایی را که مشاهده می کنند و از آن الهام گرفته اند، بهبود می دهند، بنابراین دریغ نکنید که کد منبع سایت را مشاهده کنید و از آن به عنوان یک ابزار یادگیری استفاده کنید.