HTML (HyperText Markup Language) اولین قدم برای ورود به دنیای طراحی و توسعه وب است. در این دوره جامع، شما نه تنها با اصول پایه HTML آشنا می‌شوید، بلکه مهارت‌هایی را کسب خواهید کرد که به شما امکان می‌دهد صفحات وبی زیبا و حرفه‌ای بسازید. در هر درس، از مفاهیم ساده‌ای مانند ایجاد ساختار صفحه، استفاده از تگ‌ها و اضافه کردن تصاویر، تا مباحث پیشرفته‌ای مانند استفاده از فرم‌ها، لینک‌های پویا، و HTML معنایی را فرا خواهید گرفت. ما شما را در طول مسیر راهنمایی می‌کنیم تا از اولین خط کد تا ساخت یک وب‌سایت کامل، با اطمینان و دانش لازم پیش بروید.

آیا به دنبال ایجاد وب‌سایت‌های واکنش‌گرا و مدرن هستید؟ یا شاید می‌خواهید برای شغل رویایی خود به عنوان یک توسعه‌دهنده وب آماده شوید؟ این دوره برای شماست! با یادگیری HTML، پایه‌ای محکم برای ورود به دنیای وسیع‌تر CSS و JavaScript خواهید داشت و می‌توانید خلاقیت خود را به شکلی بی‌نظیر به نمایش بگذارید. پس همین حالا ثبت‌نام کنید و اولین قدم خود را به سمت موفقیت بردارید!

مباحث پایه‌ای HTML مانند معرفی، تگ‌ها و کامنت‌ها

basics

موضوعات مربوط به تصاویر و لینک‌ها.

images link

lists

همه مباحث مرتبط با فرم‌ها

forms

مباحث مربوط به چیدمان و لایه‌بندی

layout

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

آشنایی با کامپیوتر

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

علاقه به یادگیری تکنولوژی‌های وب

دانش پایه‌ای از نحوه استفاده از مرورگرهای وب مانند Chrome یا Firefox

آشنایی با مرورگرهای وب

مهارت در جستجوی اطلاعات و حل مسائل مرتبط با توسعه وب

توانایی جستجو در اینترنت

علاقه‌مند به یادگیری زبان‌هایی مانند HTML و CSS برای طراحی وب‌سایت‌ها

تمایل به یادگیری زبان‌های نشانه‌گذاری

توانایی کار با ویرایشگرهای متنی ساده مانند Notepad یا VS Code برای نوشتن کدهای HTML

آشنایی با ویرایشگرهای متن

به دنبال یک تغییر شغلی یا شروع یک مسیر جدید در دنیای تکنولوژی هستید؟ دوره آموزش HTML ما دقیقاً همان چیزی است که نیاز دارید! این دوره نه تنها اصول اولیه HTML را به شما می‌آموزد، بلکه شما را برای ساختن وب‌سایت‌های مدرن و خلاقانه آماده می‌کند. با این دوره، شما از یک مبتدی به یک طراح وب حرفه‌ای تبدیل خواهید شد!

شروعی شگفت‌انگیز برای ورود به دنیای جذاب توسعه وب

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

آموزش جامع HTML برای مبتدیان

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

معرفی html

برای نهایت بهره گیری از این آموزش، بهتره که ادیتور مورد نظر رو نصب کرده باشید. در این جا با کوچک ترین عنصر تشکیل دهنده یک کد به زبان HTML آشنا می شیم که تگ ها (Tag) هستند. ساده ترین تگ ای که در این ویدیو با اون آشنا می شیم، تگ های تیتر (Heading) هستند.

Heading tags

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

پاراگراف ها

تمام زبان هایی که با استفاده از اون ها میشه کد نوشت، امکان نوشتن کامنت رو دارن. در این آموزش، یاد می گیریم که چطور می تونیم در زبان HTML، کامنت (Comment) بنویسیم و این کار چطور و کجا به دردمون می خوره و به کمک ما میاد.

Commenting

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

image tag and attributes

