دوره آموزشی HTML5 

html در واقع اولین سنگ بنای طراحی وب سایته که لازمه برای شروع اونو خیلی خوب یاد بگیرید، برای شروع طراحی سایت لازمه با یه سری اصطلاحات آشنا بشید تا درک بهتری از زبان های برنامه نویسی داشته باشید؛

• کلاینت (Client): کامپیوترهای عادی که در دسترس من و شماست
• سرور (Server): ابر کامپیوترهای که وظیفه سرویس دهی به کامپیوتر کاربران رو دارد
• کلاینت ساید (Client side): (معنی:سمت کاربر) کدهایی که روی مرورگر و سیستم کاربر پردازش میشه و کاربر میتونه به اون کدها دسترسی داشته باشه
• سرور ساید (Server side): (معنی:سمت سرور) کدهایی که روی سرور پردازش میشه و فقط نتیجه به کاربر نمایش داده میشه و کاربر نمیتونه به کدهاش دسترسی داشته باشه
• فرانت اند (Front-end): بخشی است که قابل دیدن است و با آن تعامل می کنیم
• بک اند (Back-end): بخشی که قابل دیدن نیست اما برای تعامل لازم است

اجازه بدید با یه مثال ساده تفاوت Back-end و Front-end رو بهتون بگم:
Front-end (فرانت اند): هر آنچه در صحنه یک تئاتر میبینید مثل بازیگران میشه 
Back-end(بک اند): هر آنچه در پشت صحنه تئاتر هست و شما نمیبینید اما تاثیر مستقیم بر روی تئاتر دارد مثل کارگردان و نویسنده 

HTML زبان برنامه نویسی نیست!!!
درست دیدید HTML زبان برنامه نویسی نیست! بلکه زبان نشانه گذاریه؛ اصن بیاید ببینیم html چی هست؟

تاریخچه HTML

اولین نسخه ی این زبان سال 1991 معرفی شد و آنرا تنها با نام html میشناختند و هیچ شماره ورژنی نداشت. و تنها صفحات وب ساده با آن طراحی میشدند. در سال 1995 html 2.0 معرفی شد که حالت استاندارد این زبان به شمار میرفت. سپس در سال 1997 ورژن html 3.2 توسط کنسرسیوم جهانی وب پیشنهاد شد. بعد از آن در همان سال 1997  به دلیل مشکلات موجود در نسخه ی موجود؛ html ورژن 4.0 ارائه شد. پس از مدتی نسخه ی 4.01  ارائه شد که قابلیت و تنظیمات بیشتری برای انواع مختلف رسانه ها را اضافه کرد. قابلیتهایی برای  اجرا کردن بهتر سی اس اس و دیگر انواع اسناد را در خود جای داد.
در سال 2000 ورژن جدیدی از این زبان به نام ایکس html 1.0 ارائه شد که طراحان وب را بسیار در طراحی بهتر صفحات سایت یاری میکرد. در سال 2009 یک انقلاب بزرگ ایجاد شد و html 5 ارائه شد. این ورژن از اچ تی ام ال در بین همه ی طراحان وب بسیار محبوب است و کنسرسیوم جهانی وب پس از این نسخه از html توسعه ی ورژن XHTML 2.0 را کنار گذاشت. زبان html  توسط کنسرسیوم جهانی وب که از آن به عنوان  World Wide Web Consortium یاد میشود توسعه داده میشود. به تازگی شایعاتی مبنی بر توسعه ی html و انتشار نسخه ی 6  این  این زبان ( html6 ) در بین کاربران در شبکه های اجتماعی و وبسایت ها پراکنده شده است در حالی که هیچ خبر یا مطلبی در این باره از سمت سازمان w3c دال بر صحت این خبر منتشر نشده است. حتی در برخی موارد برخی وبسایت ها تگ ها و المان های html6 را هم معرفی کرده اند که اکثر این وبسایت ها خارجی هستند. 

HTML چیست؟

عبارت HTML (اچ تی ام ال) مخفف Hyper Text Markup Language به معنی زبان نشانه (تگ) گذاری ابر متن است، بذارید یکم بیشتر توضیح بدم
زبان HTML شامل یه سری تگ میشه که این تگ ها هر کدوم یه خصوصیاتی دارن مثلا برای نوشتن پاراگراف از تگ p استفاده میکنیم یعنی هر متنی بین تگ باز (p) و تگ بسته (p/) قرار بگیره مثل یک پاراگراف ساده نشون میده یا مثلا هر متنی بین تگ قرار بگیره عنوان محسوب میشه و از نظر سایز از متن داخل تگ بزرگتر و ضخیم تر نمایش داده میشه.

