webcntr
webcntr
خواندن ۲ دقیقه·۲ ماه پیش

تگ‌های اساسی HTML و کاربرد آن‌ها


### مقدمه

HTML (HyperText Markup Language) زبان نشانه‌گذاری اصلی برای ایجاد صفحات وب است. این زبان به ما این امکان را می‌دهد که ساختار و محتوای صفحات وب را تعریف کنیم. در این مقاله، به بررسی تگ‌های اساسی HTML و کاربردهای آن‌ها می‌پردازیم.


### تگ‌های اساسی HTML


1. **تگ `<html>`**

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

- مثال:

```html

<html>

<!-- محتوا -->

</html>

```


2. **تگ `<head>`**

- این تگ شامل اطلاعات متا، عنوان صفحه و لینک‌های به فایل‌های CSS و جاوا اسکریپت است.

- مثال:

```html

<head>

<title>عنوان صفحه</title>

</head>

```


3. **تگ `<title>`**

- عنوان صفحه را مشخص می‌کند و در نوار عنوان مرورگر نمایش داده می‌شود.

- مثال:

```html

<title>صفحه اصلی من</title>

```


4. **تگ `<body>`**

- محتوای اصلی صفحه وب را در بر می‌گیرد، شامل متن، تصاویر و سایر عناصر.

- مثال:

```html

<body>

<h1>سلام دنیا!</h1>

</body>

```


5. **تگ‌های عنوان (`<h1>` تا `<h6>`)**

- برای ایجاد عناوین و زیرعناوین استفاده می‌شوند. `<h1>` بزرگ‌ترین و `<h6>` کوچک‌ترین است.

- مثال:

```html

<h1>عنوان اصلی</h1>

<h2>زیرعنوان</h2>

```


6. **تگ `<p>`**

- برای ایجاد پاراگراف‌ها استفاده می‌شود.

- مثال:

```html

<p>این یک پاراگراف است.</p>

```


7. **تگ `<a>`**

- برای ایجاد لینک‌ها استفاده می‌شود. با استفاده از ویژگی `href` می‌توان آدرس لینک را مشخص کرد.

- مثال:

```html

<a href="https://www.example.com">به وب‌سایت ما بروید</a>

```


8. **تگ `<img>`**

- برای نمایش تصاویر استفاده می‌شود. با استفاده از ویژگی `src` می‌توان آدرس تصویر را مشخص کرد.

- مثال:

```html

<img src="image.jpg" alt="توضیح تصویر">

```


9. **تگ `<ul>` و `<ol>`**

- برای ایجاد لیست‌های نامرتب و مرتب استفاده می‌شوند.

11. **تگ `<span>`**
- این تگ برای گروه‌بندی متن یا عناصر درون خطی استفاده می‌شود. معمولاً برای اعمال استایل به بخش‌های خاصی از متن به کار می‌رود.
- مثال:
```html
<p>این یک <span style="color: red;">متن قرمز</span> است.</p>
```

12. **تگ `<strong>` و `<em>`**
- تگ `<strong>` برای تأکید بر روی متن و نمایش آن به صورت پررنگ استفاده می‌شود، در حالی که `<em>` برای تأکید و نمایش متن به صورت ایتالیک به کار می‌رود.
- مثال:
```html
<p>این یک متن <strong>مهم</strong> است و این یک متن <em>تأکید شده</em> است.</p>
```

13. **تگ `<table>`**
- برای ایجاد جداول استفاده می‌شود. این تگ شامل تگ‌های `<tr>` (ردیف)، `<th>` (سرستون) و `<td>` (سلول) است.
- مثال:
```html
<table>
<tr>
<th>نام</th>
<th>سن</th>
</tr>
<tr>
<td>علی</td>
<td>25</td>
</tr>
</table>
```

14. **تگ `<form>`**
- برای ایجاد فرم‌ها و جمع‌آوری داده‌ها از کاربران استفاده می‌شود. این تگ شامل عناصر مختلفی مانند `<input>`, `<textarea>`, و `<button>` است.
- مثال:
```html
<form>
<label for="name">نام:</label>
<input type="text" id="name" name="name">
<button type="submit">ارسال</button>
</form>
```

15. **تگ `<input>`**
- برای دریافت ورودی از کاربر استفاده می‌شود. نوع ورودی با استفاده از ویژگی `type` مشخص می‌شود (مانند `text`, `password`, `email` و غیره).
- مثال:
```html
<input type="email" placeholder="ایمیل خود را وارد کنید">
```

htmlآموزش html
شاید از این پست‌ها خوشتان بیاید