در این قسمت از آموزش، با نوعی از صفت ها (Attributes) آشنا می شیم که برای تمام تگ ها قابل استفاده هست و به قولی Global و یا عمومی محسوب می شن. این صفت ID نام داره. نامگذاری منحصر به فرد ID های تگ های مختلف بسیار در زبان HTML حائز اهمیته. برای تماشای این ویدیو، مطمئن شوید که با مفهوم صفات (Attributes) به خوبی آشنایی پیدا کردید.

ID Global Attribute

امکان نداره وب سایتی پیدا کنید که لینک (Link) نداشته باشه. با استفاده از لینک ها می تونیم کاری کنیم که با کلیک بر روی یک عکس یا نوشته به یک وب سایت جدید، قسمتی از وب سایت خودمون و یا قسمتی از صفحه ای که داخلش هستیم هدایت بشیم. این کار با استفاده از تگ a و یا Anchor قابل انجامه. پس این آموزش بسیار اهمیت داره، بهتره که با تگ هایی که تا به این جا آموزش داده شد، به خوبی آشنا شده باشید.

آموزش لینک قرار دادن

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

Nesting a Link in a Paragraph

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

لینک کردن تصاویر

مفهومی به نام لیست (List) در HTML وجود داره که کاربرد زیادی هم داره، برای مثال در ایجاد منوهای بالای صفحات وب سایت ها.  این لیست ها می تونن دارای ترتیب (Ordered List) و بدون ترتیب (Unordered List) باشن. در این آموزش با دو تگ جدید که برای این دو نوع لیست استفاده می شن، آشنایی پیدا می کنیم.

Ordered and Unordered Lists

لیست ها (Lists) هم مثل بقیه تگ ها، ممکنه سر راست نباشن و تو در تو باشن و چند لیست داخل هم قرار بگیرن. پس می تونیم لیست های تو در تو (Nested) هم داشته باشیم که در این ویدیو به اون می پردازیم.

Nesting List Elements

اگر بخواهیم در کد HTML از لیست ها (Lists) برای ایجاد منو در بالای صفحه وب سایت استفاده کنیم، پس حتما باید بدونیم که چطور میشه اجزای چند لیست تو در تو (Nested)، به صفحات دیگری لینک بشن. این قسمت از آموزش HTML رو از دست ندید!

link list elements

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

Introduction to HTML5 Elements(1)

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

Introduction to HTML5 Elements

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

input tag

در آموزش قبل با تگ input آشنا شدیم، و حالا در این قسمت از آموزش HTML با صفات (Attributes) این تگ آشنا می شیم. یکی از این صفات Placeholder هست که در واقع متنی هست که پیش از این که داخل input چیزی وارد بشه، به کاربر نمایش داده می شه. هم چنین صفت label هم معرفی می کنیم.

placeholders

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

input forms and submit

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

Required Fields

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

radio buttons

در آموزش قبلی دیدیم که با استفاده از دکمه های رادیویی (Radio Buttons) می تونیم از کاربر بخواهیم که یکی از گزینه هایی که برای اون تعیین کردیم رو انتخاب کنه. حالا با استفاده از چک باکس (Checkbox) می تونیم امکان انتخاب چند گزینه رو به کاربر بدیم. در این قسمت از آموزش HTML با پیاده سازی این عنصر آشنا می شیم.

checkbox

یکی از مهم ترین صفات (Attribute) هایی که در زبان HTML وجود داره، Value یا مقداره.  برای مشخص کردن گزینه های چک باکس (Checkbox) و دکمه رادیو (Radio Button) به این صفت (Attribute) نیاز پیدا می کنیم که در این قسمت از آموزش زبان HTML به اون می پردازیم.

value attribute

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

استفاده از ابزار Inspect Element برای کسانی که با کد HTML و CSS و در کل تکنولوژی های فرانت اند کار می‌کنن، بسیار مفیده و در خیلی از موارد می تونه کمک کننده باشه. در این قسمت از آموزش زبان HTML با کار با این ابزار آشنا می شیم و یاد می گیریم که چطور می تونه برای ما مفید باشه و خیلی از مشکلات رو برای ما حل کنه.