جهت ساخت یک فرم یا صفحه باید از مجموعه ای از دستورات html و Css استفاده نمود که دستورات Html قالب اصلی را مشخص می‌کند و دستورات Css ظاهر و رنگ را مشخص خواهد کرد. در این آموزش Html با ساختار کلی Html و چند تگ آشنا خواهید شد و کدها در محیط Visual Studio Code نوشته خواهد شد. در آموزش بعدی با ادامه تگ‌های Html آشنا خواهید شد.
فیلم آموزش Html
نحوه اجرای برنامه در Visual Studio Code
جهت ساخت پروژه در Visual Studio Code از منوی File بر روی گزینه New کلیک کرده تا یک فایل ایجاد شود سپس با استفاده از کلید میانبر Ctrl + S، فایل را از نوع Html ذخیره نمایید. اگر در فایل Html ساخته شده دستور doc را نوشته و Enter را بزنید قالب دستورات Html یا همان موارد مورد نیاز تگ Html اضافه خواهد شد.
تگ های Html
قالب دستورات Html از دو تگ </head><head> و <body></body> که به ترتیب مربوط به هد سایت و بدنه می‌باشد تشکیل شده است. هر چیزی که داخل تگ body نوشته شود در صفحه مرورگر نمایش داده خواهد شد.
توجه داشته باشید که همیشه کدهای Html باید بین تگ <html></html> نوشته شود و در واقع تگ هد و بدنه سایت هم در این تگ قرار دارد.
انواع تگ های Html
در Html دو نوع کلی تگ داریم:
- تگ های با محتوی : شامل تگ‌هایی است که دارای یک تگ باز و بسته می‌باشند مانند تگ head و body
- تگ‌های بدون محتوی : شامل تگ‌های است که فقط یک تگ دارند و دارای یک تگ باز و بسته نمی‌باشند مانند تگ img
تگ Title
تگ Title یک تگ با محتوی در بخش <head> می‌باشد و در این تگ عنوان سایت نوشته خواهد شد. هنگام باز شدن صفحه در مرورگر این عنوان در بالای صفحه نمایش داده می‌شود.
تگ های پرکاربرد آموزش Html
سرفصل های آموزش طراحی UI
- 01 طراحی UI | آموزش Html رایگان 06:28
- 02 طراحی UI | طراحی فرم ثبت نام رایگان 07:54
- 03 طراحی UI | آموزش Css رایگان 07:05
- 04 طراحی UI | طراحی خبرنامه در وردپرس رایگان 10:06
- 05 طراحی UI | اعتبارسنجی ایمیل با جاوا اسکریپت رایگان 08:22
- 06ویتامین استوایی | آموزش رایگان UI عضویت 10 فیلم آموزشی
- 07 بستنی استوایی | آموزش طراحی رابط کاربری خرید 13 فیلم آموزشی
از حضرتعالی ممنونم، من میخواستم بدونم این پنجره رو بعنوان یک پاپ آپ باید کد نویسی کرد یا مودال، چون دستورات جاوا اسکریپت (جی کوئری) این دو متفاوت هستش و میخواستم از تحربیات و مهارت گرانبهای شما بهره مند بشم
خواهش میکنم بزرگوار. قطعا از نظر UX بهتر هست از مودال استفاده کنید.
سلام
من میخوام وقتی روی اسم یا تصویر هر کاربر کلیک شد یه پنجره برای چت خصوصی باز بشه
و توی تمام صفحات هم این اتفاق بیوفته این رو با دیالوگ یا یو آی یا مودال باید بنویسم؟ و با چه کد جی کوئری ؟
سلام دوست عزیز. توی گوگل جستجو کنید open popup css یا … کلی مثال جالب براتون میاره. اینجا توی کامنت من نمی تونم این موارد رو توضیح بدم.