🚀 آموزش HTML از صفر | جلسه اول

📘 HTML چیست؟

HTML مخفف HyperText Markup Language است و برای ساختاردهی صفحات وب استفاده می‌شود. با HTML می‌تونی عنوان، متن، عکس، لینک و بخش‌های مختلف سایت رو بسازی. 💻

🔹 ۱. ساختار اولیه HTML

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>اولین سایت من</title>
</head>
<body>
<h1>سلام دنیا! 👋</h1>
<p>این اولین صفحه وب منه.</p>
</body>
</html>

🔹 ۲. چند تگ پرکاربرد

🟢 "<h1>" : عنوان اصلی
🟢 "<p>" : نوشتن متن و پاراگراف
🟢 "<a>" : ساخت لینک
🟢 "<img>" : نمایش تصویر
🟢 "<button>" : ساخت دکمه

🔹 ۳. چطور اجراش کنیم؟

1️⃣ برنامه‌ی ویرایش کد مثل VS Code رو باز کن.
2️⃣ یک فایل با نام "index.html" بساز.
3️⃣ کد بالا رو داخلش قرار بده.
4️⃣ فایل رو با مرورگر باز کن و نتیجه رو ببین! 🎉

🎯 تمرین امروز: کد رو تغییر بده تا عنوان سایتت اسم خودت باشه و متن زیرش درباره‌ی هدفت از یادگیری طراحی سایت باشه.

💙 اگه می‌خوای طراحی سایت رو قدم‌به‌قدم یاد بگیری، همراه ما باش!

📢 کانال آموزش طراحی سایت
🔗 https://t.me/CodeMastersWeb

✨ Learn • Code • Create

🔥آموزش html جلسه ۲ 👇🔥

🚀 آموزش HTML از صفر | جلسه دوم

📘 موضوع: عنوان‌ها، پاراگراف و قالب‌بندی متن در HTML

سلام برنامه‌نویس‌های آینده! 👨‍💻💙
توی این جلسه یاد می‌گیریم چطور متن‌های سایت رو مرتب و زیباتر کنیم.

🔹 ۱. عنوان‌ها در HTML

برای ساخت عنوان از تگ‌های "h1" تا "h6" استفاده می‌کنیم:

<h1>عنوان اصلی سایت</h1>
<h2>عنوان بخش</h2>
<h3>عنوان کوچک‌تر</h3>

📌 "h1" مهم‌ترین عنوان و "h6" کوچک‌ترین سطح عنوانه.

🔹 ۲. نوشتن پاراگراف

برای نوشتن متن از تگ "p" استفاده می‌کنیم:

<p>سلام! من در حال یادگیری طراحی سایت هستم.</p>
<p>هدف من ساخت سایت‌های جذاب و حرفه‌ای است.</p>

🔹 ۳. ضخیم و مورب کردن متن

<strong>این متن مهم است</strong>

<em>این متن تأکیدی است</em>

🔹 ۴. رفتن به خط بعد

سلام دوستان!<br>
به کانال آموزش طراحی سایت خوش آمدید.

تگ "br" متن رو به خط بعد می‌بره و تگ بسته‌ی جداگانه نداره.

🎯 تمرین جلسه دوم

یک فایل به نام "index.html" بساز و کد زیر رو داخلش قرار بده:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>درباره من</title>
</head>
<body>
<h1>درباره من 👋</h1>
<h2>هدف من</h2>
<p>من در حال یادگیری HTML هستم.</p>
<p><strong>می‌خواهم طراح وب شوم!</strong></p>
</body>
</html>

🔥 چالش: یک عنوان جدید و دو پاراگراف با متن دلخواه خودت اضافه کن.

ــــــــــــ

━━━━━━━━━━━━━━

📢 آموزش طراحی سایت | HTML • CSS • JavaScript

🔗 https://t.me/CodeMastersWeb

✨ Learn • Code • Create

🔥 فروش سورس‌کدهای آماده طراحی سایت 💻

