Doctype چیست؟ آموزش زبان برنامه نویسی html (قسمت چهارم)

0

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

 

 

از چه ابزاری برای برنامه نویسی تحت وب استفاده کنیم؟

یکی از مشکلاتی که اغلب دانش پذیران دوره های برنامه نویسی دارند، این است که فلان مدرس با برنامه ای خاص کدنویسی می کند، اما من آن برنامه را ندارم. بد نیست در ابتدای کار به این موضوع بپردازیم، همه ی IDE ها تقریباً یک روند ثابت و مشخصی برای راه اندازی یک پروژه دارند و از این بابت نگران نباشید. برنامه ای که ما استفاده می کنیم، phpstorm است اما شما می توانید از هم نرم افزاری مانند، sublime text, atom, netbeans و غیره استفاده نمایید. مطابق تصویر زیر، ابتدا از منوی file گزینه new project را انتخاب کرده و html5 را انتخاب می نماییم.

باز کردن فایل جدید در برنامه phpstorm

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

انتخاب فایل html

در مرحله بعد، گزینه ی xhtml را انتخاب می کنیم، چرا که قصد داریم در رابطه با زبان نشانه گذاری html صحبت کنیم(باتوجه به تصویر زیر):

Doctype چیست؟ آشنایی با استانداردهای html

در گام بعد اگر کلید !> را تایپ کرده و کلید Tab بر روی کی بورد را انتخاب کنید، یکسری کدهای عجیبت و غریب مانند تصویر زیر مشاهده می کنید که در ادامه درباره تمامی آن ها صحبت می کنیم. اما اولین کلید واژه ای که شاید، ذهن شما را نیز به خود مشغول کرده باشد، Doctype html است. Doctype در واقع، نسخه زبان html را مشخص می کند و از طریق آن، مرورگرها متوجه می شوند که صفحات سایت ما از چه استانداردهایی تبعیت می کنند. به طور کلی دو سازمان هستند که استانداردهای html را به مرورگرها و برنامه نویسان وب معرفی می نمایند: WHATWG و W3C که در حال حاضر اغلب مرورگرها استانداردهای مجموعه W3C را مدنظر قرار می دهند و بهتر است از اخبار این سازمان را پیگیری نماییم.

تعریف دقیق و منطقی doctype html

محبوب ترین مرورگر در جهان کدام است؟

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

بخش آمارگیری سایت w3schools

برای این کار در سایت w3schools به قسمت web statistics مراجعه می کنیم و گزینه Browsers Home را انتخاب می کنیم. در این بخش می توانیم تاریخچه رقابتی انواع مرورگرها را از چندین سال پیش تا کنون، مشاهده کنیم که در نتیجه این مشاهدات، در حال حاضر محبوب ترین مرورگر جهان Chrome است.

مقایسه مرورگرها از لحاظ usability

همانطور که گفته شد، زبان html نسخه های متفاوتی دارد که می توانیم هرکدام از آن ها را برای طراحی صفحات وب خود انتخاب کنیم. برای بررسی قوانین این نسخه ها و انتخاب Doctype مورد نظر، از قسمت html tags گزینه doctype را انتخاب می کنیم (مانند عکس زیر)و در اینجا می توانیم، نسخه های مختلفی از زبان html را مشاهده کنیم. لازم به ذکر است که نسخه هایی که کلمه Strict به آن ها اضافه شده است، قوانین سخت گیرانه تری دارند و نسخه هایی که کلمه Transitional به آن ها اضافه شده است، استانداردهای نرم تری دارند.

بررسی نسخه های مختلف زبان html

از چه نسخه ای از زبان html استفاده کنیم؟

اما شاید این سوال در ذهن شما ایجاد شود که کدام نسخه را انتخاب کنیم؟ در حال حاضر پایدار ترین نسخه ای که می توان به عنوان بسته پیشنهادی به شما عزیزان ارائه کرد، نسخه html5 است، این نسخه، تمام تگ های استاندارد نسخه های قبل را دارد، علاوه بر آن یکسری امکانات دیگر نظیر، انتشار ویدئو و صوت یا جئولوکیشن نیز به آن اضافه شده است. البته اگر به سایت w3c مراجعه نمایید، نسخه های جدیدتری منتشر کرده اند که در حال حاضر برخی از مرورگرها شاید به خوبی از آن ها پشتیبانی نکنند، کما اینکه امکانات قابل توجهی اضافه نشده است.

معرفی کلی سایت w3c

اما اگر موافق باشید کمی در رابطه با قطعات کدی (تصویر زیر)که به ظاهر بی معنی هستند صحبت کنیم. یک سوال جالب: چرا قبل از Doctype علامت ! قرار میگیرد؟

پاسخ: علامت ! در علم برنامه نویسی به معنی مخالف بودن نقیض کردن شرط هاست. و در اینجا هم قبل از Doctype آمده است که بگوید، این متن، جزء تگ های html نیست و صرفاً می خواهد، نسخه html را مشخص کند.

اما در رابطه با doctype صحبت شد. اگر خسته نشده اید، برویم به سراغ خط های بعدی و یک توضیح مختصری از این کدهایی که در زیر مشاهده می نمایید، داشته باشیم.

بررسی اجمالی کدهای بعد از Doctype

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

 

بررسی دقیق و ریز کدهای پیش فرض صفحه html5

قسمت بعدی، charset است که اگر برابر utf-8 باشد، اشخاصی که از کشورهای خارجی وارد سایت شما می شوند، محتوای سایت شما را همانطور که هست می بینند، اگر این قطعه کد وجود نداشته باشد، این افراد صرفاً حروفی مثل علامت سوال ؟ یا علامت تعجب ! و چیزهای بی معنی را مشاهده می کنند.

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

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

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

 

 

ممکن است شما دوست داشته باشید

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.