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

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

اصطلاحاتی که پیش از آموزش HTML5 بهتر است بدانید!

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

• کلاینت (Client): کامپیوترهای عادی که در دسترس من و شماست.

• سرور (Server): ابر کامپیوترهایی که وظیفه سرویس دهی به کامپیوتر کاربران را دارد.

• کلاینت ساید (Client side): (معنی: سمت کاربر) کدهایی که روی مرورگر و سیستم کاربر پردازش می شود و کاربر می تواند به آن کدها دسترسی داشته باشد.

• سرور ساید (Server side): (معنی: سمت سرور) کدهایی که روی سرور پردازش میشود و فقط نتیجه به کاربر نمایش داده شده و نمیتواند به کدها دسترسی داشته باشد.

• فرانت اند (Front-end): بخشی است که قابل دیدن است و با آن تعامل می کنیم.

• بک اند (Back-end): بخشی که قابل دیدن نیست اما برای تعامل لازم است.

اجازه بدید با یه مثال ساده تفاوت Backend و Front-end رو بهتون بگم:

• Front-end (فرانت اند): هر آنچه در صحنه یک تئاتر می بینید مثل بازیگران می شه 

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

HTML زبان برنامه نویسی نیست!!!

درست دیدید HTML زبان برنامه نویسی نیست! بلکه یک زبان نشانه گذاری است.

HTML چیست؟

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

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

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

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

• زبان های برنامه نویسی سایت که سمت سرور پردازش میشود (PHP, ASP, Ruby, Python) زبان سرور ساید می گویند.

تاریخچه HTML

اولین نسخه این زبان سال 1991 معرفی شد و آن را تنها با نام html می شناختند و هیچ شماره ورژنی نداشت. و تنها صفحات وب ساده با آن طراحی می شدند. در سال 1995 html 2.0 معرفی شد که حالت استاندارد این زبان به شمار می رفت. سپس در سال 1997 ورژن html 3.2 توسط کنسرسیوم جهانی وب پیشنهاد شد. بعد از آن در همان سال 1997 به دلیل مشکلات موجود در آن نسخه؛ html ورژن 4.0 ارائه شد. پس از مدتی نسخه ی 4.01 ارائه شد که قابلیت و تنظیمات بیشتری برای انواع مختلف رسانه ها را اضافه کرد. قابلیت هایی برای  اجرا کردن بهتر css و دیگر انواع اسناد را در خود جای داد.

در سال 2000 ورژن جدیدی از این زبان به نام ایکس html 1.0 ارائه شد که طراحان وب را بسیار در طراحی بهتر صفحات سایت یاری می کرد. در سال 2009 یک انقلاب بزرگ ایجاد شد و html 5 ارائه شد. این ورژن از اچ تی ام ال در بین همه ی طراحان وب بسیار محبوب است و کنسرسیوم جهانی وب پس از این نسخه از html توسعه ی ورژن XHTML 2.0 را کنار گذاشت. زبان html توسط کنسرسیوم جهانی وب که از آن به عنوان World Wide Web Consortium یاد می شود توسعه داده میشود.

به تازگی شایعاتی مبنی بر توسعه ی html و انتشار نسخه ی 6 این این زبان ( html 6 ) در بین کاربران در شبکه های اجتماعی و وب سایت ها پراکنده شده است در حالی که هیچ خبر یا مطلبی در این باره از سمت سازمان w3c دال بر صحت این خبر منتشر نشده است. حتی در برخی موارد برخی وب سایت ها تگ ها و المان های html 6 را هم معرفی کرده اند که اکثر این وب سایت ها خارجی هستند. 

تغییرات html5 نسبت به نسخه های پیشین

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 گفته می شود. تفاوت تگ باز با تگ بسته به تنها یک اسلش (/) اضافه در تگ بسته است.

در برخی موارد تگ ها دارای تگ بسته نیستند. Html زبان نیست که نسبت به حروف بزرگ و کوچک حساس باشد و در اصطلاح (Case Sensitive) کیس سنسیتیو نیست و سینتکس بسیار ساده ای دارد. برای کار با HTML اصلا نیاز به سخت افزار قدرتمندی نیست و با ساده ترین سیستم و نرم افزار می توان آن را فرا گرفت و از آن استفاده کرد. اولین برنامه که می توان کد های html را در آن نوشت نرم افزار نوت پد (notepad) است که روی تمام سیستم ها که ویندوز دارد قرار دارد. پس از نوشتن کد های 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 یاد می گیریم بعد به عنوان پروژه با هم یه گالری تصاویر درست می کنیم.

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

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

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

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

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

• دوستانی که می خواهند وارد دنیای جذاب طراحی وب سایت شوند

• افرادی که قصد یادگیری برنامه نویسی قالب سایت دارند

• عزیزانی که دوست دارند از طریق فریلنسری در خانه کسب درآمد کنند

• افرادی که می خواهند کسب و کار اینترنتی راه اندازی کنند

• دوستانی که علاقه مند به کسب درآمد ارزی و دلاری به صورت دورکاری هستند

• دوستانی که می خواهند در کمترین زمان به درآمد برسند

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

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

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

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