چرا یادگیری HTML ضروری است؟

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

به‌عنوان مثال، در یک صفحه وب موارد زیر با HTML مشخص می‌شوند:

• عنوان اصلی صفحه
• منوهای سایت
• متن‌ها و پاراگراف‌ها
• لینک‌ها
• تصاویر
• ویدئوها
• جدول‌ها
• فرم‌ها و بخش‌های مختلف محتوا

مرورگرها HTML را تحلیل می‌کنند تا ساختار و محتوای صفحه را تشخیص دهند؛ سپس CSS ظاهر آن را تعیین می‌کند و JavaScript می‌تواند به آن رفتار و تعامل اضافه کند.

به زبان ساده، سایت‌نویسی بدون HTML مانند ساختن یک ساختمان بدون اسکلت‌بندی اولیه است.

HTML چیست؟

HTML مخفف عبارت زیر است:

HyperText Markup Language

به معنی زبان نشانه‌گذاری ابرمتن.

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

برای درک بهتر، یک ساختمان را تصور کنید:

• HTML مانند نقشه و اسکلت ساختمان است؛
• CSS مانند رنگ‌آمیزی، دکوراسیون و نمای ساختمان عمل می‌کند؛
• JavaScript مانند سیستم‌های هوشمند، کلیدها و قابلیت‌های تعاملی ساختمان است.

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

سرفصل‌های فیلم آموزش HTML

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

بخش اول: معرفی HTML و تگ‌ها

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

مباحث این بخش شامل موارد زیر است:

• نشانه‌گذاری چیست؟
• مفهوم تگ در HTML
• دسته‌بندی تگ‌ها و نحوه استفاده از آن‌ها
• ایجاد فایل HTML به دو روش
• شروع برنامه‌نویسی HTML با Notepad
• ساخت نخستین صفحه HTML
• تگ DOCTYPE و نقش آن در استاندارد بودن صفحه
• تگ html به‌عنوان ریشه اصلی سند
• تگ head و کاربردهای آن
• تگ title برای تعیین عنوان صفحه در مرورگر
• تگ body برای بدنه و محتوای قابل‌نمایش صفحه
• تگ‌های Heading از h1 تا h6
• ایجاد پاراگراف با تگ p
• آشنایی با رنگ، چینش و استایل‌دهی متن‌ها
• ویژگی style و کاربرد آن در تگ‌ها
• تگ i و em برای نمایش تأکیدی یا مورب متن
• تگ b و strong برای نمایش متن برجسته
• ایجاد خط افقی با تگ hr
• تگ small برای نمایش متن کوچک‌تر
• تگ sub برای زیرنویس، مانند فرمول‌های شیمیایی
• تگ sup برای بالانویس و توان در فرمول‌ها
• کامنت‌نویسی در HTML
• تگ a برای ایجاد لینک

بخش دوم: تگ‌های تصویر و ویدئو

در این بخش، نحوه استفاده از فایل‌های تصویری و ویدیویی در صفحات وب آموزش داده می‌شود.

موضوعات بخش دوم عبارت‌اند از:

• آشنایی با تگ a و انواع آدرس‌دهی لینک‌ها
• لینک‌دهی نسبی و مطلق
• تگ img برای افزودن تصویر
• تنظیم ویژگی‌های مهم تصاویر
• استفاده از متن جایگزین یا alt برای تصویر
• ترکیب تگ a و img برای ساخت تصویر لینک‌دار
• تگ video برای نمایش فایل‌های ویدیویی
• آشنایی با ویژگی‌های مهم تگ ویدئو
• بررسی فرمت‌های متداول ویدئو
• نکات مربوط به سازگاری مرورگرها با فرمت‌های ویدیویی

بخش سوم: لیست‌ها، جدول‌ها و متاتگ‌ها

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

لیست‌ها و عناصر ساختاری