html زبان استاندارد طراحی صفحات وب است و در نهايت کليه کدهای صفحه اعم از سمت سرور (Serverside) و سمت کاربر (Client side) به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند.

زبان های برنامه نویسی به دو بخش اصلی کلاینت ساید (client side) و سرور ساید (server side) تقسیم میشن؛

• زبان های طراحی قالب سایت که سمت کاربر پردازش میشه مثل (HTML, CSS, JavaScript) زبان کلاینت ساید میگویند.
• زبان های برنامه نویسی سایت که سمت سرور پردازش میشه (PHP, ASP, Ruby, Python) زیان سرورساید میگویند.

تغییرات در html 5 نسبت به نسخه های پیشین

1. در نسخه های پیشین بدون فلش پلیر امکان استفاده از رسانه های مختلف امکان پذیر نبود. html نسخه ی 5 با استفاده از تگ های ادیو و ویدئو این امکان به سادگی به وجود آمده است.
2. در نسخه های پیشین html در مرورگر اجرا نمیشود اما در html 5 جاوا اسکریپت در پس زمینه اجرا میشود .
3. توسط html های قدیمی طرح ها و نمودار ها  تنها با ابزار هایی مانند فلش پلیر ها امکان استفاده داشتند اما در html نسخه 5 یک بخش مجزا از این زبان استفاده از svg و طرح ها هستند.
4. در نسخه های پیشین امکان درگ اند دراپ (drag & drop)وجود نداشت در حالی که در نسخه ی5  html وجود دارد.
5. در نسخه های قدیمی امکان استفاده از اشکال هندسی مانند دایره، مربع و مثلث وجود نداشت؛ در حال که در نسخه ی5 html این امکان وجود دارد.
6. نسخه های قدیمی با تمام مرورگر های قدیمی سازگارند ولی نسخه ی 5 این زبان تنها با مرورگرهای جدید پشتیبانی و پردازش میشود.
7. در نسخه های قدیمی المنت هایی مانند header , navbar , footer قابل معرفی و اشاره نیستند در حالی که در html5 هر کدام تگ خاص خود را دارا هستند.
8. نسخه های پیشنی سینتکس اشتباه را متوجه نمیشدند و پردازش نمیکردند اما نسخه ی html5 این قابلیت را داراست و syntax اشتباه را میتواند پردازش کند.
    

کدنویسی با HTML

همانطور که بیان شد html زبان برنامه نویسی نیست و هیچ گونه محاسبه ای برای ما انجام نمیدهد. Html یک زبان نشانه گذاری به حساب می آید. به همین دلیل کدنویسی با این زبان کمی متفاوت تر از دیگر زبانهاست. در زبان اچ تی ام ال ما از تگ ها برای نشان دادن المنت های اصلی در وب سایت استفاده میکنیم. حالت استاندارد استفاده از تگ ها بصورت زیر هست:

تگ ها از یک استاندارد خاص استفاده میکنند و هر تگ شامل یک تگ باز و یک تگ بسته است. به تگ باز Opening tag و به تگ بسته Closing tag گفته میشود. تفاوت تگ باز با تگ بسته به تنها یک اسلش (/) اضافه در تگ بسته است و به صورت زیر است:

Content

در برخی موارد تگ ها داری تگ بسته نیستند. Html زبانی نیست که نسبت به حروف بزرگ و کوچک حساس باشد و در اصطلاح (Case Sensitive)کیس سنسیتو نیست و سینتکس بسیار ساده ای دارد. برای کار با HTML  اصلا نیاز به سخت افزار قدرتمندی نیست وبا ساده ترین سیستم و نرم افزار میتوان آنرا قرا گرفت و از آن استفاده کرد. اولین برنامه که میتوان کد های html  را در آن نوشت نرم افزار نوت پد(not pad) است که روی تمام سیستم ها که ویندوز دارد قرار دارد. پس از نوشتن کد هایhtml  ، خروجی آنها در  مرورگر پردازش میشود و مرورگر آنرا نمایش میدهد.

