آموزش مقدماتی HTML (بیش از 30 ویدیو) html for beginners

ویدیوهای پیش نمایش : پیش نمایش

به دوره آموزش مقدماتی HTML (اچ تی ام ال) نسخه 5 از یوکسیم خوش اومدی!

توی این دوره، من مهران موسوی به همراه احسان موسوی به ساده ترین شکل ممکن HTML5 رو بهت یاد میدیم.

با مشاهده این دوره، تمامی مباحث مقدماتی HTML رو یاد می گیری و می تونی اولین صفحه های وب خودت رو ایجاد کنی.

حتی اگه برای اولین باره که کلمه HTML رو میشنوی، این دوره برات قابل فهم و درک خواهد بود.

بعد از ثبت نام در دوره می تونی ویدیو های آموزشی رو آنلاین تماشا یا دانلود کنی.

 

دوره های HTML یوکسیم

سطح های آموزش HTML

ما HTML5 رو در سه سطح مقدماتی، متوسط و پیشرفته بهت آموزش میدیم. 

برای یادگیری کامل HTML5 باید این سه سطح رو به ترتیب ببینی.

بعد از تماشای کامل این دوره، سطح متوسط و بعد پیشرفته رو هم ثبت نام کن تا HTML5 رو کامل یاد بگیری.

سطح متوسط : صفحه دوره متوسط HTML

سطح پیشرفته : بزودی

 

HTML چیست؟

HTML مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متنه.

HTML زبان پایه برای طراحی و برنامه نویسی وب هست.

HTML برای نمایش در مرورگرهای وب ساخته شده و زبان پایه برای طراحی تمام صفحات وب/اینترنتی به شمار میاد.

HTML میتونه با سایر زبان های وب سمت کاربر مثل CSS و JavaScript ادغام بشه و زیبایی و تعامل با کاربر داشته باشه.

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

 

مزایای HTML

- زبان پایه برای تمام زبان های برنامه نویسی وبه

- سَبُک، رایگان و کاربر پسنده

- یادگیریش آسونه و بر اساس زبان گفتاریه

- ویرایش کردن و اجرای فایل هاش آسونه

- توسط تمامی مرورگرهای وب پشتیبانی میشه

- براحتی میتونه با زبان های برنامه نویسی وب دیگه ادغام بشه

 

تفاوت HTML و CSS

HTML زبان برچسب نویسی و CSS زبان استایل نویسی یک صفحه وبه.

تو برای یادگیری CSS نیاز داری که اول HTML رو یاد بگیری، چون وقتی هنوز تگ یا برچسبی برای صفحه وبت ننوشتی، اگر استایلی برای اون بنویسی، نمیتونی تاثیرش رو در صفحه ات ببینی.

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

ما با HTML اول ساختار صفحه رو می نویسیم و بعد با CSS به اون ساختار استایل میدیم.

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

 

محیط کار کدنویسی یوکسیم

محیط کدنویسی یوکسیم

برای اینکه بتونی راحت تر و سریع تر HTML رو تمرین کنی، ما یک محیط کار کاملا رایگان برات آماده کردیم.

برای ورود به این محیط کار کافیه روی لینک زیر کلیک کنی :

ورود به محیط کار یوکسیم

توی این محیط کار راحت می تونی کدنویسی کنی و خروجی رو در همون قسمت سریع ببینی.

صفحه بطور خودکار برات بروزرسانی میشه و نیازی به بارگذاری مجدد برای مشاهده خروجی نیست.

امیدواریم تو یادگیری HTML کمکت کنه و از تمرین تو این محیط کار لذت ببری.

فصل 1 : معرفی

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

نرم افزار ها، فایل ها و مواردی که توی این دوره برای ایجاد، ویرایش و اجرای فایل های HTML بهشون نیاز پیدا می کنی رو بهت معرفی می کنیم.

در مورد تگ های HTML و اینکه این تگ ها به چه صورت در دوره آموزش داده میشن هم توضیحاتی رو میدیم.

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

فصل 2 : HTML مقدماتی

آموزش HTML مقدماتی

