زبان برنامه نویسی html چیست و چه کاربردی دارد؟
CSS چیست و چه کاربردی دارد؟
بهترین ویرایشگر کد برای HTML و CSS کدام است؟
شما در حال مشاهده
جلسه 4 هستید
آموزش ساخت فایل html در VSCode (سند خام html)
مفاهیم پایه زبان HTML | آشنایی با تگ ها و صفت ها
آموزش 3 روش افزودن کدهای CSS به HTML
آموزش حل مشکل نوشتن فارسی در HTML و CSS
اضافه کردن فونت فارسی در CSS و HTML
آموزش تگ های قالب بندی متن در HTML
آموزش کار با تگ لینک a و تصویر در HTML
آموزش استایل دهی به متن‌ها در Html & CSS
ساخت جدول در HTML و کار با تگ table
آموزش class و id در CSS | انتخابگرها در CSS
آموزش Selectorها در CSS | انتخابگرهای تودرتو
مدرس دوره
نبی عبدی
زمان ویدیو
14:17 دقیقه
برو به دیگر جلسات
برای دانلود ویدیو
آموزش ساخت فایل html در VSCode (سند خام html)
در این جلسه از سری جلسات آموزش 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 (ساخت اولین صفحه وب) برای شما مفید و کاربردی واقع شده باشد، هر سوالی دارید در انتهای همین صفحه مطرح کنید تا بتوانیم پاسخ سوالات شما عزیزان را بدهیم، با تشکر از همراهی شما.
چرا بافشردن دکمه تعجب و تب برای من سند html ساخته نمی شود؟!
احتمالا از نسخه قدیمی از نرم‌افزار VSCODE استفاده می‌کنید. سعی کنید جدید ترین نسخه نرم‌افزار را دانلود و نصب کنید.
سلام ببخشید من ی سوال دیگه داشتم الان که اون پوشه ی07 رو با vscodeباز میکنم اصلا فایل ایندکسی که توش ساخته بودم رو نمیاره،فقط vscode باز میشه و هیچ پوشه یا فایلی داخلش نمیاره
درود بر شما، اگر پوشه را به درستی باز کنید و سمت چپ ادیتور را بررسی کنید، قطعا می توانید فایل‌های پروژه خود را ببینید.
سلام خسته نباشید
امیدوارم به سوالم جواب بدین
اول تشکر میکنم بابت آموزش عالیتون ،بنده ی مشکلی داشتم اونم اینکه وقتی پوشه ی1 رو ایجاد میکنم و با vscode باز میکنم فایل index.html رو که ساخته بودیم باز میشه ولی اسم پوشه اون بالا نمیاد.مثلا شما که فایلو باز کردین اسم پوشه اون بالا بود و فایل ایندکس به عنوان زیر مجموعه ی اون نمایش داده میشد ولی برای من فقط فایل ایندکس رو میاره و پوشه رو نمیاره،ممنون میشم راهنماییم کنید
درود بر شما، برای دیدن پوشه ها در نرم‌افزار VSCODE می توانید از پلاگین های مختلف نمایش فولدرها استفاده کنید.
ممنون از شما که خیلی کامل نحوه ساخت فایل اچ تی ام ال خام را در این ویدیو آموزش دادید.
ممنون از شما بابت این آموزش بسیار عالی، با دیدن این ویدیو بنده نحوه ایجاد فایل خام HTML را به خوبی یاد گرفتم.
خوشحالیم که آموزش ساخت صفحه اچ تی ام ال برای شما مفید بوده است. ممنون از همراهی شما.
با سلام موقع استفاده از Live Server (go live) در Visual Studio اخطار زیر میاد
Open a folder or workspace… (File -> Open Folder)
مشکل از چیه؟
سلام، دقت کنید که لایو سرور را باید فقط روی فایل html اجرا کنید.
خیلی عالی . ممنون از اموزشهای خوبتون
سلام. خسته نباشید
افزونه 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 رو انتخاب کنید تا این مشکل به وجود نیاد.
سلام استاد میخواستم بدونم چرا نرم افزار visual studio به من کمک نمی کنه؟
سلام، جلسات قبل را با دقت مشاهده کنید و پلاگین‌های معرفی شده را روی visual studio code خود نصب کنید.
سلام خدمت شما استاد عزیز ممنون بابت دوره ی خوبتون
جسارت بنده را ببخشید
با پلاگین HTML Play میتونید مثل پلاگین Live Server تغییرات را ببینید با این تفاوت که دیگر نیازی به باز کردن مرورگر نیست و میتوانید با vscode اجرا کنید
باز هم ممنون بابت آموزش خوبتون
باسلام، بله حتی به غیر از این دو پلاگین، پلاگین‌های بسیار زیاد دیگری هستند که میتوانید استفاده کنید، با تشکر از همراهی شما.
سلام استاد در کد title ما عنوان سایت رو تغییر میدیم
که اگر این کار رو نکنیم اسم سایت ما اسم پوشه ای هست که داریم روش کار میکنیم و چندان اسم مناسبی نیست
پس با استفاده از تگ title میتونیم عنوان سایتمون رو به صورت دلخواه تغییر بدیم
سلام آقا فرزاد عزیز، عالی بود درست گفتید، جایزه شما یک کد تخفیف 10 درصدی برای دوره آموزش HTML و CSS پیشرفته هست که میتوانید با ارسال تیکت آن را دریافت کنید!
خیلی ممنون
خسته نباشید