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

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

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

🎯 موضوع: لینک‌ها و تصاویر در HTML 🔗🖼️

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

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

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

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

برای رفتن از یک صفحه به صفحه دیگه، از تگ "a" استفاده می‌کنیم.

💻 مثال:

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

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

🔹 ۲. باز کردن لینک در تب جدید

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
باز کردن گوگل
</a>

📌 ویژگی "target="_blank"" لینک رو در یک تب جدید باز می‌کنه.

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

🔹 ۳. اضافه کردن تصویر با تگ "<img>"

برای نمایش تصویر از تگ "img" استفاده می‌کنیم.

💻 مثال:

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

📌 توضیح ویژگی‌ها:

✅ "src" آدرس یا مسیر تصویر رو مشخص می‌کنه.

✅ "alt" توضیحی درباره تصویر می‌ده و برای دسترس‌پذیری مفیده.

🔹 ۴. تنظیم اندازه تصویر

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

📌 ویژگی "width" عرض تصویر رو مشخص می‌کنه.

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

🔥 مثال کامل جلسه هشتم:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>لینک و تصویر</title>
</head>
<body>

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

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

<br><br>

<img src="image.jpg" alt="تصویر زیبای نمونه" width="300">

</body>
</html>

💡 نکته مهم: فایل "image.jpg" باید در مسیر درست پروژه قرار داشته باشه تا تصویر نمایش داده بشه.

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

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

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

✅ یک عنوان خوش‌آمدگویی
✅ یک لینک به سایت دلخواهت
✅ یک تصویر با عرض ۳۰۰ پیکسل
✅ یک توضیح کوتاه زیر تصویر

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

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

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

🔗 https://t.me/CodeMastersWeb

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

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

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