یادگیری HTML

برای برداشتن اولین قدم در طراحی قالب سایت، شما نیازمند یادگیری html میباشید؛ در واقع html اسکلت و استخون بندی وب سایت شماست که با یادگیری css و فریمورک هاش مثل بوت استرپ و... میتونید قالب سایت مورد نظرتونو طراحی کنید. دوست من هر صفحه وب سایتی که میبینی یقینا با استفاده از زبان HTML ایجاد شده و هیچ صفحه سایتی وجود ندارد که از HTML استفاده نکرده باشه، در کنار این زبان که اسکلت تمام صفحات سایت هست از زبان های دیگری هم قطعا استفاده میشود اما همانطور که اشاره کردم استخوان بندی تمام صفحات وب سایت با استفاده از زبان html ایجاد میشه.
شما برای ورود به دنیای طراحی سایت لازمه آموزش HTML رو خیلی جدی بگیرید چرا که میتونه به شما کمک کنه وب سایتی اصولی تر و حرفه ای تر ایجاد کنید ، در دوره آموزش html ما با استفاده از به روز ترین تکنولوژی طراحی سایت و آخرین ورژن html یعنی HTML5 شما را از پایه با ساده ترین مفاهیم آشنا میکنیم و به شما آموزش میدیم که چطور با استفاده از این آموزش ها اولین وب سایت خودتون رو طراحی کنید ، در دوره آموزشی html از صفر به سادگی شما را با تمام مفاهیم مانند تصاویر و رنگ ها و آدرس دهی های پیشرفته و ... آشنا میکنیم و شما با سپری کردن این دوره میتونید از اینکه اولین قدم رو در طراحی سایت با قدرت برداشتید مطمئن بردارید
یکی از شغل های اصلی در رابطه با وب سایت طراح سایت و یا Web Designer هست که کار طراحی قالب یا اصطلاحا UI-User Interface رو انجام میده که یکی از شغل های بسیار زیبا و لذت بخش دنیاست، اگر شما تصمیم گرفتید وارد عرصه طراحی وب سایت بشید لازمه به زبان HTML به طور کامل مسلط بشید.

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

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

یادگیری زبان HTML (اچ تی ام ال) را دست کم نگیرید...!

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

در دوره آموزش html  به چه مباحثی میپردازیم؟ 

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

ابتدا به توضیحات پایه ای و ضروری راجع به اصول طراحی سایت و تاریخچه html میپردازیم، سپس ساختار کدها و تگ¬های html و خصوصیت آن¬ها بررسی میکنیم؛ در ادامه ساخت منو با html،  انواع لینک ها و آپلود عکس رو یادمیگیرید. یکم css یادمیگیریم بعد به عنوان پروژه با هم یه گالری تصاویر درست میکنیم.
خب تا اینجا کار  ما باhtml4  تموم میشه 

آموزش پیشرفته html

میریم سراغ آموزش html5، با تگ ها و ویژگی های اضافه شده و جدید html5 به طور کامل آشنا میشیم، المان های اضافه شده در ساخت فرم با html5 تست میکنیم و در انتها دوره آموزشی html5 رو با نحوه بارگذاری ویدئو و صدا به پایان میرسانیم
 

ویدئو معرفی دوره جامع html 

شما با تسلط کافی بر زبان HTML میتوانید به سراغ تکمیل طراحی قالب بروید و زبان های دیگری چون CSS یا ... را بیاموزید و شغلی زیبا با درآمدی مناسب را برای خود ایجاد کنید .

پیش نیازهای دوره آموزشی html

برای ثبت نام در دوره آموزشی html(اچ تی ام ال) شما به هیچ پیش نیاز خاصی نیاز ندارید، همین که بلد باشید کامپیوتر و لپ تاپ شخصیتون رو روشن کنید کافیه؛ ما در ویدئو آموزشی html از پایه مطالب رو به شما آموزش میدیم و نیاز نیست شما در زمینه آی تی یا طراحی سایت تخصصی داشته باشید یا حتما رشته تون مرتبط با این موضوع باشه 

آموزش HTML مناسب افراد زیر هست

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

بعد از یادگیری html5 در آکادمی آی تی به هیچ کلاس و منبع آموزشی دیگری نیاز نخواهید داشت.