دوست داری بدون دردسر از صفر کدنویسی، پروژه‌های جذاب طراحی سایت رو اجرا کنی؟ 🚀

📦 سورس‌کدهای آماده شامل:
✅ فرم ورود و ثبت‌نام
✅ قالب نمونه‌کار شخصی
✅ صفحات مدرن HTML و CSS
✅ طراحی واکنش‌گرا برای موبایل
✅ کد مرتب و قابل ویرایش

💳 پرداخت کارت‌به‌کارت
📁 تحویل فایل ZIP سورس‌کد

📩 برای مشاهده نمونه‌کارها و اطلاع از قیمت، پیام بده.👇
@CodeMastersAdmin

🌐 کانال ما:
https://t.me/CodeMastersWeb

✨ Learn • Code • Create

برای خرید سورس کد آماده به اینجا مراجعه کنند

🔥 آموزش html جلسه ۳ 👇🔥

🚀 آموزش HTML از صفر | جلسه سوم

📘 موضوع: ساخت لینک، نمایش عکس و ساخت دکمه در HTML

سلام به برنامه‌نویس‌های آینده! 💻💙
توی این جلسه یاد می‌گیریم چطور به سایتمون لینک، عکس و دکمه اضافه کنیم.

🔹 ۱. ساخت لینک با تگ "a"

با تگ "a" می‌تونیم کاربر رو به یک سایت دیگه هدایت کنیم:

<a href="https://www.google.com">
ورود به گوگل
</a>

📌 ویژگی "href" آدرس مقصد لینک رو مشخص می‌کنه.

🔹 ۲. نمایش عکس با تگ "img"

<img src="photo.jpg" alt="تصویر نمونه">

📌 فایل "photo.jpg" باید در مسیر درست کنار فایل HTML یا در پوشه مشخص‌شده قرار داشته باشه.

- "src" آدرس عکس رو مشخص می‌کنه.
- "alt" توضیحی درباره تصویر می‌ده.

🔹 ۳. ساخت دکمه با تگ "button"

<button>ورود به سایت</button>

این کد یک دکمه می‌سازه؛ برای اینکه با کلیک روی اون کاری انجام بشه، بعداً می‌تونیم از JavaScript استفاده کنیم.

🔹 ۴. یک مثال کامل و کاربردی

کد زیر رو داخل فایل "index.html" قرار بده:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>سایت من</title>
</head>
<body>

<h1>به سایت من خوش آمدید!</h1>

<p>این اولین صفحه وب من است.</p>

<a href="https://www.google.com">
رفتن به گوگل
</a>

<br><br>

<img src="photo.jpg"
alt="تصویر سایت"
width="200">

<br><br>

<button>شروع یادگیری</button>

</body>
</html>

🎯 تمرین جلسه سوم

یک صفحه بساز که شامل این موارد باشه:

✅ یک عنوان اصلی
✅ یک عکس
✅ یک لینک به سایت دلخواه
✅ یک دکمه با متن «تماس با ما»

🔥 چالش: متن لینک و دکمه رو به سلیقه خودت تغییر بده.

━━━━━━━━━━━━━━

📢 کانال آموزش طراحی سایت | HTML • CSS • JavaScript

🔗 https://t.me/CodeMastersWeb

💙 آموزش قدم‌به‌قدم، تمرین‌های کاربردی و سورس‌کدهای آماده!

✨ Learn • Code • Create

🔥آموزش html جلسه ۴👇🔥

🚀 آموزش HTML از صفر | جلسه چهارم
📘 موضوع: ساخت لیست در HTML
سلام به برنامه‌نویس‌های آینده! 💙

امروز یاد می‌گیریم چطور در سایت لیست بسازیم؛ مثلاً لیست مهارت‌ها، محصولات یا آموزش‌ها.
🔹 ۱. لیست نامرتب (ul)
وقتی ترتیب موارد مهم نیست، از تگ ul استفاده می‌کنیم:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

📌 نتیجه: موارد به‌صورت فهرست علامت‌دار نمایش داده می‌شن.
🔹 ۲. لیست مرتب (ol)
وقتی می‌خوایم موارد شماره‌گذاری بشن، از ol استفاده می‌کنیم:

