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

معرفی برنامه Visual Stadio Code : 

قبل از آن که بخواهیم برنامه نویسی را شروع کنیم، باید محیط برنامه نویسی مناسب آن را معرفی کنیم. برای این سری از آموزش ها ما نرم افزار Visual Stadio Code را به شما معرفی می کنیم. با استفاده از این برنامه شما می توانید کدهای خود را به فرمت های مختلف مانند HTML و CSS ذخیره کنید. همچنین این برنامه دارای کاربری ساده ای است و اگر شما در ابتدای راه برنامه نویسی هستید اصلا به مشکل بر نخواهید خورد. برای استفاده از این برنامه تنها نیاز است که مراحل زیر را دنبال کنید.

۱- از طریق گزینه File یک فایل جدید ایجاد می کنید.

برنامه نویسی HTML و CSS

۲- در صورتی که کد شما HTML است، اسم آن را index بگذارید و با فرمت HTML که از منوی کشویی در دسترس است آن را ذخیره کنید. توجه داشته باشید که index تنها یک اسم قراردادی است و شما می توانید هر اسم دیگری انتخاب کنید.

۳- در صورتی که کد شما CSS است، اسم آن را style بگذارید و با فرمت CSS که از منوی کشویی در دسترس است آن را ذخیره کنید. توجه داشته باشید که style تنها یک اسم قراردادی است و شما می توانید هر اسم دیگری انتخاب کنید.

برنامه نویسی HTML و CSS

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

 

برای اینکه کدی که ایجاد کرده اید را در وب مرورکر مشاهده کنید باید بعد از ذخیره سازی، روی فایل index راست کلیک کرده و گزینه copy path را انتخاب کنید. سپس در مرورگر خود این آدرس را paste کنید.

برنامه نویسی HTML و CSS

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

اولین برنامه نویسی HTML و CSS : 

حال که با طریقه ذخیره و اجرای فایل آشنا شدید می توانیم اولین برنامه خود را ایجاد کنیم. در اکثر زبان های برنامه نویسی برای شروع از نمایش متن “Hello World” استفاده می کنند. اما من تغییری می دهم و از نمایش “Hello Beautiful World” شروه می کنم 🙂

برای شروع کد HTML به صورت زیر در اختیار شما قرار داده می شود :

برنامه نویسی HTML و CSS

سپس برای تعیین ظاهر کد HTML بالا از فایل زیر که به صورت CSS است استفاده می کنیم :

برنامه نویسی HTML و CSS

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

برنامه نویسی HTML و CSS

حال که با روند استفاده از برنامه Visual Stadio Code و برنامه نویسی HTML و CSS آشنا شدید، وقت آن است که معرفی مهمترین تگ ها در HTML شروع کنیم. پس در جلسه سوم و معرفی مهمترین نکات برنامه نویسی HTML در دوره آموزشی مقدماتی پایه CSS همراه ما باشید.