در دنیای دیجیتال امروزی، طراحی وب دیگر یک مهارت لوکس نیست، بلکه یک ضرورت است. در قلب این مهارت، زبان نشانهگذاری HTML قرار دارد. HTML مخفف HyperText Markup Language است و ساختار اصلی هر صفحه وب را تشکیل میدهد. در واقع، HTML همان اسکلتبندی وبسایت شماست و سایر فناوریها مانند CSS و JavaScript به آن روح و زیبایی میبخشند. اگر قصد دارید طراحی وب را یاد بگیرید، هیچ نقطه شروعی بهتر از HTML وجود ندارد.
شروع کار با HTML
برای شروع یادگیری HTML، نیاز به ابزار خاصی ندارید. تنها کافی است یک ویرایشگر متنی ساده مانند Notepad یا نرمافزارهای حرفهایتری مانند Visual Studio Code را اجرا کنید. یک فایل جدید بسازید، کد HTML خود را تایپ کنید و آن را با پسوند .html ذخیره نمایید. سپس میتوانید با دوبار کلیک کردن روی فایل، آن را در مرورگر مشاهده کنید.
ساخت اولین فایل HTML
این مثال ساده ساختار اصلی یک سند HTML را نمایش میدهد.
ساختار پایه HTML
یک سند HTML به دو بخش اصلی تقسیم میشود:
<head>: حاوی اطلاعات متا، عنوان، لینک به فایلهای خارجی و مواردی که در ظاهر صفحه دیده نمیشوند.<body>: بخشی است که محتوای واقعی صفحه (متن، تصویر، ویدئو، دکمهها و …) در آن قرار دارد.
تگ <!DOCTYPE html> در بالای فایل نشان میدهد که از استاندارد HTML5 استفاده میکنید.
تگهای متنی پرکاربرد در HTML
پاراگرافها
برای نوشتن متن در HTML از تگ <p> استفاده میشود:
سرتیترها (Headings)
HTML شامل ۶ سطح سرتیتر از <h1> تا <h6> است که هرچه عدد بیشتر شود، اندازه متن کوچکتر میشود:
شروع یک سطر جدید
با تگ <br> میتوان متن را به سطر جدید منتقل کرد:
متن پیشفرمتشده (Preformatted Text)
اگر میخواهید فواصل و چینش متن حفظ شود، از تگ <pre> استفاده نمایید:
درج عناصر چندرسانهای
افزودن تصویر
ویژگی
altتوضیحی متنی ارائه میدهد که برای سئو و دسترسی بسیار مهم است.
افزودن ویدیو
افزودن صدا
ساخت لیستها و لینکها
لیست نامرتب (bullet)
لیست مرتب (شمارهدار)
درج لینک
ویژگیهای عمومی تگها در HTML
id: برای شناسایی یکتای یک عنصر در صفحهclass: برای گروهبندی چند عنصر و اعمال سبک مشابهstyle: برای اضافه کردن CSS درونخطی (توصیه نمیشود در پروژههای بزرگ)title: برای نمایش متن راهنما هنگام نگهداشتن موس
مثال:
کامنتگذاری در HTML
کامنتها در HTML برای مستندسازی و یادداشتگذاری استفاده میشوند:
مرورگر این خطوط را نادیده میگیرد.
یک وب سایت جذاب و پولساز حق شماست. این فرصت رو از دست نده. همین الان به برگه وب داران مراجعه کن تا یک مشاوره عالی بهت بدم.
تماس بگیرید
تگهای معنایی در HTML5
HTML5 استانداردهای جدیدی معرفی کرده است که کدنویسی را معناگراتر کردهاند:
<header>: بخش سربرگ سایت<nav>: منوی ناوبری<main>: محتوای اصلی<section>: بخشبندی مطالب<article>: محتواهای مستقل مثل مقالات<footer>: بخش پایینی سایت
مثال:
درج کاراکترهای ویژه در HTML
برای نمایش نمادهایی مانند < یا & باید از کدهای ویژه استفاده کرد:
| کاراکتر | کد HTML |
|---|---|
< | < |
> | > |
& | & |
" | " |
اعتبارسنجی و آزمایش صفحه HTML
برای بررسی صحت کدهای HTML خود از اعتبارسنج (Validator) استفاده نمایید تا از خطاها و ناسازگاریها جلوگیری کنید. مرورگرهای مختلف ممکن است HTML را متفاوت نمایش دهند، بنابراین همیشه صفحه خود را در چند مرورگر تست کنید.
نتیجهگیری
HTML همچنان ستون فقرات طراحی وب است. بدون تسلط بر HTML، درک CSS و JavaScript نیز دشوار خواهد بود. از فایل Notepad تا ابزارهای حرفهای و از تگ ساده <p> تا ساختار پیشرفته <section>، همگی بخشی از دنیای پرهیجان HTML هستند. اکنون که مفاهیم پایه را یاد گرفتید، میتوانید وارد دنیای طراحی رابط کاربری شوید و وبسایت خود را بسازید. مرحله بعدی یادگیری CSS و طراحی واکنشگرا است.
