🚀 آموزش 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

🌌✨ معرفی سایت NEBULA

یه سایت مدرن و جذاب با طراحی نئونی بنفش و فیروزه‌ای 💜💎

🚀 امکانات سایت:
🎨 طراحی زیبا و حرفه‌ای
📱 سازگار با موبایل و کامپیوتر
💼 بخش معرفی خدمات
🖼️ بخش نمونه‌کارها
✨ افکت‌ها و حرکت نرم بین بخش‌ها

💻 ساخته‌شده با HTML، CSS و JavaScript

📦 سورس کد کامل داخل فایل ZIP قرار داره.

🔥 NEBULA؛ جایی که ایده‌ها به واقعیت تبدیل می‌شن!
🌹https://t.me/CodeMastersWeb🌹

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

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

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

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

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

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

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

🚀 آموزش HTML | جلسه ششم

🎯 موضوع: فرم‌ها در HTML (Forms)

سلام برنامه‌نویس‌های عزیز! 👋💙

امروز قراره یاد بگیریم چطور با HTML فرم بسازیم؛ مثل فرم ورود، ثبت‌نام و دریافت اطلاعات کاربر.

📌 ۱. تگ "form"

برای ساخت فرم از تگ "<form>" استفاده می‌کنیم.

📌 ۲. تگ "input"

برای گرفتن اطلاعات از کاربر کاربرد داره.

📌 ۳. تگ "label"

برای مشخص کردن عنوان هر ورودی استفاده می‌شه.

💻 مثال عملی:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>فرم ثبت‌نام</title>
</head>
<body>

<h2>فرم ثبت‌نام</h2>

<form>
<label for="username">نام کاربری:</label>
<input type="text" id="username" name="username">

<br><br>

<label for="email">ایمیل:</label>
<input type="email" id="email" name="email">

<br><br>

<label for="password">رمز عبور:</label>
<input type="password" id="password" name="password">

<br><br>

<button type="submit">ثبت‌نام</button>
</form>

</body>
</html>

🧠 توضیح کد:

🔹 "type="text"" برای وارد کردن متن
🔹 "type="email"" برای وارد کردن ایمیل
🔹 "type="password"" برای وارد کردن رمز عبور
🔹 "type="submit"" برای ارسال فرم

🔥 تمرین جلسه ششم:

یک فرم بساز که این موارد رو داشته باشه:
✅ نام و نام خانوادگی
✅ شماره تلفن
✅ ایمیل
✅ دکمه ارسال

💙 تمرین رو انجام بده و برای خودت کد رو اجرا کن!

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

📚 آموزش رایگان برنامه‌نویسی در کانال ما:

🔗 https://t.me/CodeMastersWeb

💻 CodeMastersWeb | از صفر تا حرفه‌ای

#آموزش_HTML #برنامه_نویسی #طراحی_وب #CodeMastersWeb

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

🚀 آموزش HTML | جلسه هفتم

🎯 موضوع: دکمه‌ها و لیست‌های انتخابی در فرم‌ها

سلام برنامه‌نویس‌های خفن! 👋💙

توی جلسه قبل فرم ساختیم. امروز یاد می‌گیریم چطور به فرم‌هامون دکمه و گزینه‌های انتخابی اضافه کنیم. 😎

📌 ۱. دکمه‌ها (Button)

با تگ "button" می‌تونیم دکمه بسازیم:

<button type="button">کلیک کن!</button>

📌 ۲. دکمه ارسال فرم

<button type="submit">ارسال فرم</button>

📌 ۳. گزینه‌های انتخابی (Radio)

وقتی کاربر باید فقط یک گزینه رو انتخاب کنه، از "radio" استفاده می‌کنیم:

<p>جنسیت:</p>

<input type="radio" name="gender" value="male">
<label>مرد</label>

<input type="radio" name="gender" value="female">
<label>زن</label>

💡 چون هر دو گزینه "name" یکسان دارن، کاربر فقط می‌تونه یکی رو انتخاب کنه.

📌 ۴. چک‌باکس (Checkbox)

برای انتخاب یک یا چند گزینه استفاده می‌شه:

<p>علاقه‌مندی‌ها:</p>

<input type="checkbox" id="html" name="skill" value="html">
<label for="html">HTML</label>

<input type="checkbox" id="css" name="skill" value="css">
<label for="css">CSS</label>

🧠 تفاوت مهم:

🔹 "radio" → انتخاب یک گزینه
🔹 "checkbox" → انتخاب چند گزینه

🔥 تمرین جلسه هفتم:

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

✅ نام کاربر
✅ انتخاب زبان موردعلاقه (HTML یا CSS)
✅ انتخاب چند مهارت با Checkbox
✅ دکمه ارسال فرم

💙 تمرین کن و نتیجه رو اجرا کن!

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

📚 آموزش رایگان برنامه‌نویسی:

🔗 https://t.me/CodeMastersWeb

💻 CodeMastersWeb | از صفر تا حرفه‌ای

#HTML #آموزش_برنامه_نویسی #طراحی_وب #CodeMastersWeb