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

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

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

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

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

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

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

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

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

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

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

سطح پیشرفته : صفحه دوره پیشرفته 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 مقدماتی

توی این فصل با 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 : جدول

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

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

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

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

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

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

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

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

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

فصل 5 : پروژه

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

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

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

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

فایل های دوره

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

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

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

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

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

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

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

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

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