دریافت مشاوره فروش ، ارسال کلمه » سایت « به شماره : 834-82-83-0919
تماس بگیرید
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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="تصویر نمونه" class="lazyload" data-src="image.jpg">
<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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="توضیح تصویر" width="300" class="lazyload" data-src="photo.jpg">
لیست ها به صورت مرتب نمایش داده میشوند
<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 ساده است، ولی توجه به جزئیات و نکات پیشرفته باعث می‌شود سایت شما حرفه‌ای و بهینه باشد.
وردپرس به‌عنوان محبوب‌ترین سیستم مدیریت محتوا (CMS) در جهان شناخته می‌شود و بیش از ۴۰ درصد وب‌سایت‌های دنیا با آن ساخته شده‌اند. دلیل اصلی این محبوبیت، وجود هزاران افزونه وردپرس است که امکان افزودن هر قابلیتی به وبسایت را فراهم می‌کنند. اما سؤال مهم اینجاست: «کدام پلاگین‌های وردپرس برای هر ...
لایه‌های اصلی حمله به وردپرس حملات به سطح اپلیکیشن (Application Layer): SQL Injection: تزریق مستقیم به دیتابیس از طریق فرم‌ها یا URL. XSS (Cross-Site Scripting): جاوااسکریپت مخرب توی ورودی کاربر، که باعث میشه سشن ادمین یا کوکی‌ها دزدیده بشه. CSRF (Cross-Site Request Forgery): استفاده از سشن فعال ادمین برای اجرای ...
پشتیبانی وبسایت وردپرسی؛ چرا و چگونه باید سایت وردپرسی خود را همیشه آماده نگه دارید؟ وردپرس به‌عنوان محبوب‌ترین سیستم مدیریت محتوا (CMS) در دنیا شناخته می‌شود و میلیون‌ها وبسایت روی آن ساخته شده‌اند. اما داشتن یک سایت وردپرسی موفق تنها به طراحی و راه‌اندازی آن خلاصه نمی‌شود، بلکه پشتیبانی و ...
آموزش حذف اسپم و کاربران فیک در وردپرس با SQL https://www.aparat.com/v/lfk6u93 وجود اسپم‌ها و کاربران فیک در وردپرس می‌تواند امنیت سایت را کاهش داده و باعث افزایش فشار روی دیتابیس شود. در این آموزش، روش‌های شناسایی و حذف کاربران اسپم را با استفاده از کوئری‌های SQL بررسی می‌کنیم. این روش‌ها ...
همه چیز درباره رشته دانشگاهی مهندسی نرم افزار مدت زمان مطالعه : 15 دقیقه تعریف ساده و کاربردی مهندسی نرم افزار مهندسی نرم‌افزار یعنی هنر و علم طراحی، ساخت و نگهداری نرم‌افزارهایی که قراره در دنیای واقعی مشکل حل کنن. این رشته فقط کد زدن نیست؛ بلکه شامل تحلیل نیازها، ...
چطور مسیر خودت را در دنیای برنامه‌نویسی وب پیدا کنی؟ برای اینکه مسیر خودت رو پیدا کنی و بتونی توی دنیای پیچیده‌ی وب موفق بشی، باید اول مشخص کنی که دقیقاً کجا می‌خوای بری. وقتی به این نقشه ذهنی نگاه می‌کنی، در واقع داری قدم به قدم اطلاعات مورد ...
خدمات طراحی و پشتیبانی سایت ، آموزش برنامه نویسی به صورت خصوصی و گروهی ، مشاوره جهت شروع کسب و کار آنلاین و طراحی CRM و CMS
تمامی حقوق این وبسایت برای آکادمی برنامه نویس مصطفی علاالدین محفوظ است.
قدرت گرفته شده در آکادمی برنامه نویسی و طراحی سایت مصطفی علاءالدین
مشتری گرامی، به دلیل حجم بالای درخواست‌ها در جشنواره طراحی و پشتیبانی سایت، لطفاً از ارسال مجدد خودداری فرمایید.
از اعتماد شما سپاسگزاریم.
تیم پشتیبانی و طراحی سایت مصطفی علاءالدین