<ol>
    <li>یادگیری HTML</li>
    <li>یادگیری CSS</li>
    <li>یادگیری JavaScript</li>
</ol>

📌 نتیجه: موارد به‌ترتیب شماره‌گذاری می‌شن.
🔹 ۳. تگ li چیست؟
تگ li برای ساخت هر مورد از لیست استفاده می‌شه.
یادت باشه:
ul یعنی لیست نامرتب
ol یعنی لیست مرتب
li یعنی یک مورد از لیست
🔹 ۴. یک مثال کامل و کاربردی
این کد رو داخل فایل index.html قرار بده:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>مهارت‌های من</title>
</head>
<body>

    <h1>مهارت‌هایی که یاد می‌گیرم</h1>

    <h2>زبان‌های برنامه‌نویسی وب</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

    <h2>برنامه یادگیری من</h2>
    <ol>
        <li>تمرین HTML</li>
        <li>تمرین CSS</li>
        <li>ساخت اولین پروژه</li>
    </ol>

</body>
</html>

🎯 تمرین جلسه چهارم
یک صفحه با عنوان «علاقه‌مندی‌های من» بساز و داخلش:
✅ یک لیست نامرتب با ۳ مورد

✅ یک لیست مرتب با ۳ مرحله

✅ یک عنوان برای هر لیست
🔥 چالش: یک مورد جدید به هر لیست اضافه کن!
━━━━━━━━━━━━━━
📢 کانال آموزش طراحی سایت | HTML • CSS • JavaScript
🔗 https://t.me/CodeMastersWeb
💻 آموزش قدم‌به‌قدم + تمرین + سورس‌کدهای آماده
✨ Learn • Code • Create

🔥آموزش html جلسه ۵👇🔥

🚀 آموزش HTML از صفر | جلسه پنجم

📘 موضوع: ساخت جدول در HTML

سلام به برنامه‌نویس‌های آینده! 💻💙

امروز یاد می‌گیریم چطور اطلاعات رو داخل جدول نمایش بدیم؛ مثلاً لیست محصولات، قیمت‌ها یا مشخصات اعضا.

🔹 ۱. تگ‌های اصلی جدول

📌 "table" : ساخت جدول
📌 "tr" : ساخت یک ردیف
📌 "th" : ساخت سلول عنوان
📌 "td" : ساخت سلول اطلاعات

🔹 ۲. اولین جدول ما

<table>
<tr>
<th>نام</th>
<th>سن</th>
<th>مهارت</th>
</tr>

<tr>
<td>علی</td>
<td>۱۸</td>
<td>HTML</td>
</tr>

<tr>
<td>سارا</td>
<td>۲۰</td>
<td>CSS</td>
</tr>
</table>

این کد یک جدول با سه ستون و دو ردیف اطلاعات ایجاد می‌کنه.

🔹 ۳. یک جدول کامل با استایل ساده

برای اینکه جدول ظاهر مرتب‌تری داشته باشه، می‌تونیم از CSS استفاده کنیم:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>جدول محصولات</title>

<style>
table {
width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid #999;
padding: 12px;
text-align: center;
}

th {
background-color: #2563eb;
color: white;
}
</style>
</head>
<body>

<h1>لیست محصولات</h1>

<table>
<tr>
<th>محصول</th>
<th>قیمت</th>
</tr>

<tr>
<td>قالب سایت</td>
<td>۱۰۰ هزار تومان</td>
</tr>

<tr>
<td>فرم ورود</td>
<td>۵۰ هزار تومان</td>
</tr>
</table>

</body>
</html>

✨ چند نکته مهم:

✅ "border-collapse: collapse" خطوط جدول رو یکپارچه می‌کنه.
✅ "padding" فاصله محتوا از لبه سلول رو تنظیم می‌کنه.
✅ "text-align: center" متن رو وسط‌چین می‌کنه.
✅ با "background-color" رنگ پس‌زمینه عنوان‌ها رو تغییر می‌دیم.