• ایجاد لیست نامرتب با ul
• ایجاد لیست مرتب با ol
• انتخاب نوع شماره‌گذاری در لیست‌ها
• زیباسازی و تنظیم نمایش لیست‌ها
• تگ div و کاربرد آن در گروه‌بندی بخش‌های صفحه
• تگ span و کاربرد آن برای استایل‌دهی به بخشی از متن

جدول‌ها در HTML

• ایجاد جدول با تگ table
• استفاده از تگ‌های thead، tbody و tfoot
• ایجاد سطر با tr
• ایجاد سلول داده با td
• ایجاد سلول عنوان با th
• ایجاد عنوان برای جدول
• تنظیم ظاهر، رنگ و ساختار جدول‌ها

تگ iframe

• معرفی تگ iframe
• کاربردهای مختلف iframe در صفحات وب
• قراردادن ویدئوهای آپارات در سایت
• قراردادن ویدئوهای یوتیوب در سایت

متاتگ‌ها

• معرفی و کاربرد تگ meta
• متاتگ charset و تنظیم صحیح زبان و کاراکترهای فارسی
• متاتگ viewport برای نمایش بهتر در گوشی و دستگاه‌های مختلف
• متاتگ author برای معرفی نویسنده صفحه
• متاتگ description و نقش آن در نمایش توضیحات صفحه در موتورهای جست‌وجو
• آشنایی با متاتگ keywords در چارچوب مفاهیم پایه سئو

نکته: متاتگ keywords امروزه در رتبه‌بندی گوگل نقش مستقیمی ندارد، اما آشنایی با آن می‌تواند برای درک ساختار متاتگ‌ها مفید باشد.

بخش چهارم: طراحی یک صفحه کامل با HTML

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

مباحث این بخش شامل موارد زیر است:

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

مهارت‌هایی که پس از پایان دوره کسب می‌کنید

پس از مشاهده کامل این آموزش، می‌توانید:

• ساختار یک صفحه HTML استاندارد را ایجاد کنید؛
• تگ‌های مهم HTML را بشناسید و به‌درستی به کار ببرید؛
• متن، لینک، تصویر، ویدئو، لیست و جدول به صفحه اضافه کنید؛
• از iframe برای نمایش محتوای خارجی استفاده کنید؛
• متاتگ‌های مهم صفحه را تنظیم کنید؛
• فایل CSS را به HTML متصل کنید؛
• یک صفحه وب ساده را از ابتدا طراحی کنید؛
• برای یادگیری CSS، JavaScript، PHP، ASP.NET، وردپرس و سایر فناوری‌های وب آماده شوید.

چرا این دوره برای شروع برنامه‌نویسی وب مناسب است؟

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

این دوره با ارائه مباحث به‌صورت مرحله‌به‌مرحله، به شما کمک می‌کند تا:

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

این آموزش برای چه کسانی مناسب است؟

فیلم آموزش HTML برای گروه‌های زیر مناسب است:

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

پیش‌نیازهای دوره

این دوره پیش‌نیاز تخصصی ندارد و از مفاهیم ابتدایی شروع می‌شود.

برای انجام تمرین‌ها، تنها به موارد زیر نیاز دارید:

• یک کامپیوتر یا لپ‌تاپ
• یک مرورگر وب مانند Chrome یا Firefox
• یک ویرایشگر متن مانند Notepad یا Visual Studio Code

درباره محصول

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

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

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

سوالات متداول

HTML چیست؟

HTML مخفف HyperText Markup Language و یک زبان نشانه‌گذاری برای ایجاد ساختار و محتوای صفحات وب است.

آیا برای یادگیری این دوره باید برنامه‌نویسی بلد باشم؟

خیر. این دوره از مباحث مقدماتی شروع می‌شود و به پیش‌نیاز برنامه‌نویسی خاصی نیاز ندارد.

آیا HTML یک زبان برنامه‌نویسی است؟

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

آیا در این دوره CSS نیز آموزش داده می‌شود؟

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

آیا این آموزش برای طراحی سایت با وردپرس نیز مفید است؟

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

مدت زمان دوره چقدر است؟

مدت زمان این آموزش ۳ ساعت و ۳۰ دقیقه است.