توی این فصل با Element ها (عناصر)، Attribute ها (صفات)، انواع Element ها و Attribute ها، طرز صحیح نوشتنشون و... آشنا میشی.

یک سری نکات در مورد نحوه نوشتن صحیح Element ها و Attribute ها بهت میگیم که دونستن اونها میتونه در کدنویسی اصولی و درست خیلی کمکت کنه.

یاد میگیری که چطور یک صفحه HTML رو به شکل های مختلف ایجاد، ویرایش، ذخیره و اجرا کنی.

با ساختار اولیه صفحه های HTML آشنا میشی؛ ساختاری که برای همه صفحه های وب مشترکه و کد های HTML بعدی خودت رو بر پایه اون مینویسی. همینطور یاد میگیری که چطور برای صفحه HTML خودت عنوان تعیین کنی و در مرورگر نمایش بدی.

با Attribute یا صفت lang و کاربردش در HTML آشنایی پیدا می کنی.

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

پاراگراف یا متن به صفحه HTML خودت اضافه می کنی و یاد می گیری که چطور بین محتوای صفحه ات خط فاصله و خط افقی دیداری ایجاد کنی.

به صفحه ات عکس اضافه میکنی و با فرمت ها یا پسوندهای مورد قبول عکس در وب و همینطور مهمترین Attribute ها یا صفت های تگ عکس مثل src ،alt ،width ،height و... آشنایی پیدا میکنی.

با تگ لینک یا پیوند که یکی از مهم ترین تگ های HTML هست آشنا میشی و متن و عکس رو به صفحه دیگه ای لینک میدی. همینطور با Attribute ها یا صفت های تگ لینک مثل href ،target و title هم کار می کنیم.

یک سری تگ های پرکاربرد و پراستفاده مربوط به متن رو یاد میدیم و میتونی متنت رو ضخیم، خمیده، خط خورده، زیرنویس، بالانویس، علامت گذاری، کوچک، زیرخط دار و... کنی.

با انواع لیست در HTML آشنایی پیدا میکنی و میتونی لیست های مرتب، نامرتب و تشریحی/توصیفی ایجاد و به صفحه ات اضافه کنی. همینطور Attribute های start و type رو بهت معرفی می کنیم که با کمک اونها میتونی نحوه علامت گذاری لیست مرتبط رو شخصی سازی کنی.

نحوه نمایش تگ های مختلف در مرورگرها رو بهت میگیم و با این مفهوم که همه تگ ها در HTML یا به صورت Block (تمام عرض) و یا بصورت Inline (خطی) نمایش داده میشن آشنا میشی.

سازماندهی و مرتب کردن کدهات رو یاد میگیری و با معایب و مزایای روش های مختلف مرتب سازی کدها در HTML آشنا میشی. همینطور با نحوه سازماندهی فایل ها و پوشه های پروژه ات آشنا میشی.