🎯 تمرین جلسه پنجم

یک جدول برای معرفی ۳ محصول بساز که شامل این ستون‌ها باشه:

1️⃣ نام محصول
2️⃣ قیمت محصول
3️⃣ توضیحات کوتاه

🔥 چالش: رنگ عنوان جدول رو تغییر بده و برای سلول‌ها فاصله داخلی مناسب تنظیم کن.

━━━━━━━━━━━━━━

📢 کانال آموزش طراحی سایت | HTML • CSS • JavaScript

🔗 https://t.me/CodeMastersWeb

💻 آموزش قدم‌به‌قدم | تمرین‌های کاربردی | سورس‌کدهای آماده

✨ Learn • Code • Create

🔥این هم آموزش html تا جلسه ۵ برای شما عزیزان 🌹🔥

🔥💻 دنبال سورس‌کد آماده برای پروژه‌هات هستی؟

🚀 سورس‌کدهای کاربردی HTML و CSS
🎨 قالب‌های مدرن و جذاب طراحی سایت
📦 مناسب تمرین، یادگیری و پروژه‌های وب

💰 فروش سورس‌کدهای آماده با قیمت مناسب

📩 برای مشاهده نمونه‌کارها و اطلاع از قیمت، پیام بده:
👉 @CodeMastersAdmin

🙏🔥 از ما حمایت کن و با ما حرفه‌ای‌تر شو!

📱💙 معرفی پروژه رابط کاربری اپلیکیشن «همراه من»
🚀 یه طراحی جذاب و مدرن از اپلیکیشن مدیریت سیم‌کارت، با استفاده از HTML، CSS و JavaScript!
✨ امکانات پروژه: 🔹 طراحی مدرن و کاربرپسند با پشتیبانی از زبان فارسی
🔹 داشبورد اختصاصی برای نمایش اطلاعات سیم‌کارت
🔹 نمایش بسته‌های اینترنت و میزان مصرف
🔹 صفحه خرید شارژ با مبالغ مختلف
🔹 منوی دسترسی سریع و جابه‌جایی بین صفحات
🔹 طراحی ریسپانسیو و مناسب برای صفحه موبایل 📲
💻 تکنولوژی‌های استفاده‌شده: HTML | CSS | JavaScript
🎯 این پروژه یک نمونه آموزشی و نمایشی است که می‌تواند نقطه شروع خوبی برای ساخت وب‌اپلیکیشن‌های موبایلی و پروژه‌های اندرویدی باشد.
📦 سورس کد پروژه آماده است و می‌توانید آن را توسعه دهید و امکانات جدیدی به آن اضافه کنید.
⚠️ توجه: این پروژه نمونه‌ای غیررسمی است و به سامانه واقعی اپراتور یا درگاه پرداخت متصل نیست.
🔥 اگه به برنامه‌نویسی و طراحی اپلیکیشن علاقه داری، کانال رو دنبال کن تا پروژه‌های جذاب‌تری ببینی!
#برنامه_نویسی #طراحی_سایت #HTML #CSS #JavaScript #اندروید #سورس_کد #پروژه_آماد
https://t.me/CodeMastersWeb

Html.css.js
🔥🔥🔥🔥
این پروژه برای شما عزیزان رایگان می‌باشد 🌹
https://t.me/CodeMastersWeb

🔥 سورس کد فرم ورود حرفه‌ای

💻 یک طراحی مدرن و جذاب برای صفحه ورود سایت!

✨ ویژگی‌ها:
🔹 طراحی زیبا و واکنش‌گرا
🔹 رنگ‌بندی مدرن
🔹 کدنویسی با HTML و CSS
🔹 مناسب برای پروژه‌های شخصی

📌 زبان‌ها: HTML + CSS

کانال ما:
@CodeMastersWeb

#طراحی_سایت #HTML #CSS #سورس_کد

Html.css
🔥🔥🔥🔥
این سورس کد برای شما عزیزان رایگان می‌باشد 🌹
https://t.me/CodeMastersWeb