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

کامل‌ترین آموزش HTML در ایران! از مفاهیم ابتدایی تا تگ‌های پیشرفته را با مثال و تمرین یاد بگیرید و طراح وب حرفه‌ای شوید. اولین قدم برای ورود به دنیای طراحی سایت را رایگان بردارید و با من هم قدم باشید تا شما را با دنبای زیبای طراحی وب آشنا کنم.

قیمت دوره: رایگان 🙂

آیدی تلگرام پشتیبانی: afrazedu_support@

آموزش html

وضعیت دوره

تکمیل شده

مدت زمان دوره

5 ساعت

آخرین بروزرسانی

1404/01/27

روش پشتیبانی

تلگرام

پیش نیاز

ندارد

نحوه دسترسی به دوره

از همین صفحه

سرفصل‌های دوره html

1- معرفی و توضیحات دوره

2- آشنایی با html و css

3- آموزش نصب vscode با جزئیات

4- اضافه کردن ویژگی‌های موردنیاز به vscode و آماده سازی محیط برنامه نویسی

5- آموزش ساخت سند html  و بررسی کدهای اولیه

6- بررسی attributes 

7- آموزش Heading و paragraphs

8- آموزش تگ‌های قالب بندی متن

9- آموزش لینک‌ها در html

10- آموزش تگ img

11- آموزش تگ Picture

12- آموزش favicon در صفحات وب

13- آموزش tabels در html با جزییات دقیق

14- آموزش lists در html

15- نگاهی به css

16- بررسی عناصر inline و block

17- بررسی تگ div و span

18- آموزش ویژگی class و id

19- آموزش تگ‌های معنایی یا semantic tags - جلسه اول

20- آموزش تگ‌های معنایی یا semantic tags - جلسه دوم

21- آموزش Entities و computer code elements

22- آموزش فرم ها در html

23- آموزش form attributes

24- آموزش عناصر فرم در html - جلسه اول

25- آموزش عناصر فرم در html - جلسه دوم

26- آموزش input types

27- آموزش input attributes

28- تگ iframe

29- تگ video و audio

30- پایان دوره - ارائه نقشه راه

جلسات دوره

جلسه اول: مقدمه دوره

جلسه دوم: آشنایی با HTML و CSS

جلسه سوم: آموزش نصب VScode

جلسه چهارم: آماده‌ سازی محیط کدنویسی

جلسه پنجم: ساخت سند HTML

جلسه ششم: بررسی Attributes

جلسه هفتم: Heading و Paragraphs

جلسه هشتم: قالب بندی متن

جلسه نهم: لینک ها در html

جلسه دهم: آموزش تگ img

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

جلسه دوازدهم: آموزش favicon

جلسه سیزدهم: آموزش tables

جلسه چهاردهم: لیست ها در html

جلسه پانزدهم: نگاهی به css

جلسه شانزدهم: عناصر inline و block

جلسه هفدهم: تگ div و span

جلسه هجدهم: class و id

جلسه نوزدهم: تگ‌های معنایی - جلسه اول

جلسه بیستم: تگ‌های معنایی - جلسه دوم

جلسه بیست و یکم: Entities و computer code ها

جلسه بیست و دوم: فرم ها در html

جلسه بیست و سوم: آموزش form attributes

جلسه بیست و چهارم: عناصر فرم در html - جلسه اول

جلسه بیست و پنجم: عناصر فرم در html - جلسه دوم

جلسه بیست و ششم: آموزش input types

جلسه بیست و هفتم: آموزش input attributes

جلسه بیست و هشتم: تگ iframe

جلسه بیست و نهم: تگ video و audio

جلسه سی ام: پایان دوره - ارائه نقشه راه

مدرس دوره کیست؟

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

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

اگر به دنبال بهترین نقطه شروع برای یادگیری طراحی سایت هستید، دوره آموزش رایگان HTML سایت افراز ادیو دقیقاً همان چیزی‌ست که نیاز دارید. این دوره با 30 جلسه آموزشی کاملاً ساختارمند و کاربردی، یکی از کامل‌ترین منابع فارسی برای یادگیری HTML از صفر است. از آشنایی با مفاهیم اولیه و نصب ابزارهای لازم گرفته تا تسلط بر تگ‌ها، ساختار صفحات، فرم‌ها، عناصر چندرسانه‌ای، و حتی مفاهیم اولیه CSS — همه‌چیز به زبان ساده، مرحله‌به‌مرحله، و کاملاً عملی آموزش داده شده است.

چه چیزی این دوره را متمایز می‌کند؟

اولاً: تمام جلسات به‌صورت رایگان و بدون نیاز به ثبت‌نام در همین صفحه در قالب فایل‌های ویدیویی قابل مشاهده است. ثانیاً: بر خلاف بسیاری از دوره‌ها که فقط سطحی از HTML را پوشش می‌دهند، این مجموعه تا سطح حرفه‌ای شما را همراهی می‌کند، با سرفصل‌هایی که حتی بسیاری از دوره‌های پولی به آن نمی‌پردازند؛ مثل تگ‌های معنایی، تگ picture، favicon، و انواع input attributes.

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

