مدرس دوره

نبی عبدی

زمان ویدیو

14:17 دقیقه

برو به دیگر جلسات

آموزش HTML و CSS

دانلود ویدیو

وارد شوید

آموزش ساخت فایل html در VSCode (سند خام html)

آخرین بروزرسانی در تاریخ : 28 خرداد 1402
باید لاگین کنید!

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

آموزش ساخت اولین سند HTML

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

  • ابتدا یک پوشه ایجاد کنید و نام آن را هر چیزی که دوست دارید قرار دهید
  • سپس داخل آن پوشه یک پوشه جدید بسازید و نام آن را First Html قرار دهید
  • داخل پوشه First Html راست کلیک کنید و از گزینه New گزینه New Text Document را انتخاب کنید تا یک فایل با فرمت txt برای شما ساخته شود.
  • سپس از تنظیمات View در بخش بالای ویندوزی که باز است، تیک گزینه File name extensions را بزنید تا فرمت فایل‌ها در ویندوز برای شما نمایش داده شود. اگر این بخش را ندارید با یک جستجوی کوچک می‌توانید قابلیت نمایش فرمت فایل‌ها در ویندوز را برای خودتان فعال کنید.
  • حال که فرمت فایل را می‌توانید مشاهده کنید با کلید‌های ترکیبی Ctrl+A تمامی نام فایل به همراه فرمت آن را انتخاب کنید.
  • سپس تمامی نام را پاک کرده و نام index.html را برای فایل مورد نظر انتخاب کنید.
  • بعد از این کار روی دکمه اینتر بزنید تا تغییر فرمت فایل انجام شود.
  • به احتمال بسیار زیاد یک پنجره اخطار برای شما باز خواهد شد و به شما اخطار خواهد داد که در حال تغییر فرمت فایل هستید، شما روی گزینه Yes کلیک کنید تا تغییر فرمت به درستی انجام شود.
  • در این مرحله به احتمال زیاد آیکون فایل شما تغییر خواهد کرد و هم‌اکنون شما یک سند HTML خام دارید.
  • حال روی کل پوشه First Html راست کلیک کرده و پوشه را با استفاده از نرم‌افزار VSCode که در جلسات قبلی آن را نصب کردیم، باز کنید.
  • ادامه کار داخل ویدیو به صورت کامل توضیح داده شده است.

جمع بندی

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

4.2/5 - (4 امتیاز)

دیدگاه و پرسش

  1. مریم میگوید:

    چرا بافشردن دکمه تعجب و تب برای من سند html ساخته نمی شود؟!

    • پشتیبانی میگوید:

      احتمالا از نسخه قدیمی از نرم‌افزار VSCODE استفاده می‌کنید. سعی کنید جدید ترین نسخه نرم‌افزار را دانلود و نصب کنید.

  2. Z.najafi میگوید:

    سلام ببخشید من ی سوال دیگه داشتم الان که اون پوشه ی07 رو با vscodeباز میکنم اصلا فایل ایندکسی که توش ساخته بودم رو نمیاره،فقط vscode باز میشه و هیچ پوشه یا فایلی داخلش نمیاره

    • پشتیبانی میگوید:

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

  3. Z.najafi میگوید:

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

    • پشتیبانی میگوید:

      درود بر شما، برای دیدن پوشه ها در نرم‌افزار VSCODE می توانید از پلاگین های مختلف نمایش فولدرها استفاده کنید.

  4. مریم میگوید:

    ممنون از شما که خیلی کامل نحوه ساخت فایل اچ تی ام ال خام را در این ویدیو آموزش دادید.

  5. علیرضا میگوید:

    ممنون از شما بابت این آموزش بسیار عالی، با دیدن این ویدیو بنده نحوه ایجاد فایل خام HTML را به خوبی یاد گرفتم.

    • پشتیبانی میگوید:

      خوشحالیم که آموزش ساخت صفحه اچ تی ام ال برای شما مفید بوده است. ممنون از همراهی شما.

  6. jalali میگوید:

    با سلام موقع استفاده از Live Server (go live) در Visual Studio اخطار زیر میاد
    Open a folder or workspace… (File -> Open Folder)
    مشکل از چیه؟

    • پشتیبانی میگوید:

      سلام، دقت کنید که لایو سرور را باید فقط روی فایل html اجرا کنید.

  7. ارام زرینه میگوید:

    خیلی عالی . ممنون از اموزشهای خوبتون

  8. غریبه آشِنا میگوید:

    سلام. خسته نباشید
    افزونه live server باز نمی شود و پیام This extension has been disabled because the current workspace is not trusted در قسمت تنظیمات دارد که disable شده.
    و وقتی روی فولدر 01 که ساختیم راست کلیک می کنیم open with VSCode نمایش داده نمی شود و روی خود فایل html. راست کلیک کردم و با برنامه vscode بازش کردم.

    • پشتیبانی میگوید:

      سلام، در ابتدایی که یک فایل را با vscode باز می‌کنید، دوتا گزینه بهتون نشون میده که شما باید گزینه Yes, I trust رو انتخاب کنید تا این مشکل به وجود نیاد.

  9. AMIRALI میگوید:

    سلام استاد میخواستم بدونم چرا نرم افزار visual studio به من کمک نمی کنه؟

    • پشتیبانی میگوید:

      سلام، جلسات قبل را با دقت مشاهده کنید و پلاگین‌های معرفی شده را روی visual studio code خود نصب کنید.

  10. پارسا میگوید:

    سلام خدمت شما استاد عزیز ممنون بابت دوره ی خوبتون
    جسارت بنده را ببخشید
    با پلاگین HTML Play میتونید مثل پلاگین Live Server تغییرات را ببینید با این تفاوت که دیگر نیازی به باز کردن مرورگر نیست و میتوانید با vscode اجرا کنید
    باز هم ممنون بابت آموزش خوبتون

    • پشتیبانی میگوید:

      باسلام، بله حتی به غیر از این دو پلاگین، پلاگین‌های بسیار زیاد دیگری هستند که می‌توانید استفاده کنید، با تشکر از همراهی شما.

  11. farzad میگوید:

    سلام استاد در کد title ما عنوان سایت رو تغییر میدیم
    که اگر این کار رو نکنیم اسم سایت ما اسم پوشه ای هست که داریم روش کار میکنیم و چندان اسم مناسبی نیست
    پس با استفاده از تگ title میتونیم عنوان سایتمون رو به صورت دلخواه تغییر بدیم

    • پشتیبانی میگوید:

      سلام آقا فرزاد عزیز، عالی بود درست گفتید، جایزه شما یک کد تخفیف 10 درصدی برای دوره آموزش HTML و CSS پیشرفته هست که می‌توانید با ارسال تیکت آن را دریافت کنید!

      • farzad میگوید:

        خیلی ممنون
        خسته نباشید

آموزش‌های ویدیویی جدید یوتیوب رو از دست ندی!

بزن بریــم!