یکی از اهدافی که از روز اول در طراحی دوره های آموزشی در آکادمی آی تی مدنظر داشتیم این بود که منبعی رو تهیه کنیم که کاربران دیگه به هیچ منبع دیگه ای احتیاج نداشته باشن ، لازم نباشه هزینه های متفاوتی رو برای شرکت در کلاس های حضوری و یا دوره های مجازی آموزشی بدن و حتی لازم نباشه از سایر منابع خارجی هم استفاده بکنند و بتونن با سپری کردن این دوره به سادگی به برنامه نویسی html مسلط بشن و همه موارد رو به طور عالی یاد بگیرن

زمان ویدیوهای آموزشی آکادمی آی تی

یکی از مسائلی که در آموزش های مجازی بسیار مهم است خسته نکردن کاربر با ویدیو های آموزشی بلند مدت است، به طوری که استاندارد تهیه هر ویدیو بین زمان 6 تا 20 دقیقه می باشد ، یادگیری در این صورت به شدت ارتقا پیدا میکند ، شما فرض کنید با یک ویدیو 5 ساعته یعنی 300 دقیقه ای رو برو باشید ، چقدر امکان دارد شما نکاتی را در حین آموزش 5 ساعتی فراموش کنید یا از دید شما پنهان بماند چرا که ممکن است به علت خستگی ویدیو ها را با سرعت بیشتری ببینید، و همین امر به شدت درصد یادگیری شما را کاهش میدهد.
اما در دوره های آموزشی آکادمی آی تی این استاندارد جهانی به طور کامل رعایت شده است، و به هیچ عنوان باعث خستگی و دلزدگی کاربر از آموزش مورد نظر نمی شود.
 

سرفصل های دوره پروژه محور HTML 

اصول طراحی سایت 

جلسه اول: آشنایی با اصول طراحی سایت با HTML:

زبان های سرور ساید و کلاینت ساید، مقدمات 

Html مقدماتی

جلسه دوم ساختار کدها و تگ های html:

ابزار های طراحی سایت ، آشنایی با دستورات html(تگ ها)

جلسه سوم آشنایی با خصوصیت تگ های html:

انواع Text Level و Block Level، کنترل متون سایت، خصوصیت تگ های مختلف

جلسه چهارم آموزش ساخت منو و لیست ها در html:

تگ هایul ، ol ، dl برای ساخت لیست و منو و انواع تگ های Empty و Container و تگ hr

جلسه پنجم: ساخت انواع لینک در HTML:

آموزش آدرس دهی در وب، داخلی، خارجی، ایمیل و Anchor

جلسه ششم: آموزش آپلود تصاویر در سایت:

انواع تصاویر و بهینه سازی تصاویر در وب سایت و انتخاب تصویر برای بک گراند صفحه با html

جلسه هفتم: آموزش تکمیلی تصاویر:

ساخت انیمیشن Gif و image map و بهینه سازی آنلاین تصاویر

جلسه هشتم: طراحی با جدول ها:

آشنایی با متد های طراحی، جداول تو در تو

جلسه نهم: آموزش ساخت فرم در HTML:

خصوصیات و موارد مختلف در فرم

جلسه دهم: آموزش رنگ ها در html:

مدهای مختلف آن، meta تگ ها و تگ های دیگر در Head

پروژه

جلسه یازدهم: (پروژه) ساخت اولین گالری تصویر:

با استفاده از جدول ها و لینک ها و تصاویر

Html پیشرفته

جلسه دوازهم: طراحی Box Model و Full Css:

آشنایی با تگ div

جلسه سیزدهم: تاریخچه HTML5:

آشنایی با نحوه نگارش کدها

جلسه چهاردهم: آموزش تگ های جدید:

(DOCTYPE,header,nav,section,aside,footer) در HTML5

جلسه پانزدهم:  آشنایی با تگ های جدید:

(article,figure,figcaption,mark,progress,meter,time,details,summary) در HTML5

جلسه شانزدهم: آموزش ویژگی ها و المان های جدید HTML5 برای ایجاد فرم:

(color,date,datetime,month,time,url,range,search, autocomplete, autofocus, required, multiple,…)

جلسه هفدهم: آموزش کامل تگ های Video ,Audio در HTML5:

خصوصیات autoplay , controls, loop, preload,  poster

جلسه هجدهم: آموزش گرافیک های برداری (Vector) در HTML5:

تگ SVG