آموزش HTML
آموزش HTML برای هر فردی که به طراحی و توسعه وب علاقه‌مند است، یکی از اولین گام‌های مهم است. HTML (Hypertext Markup Language) زبانی است که ساختار یک صفحه وب را مشخص می‌کند. با ما همراه باشید تا در ادامه، مهم‌ترین مواردی که در آموزش چنین زبان نشانه‌گذاری باید بدانید را مطالعه کنید.
مبانی HTML
تعریف
HTML زبان نشانه‌گذاری است که برای ایجاد ساختار صفحات وب استفاده می‌شود.
المان‌ها (Elements)
هر بخش از یک صفحه وب، مانند متن، تصویر، لینک و غیره، با استفاده از تگ‌ها (Tags) در HTML تعریف می‌شود. تگ‌ها معمولاً به صورت جفت استفاده می‌شوند؛ تگ باز و تگ بسته (مانند `<p></p>` برای یک پاراگراف).
تگ‌های ضروری
هر سند با تگ‌های اصلی زیر شروع می‌شود.
<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body data-rsssl=1>
<!-- محتوای صفحه -->
</body>
</html>
تگ‌های اصلی HTML
– `<html>`: تگ اصلی که کل محتوا را در خود نگه می‌دارد.
– `<head>`: شامل اطلاعات متاداده (metadata) مانند عنوان صفحه و لینک‌ها به فایل‌های CSS یا جاوااسکریپت.
– `<body>`: تمامی محتوای قابل مشاهده توسط کاربر در این قسمت قرار می‌گیرد.
– `<p>`: برای ایجاد پاراگراف‌ها.
– `<h1>` تا `<h6>`: برای ایجاد تیترها و عنوان‌ها.
– `<a>`: برای ایجاد لینک‌های ابرمتنی (Hyperlinks).
– `<img>`: برای قرار دادن تصاویر.
– `<div>` و `<span>`: برای بخش‌بندی و استایل‌دهی به قسمت‌های مختلف صفحه.
ویژگی‌ها (Attributes)
تگ‌های HTML می‌توانند دارای ویژگی‌هایی باشند که اطلاعات بیشتری در مورد نحوه نمایش آن‌ها در اختیار ما قرار بدهند. برخی از ویژگی‌های معمول و پر کاربرد را در ادامه مشاهده میکنید.
– `class` و `id`: برای مشخص کردن هویت یا گروه‌بندی عناصر به منظور استایل‌دهی یا استفاده در JavaScript.
– `src`: در تگ `<img>` برای مشخص کردن منبع تصویر.
– `href`: در تگ `<a>` برای لینک دادن به یک صفحه وب دیگر.
– `alt`: برای افزودن توضیحات به تصاویر.
لیست‌ها و جداول
لیست‌ها
دو نوع لیست در HTML وجود دارد:
– لیست‌های مرتب (Ordered) با استفاده از تگ `<ol>`.
– لیست‌های نامرتب (Unordered) با استفاده از تگ `<ul>`.
جداول
با استفاده از تگ‌های `<table>`, `<tr>`, `<td>`, و `<th>` می‌توان جداول را ایجاد کرد.
فرم‌ها و ورودی‌ها
فرم‌ها برای جمع‌آوری اطلاعات از کاربران استفاده می‌شوند که در ادامه تگ‌های اصلی برای ساخت فرم را مشاهده میکنید.
– `<form>`: تگ اصلی که فرم را تعریف می‌کند.
– `<input>`: برای ورودی‌های کاربر مانند متن، رمز عبور، و دکمه ارسال.
– `<textarea>`: برای ایجاد فیلدهای چند خطی.
– `<select>` و `<option>`: برای ایجاد لیست‌های کشویی.
استایل‌دهی با CSS
HTML به تنهایی برای ساختاردهی صفحات استفاده می‌شود، اما برای زیبا کردن آن نیاز به CSS دارید. HTML و CSS کاملاً مکمل یکدیگر هستند. برای اضافه کردن CSS دو روش پیشنهاد می‌شود.
– میتوانید از تگ `<style>` در داخل تگ `<head>` استفاده کنید.
– یا از ویژگی `style` در تگ‌ها به صورت inline بهره ببرید.
لینک‌دهی و ناوبری
برای ایجاد لینک‌های داخلی و خارجی از تگ `<a>` استفاده می‌شود. ویژگی `href` آدرس مقصد را مشخص می‌کند.
<a href="https://emadhejazian.com/">Click here</a>
ابزارهای توسعه
برای کدنویسی، استفاده از ویرایشگرهای کد مانند VSCode یا Sublime Text بسیار مفید است. این ابزارها امکاناتی مانند تکمیل خودکار کد و خطایابی ارائه می‌دهند. برای کار با این ابزار میتوانید به مقاله نصب VSCode مراجعه کنید.
HTML زبان پایه‌ای برای طراحی و توسعه صفحات وب است که با ترکیب آن با CSS و JavaScript می‌توان وب‌سایت‌های دینامیک و تعاملی ایجاد کرد. یادگیری این زبان نشانه‌گذاری به شما کمک می‌کند تا درک بهتری از ساختار صفحات وب پیدا کرده و اولین قدم‌ها را در مسیر توسعه وب بردارید.
Inspect
یکی از قابلیت‌های مرورگر کروم که با راست کلیک کردن در هر صفحه از سایت و انتخاب Inspect میتوانید در قسمت Elements تمام کدهای HTML آن سایت را ببینید و در آن‌ها تغییراتی ایجاد کرده و یا از آن ایده بگیرید.
برای یادگیری و مرور آموزه‌های خود در این باره میتوانید به سایت W3School مراجعه کرده و به راحتی توانایی‌های خود را بیازمایید.
ویدئوی یوتیوب
برای یادگیری بهتر پیشنهاد میکنیم به چنل یوتیوب عماد حجازیان مراجعه کنید.
