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

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

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

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

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

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

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

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

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

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

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

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

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

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