🚀 آموزش 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 | جلسه هفتم

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

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

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

📌 ۱. دکمه‌ها (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 🔗🖼️

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

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

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

🔹 ۱. ساخت لینک با تگ "<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 | جلسه نهم

🎯 موضوع: ساختار صفحات وب با تگ‌های معنایی HTML

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

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

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

📌 ۱. تگ "<header>"

برای بخش بالایی صفحه یا سربرگ استفاده می‌شه؛ مثلاً عنوان سایت و لوگو.

📌 ۲. تگ "<nav>"

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

📌 ۳. تگ "<main>"

محتوای اصلی صفحه رو مشخص می‌کنه.

📌 ۴. تگ "<section>"

برای دسته‌بندی بخش‌های مرتبط محتوا استفاده می‌شه.

📌 ۵. تگ "<footer>"

برای بخش پایینی سایت کاربرد داره؛ مثل اطلاعات تماس یا حق نشر.

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

💻 مثال عملی جلسه نهم:

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

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

<nav>
<a href="#home">خانه</a>
<a href="#about">درباره ما</a>
<a href="#contact">تماس با ما</a>
</nav>

<main>
<section id="home">
<h2>صفحه اصلی</h2>
<p>به اولین سایت من خوش آمدید.</p>
</section>

<section id="about">
<h2>درباره ما</h2>
<p>ما در حال یادگیری طراحی وب هستیم!</p>
</section>
</main>

<footer id="contact">
<p>تمام حقوق محفوظ است.</p>
</footer>

</body>
</html>

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

🧠 نکات مهم:

✅ "header" = سربرگ سایت
✅ "nav" = منوی ناوبری
✅ "main" = محتوای اصلی
✅ "section" = بخش‌بندی محتوا
✅ "footer" = پایین صفحه

💡 نکته حرفه‌ای: این تگ‌ها به منظم شدن کد و درک بهتر ساختار صفحه کمک می‌کنن؛ اما برای زیباتر شدن ظاهر سایت، در جلسات CSS ازشون استفاده می‌کنیم.

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

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

یک صفحه وب بساز که این بخش‌ها رو داشته باشه:

🔹 سربرگ با نام سایت
🔹 منو با سه لینک
🔹 بخش اصلی با دو قسمت
🔹 فوتر با متن کپی‌رایت

🎯 سعی کن کد رو خودت بنویسی و اجراش کنی!

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

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

🔗 https://t.me/CodeMastersWeb

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

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

🚀 آموزش HTML | جلسه دهم
🎯 موضوع: قالب‌بندی متن‌ها در HTML 📝
سلام برنامه‌نویس‌های عزیز! 👋💙
امروز قراره یاد بگیریم چطور قسمت‌های مهم متن رو مشخص کنیم، روی متن تأکید بذاریم و نوشته‌هامون رو خواناتر کنیم. بزن بریم! 😎
━━━━━━━━━━━━━━
📌 ۱. تگ <strong>؛ متن مهم
برای مشخص کردن متن مهم استفاده می‌شه و معمولاً به‌صورت ضخیم نمایش داده می‌شه.

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

📌 ۲. تگ <em>؛ تأکید روی متن
برای تأکید روی یک عبارت استفاده می‌شه و معمولاً متن رو کج نمایش می‌ده.

<em>این قسمت را با دقت بخوان!</em>

📌 ۳. تگ <mark>؛ هایلایت متن
برای مشخص کردن بخشی از متن با حالت برجسته استفاده می‌شه.

<p>یادگیری <mark>HTML</mark> شروع طراحی وب است.</p>

📌 ۴. تگ <small>؛ متن کوچک‌تر
برای نمایش نوشته‌های فرعی مثل توضیحات کوتاه استفاده می‌شه.

<small>این یک توضیح فرعی است.</small>

📌 ۵. تگ <del>؛ متن حذف‌شده
برای مشخص کردن متنی که حذف شده استفاده می‌شه.

<p>قیمت قبلی: <del>۲۰۰ هزار تومان</del></p>

📌 ۶. تگ <ins>؛ متن اضافه‌شده
برای مشخص کردن متنی که به متن اضافه شده استفاده می‌شه.

<p>قیمت جدید: <ins>۱۵۰ هزار تومان</ins></p>

━━━━━━━━━━━━━━
💻 مثال کامل جلسه دهم:

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

    <h1>آموزش HTML</h1>

    <p>یادگیری <strong>HTML</strong> برای طراحی وب مهم است.</p>

    <p><em>همیشه تمرین کردن را فراموش نکن!</em></p>

    <p>امروز <mark>جلسه دهم</mark> آموزش ماست.</p>

    <p><small>این متن یک توضیح فرعی است.</small></p>

    <p>قیمت قبلی: <del>۲۰۰ هزار تومان</del></p>

    <p>قیمت جدید: <ins>۱۵۰ هزار تومان</ins></p>

</body>
</html>

━━━━━━━━━━━━━━
🧠 خلاصه جلسه:
✅ strong ← مشخص کردن متن مهم

✅ em ← تأکید روی متن

✅ mark ← برجسته کردن متن

✅ small ← نمایش متن فرعی

✅ del ← مشخص کردن متن حذف‌شده

✅ ins ← مشخص کردن متن اضافه‌شده
🔥 تمرین جلسه دهم:
یک صفحه HTML بساز که شامل این موارد باشه:
🔹 یک عنوان درباره برنامه‌نویسی

🔹 یک جمله با کلمه مهم داخل strong

🔹 یک جمله با em

🔹 یک کلمه هایلایت‌شده با mark

🔹 یک قیمت قدیمی و یک قیمت جدید با del و ins
🎯 کدت رو اجرا کن و نتیجه رو ببین!
━━━━━━━━━━━━━━
📚 آموزش رایگان برنامه‌نویسی:
🔗 https://t.me/CodeMastersWeb
💻 CodeMastersWeb | از صفر تا حرفه‌ای
#HTML #آموزش_HTML #برنامه_نویسی #طراحی_وب #CodeMastersWeb