🔥آموزش 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 جلسه ۹👇🔥

🚀 آموزش 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 | جلسه دهم
🎯 موضوع: قالب‌بندی متن‌ها در 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

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

اگه سوالی چیزی بود به اینجا مراجعه کنید 🙏 @CodeMastersAdmin

💻🔥 سورس کد سایت نمونه‌کار برنامه‌نویسی

🚀 با این سورس می‌تونی یک سایت شخصی شیک و حرفه‌ای برای معرفی خودت و پروژه‌هات داشته باشی!

✨ امکانات سایت:

✅ طراحی مدرن با تم تیره
✅ سازگار با موبایل و کامپیوتر 📱💻
✅ بخش معرفی برنامه‌نویس
✅ نمایش پروژه‌ها و نمونه‌کارها
✅ بخش مهارت‌های برنامه‌نویسی
✅ بخش تماس و ارتباط با شما
✅ منوی موبایل و افکت‌های جذاب

🛠 زبان‌های استفاده‌شده:
🔹 HTML
🔹 CSS
🔹 JavaScript

📦 محتویات فایل ZIP:
📄 "index.html" — ساختار سایت
🎨 "style.css" — طراحی و استایل سایت
⚙️ "script.js" — عملکردهای تعاملی سایت
📘 "README.txt" — راهنمای اجرا و ویرایش

🎯 مناسب برای: تمرین طراحی وب، ساخت رزومه آنلاین و شروع ساخت نمونه‌کار شخصی.

📥 فایل رو دانلود کن، از حالت فشرده خارج کن و "index.html" رو با مرورگر باز کن!

💙 CodeMastersWeb | یادگیری، تمرین، پیشرفت

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

#سورس_کد #HTML #CSS #JavaScript #طراحی_وب #برنامه_نویسی

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

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

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

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

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

این سورس کد به فروش می‌رسد جهت خرید به اینجا مراجعه کنید @CodeMastersAdmin 🙏