این نکته رو که آیا برای Attribute ها یا صفت ها حتما باید از علامت دابل کوتیشن (") استفاده کرد یا نه و اینکه جایگزینش چی هست رو بهت توضیح میدیم.

Comment ها یا خطوط توضیحی و نحوه استفاده شون در HTML که خیلی مهم و کاربردی هستن رو یاد میگیری.

در نهایت با هم چیزهایی که توی این فصل یاد گرفتیم رو تمرین می کنیم.

 

فصل 3 : جدول

آموزش جدول HTML

درست کردن جدول در کل یکی از بهترین راه ها برای ارائه و نمایش اطلاعاته. چون توی جدول همه چیز سر جای خودشه!

تو این فصل، مفهوم جدول، کاربرد ها، مزایا و استفاده های اون رو بهت توضیح میدیم.

با ساختار اولیه ای که برای ایجاد ساده ترین شکل جدول کافی هست و همینطور تگ های اختیاری جدول، ایجاد عنوان کلی، بسط دادن سطرها/ستون ها و... آشنا میشی.

اول از همه یک جدول خیلی ساده رو ایجاد می کنیم و بعد بهت یاد میدیم که چطور از سایر تگ های مرتبط با جدول استفاده کنی تا بتونی این جدول ساده رو برای خودت شخصی سازی کنی.

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

فصل 4 : مقدماتی فرم

آموزش فرم HTML

فرم ها استفاده های خیلی زیادی توی دنیای وب دارن، با استفاده از فرم ها ما می تونیم اطلاعات مختلفی رو از کاربر دریافت کنیم. فرم هایی مثل فرم تماس، جستجو، ارسال نظر، ارسال سفارش، ثبت نام در دانشگاه و... .

انواع ورودی های متن (ایمیل، تلفن، آدرس، عدد، تاریخ، پسورد و...)، انواع گزینه های انتخابی (تکی، چند تایی و...)، دکمه ها و گروه بندی عناصر فرم از جمله مباحثیه که تو این فصل یاد میگیری.

در نهایت  مباحثی که توی این فصل یاد گرفتیم رو با هم تمرین می کنیم.

فصل 5 : پروژه

توی این فصل تمام چیزهایی که یاد گرفتیم رو در قالب یک پروژه کلی تمرین و مرور می کنیم.

 

فصل 6 : موارد دیگر

تو این فصل یک سری تگ که کمتر در HTML استفاده میشن رو در قالب اسلاید همراه با مثال و توضیح مرور می کنیم. تگ هایی که در موارد خاص استفاده های خودشون رو دارن.

در نهایت به مرور کلی دوره می پردازیم.

 

فایل های دوره

بعد از ثبت نام در دوره، فایل های دوره رو از همین صفحه دانلود کن.

وقتی از حالت فشرده (zip) خارج کنی چند تا فایل رو میبینی.

توی بعضی از ویدیو ها از فایل هایی استفاده می کنیم که برات گذاشتیم تا در کنار مشاهده ویدیو های آموزشی، خودت هم از این فایل ها برای تمرین استفاده کنی.

ساختار اولیه HTML هم بصورت یک فایل متنی (txt) در بین فایل ها قرار داده شده.

 

تمرین و پروژه HTML

تمرین و پروژه HTML

فقط تماشا کردن کافی نیست!

در انتهای فصل های مهم برات تمرین قرار دادیم.

به هیچ وجه این تمرین هارو رد نکن و حتما انجامشون بده!

فصل 5 هم یک پروژه رو با مباحثی که یاد گرفتیم کار می کنیم.

در این دوره یاد می گیرید :
  • آشنایی با مفهوم HTML، نسخه ها، مزایا، تفاوت با CSS و...
  • فایل ها و نرم افزار های مورد نیاز برای کار با HTML
  • آشنایی و کار با تمامی تگ های HTML
  • کلیدهای میانبر کاربردی برای کدنویسی سریع تر
  • آشنایی با مفهوم Element (عنصر) و انواع آن
  • آشنایی با مفهوم Attribute (صفت)
  • روش های ایجاد، ویرایش و اجرای فایل های HTML
  • آشنایی با ساختار اولیه صفحات HTML
  • آشنایی و کار با Attribute یا صفت lang
  • آشنایی و کار با تگ های Heading (تیتر)
  • آشنایی و کار با تگ پاراگراف (متن)
  • نحوه ایجاد خط فاصله و خط دیداری در صفحه HTML
  • آشنایی و کار با تگ عکس و Attribute های آن + فرمت های عکس
  • آشنایی و کار با تگ لینک و Attribute های آن + نحوه لینک دادن
  • آشنایی و کار با تگ های بسیار کاربردی مرتبط با متن
  • آشنایی و کار با انواع لیست ها در HTML
  • نحوه نمایش تگ های HTML در مرورگر
  • روش های سازماندهی و نوشتن کدهای HTML
  • نحوه سازماندهی پوشه ها و فایل های پروژه
  • تفاوت دابل کوتیشن و کوتیشن در نوشتن Attribute ها
  • آشنایی و کار با Comment ها (خطوط توضیحی)
  • آشنایی با مفهوم، مزایا و کاربردهای جدول در HTML
  • آشنایی و کار با ساختار اولیه جدول
  • آشنایی و کار با تگ های اختیاری و معنایی جدول
  • نحوه تعیین عنوان برای جدول
  • نحوه بسط دادن سطرها و ستون های جدول
  • آشنایی با مفهوم، مزایا و کاربردهای فرم در HTML
  • آشنایی و کار با انواع ورودی های متن در فرم
  • آشنایی و کار با انواع دکمه ها در فرم
  • آشنایی و کار با انواع فیلدهای انتخابی در فرم
  • آشنایی و کار با تگ دسته بندی عناصر فرم
پیش نیازها :

    جهت مشاهده ویدیوها روی عنوان درس ها کلیک کنید

    باز کردن / بستن تمام فصل ها 6 فصل
  • شروع کار

    00:10:43
  • مباحث اولیه

    01:30:52
    • 6. عناصر (Elements) 01:56 برای تماشای این ویدیو وارد حساب کاربری خود شوید
    • 7. صفت ها (Attributes) 00:45 برای تماشای این ویدیو وارد حساب کاربری خود شوید
    • 8. ساخت اولین صفحه HTML 02:40 برای تماشای این ویدیو وارد حساب کاربری خود شوید
    • 9. ساختار اولیه HTML 05:39 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 10. صفت Lang 01:47 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 11. عناوین (Headings) 06:44 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 12. تگ های پایه 06:16 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 13. تصاویر 15:23 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 14. لینک ها 09:55 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 15. تگ های متن 06:05 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 16. لیست 08:56 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 17. نمایش تگ ها در مرورگر 03:45 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 18. مرتب سازی 04:27 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 19. کوتیشن گذاری 03:39 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 20. کامنت ها 07:04 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 21. تمرین 05:51 برای تماشای این ویدیو در دوره ثبت نام کنید
  • جدول

    00:21:21
    • 22. جدول چیست؟ 01:03 (پیش نمایش)
    • 23. ساختار اولیه جدول 06:03 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 24. تگ های اختیاری جدول 05:39 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 25. عنوان و ادغام سلول های جدول 04:42 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 26. تمرین جدول 03:54 برای تماشای این ویدیو در دوره ثبت نام کنید
  • فرم (مقدماتی)

    00:45:31
    • 27. فرم چیست؟ 00:54 (پیش نمایش)
    • 28. مقدماتی فرم 07:26 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 29. انواع Input 11:24 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 30. گزینه های انتخابی 10:49 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 31. تگ های Legend و Fieldset 03:31 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 32. درج عکس برای دکمه ها 01:21 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 33. تمرین فرم 10:06 برای تماشای این ویدیو در دوره ثبت نام کنید
  • پروژه

    00:12:32
    • 34. پروژه HTML مقدماتی 12:32 برای تماشای این ویدیو در دوره ثبت نام کنید
  • فصل پایانی

    00:04:22
    • 35. معرفی تگ های بیشتر 03:09 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 36. قدم بعدی 01:13 برای تماشای این ویدیو در دوره ثبت نام کنید
  1. علیرضا تیری علیرضا تیری 25 اردیبهشت 1399

    عالی
    تدریس اقای مهران موسوی عالی تر بود

  2. کیارش کیارش 12 اردیبهشت 1399

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

  3. سحرجمالی سحرجمالی 04 اردیبهشت 1399

    سلام وقتتون بخیر .
    دوره ای بسیار آموزنده و عالی بود .

  4. محمد صالح بهرامی مجد محمد صالح بهرامی مجد 21 فروردین 1399

    سلام و عرض ادب
    تشکر بابت آماده سازی و ارائه ی این دوره میتونم بگم واقعا عالی بود
    خیلی مختصر و مفید
    بدون داشتن خستگی برای مخاطب این دوره.
    تشکر از زحمات

  5. امید مسعود امید مسعود 20 بهمن 1398

    بسیار عالی و با زبان ساده مرسی یوکسیم

این بخش بطور موقت غیرفعال است.
بزودی بخش پرسش و پاسخ با امکانات بیشتر راه اندازی خواهد شد.