دوره‌ی آموزش HTML افراز ادیو یکی از دوره‌های اساسی برای شروع مسیر برنامه‌نویسی وب است. اگر قصد دارید در دنیای وب توسعه‌دهنده بشید، قطعاً باید با HTML آشنا باشید. این دوره به شما کمک می‌کنه تا اصول این زبان پایه رو از صفر تا صد یاد بگیرید و مسیر رو برای سایر زبان‌ها و تکنولوژی‌ها هموار کنید. بنابراین، گذراندن این دوره یکی از اولین گام‌هاست که شما رو به سمت دنیای جذاب برنامه‌نویسی هدایت می‌کنه.

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

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

موفقیت شما در این دوره به چهار عامل اصلی بستگی داره:

  1. محتوای با کیفیت و مدرس متخصص
  2. پشتکار و انگیزه خود شما
  3. پشتیبانی مستمر و پاسخگو
  4. تمرین منظم و مرور مداوم

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

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

جلسات آموزشی HTML

جلسه اول: مقدمه دوره

در این جلسه، با دیدی روشن وارد دنیای طراحی وب می‌شویم. توضیح می‌دهیم چرا HTML اساس هر وب‌سایتی‌ست، این دوره چه اهدافی دارد و قرار است در پایان آن به چه مهارتی برسید. اگر هنوز نمی‌دانید از کجا باید شروع کنید، این جلسه چراغ راه شماست.

جلسه دوم: آشنایی با HTML و CSS

برای آن‌که سایت‌سازی را درست یاد بگیرید، باید تفاوت و ارتباط بین HTML و CSS را بدانید. در این جلسه، مفاهیم بنیادین این دو زبان را با زبانی ساده توضیح می‌دهیم تا پایه‌تان محکم باشد.

جلسه سوم: آموزش نصب VScode

بدون یک محیط کدنویسی حرفه‌ای، طراحی وب هم سخت می‌شود. این جلسه به شما نشان می‌دهد چطور محبوب‌ترین و کارآمدترین ادیتور برنامه‌نویسی، یعنی VS Code، را نصب و آماده استفاده کنید — با تنظیماتی که مخصوص تازه‌کارها طراحی شده!

جلسه چهارم: آماده‌سازی محیط کدنویسی

همه‌چیز برای شروع آماده است! در این بخش محیط کدنویسی‌تان را به‌صورت بهینه تنظیم می‌کنیم تا تجربه‌ای راحت، حرفه‌ای و بی‌دردسر از کدنویسی داشته باشید. نکاتی را خواهید آموخت که بسیاری از تازه‌کارها نادیده می‌گیرند.

جلسه پنجم: ساخت سند HTML

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

جلسه ششم: بررسی Attributes

وقتی بخوای به عناصر HTML اطلاعات اضافه بدی، باید با خصوصیت‌ها (Attributes) آشنا باشی. در این جلسه با دنیای ویژگی‌های تگ‌ها آشنا می‌شی؛ از href و src گرفته تا alt و target — مفاهیمی که تفاوت کد نویسی آماتور با حرفه‌ای رو مشخص می‌کنن.

جلسه هفتم: Heading و Paragraphs

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

جلسه هشتم: قالب‌بندی متن

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

جلسه نهم: لینک‌ها در HTML

بدون لینک‌ها، اینترنت فقط یه مشت صفحه‌ی جدا از همه‌چیز بود. این جلسه بهت یاد می‌ده چطور صفحات وب رو با لینک‌ به هم متصل کنی، لینک خارجی و داخلی بسازی و کاربر رو درست راه بندازی!

جلسه دهم: آموزش تگ img

تصویر، بخش مهمی از تجربه کاربری. در این جلسه یاد می‌گیری چطور به صفحاتت تصویر اضافه کنی، آدرس‌دهی کنی و با ویژگی‌هایی مثل alt و width کیفیت سایتت رو بالا ببری.

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

اگه می‌خوای برای دستگاه‌های مختلف تصاویر مناسب لود بشن، باید تگ picture رو بلد باشی. این جلسه قدمی‌ست به‌سوی طراحی ریسپانسیو حرفه‌ای — چیزی که خیلی از تازه‌کارها نمی‌دونن.

جلسه دوازدهم: آموزش favicon

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

جلسه سیزدهم: آموزش tables

برای نمایش جدول اطلاعاتی، هیچ‌چیزی مثل table نیست. در این جلسه با ساختار جدول‌ها آشنا می‌شی و یاد می‌گیری ردیف، ستون، سرستون و حتی جدول‌های تو در تو بسازی.

جلسه چهاردهم: لیست‌ها در HTML

لیست‌ها ابزار مهمی در انتقال اطلاعات دسته‌بندی‌شده هستن. این جلسه یاد می‌گیری چطور لیست‌های مرتب (ol) و نامرتب (ul) بسازی و چطور ظاهر اون‌ها رو مدیریت کنی.

جلسه پانزدهم: نگاهی به CSS

