مخاطبان عزیز به جلسه دوم از آموزش مقدماتی پایه CSS خوش آمدید. در درس نامه اول، ما به توضیح مفاهیم اصلی CSS و HTML پرداختیم. در صورتی که به آموزش جلسه اول نیاز دارید می توانید از مقاله CSS چیست استفاده کنید. در این جلسه می خواهیم مختصری از برنامه نویسی HTML و CSS را به شما عزیزان آموزش دهیم. پس همراه ما باشید.
معرفی برنامه Visual Stadio Code :
قبل از آن که بخواهیم برنامه نویسی را شروع کنیم، باید محیط برنامه نویسی مناسب آن را معرفی کنیم. برای این سری از آموزش ها ما نرم افزار Visual Stadio Code را به شما معرفی می کنیم. با استفاده از این برنامه شما می توانید کدهای خود را به فرمت های مختلف مانند HTML و CSS ذخیره کنید. همچنین این برنامه دارای کاربری ساده ای است و اگر شما در ابتدای راه برنامه نویسی هستید اصلا به مشکل بر نخواهید خورد. برای استفاده از این برنامه تنها نیاز است که مراحل زیر را دنبال کنید.
1- از طریق گزینه File یک فایل جدید ایجاد می کنید.
2- در صورتی که کد شما HTML است، اسم آن را index بگذارید و با فرمت HTML که از منوی کشویی در دسترس است آن را ذخیره کنید. توجه داشته باشید که index تنها یک اسم قراردادی است و شما می توانید هر اسم دیگری انتخاب کنید.
3- در صورتی که کد شما CSS است، اسم آن را style بگذارید و با فرمت CSS که از منوی کشویی در دسترس است آن را ذخیره کنید. توجه داشته باشید که style تنها یک اسم قراردادی است و شما می توانید هر اسم دیگری انتخاب کنید.
برای اینکه کدی که ایجاد کرده اید را در وب مرورکر مشاهده کنید باید بعد از ذخیره سازی، روی فایل index راست کلیک کرده و گزینه copy path را انتخاب کنید. سپس در مرورگر خود این آدرس را paste کنید.
اولین برنامه نویسی HTML و CSS :
حال که با طریقه ذخیره و اجرای فایل آشنا شدید می توانیم اولین برنامه خود را ایجاد کنیم. در اکثر زبان های برنامه نویسی برای شروع از نمایش متن “Hello World” استفاده می کنند. اما من تغییری می دهم و از نمایش “Hello Beautiful World” شروه می کنم 🙂
برای شروع کد HTML به صورت زیر در اختیار شما قرار داده می شود :
سپس برای تعیین ظاهر کد HTML بالا از فایل زیر که به صورت CSS است استفاده می کنیم :
در صورتی که شما مراحل گفته شده را طی کنید باید خروجی زیر را مشاهده کنید :
حال که با روند استفاده از برنامه Visual Stadio Code و برنامه نویسی HTML و CSS آشنا شدید، وقت آن است که معرفی مهمترین تگ ها در HTML شروع کنیم. پس در جلسه سوم و معرفی مهمترین نکات برنامه نویسی HTML در دوره آموزشی مقدماتی پایه CSS همراه ما باشید.
Leave A Comment