دوباره بهتون خوش آمد میگم
بیاین الان اولین خط کدمون رو بنویسیم
و اولین و البته خیلی کوچیک‌ترین صفحه‌ی وبمون رو بسازیم
خب دوباره برگشتیم به VS Code
بیاین همه‌ی اینا رو ببندیم
و بعد بریم سراغ این اولین تب
یعنی همون تب Explorer
توی VS Code ما همیشه باید داخل یه پوشه کار کنیم
که بهش می‌گیم پوشه‌ی پروژه یا Project Folder
الان ما هیچ پوشه‌ای هنوز شروع نکردیم
پس بذار اول از همین‌جا شروع کنیم
من همین‌جا روی دسکتاپم یه پوشه می‌سازم
یعنی عملاً همه‌ی کدهایی که می‌نویسم
اینجا روی دسکتاپم ذخیره می‌شن
ولی خب شما می‌تونین این کارو
هر جای دیگه روی کامپیوترتون هم انجام بدین
این دیگه خیلی مهم نیست
برای من فقط راحت‌تره که روی دسکتاپ باشه
اسم این پوشه رو گذاشتم «01-test»
خب حالا برگردیم اینجا و روی "Open Folder" کلیک کنیم
بعد می‌رم روی دسکتاپ
و همین پوشه‌ای که الان ساختم رو انتخاب می‌کنم
پس این "01-test" شد پوشه‌ی پروژه‌ی ما
می‌بینین یه صفحه‌ی خوشامد جدید میاد اینجا می‌تونیم کلیک کنیم
روی "New File" تا اولین فایل پروژه‌مون رو بسازیم
یا اینکه می‌تونیم این کارو
از این ستون کناری هم انجام بدیم
و روی آیکون "New File" بزنیم
پس دوتا راه مختلف داریم
برای ساختن فایل جدید توی پوشه‌ی پروژه
خود من این روش دوم رو ترجیح می‌دم
خب داریم اولین صفحه‌ی وبمون رو می‌سازیم
و صفحه‌ی وب در واقع فقط یه فایل HTML هست
اسمش رو می‌ذاریم "indexhtml"
یعنی یه فایل با پسوند HTML
و چرا اسمش رو گذاشتیم "index"؟
چون این اسم پیش‌فرض اولین صفحه‌ی هر وب‌سایته
"Index" همیشه همون صفحه‌ی ورودی یا اول هر سایته
پس همه‌ی پروژه‌های وب باید
یه فایل "indexhtml" داشته باشن
این نکته رو یادتون باشه
همیشه اولین صفحه‌تون رو "indexhtml" بذارین
الان هدفم توی این درس
اینه که هنوز آموزش HTML رو شروع نکنم
فعلاً فقط می‌خوام این فایل رو بسازیم
یه ذره کد داخلش بنویسیم
و نتیجه‌ش رو توی مرورگر ببینیم
فقط برای اینکه شما اولین خط کدتون رو
بنویسین و نتیجه‌ش رو واقعاً توی یه مرورگر وب ببینین
پس بازم می‌گم هنوز آموزش HTML شروع نشده
واسه همین به‌جای اینکه کل ساختار صفحه رو خودمون بنویسیم
که معمولاً باید این کارو بکنیم
یه کلک کوچیک توی VS Code می‌زنیم
کافیه فقط یه علامت تعجب بنویسین
همین‌جوری بعد دکمه‌ی Tab رو بزنین
یا اینکه این پایین کلیک کنین
و با این کار یه ساختار خیلی ساده و خالی HTML می‌گیریم
می‌بینین یه head داره و یه body
ولی جزئیاتشو بعداً کامل یاد می‌گیرین
فعلاً چیزی که برام مهمه
اینه که اینجا یه Title یا همون عنوان صفحه داریم
بیاین محتوای این قسمت رو
عوض کنیم و بذاریم «My First Webpage»
البته می‌تونین هر چیزی خواستین اینجا بنویسین
بعدش می‌ریم داخل body
اینجاست که محتوای واقعی صفحه قرار می‌گیره و توی مرورگر دیده می‌شه
خب اینجا کافیه یه علامت کوچکتر < بذاریم
بعد H1 که یعنی Heading 1 یا تیتر اصلی
بعدشم علامت بزرگتر >
دقیقاً مثل همین چیزی که اینجا می‌بینین
می‌بینین که VS Code خودش اتوماتیک تگ بسته‌ش رو هم برامون گذاشت
یعنی خودش /H1 رو اضافه کرد ولی خب
فعلاً لازم نیست خیلی بهش دقت کنین
حالا بین این دوتا تگ یه متن می‌نویسیم
من می‌نویسم «Hello World»
این یه جور رسم قدیمی توی برنامه‌نویسیه
تقریباً توی همه‌ی زبان‌های برنامه‌نویسی
اولین خط کدی که یاد می‌دن همین «Hello World» هست
پس می‌شه گفت یه سنت دیرینه‌ست
خب فایل رو ذخیره می‌کنیم
می‌تونین از این دکمه بالا استفاده کنین
یا کلیدهای میانبر Command+S روی مک
یا Control+S روی ویندوز
الان وقتشه که این فایل رو توی مرورگر باز کنیم
می‌ریم سراغ دسکتاپ
و داخل همون پوشه‌ای که ساختیم یعنی «01-test»
اینجا فایل indexhtml رو داریم
فقط کافیه روش دوبار کلیک کنیم
و می‌بینین که توی مرورگر باز می‌شه
تبریک می‌گم! شما اولین صفحه‌ی وب خودتون رو ساختین
می‌بینین بالا توی تب نوشته «My First Webpage»
این همون عنوانیه که ما توی قسمت title نوشتیم
و اینم متن «Hello World» که اینجا وسط صفحه ظاهر شده
همه‌ی اینا به‌خاطر همون تگ H1 بود که نوشتیم
این شد خروجی اولین خط کدی که نوشتیم
پس همین شد قدم اول شما به دنیای وب!
از اینجا به بعد تازه ماجرا شروع می‌شه
یاد می‌گیریم HTML رو درست و حسابی بنویسیم
بعد سراغ CSS می‌ریم تا بتونیم ظاهر سایت رو طراحی کنیم
و در نهایت می‌ریم سراغ JavaScript که سایت رو زنده کنه
اما خب همه‌چی از همین یه فایل ساده شروع شد
پس واقعاً بهتون تبریک می‌گم بابت این شروع
بریم که ادامه‌ی مسیر رو با هم پیش بریم
خب حالا یه نکته‌ی خیلی مهم
می‌بینین که آدرس صفحه این بالا نوشته شده:
شروعش با file:/// هست یعنی داره مستقیم از کامپیوتر شما باز می‌شه
پس این هنوز یه سایت واقعی روی اینترنت نیست
فعلاً فقط روی سیستم شخصی شماست
بعداً یاد می‌گیرین چطور همینو روی اینترنت قرار بدین
ولی برای شروع کارمون دقیقاً همینه
یه فایل ساده‌ی HTML داریم که توی مرورگر باز شده
این اولین قدم برای هر برنامه‌نویس وبه
حالا برای اینکه مطمئن بشیم همه‌چیز درست کار می‌کنه
می‌تونین دوباره برگردین به VS Code
یه تغییر کوچیک بدین مثلاً به‌جای Hello World
بنویسین «سلام دنیا»
فایل رو ذخیره کنین بعد دوباره برگردین به مرورگر
اینجا اگه صفحه رو رفرش کنین
می‌بینین متن به‌روزرسانی شده
این نشونه‌شه که همه‌چی درست کار می‌کنه
این فرایند رو همیشه باهاش سروکار دارین:
نوشتن کد ذخیره کردن و بعد دیدن نتیجه توی مرورگر
و این چیزی‌یه که باعث می‌شه کار با وب خیلی جذاب باشه
چون خیلی سریع نتیجه رو می‌بینین
حالا یه نکته‌ی مهم درباره‌ی فایل‌ها
همیشه مطمئن بشین که فایل رو با پسوند درست ذخیره کنین
اینجا باید پسوندش حتماً html باشه
اگه اشتباهی چیز دیگه‌ای بذارین مرورگر نمی‌فهمه
و اون‌وقت ممکنه صفحه اصلاً درست باز نشه
پس اینو همیشه توی ذهنتون داشته باشین
یه چیز دیگه هم هست توی همین VS Code
اینجا سمت چپ لیست فایل‌های پروژه‌تونه
فعلاً فقط یه فایل indexhtml داریم
ولی بعداً که پروژه بزرگ‌تر شد
اینجا کلی فایل و پوشه خواهیم داشت
برای همین از همین الان باید یاد بگیرین فایل‌هاتون رو منظم نگه دارین
هر پروژه باید توی پوشه‌ی خودش باشه
وگرنه خیلی زود همه‌چی قاطی می‌شه
این یه عادت خیلی خوب برای برنامه‌نویس‌هاست
که کارشون همیشه مرتب و تمیز باشه
پس اگه از همین اول اینو رعایت کنین
بعداً خیلی راحت‌تر پیش می‌رین
حالا یه نگاه به مرورگر بندازین
این متنی که بزرگ و پررنگ نوشته شده "Hello World"
دقیقاً همون چیزیه که با تگ H1 نوشتیم
یعنی H1 همیشه برای تیتر اصلی صفحه‌ست
و مرورگر اینو با فونت درشت نشون می‌ده
زیرش هم اون جمله‌ی "اسم من " رو داریم
که با تگ P یا همون پاراگراف نوشتیم
P همیشه برای متن‌های معمولی یا پاراگراف‌ها استفاده می‌شه
می‌بینین چقدر راحت مرورگر کدها رو به متن تبدیل کرد؟
این دقیقاً همون کاریه که HTML انجام می‌ده
یعنی به مرورگر می‌گه چی تیتر باشه چی متن باشه چی کجا نمایش داده بشه
و همین‌جوری ما کم‌کم یاد می‌گیریم ساختار صفحه رو بسازیم
حتی عنوان صفحه که بالا توی تب مرورگر می‌بینین
همون چیزیه که توی تگ Title نوشتیم
پس می‌بینین که هر خط کدی که نوشتیم یه تأثیر مستقیم داره
این خیلی باحاله چون سریع نتیجه کارمون رو می‌بینیم
پس یه بار دیگه هر چیزی که توی سند HTML نوشتیم
الان داره اینجا توی مرورگر نشون داده می‌شه
این یعنی کدی که نوشتیم به یه نتیجه واقعی روی صفحه ترجمه شد
اینجاست که آدم کم‌کم حس برنامه‌نویس بودن می‌گیره
من خودم دارم از مرورگر کروم برای تست همه‌ی کدها استفاده می‌کنم
و خیلی پیشنهاد می‌کنم شما هم همین کارو بکنین
چون اینطوری مطمئن می‌شیم نتیجه‌ای که می‌بینین دقیقاً همون چیزیه
که من توی این آموزش‌ها دارم نشون می‌دم
پس دیگه تفاوتی توی ظاهر کار بین من و شما پیش نمیاد
خب برای این ویدیو همین‌قدر کافیه
این اولین ویدیوی کدنویسی‌مون بود
امیدوارم خوب گرفته باشین که هدفم چی بود
از درست کردن یه پوشه‌ی پروژه شروع کردیم
بعد اون پوشه رو توی VS Code باز کردیم
توی اون پوشه یه فایل HTML ساختیم
چند خط کد ساده داخلش نوشتیم
و در نهایت فایل رو توی یه مرورگر واقعی مثل کروم باز کردیم
یعنی کدهایی که نوشتیم رو به صورت بصری دیدیم
این همون ترجمه‌ی کد به یه نتیجه قابل دیدن بود
امیدوارم از این تجربه لذت برده باشین
و حالا می‌ریم سراغ ویدیوی بعدی