وقتشه کمی ظاهر صفحات رو زیباتر کنیم! در این جلسه با CSS آشنا می‌شی، زبانی که بهت اجازه می‌ده صفحه‌های HTMLت رو رنگ‌آمیزی کنی، استایل بدی و طراحی رو شروع کنی.

جلسه شانزدهم: عناصر inline و block

تفاوت بین عناصر inline و block یکی از پایه‌ای‌ترین مفاهیم طراحی CSS و HTMLه. این جلسه با مثال‌های تصویری بهت نشون می‌ده این تفاوت‌ها چطور روی ظاهر صفحه‌ات اثر می‌ذاره.

جلسه هفدهم: تگ div و span

دو تگ مهم و همه‌کاره برای گروه‌بندی و ساختاردهی در HTML. در این جلسه یاد می‌گیری چطور از div برای چیدمان صفحه و از span برای استایل‌دهی دقیق‌تر استفاده کنی.

جلسه هجدهم: class و id

اگه می‌خوای به عناصر خاصی استایل بدی یا اون‌ها رو با JavaScript هدف بگیری، باید مفهوم class و id رو بلد باشی. این جلسه این مفاهیم رو به‌خوبی جا می‌ندازه.

جلسه نوزدهم: تگ‌های معنایی – جلسه اول

در این بخش وارد دنیای HTML5 Semantic Tags می‌شیم. تگ‌هایی مثل header, main, footer و… که کمک می‌کنن کد ما خواناتر و سئوپذیرتر باشه.

جلسه بیستم: تگ‌های معنایی – جلسه دوم

ادامه‌ی جلسه قبل! در این بخش با تگ‌هایی مثل article, section, aside و کاربردهای هرکدوم آشنا می‌شی و یاد می‌گیری چطور صفحاتت رو ساختاریافته بسازی.

جلسه بیست و یکم: Entities و computer code ها

برای نمایش علائم خاص یا قطعه‌کد داخل HTML، باید با entities و تگ‌های کدنویسی مثل code, pre, kbd و… آشنا باشی. این جلسه دقیقا همین کارو می‌کنه.

جلسه بیست و دوم: فرم‌ها در HTML

فرم‌ها قلب تعامل کاربر با سایت هستن. از ثبت‌نام گرفته تا جستجو. در این جلسه می‌ری سراغ ساخت اولین فرم — پایه‌ای ولی بسیار حیاتی.

جلسه بیست و سوم: آموزش form attributes

ویژگی‌هایی مثل action, method, target, autocomplete و کلی گزینه‌ی دیگه که باعث می‌شن فرم‌هات هوشمندتر و کاربردی‌تر باشن. این جلسه مفاهیم رو شفاف می‌کنه.

جلسه بیست و چهارم: عناصر فرم در HTML – جلسه اول

شروعی برای آشنایی با input, label, textarea, button و… این جلسه خیلی کاربردیه و بهت کمک می‌کنه رابط کاربری قوی‌تری بسازی.

جلسه بیست و پنجم: عناصر فرم در HTML – جلسه دوم

ادامه‌ی بخش قبلی! این بار سراغ تگ‌هایی مثل select, option, fieldset و legend می‌ریم. برای ساخت فرم‌های چندگزینه‌ای حیاتی هستن.

جلسه بیست و ششم: آموزش input types

می‌خوای بدونی چه نوع‌هایی برای input داریم؟ از text و email گرفته تا date, range, file و کلی نوع دیگه که هر کدوم تجربه کاربری رو متحول می‌کنن.

جلسه بیست و هفتم: آموزش input attributes

در این جلسه یاد می‌گیری چطور با required, placeholder, min, max, و… رفتار ورودی کاربر رو کنترل و اعتبارسنجی کنی.

جلسه بیست و هشتم: تگ iframe

در این جلسه یاد می‌گیری چطور محتوا هایی مثل ویدیو یوتیوب، نقشه گوگل یا یک سایت دیگه رو درون سایتت نشون بدی — بدون ترک کردن صفحه. این قدرت iframeـه!

جلسه بیست و نهم: تگ video و audio

و در پایان، یاد می‌گیری چطور صدا و ویدیو رو مستقیماً در سایت پخش کنی. بدون نیاز به ابزار اضافی یا افزونه، HTML خودش همه‌چیز رو آماده کرده.

جلسه سیم ام: ارائه نقشه راه

در این جلسه یک نقشه راه دقیق برای طی کردن ادامه مسیر برنامه نویسی وب رو بهتون نشون میدیم. پس حتما این جلسه رو جدی بگیرید.

بعد از HTML چی یاد بگیرم ؟

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

اگه قصد داری وارد دنیای برنامه‌نویسی وب بشی و مثلاً با زبان‌هایی مثل JavaScript کار کنی، یاد گرفتن HTML اولین مانع سر راهته که باید ازش عبور کنی. وقتی این مهارت رو خوب یاد بگیری، در واقع زیرساخت محکمی ساختی که ادامه مسیر رو برات خیلی راحت‌تر می‌کنه.