یکی از اولین زبان‌های برنامه‌نویسی که به عنوان یک توسعه‌دهنده وردپرس یاد خواهید گرفت، HTML است.
در این درس، خواهید آموخت که HTML چیست، چگونه در وردپرس استفاده می‌شود و برای یافتن اطلاعات بیشتر درباره نوشتن HTML به کجا مراجعه کنید.
HTML چیست؟
HTML با وب مترادف است. ابداع‌کننده اینترنت، HTML را برای طراحی و ایجاد صفحات وب طراحی کرد.
هر زمان که با یک مرورگر از وب‌سایتی بازدید می‌کنید، خواه یکی از بزرگترین پورتال‌های خبری جهان باشد یا صفحه اصلی یک مؤسسه خیریه محلی، سندی که در حال مشاهده آن هستید به زبان HTML نوشته شده است.
HTML مخفف HyperText Markup Language (زبان نشانه‌گذاری ابرمتن) است و برای توصیف ساختار یک صفحه وب به کار می‌رود.
HTML از عناصر (Elements) تشکیل شده است. عناصر، بلوک‌های سازنده اسناد HTML هستند.
یک عنصر HTML معمولاً دارای یک تگ شروع (start tag)، یک تگ پایان (end tag) و محتوایی در بین این تگ‌ها است.
در اینجا نمونه‌ای از یک سند HTML آورده شده است:
<html lang="en">
<head>
<title>My HTML document</title>
</head>
<body class="main">
<h1>This is the heading of my HTML document</h1>
<img src="https://picsum.photos/250" alt="A randomly selected image">
<p>This is the content of my HTML document.</p>
</body>
</html>در مثال بالا، تگ <html> در بالا، تگ شروع و تگ </html> در پایین، تگ پایان است. دقت کنید که تگ پایان با یک ممیز رو به جلو (/) شروع می‌شود. محتوای بین این دو تگ، محتوای عنصر <html> محسوب می‌شود.
عناصر HTML می‌توانند به صورت تودرتو (Nested) داخل یکدیگر قرار بگیرند. در مثال بالا، عنصر <head> درون عنصر <html> و عنصر <title> درون عنصر <head> قرار گرفته است.
عناصر HTML همچنین معنایی (Semantic) هستند؛ به این معنی که هر تگ معنای خاصی دارد و باید به روشی خاص استفاده شود. برای مثال، عنصر <h1> یک عنصر عنوان (Heading) و عنصر <p> یک عنصر پاراگراف است.
عناصر HTML می‌توانند ویژگی‌هایی (Attributes) نیز داشته باشند. ویژگی‌ها برای ارائه اطلاعات اضافی درباره یک عنصر استفاده می‌شوند. در مثال بالا، عنصر <body> دارای ویژگی‌ای به نام class با مقدار main است.
برخی عناصر خاص به شما اجازه می‌دهند رسانه‌هایی مانند تصاویر، صدا و ویدیو را در صفحه بگنجانید. در مثال بالا، عنصر <img> برای قرار دادن یک تصویر در صفحه استفاده شده است. ویژگی src برای مشخص کردن مکان تصویر و ویژگی alt برای ارائه متن جایگزین (توضیحی) برای تصویر به کار می‌رود.
برخی از عناصر HTML نیز خودبسته (Self-closing) هستند. در مثال بالا، عنصر <img> خودبسته است و مشاهده می‌کنید که تگ پایان ندارد.
زمانی که از یک صفحه وب در مرورگر بازدید می‌کنید، مرورگر سند HTML را می‌خواند و محتوا را در پنجره مرورگر نمایش می‌دهد. مرورگر سند HTML را از بالا به پایین و از چپ به راست می‌خواند.
به صورت پیش‌فرض، هر یک از عناصر به شکل متفاوتی نمایش داده می‌شوند. برای مثال، عنصر <h1> به صورت یک عنوان بزرگ و عنصر <p> به صورت یک پاراگراف نمایش داده می‌شود.
HTML در تمام بخش‌های یک سایت وردپرسی استفاده می‌شود؛ از پیشخوان مدیریت گرفته تا قالبی که بخش فرانت‌اند (رابط کاربری) را اجرا می‌کند. حتی افزونه‌ها نیز برای نمایش محتوا از HTML استفاده می‌کنند.
HTML دردسترس (Accessible HTML)
هنگام نوشتن HTML، مهم است که HTML دردسترس بنویسید. HTML دردسترس کدی است که به گونه‌ای نوشته شده که استفاده از آن برای افراد دارای معلولیت آسان باشد.
به عنوان مثال، اگر از یک تصویر برای نمایش لوگو استفاده می‌کنید، باید متن جایگزین (alt text) را برای آن تصویر در نظر بگیرید. این کار به افرادی که از صفحه‌خوان (Screen Reader) استفاده می‌کنند اجازه می‌دهد متوجه شوند تصویر چیست.
علاوه بر این، همیشه باید از عناصر HTML معنایی (Semantic) استفاده کنید و آن‌ها را به روش صحیح به کار ببرید. برای مثال، اگر در حال ایجاد یک عنوان هستید، باید از یک عنصر عنوان (مثل <h1> تا <h6>) استفاده کنید، نه از یک عنصر پاراگراف.
در این درس با HTML آشنا شدیم؛ زبانی که پایه ساختار تمام صفحات وب و همچنین رابط کاربری وردپرس است. HTML ساختار صفحه را مشخص می‌کند و مرورگر با خواندن آن، محتوا را نمایش می‌دهد.
در ادامه، برای تثبیت مفاهیم، مجموعه‌ای از سوالات تستی شبیه سوالات مصاحبه توسعه‌دهندگان وردپرس آورده شده است.
تست‌های HTML برای توسعه‌دهندگان وردپرس
HTML مخفف چیست؟
A) Hyper Tool Markup Language
B) HyperText Markup Language✅
C) HyperText Machine Language
هدف اصلی HTML چیست؟
A) مدیریت پایگاه داده
✅B) توصیف ساختار صفحات وب
C) افزایش سرعت سایت
کدام گزینه بلوک‌های سازنده HTML هستند؟
A) Functions
B) Elements✅
C) Variables
یک عنصر HTML معمولاً از چه بخش‌هایی تشکیل شده است؟
A) Start Tag + Content + End Tag✅
B) Function + Variable
C) Attribute + CSS
کدام نمونه یک End Tag صحیح است؟
A) <h1>
B) </h1>✅
C) <h1/>
در HTML وقتی یک عنصر داخل عنصر دیگر قرار بگیرد به آن چه می‌گویند؟
A) Linked Elements
B) Nested Elements✅
C) Grouped Elements
کدام عنصر برای عنوان اصلی صفحه استفاده می‌شود؟
A) <p>
B) <h1>✅
C) <div>
کدام عنصر برای نوشتن پاراگراف استفاده می‌شود؟
A) <p>✅
B) <span>
C) <section>
کدام عنصر برای نمایش تصویر در HTML استفاده می‌شود؟
A) <image>
B) <img>✅
C) <picture>
ویژگی src در عنصر <img> چه کاری انجام می‌دهد؟
A) اندازه تصویر را مشخص می‌کند
✅B) مسیر فایل تصویر را مشخص می‌کند
C) رنگ تصویر را تعیین می‌کند
ویژگی alt در تصویر چه کاربردی دارد؟
A) فشرده‌سازی تصویر
✅B) ارائه متن جایگزین برای تصویر
C) تعیین عرض تصویر
کدام عنصر یک Self-closing element محسوب می‌شود؟
A) <p>
B) <div>
C) <img>✅
مرورگر HTML را چگونه می‌خواند؟
A) از پایین به بالا
B) از راست به چپ
✅ C) از بالا به پایین
ویژگی‌ها (Attributes) در HTML چه کاری انجام می‌دهند؟
A) ظاهر صفحه را تغییر می‌دهند
✅ B) اطلاعات اضافی درباره عنصر ارائه می‌دهند
C) کد JavaScript اجرا می‌کنند
کدام گزینه نمونه‌ای از Semantic HTML است؟
A) <div>
B) <span>
C) <h1>✅
چرا استفاده از Semantic HTML مهم است؟
A) باعث کاهش حجم تصاویر می‌شود
✅ B) به درک بهتر ساختار صفحه توسط مرورگر و ابزارهای کمکی کمک می‌کند
C) باعث اجرای PHP می‌شود
HTML در وردپرس در کدام بخش‌ها استفاده می‌شود؟
A) قالب‌ها (Themes)
B) افزونه‌ها (Plugins)
C) رابط مدیریت (Admin)
✅ D) همه موارد