آموزش جامع ساخت وب سایت با HTML (مناسب برای مبتدیان)

بیاموزید چگونه بدون نیاز به کدنویسی پیچیده، وب سایت خودتان را بسازید.

مقدمه ای بر HTML و دنیای وب

HTML زبان نشانه گذاری استاندارد برای ساخت صفحات وب است. اگر می خواهید وب سایتی داشته باشید، باید HTML را یاد بگیرید. خوشبختانه، HTML زبانی نسبتاً آسان است و با کمی تمرین می توانید اصول آن را فرا بگیرید.

در این آموزش، ما به شما کمک می کنیم تا با HTML آشنا شوید و یک وب سایت ساده بسازید. نگران نباشید، نیازی نیست که برنامه نویس باشید! ما همه چیز را به زبان ساده توضیح می دهیم.

ابزارهای مورد نیاز

برای شروع کار با HTML، به دو ابزار اصلی نیاز دارید:

ویرایشگر متن: یک برنامه برای نوشتن کد HTML. می توانید از Notepad (در ویندوز) یا TextEdit (در مک) استفاده کنید، اما ویرایشگرهای حرفه ای تری مانند Visual Studio Code یا Sublime Text هم وجود دارند که امکانات بیشتری ارائه می دهند.
مرورگر وب: برای مشاهده نتیجه کد HTML خود. مرورگرهایی مانند Chrome، Firefox، Safari و Edge مناسب هستند.

ساختار اصلی یک سند HTML

هر سند HTML دارای ساختار اصلی زیر است:

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>عنوان صفحه</title>
</head>
<body>
  <!-- محتوای صفحه اینجا قرار می گیرد -->
</body>
</html>

توضیحات:

`<!DOCTYPE html>`: این خط به مرورگر می گوید که این سند از نوع HTML5 است.
`<html lang="fa">`: تگ اصلی HTML است که تمام محتوای صفحه را در بر می گیرد. `lang="fa"` مشخص می کند که زبان صفحه فارسی است.
`<head>`: شامل اطلاعات مربوط به صفحه است، مانند عنوان، تنظیمات متا و لینک به فایل های CSS و JavaScript.
`<meta charset="UTF-8">`: مشخص می کند که صفحه از کدگذاری UTF-8 استفاده می کند، که برای نمایش درست زبان فارسی ضروری است.
`<title>`: عنوان صفحه را مشخص می کند که در نوار عنوان مرورگر و نتایج جستجو نمایش داده می شود.
`<body>`: شامل محتوای اصلی صفحه است که در مرورگر نمایش داده می شود.

تگ های اصلی HTML

در HTML، از تگ ها برای ساختاردهی به محتوا استفاده می کنیم. هر تگ دارای یک تگ باز (`<tag>`) و یک تگ بسته (`</tag>`) است. در زیر چند تگ اصلی HTML را معرفی می کنیم:

`<h1>` تا `<h6>`: برای ایجاد عنوان ها (Heading). `<h1>` مهم ترین عنوان و `<h6>` کم اهمیت ترین عنوان است.
`<p>`: برای ایجاد پاراگراف (Paragraph).
`<a>`: برای ایجاد لینک (Link).
`<img>`: برای نمایش تصویر (Image).
`<ul>` و `<ol>`: برای ایجاد لیست های نامرتب (Unordered List) و مرتب (Ordered List).
`<li>`: برای ایجاد آیتم های لیست (List Item).
`<div>`: برای ایجاد یک بخش (Division) در صفحه.
`<span>`: برای ایجاد یک المان درون خطی (Inline Element).

مثال: ساخت یک صفحه وب ساده

بیایید یک صفحه وب ساده با استفاده از تگ های HTML که یاد گرفتیم، بسازیم:

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>صفحه اصلی</title>
</head>
<body>
  <h1 style="font-size: 2em; color: #007bff;">به وب سایت من خوش آمدید!</h1>
  <p style="font-size: 1.2em;">این یک پاراگراف ساده است.</p>
  <a href="https://www.google.com" style="color: #28a745;">برای بازدید از گوگل اینجا کلیک کنید</a>
</body>
</html>

این کد را در یک فایل با پسوند `.html` (مثلاً `index.html`) ذخیره کنید و آن را در مرورگر خود باز کنید. خواهید دید که یک صفحه وب ساده با عنوان، پاراگراف و لینک نمایش داده می شود.

استایل دهی به HTML با CSS (به صورت مختصر)

CSS زبانی است که برای استایل دهی به عناصر HTML استفاده می شود. با CSS می توانید رنگ، فونت، اندازه، حاشیه و بسیاری از ویژگی های دیگر عناصر HTML را تغییر دهید. در مثال بالا، ما از CSS درون خطی (Inline CSS) برای استایل دهی به تگ های `<h1>` و `<a>` استفاده کردیم.

برای استایل دهی حرفه ای، CSS را در یک فایل جداگانه (با پسوند `.css`) ذخیره کنید و آن را به صفحه HTML خود لینک کنید. اما این آموزش فعلا در همین حد است!

سوالات متداول (FAQ)

HTML چیست؟: HTML زبان نشانه گذاری استاندارد برای ساخت صفحات وب است.
آیا برای یادگیری HTML نیاز به دانش برنامه نویسی دارم؟: خیر، HTML زبانی نسبتاً آسان است و با کمی تمرین می توانید اصول آن را فرا بگیرید.
چگونه می توانم یک وب سایت با HTML بسازم؟: شما نیاز به یک ویرایشگر متن و یک مرورگر وب دارید. کد HTML خود را در ویرایشگر متن بنویسید و سپس آن را در مرورگر وب باز کنید تا نتیجه را ببینید.
CSS چیست؟: CSS زبانی است که برای استایل دهی به عناصر HTML استفاده می شود.
JavaScript چیست؟: JavaScript یک زبان برنامه نویسی است که برای افزودن تعامل و پویایی به صفحات وب استفاده می شود.

نیاز به کمک دارید؟

ساخت وب سایت میتونه پیچیده بشه، به خصوص اگر بخواید سایتی حرفه ای و با سئو قوی داشته باشید. اگه نیاز به کمک دارید یا میخواهید سئوی سایتتون رو به متخصص بسپارید، با ما تماس بگیرید:

09190994063 - 09376846692

آموزش ساخت سایت با HTML برای آدمای معمولی

تاریخ: 1404/7/30 ساعت: 22:9 بازدید: 10