HTML یا HyperText Markup Language زبانی است که ساختار تمام صفحات وب را تعریف می‌کند. اگر بخواهیم وب را به یک موجود زنده تشبیه کنیم، HTML همان اسکلت و استخوان‌بندی بدن است؛ CSS نقش پوست و لباس را دارد، و JavaScript به آن جان و حرکت می‌دهد. در این راهنمای کامل، قصد داریم آموزش HTML را از پایه‌ترین مفاهیم تا نکات پیشرفته و بهینه‌سازی سئو، به صورت گام‌به‌گام و با مثال‌های واقعی ارائه دهیم.
HTML زبان نشانه‌گذاری است که محتوای صفحات وب را ساختار می‌دهد. برخلاف زبان‌های برنامه‌نویسی، HTML فقط ساختار و معنا را مشخص می‌کند و منطق برنامه را در خود ندارد. مرورگرهای وب، کد HTML را می‌خوانند و آن را به شکل صفحه‌ای قابل دیدن نمایش می‌دهند.
بدون HTML :
HTML اولین بار در سال ۱۹۹۱ توسط تیم برنرز-لی ساخته شد تا محققان بتوانند اسناد علمی خود را به صورت آنلاین به اشتراک بگذارند.
سیر تکامل آن :
HTML5 امروز استاندارد اصلی طراحی وب است.
هر فایل HTML یک ساختار پایه دارد:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="آموزش HTML از صفر تا پیشرفته">
<title>آموزش HTML</title>
</head>
<body>
<h1>سلام دنیا!</h1>
<p>این اولین صفحه HTML من است.</p>
</body>
</html>
تگ‌ها (Tags) عنصر اصلی HTML هستند.
هر تگ معمولاً از یک تگ باز و یک تگ بسته تشکیل می‌شود:
<p>
این یک پاراگراف است
</p>
در قسمت کد بالا مشاهده میکنید ، که در خط اول تگ باز شده و در خط دوم محتوا درون آن قرار گرفته است و در خط سوم تگ بسته شده تفاوت تگ باز و بسته در / داشتن میباشد بعضی از تگ ها در اصطلاح سلف کلوز نامیده میشوند یعنی / درون خودش قرار میگیرد .
برخی تگ‌ها خودبسته هستند:
<img decoding="async" src="image.jpg" alt="تصویر نمونه" />
<input type="url" name="Website" value="https://MostafaAlaeddin.ir" />
ویژگی‌ها اطلاعات اضافی به تگ اضافه می‌کنند. مثال:
<a href="https://example.com" target="_blank">لینک</a>
ویژگی‌های مهم:
تگ‌های مهم:
به عنوام مثال در کد زیر :
<h2>نمونه متن</h2>
<p>این یک <strong>متن برجسته</strong> است.</p>
چنین خروجی را دارد :
نمونه متن این یک متن برجسته است.
لینک :
<a href="about.html">درباره ما</a>
تصویر :
<img decoding="async" src="photo.jpg" alt="توضیح تصویر" width="300">
لیست ها به صورت مرتب نمایش داده میشوند
<ol>
<li>مورد اول</li>
<li>مورد دوم</li>
</ol>
لیست ها به صورت نامرتب نمایش داده میشوند
<ul>
<li>مورد اول</li>
<li>مورد دوم</li>
</ul>
جداول کجا کاربرد دارند ، معمولا جداول اچ تی ام الی در صفحات مدیریت یا داشبرد سایت قرار میگیرند فرض کنید یک لیست از کاربران یک سایت دارید ، یا محصولاتی که فروخته اید یا چیزی که اصلاعات ستونی و سطری زیادی داشته باشد ، بهترین راه برای نشان دادن این موضوع استفاده از جداول هستند.
<table border="1">
<tr>
<th>نام</th>
<th>شغل</th>
</tr>
<tr>
<td>مصطفی علاالدین</td>
<td>برنامه نویس و توسعه دهنده وبسایت</td>
</tr>
</table>
<form action="/submit" method="post">
<label>نام:</label>
<input type="text" name="name" required>
<label>ایمیل:</label>
<input type="email" name="email">
<input type="submit" value="ارسال">
</form>
<video controls width="400">
<source src="video.mp4" type="video/mp4">
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<canvas id="myCanvas" width="200" height="100"></canvas> <script>var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 50);</script>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" fill="yellow"/>
</svg>
برای افراد نابینا، کم‌بینا یا با محدودیت حرکتی :
برای بررسی صحت کد:
عنوان مناسب با < title>
توضیحات متا (< meta name="description">)
استفاده از تگ‌های معنایی
متن جایگزین تصاویر (alt)
لینک‌دهی داخلی
یک صفحه ساده معرفی شخصی :
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="صفحه معرفی من">
<title>معرفی</title>
</head>
<body>
<header>
<h1>سلام! من محمد هستم</h1>
<nav>
<a href="#about">درباره من</a> |
<a href="#contact">تماس</a>
</nav>
</header>
<main>
<section id="about">
<h2>درباره من</h2>
<p>من یک توسعه‌دهنده وب هستم.</p>
</section>
<section id="contact">
<h2>تماس</h2>
<form>
<label>ایمیل:</label>
<input type="email">
<input type="submit" value="ارسال">
</form>
</section>
</main>
<footer>
<p>© 2025 همه حقوق محفوظ است</p>
</footer>
</body>
</html>
HTML ستون فقرات وب است. با تسلط بر آن، می‌توانید اسکلت هر سایتی را بسازید و سپس با CSS و JavaScript آن را به یک اثر هنری تبدیل کنید. یادگیری HTML ساده است، ولی توجه به جزئیات و نکات پیشرفته باعث می‌شود سایت شما حرفه‌ای و بهینه باشد.
در دنیای امروز، بسیاری از کسب‌وکارها برای توسعه وبسایت، فروشگاه اینترنتی، سامانه‌های مدیریتی یا اپلیکیشن‌های اختصاصی به یک تیم برنامه‌نویسی حرفه‌ای نیاز دارند. انتخاب یک شرکت برنامه‌نویسی مناسب، تنها به مهارت فنی محدود نمی‌شود؛ بلکه عواملی مانند شناخت درست نیازهای کسب‌وکار، ارتباط مؤثر با کارفرما و ارائه پشتیبانی بلندمدت نیز ...
آموزش SQL مقدماتی - شرط های پایه در SQL - قسمت سوم https://www.aparat.com/v/ors65fh شرط‌های پایه در SQL (Basic Conditions) در زبان SQL، شرط‌ها بخش اصلی جستجو و مدیریت داده‌ها هستند. وقتی ما داده‌ها را از جدول‌های پایگاه داده فراخوانی می‌کنیم، معمولاً همه‌ی ردیف‌ها به کار ما نمی‌آیند. به همین دلیل ...
آموزش مقدماتی SQL - قسمت دوم https://www.aparat.com/v/duuj55k 🎓 آموزش دستورات پایه SQL (به زبان ساده و کاربردی) مقدمه SQL یا همان Structured Query Language زبانی است که برای مدیریت و کار با پایگاه داده‌های رابطه‌ای طراحی شده است. وقتی با یک پایگاه داده (Database) کار می‌کنیم، نیاز داریم جداول (Tables) ...
آموزش مقدماتی SQL - قسمت اول https://www.aparat.com/v/ijsv8on 🎬 آموزش SQL – قسمت اول: مفاهیم پایه سلام به همه دوستان عزیز 🙌 خیلی خوشحالم که با اولین قسمت آموزش SQL همراه من هستید. در این سری آموزش‌ها قراره از پایه و قدم به قدم وارد دنیای پایگاه داده‌ها و زبان SQL ...
آموزش SQL مقدماتی مدرس : مصطفی علاالدین وضعیت دوره : در حال تکمیل قیمت دوره : رایگان تعداد ویدئو ها : 1 سر فصل های دوره SQL مقدماتی 📚 ماهیت SQL به زبان ساده فرض کن توی خونتون یک کتابخونه بزرگ داری. توی این کتابخونه کلی قفسه هست، هر قفسه ...
https://www.aparat.com/v/jdma4sy آموزش نرم افزار زمپ - XAMPP مقدمه امروزه برای طراحی و توسعه وب‌سایت‌ها، نیاز داریم قبل از انتشار آن‌ها روی اینترنت، همه چیز را روی یک محیط امن و محلی تست کنیم. اینجاست که نرم‌افزار XAMPP یا همان «زمپ» به کمک ما می‌آید. زمپ یک نرم‌افزار رایگان و متن‌باز ...
مجموعه علاکد با مدیریت مصطفی علاءالدین با بیش از 10 سال سابقه و بیش از 10 نیرو متخصص و جوان در زمینه طراحی سایت ، تولید محتوا ، و سئو ادامه مطلب ... .
در صورت عدم نمایش VPN خود را خاموش کنید
مشتری گرامی، به دلیل حجم بالای درخواست‌ها در جشنواره طراحی و پشتیبانی سایت، لطفاً از ارسال مجدد خودداری فرمایید.
از اعتماد شما سپاسگزاریم.
تیم پشتیبانی و طراحی سایت مصطفی علاءالدین