مهدی توکلی
مهدی توکلی
خواندن ۲ دقیقه·۷ ماه پیش

مقدمات HTML: راهنمایی برای شروع کار با زبان برنامه‌نویسی HTML

مقدمه:

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

1. ساختار اولیه یک صفحه HTML:

هر صفحه HTML باید به یک ساختار اولیه توسط تگ‌ها (tags) شروع شود. دو تگ اصلی در این مرحله مورد نیاز هستند: `<html>` و `<head>`.


```html

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<!-- اینجا قسمت محتوای صفحه قرار می‌گیرد -->

</body>

</html>

```

مقاله پیشنهادی: آموزش HTML Links

- `<!DOCTYPE html>`: این خط به مرورگر اطلاع می‌دهد که از نسخه‌ی HTML5 استفاده می‌شود.

- `<html>`: تگ اصلی صفحه HTML است و تمام محتوای صفحه درون آن قرار می‌گیرد.

- `<head>`: این تگ شامل اطلاعات مربوط به صفحه است که در بخش نمایشی اصلی قرار نمی‌گیرد، مانند عنوان صفحه.


2. عنوان صفحه:

عنوان صفحه در تگ `<title>` درون بخش `<head>` قرار می‌گیرد. این عنوان در نوار عنوان مرورگر نمایش داده می‌شود و مهم است برای بهبود سئو و شناسایی صفحه توسط موتورهای جستجو.


```html

<head>

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

</head>

```

مقاله پیشنهادی: HTML Paragraphs

3. محتوای صفحه:

محتوای اصلی صفحه در بخش `<body>` قرار می‌گیرد. این بخش شامل عناصر HTML است که به کاربران نمایش داده می‌شود.


```html

<body>

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

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

<a href="https://example.com">لینک به مثال</a>

</body>

```


- `<h1>`: تگ عنوان اصلی است و برای ساختاردهی به عناوین استفاده می‌شود. عنوان‌ها از `<h1>` تا `<h6>` قابل استفاده هستند.

- `<p>`: این تگ برای ساختاردهی به پاراگراف‌ها استفاده می‌شود.

- `<a href="https://example.com">`: تگ لینک، به صفحات دیگر یا منابع خارجی لینک می‌دهمراجعه کنید. هر لینکی که درون این تگ قرار داده می‌شود، به آدرس مقصد لینک می‌شود.

4. تصاویر:

برای اضافه کردن تصاویر به صفحه، از تگ `<img>` استفاده می‌شود. این تگ باید دارای مشخصات `src` (آدرس تصویر) و `alt` (متن جایگزین تصویر برای قرائتگرها) باشد.


```html

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

```

5. جدول‌ها:

تگ `<table>` برای ساختاردهی به جدول‌ها استفاده می‌شود. این تگ شامل تگ‌های دیگری مانند `<tr>` (ردیف) و `<td>` (سلول) است.


```html

<table>

<tr>

<th>عنوان ستون 1</th>

<th>عنوان ستون 2</th>

</tr>

<tr>

<td>مقدار 1</td>

<td>مقدار 2</td>

</tr>

</table>

```


- `<tr>`: تگ ردیف جدول است.

- `<th>`: تگ سرستون جدول است و برای عناوین ستون‌ها استفاده می‌شود.

- `<td>`: تگ سلول جدول است و برای مقادیر جدول استفاده می‌شود.

نتیجه‌گیری:

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

آموزش طراحی سایتhtml
متخصص سئو هستم. اطلاعاتم را با شما به اشتراک می گذارم. وبلاگ شخصی من: https://mahditavakoli.com
شاید از این پست‌ها خوشتان بیاید