آموزش html | css

🌐 🎨 💻

آموزش جامع HTML, CSS و JavaScript

🌐

آموزش HTML

📄

تگ‌های پایه HTML

🔰 تگ‌های ساختاری

  • <html> – ریشه سند
  • <head> – اطلاعات سند
  • <body> – محتوای صفحه
  • <div> – بخش‌بندی
  • <span> – بخش درون خطی

📝 تگ‌های متنی

  • <h1> تا <h6> – عنوان‌ها
  • <p> – پاراگراف
  • <strong> – پررنگ
  • <em> – تاکیدی
  • <a> – لینک

🖼️ تگ‌های رسانه

  • <img> – تصویر
  • <video> – ویدئو
  • <audio> – صدا
  • <iframe> – قاب تعبیه

📊 تگ‌های جدول و لیست

  • <table> – جدول
  • <ul> & <ol> – لیست
  • <li> – آیتم لیست
  • <form> – فرم

💻

مثال HTML

<!DOCTYPE html>
<html lang=“fa” dir=“rtl”>
<head>
  <title>صفحه نمونه</title>
</head>
<body>
  <h1>عنوان اصلی</h1>
  <p>این یک پاراگراف است.</p>
  <a href=“#”>لینک نمونه</a>
</body>
</html>

📝

تمرین ۱: صفحه معرفی

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

  • ✅ یک عنوان اصلی با تگ <h1>
  • ✅ یک پاراگراف معرفی خود با تگ <p>
  • ✅ یک تصویر با تگ <img>
  • ✅ یک لینک به شبکه اجتماعی خود
  • ✅ یک لیست از مهارت‌هایتان
<!– راهنمایی: از تگ‌های <ul> و <li> استفاده کنید –>
📋

تمرین ۲: جدول برنامه هفتگی

یک جدول HTML برای برنامه هفتگی خود ایجاد کنید:

  • ✅ جدول با تگ <table>
  • ✅ سطر هدر با <th> برای روزهای هفته
  • ✅ حداقل ۳ سطر برای فعالیت‌ها
  • ✅ استفاده از border برای حاشیه
  • ✅ اضافه کردن رنگ پس‌زمینه به هدر
<!– از <table border=”1″> استفاده کنید –>

👩‍🏫

پاسخ تمرین ۱: صفحه معرفی مدرس کامپیوتر

👩 مریم منفرد – مدرس و توسعه‌دهنده فرانت‌اند

💻

کد HTML صفحه معرفی مریم منفرد

<!– ===== صفحه معرفی مریم منفرد – مدرس کامپیوتر ===== –>
<!–   تمرین HTML درس ۱: ایجاد صفحه معرفی شخصی –>

توضیح و آموزش کدهای این قسمت

<div style=“max-width: 900px; margin: 0 auto; background: linear-gradient(135deg, #f8f0ff 0%, #ffe9f4 100%); padding: 35px; border-radius: 25px; box-shadow: 0 20px 40px rgba(255, 107, 149, 0.2); border: 3px solid #ff6b95;”>

  <!– عنوان اصلی با نام و تخصص –>

توضیح کدهای این قسمت
  <h1 style=“color: #d44a6e; font-size: 42px; text-align: center; border-bottom: 4px solid #ff9aa2; padding-bottom: 18px; margin-top: 0; font-weight: 700; text-shadow: 2px 2px 4px rgba(255, 107, 149, 0.2);”>
    👩‍🏫 سلام! من مریم منفرد هستم
  </h1>

  <!– تصویر پروفایل با افکت‌های زیبا –>
  <div style=“text-align: center; margin-bottom: 35px;”>
    <img src=“https://randomuser.me/api/portraits/women/44.jpg”
         alt=“تصویر پروفایل مریم منفرد”
         style=“width: 180px; height: 180px; border-radius: 50%; border: 6px solid #ff9aa2; box-shadow: 0 10px 25px rgba(255, 107, 149, 0.4); object-fit: cover; transition: transform 0.3s ease;”
         onmouseover=“this.style.transform=’scale(1.05)'”
         onmouseout=“this.style.transform=’scale(1)'”>
  </div>

  <!– پاراگراف معرفی با استایل ویژه –>
  <div style=“background: linear-gradient(to right, #fff6f9, #fff0f5); padding: 25px; border-radius: 18px; border-right: 8px solid #ff6b95; margin-bottom: 30px; box-shadow: 0 8px 20px rgba(255, 107, 149, 0.15);”>
    <p style=“font-size: 22px; line-height: 1.9; color: #4a4a4a; margin: 0; font-weight: 500;”>
      من مریم منفرد هستم، مدرس کامپیوتر و علاقه‌مند به برنامه‌نویسی وب.
      از سال ۱۳۹۸ وارد دنیای برنامه‌نویسی شدم و الان به صورت تخصصی روی
      توسعه فرانت‌اند کار می‌کنم. عاشق تکنولوژی‌های جدید هستم و
      از آموزش برنامه‌نویسی به دیگران لذت می‌برم! ✨
    </p>
  </div>

  <!– شبکه‌های اجتماعی با دو لینک –>
  <div style=“display: flex; justify-content: center; gap: 20px; margin: 35px 0;”>

    <a href=“https://github.com/maryammonfared”
       target=“_blank”
       style=“background: #24292e; color: white; padding: 14px 32px; text-decoration: none; border-radius: 40px; font-size: 20px; display: inline-flex; align-items: center; gap: 10px; border: 2px solid white; box-shadow: 0 8px 15px rgba(0,0,0,0.2); transition: all 0.3s;”
       onmouseover=“this.style.transform=’translateY(-3px)’; this.style.boxShadow=’0 12px 20px rgba(0,0,0,0.3)’;”
       onmouseout=“this.style.transform=’translateY(0)’; this.style.boxShadow=’0 8px 15px rgba(0,0,0,0.2)’;”>
      🐙 گیت‌هاب من
    </a>

    <a href=“https://linkedin.com/in/maryammonfared”
       target=“_blank”
       style=“background: #0077b5; color: white; padding: 14px 32px; text-decoration: none; border-radius: 40px; font-size: 20px; display: inline-flex; align-items: center; gap: 10px; border: 2px solid white; box-shadow: 0 8px 15px rgba(0,0,0,0.2); transition: all 0.3s;”
       onmouseover=“this.style.transform=’translateY(-3px)’; this.style.boxShadow=’0 12px 20px rgba(0,0,0,0.3)’;”
       onmouseout=“this.style.transform=’translateY(0)’; this.style.boxShadow=’0 8px 15px rgba(0,0,0,0.2)’;”>
      💼 لینکدین من
    </a>

  </div>

  <!– عنوان مهارت‌ها –>
  <h2 style=“color: #d44a6e; font-size: 30px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px;”>
    🔧⚡ مهارت‌های تخصصی من
  </h2>

  <!– لیست مهارت‌ها با طراحی کارتی و رنگ‌های جذاب –>
  <ul style=“display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0; list-style: none;”>

    <li style=“background: linear-gradient(145deg, #ff6b95, #ff8da1); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(255,107,149,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
      🟠 HTML5 & CSS3
    </li>

    <li style=“background: linear-gradient(145deg, #ffb347, #ffa07a); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(255,179,71,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
      🟡 JavaScript (ES6+)
    </li>

    <li style=“background: linear-gradient(145deg, #6c5ce7, #a29bfe); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(108,92,231,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
      🟣 React.js
    </li>

    <li style=“background: linear-gradient(145deg, #00b894, #55efc4); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(0,184,148,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
      🟢 Vue.js
    </li>

    <li style=“background: linear-gradient(145deg, #e17055, #fab1a0); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(225,112,85,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
      🟠 Python
    </li>

    <li style=“background: linear-gradient(145deg, #0984e3, #74b9ff); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(9,132,227,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
      🔵 Git & GitHub
    </li>

    <li style=“background: linear-gradient(145deg, #e84342, #ff7675); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(232,67,66,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
      🔴 Responsive Design
    </li>

    <li style=“background: linear-gradient(145deg, #f39c12, #f1c40f); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(243,156,18,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
      🟡 Tailwind CSS
    </li>

    <li style=“background: linear-gradient(145deg, #8e44ad, #9b59b6); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(142,68,173,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
      🟣 Figma
    </li>

  </ul>

  <!– نقل قول انگیزشی –>
  <div style=“background: #fff0e7; padding: 20px; border-radius: 15px; margin: 35px 0 20px; border: 2px dashed #ff9aa2; text-align: center;”>
    <p style=“font-size: 22px; color: #b84a62; font-style: italic; margin: 0;”>
      “یادگیری برنامه‌نویسی، یادگیری هنر حل مسئله است!” 💫
    </p>
  </div>

  <!– footer –>
  <hr style=“border: 2px solid #ffc0cb; margin: 30px 0 20px; border-radius: 5px;”>
  <p style=“text-align: center; color: #b84a62; font-size: 20px; font-weight: 500; margin-bottom: 0;”>
    ✨ طراحی شده با 💖 توسط مریم منفرد – مدرس کامپیوتر و توسعه‌دهنده فرانت‌اند ✨
  </p>

</div>

🎯

خروجی زنده صفحه معرفی مریم منفرد

👩‍🏫 سلام! من مریم منفرد هستم

تصویر پروفایل مریم منفرد

من مریم منفرد هستم، مدرس کامپیوتر و علاقه‌مند به برنامه‌نویسی وب.
از سال ۱۳۹۸ وارد دنیای برنامه‌نویسی شدم و الان به صورت تخصصی روی
توسعه فرانت‌اند کار می‌کنم. عاشق تکنولوژی‌های جدید هستم و
از آموزش برنامه‌نویسی به دیگران لذت می‌برم! ✨

📝

پاسخ تمرین ۱: صفحه معرفی شخصی

💻

کد HTML صفحه معرفی

<!– ===== صفحه معرفی شخصی ===== –>

<div style=“max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);”>

  <!– عنوان اصلی –>
  <h1 style=“color: #2c3e50; font-size: 36px; text-align: center; border-bottom: 3px solid #3498db; padding-bottom: 15px;”>
    👋 سلام! من مریم منفرد هستم
  </h1>

  <!– تصویر پروفایل –>
  <div style=“text-align: center; margin-bottom: 30px;”>
    <img src=“https://randomuser.me/api/portraits/men/32.jpg”
         alt=“تصویر پروفایل”
         style=“width: 150px; height: 150px; border-radius: 50%; border: 5px solid #3498db; box-shadow: 0 5px 15px rgba(0,0,0,0.2);”>
  </div>

  <!– پاراگراف معرفی –>
  <p style=“font-size: 18px; line-height: 1.8; color: #34495e; background: #f8f9fa; padding: 20px; border-radius: 10px; border-right: 5px solid #3498db;”>
    من مریم منفرد هستم، مدرس کامپیوتر و علاقه‌مند به برنامه‌نویسی وب.
    از سال ۱۳۹۸ وارد دنیای برنامه‌نویسی شدم و الان به صورت تخصصی روی
    توسعه فرانت‌اند کار می‌کنم. عاشق تکنولوژی‌های جدید هستم!
  </p>

  <!– لینک شبکه اجتماعی –>
  <div style=“text-align: center; margin: 30px 0;”>
    <a href=“https://github.com/aliahmadi”
       target=“_blank”
       style=“background: #24292e; color: white; padding: 12px 30px; text-decoration: none; border-radius: 25px; font-size: 18px; display: inline-block; border: 2px solid white; box-shadow: 0 5px 10px rgba(0,0,0,0.2);”>
      🐱 پروفایل گیت‌هاب من
    </a>
  </div>

  <!– لیست مهارت‌ها –>
  <h2 style=“color: #2c3e50; font-size: 24px; margin-bottom: 15px;”>🔧 مهارت‌های من</h2>
  <ul style=“display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 0; list-style: none;”>

    <li style=“background: #3498db; color: white; padding: 12px; border-radius: 8px; text-align: center; font-size: 18px; box-shadow: 0 3px 6px rgba(52,152,219,0.3);”>
      ✅ HTML5 & CSS3
    </li>

    <li style=“background: #f39c12; color: white; padding: 12px; border-radius: 8px; text-align: center; font-size: 18px; box-shadow: 0 3px 6px rgba(243,156,18,0.3);”>
      ✅ JavaScript (ES6+)
    </li>

    <li style=“background: #27ae60; color: white; padding: 12px; border-radius: 8px; text-align: center; font-size: 18px; box-shadow: 0 3px 6px rgba(39,174,96,0.3);”>
      ✅ React.js
    </li>

    <li style=“background: #9b59b6; color: white; padding: 12px; border-radius: 8px; text-align: center; font-size: 18px; box-shadow: 0 3px 6px rgba(155,89,182,0.3);”>
      ✅ Python
    </li>

    <li style=“background: #e74c3c; color: white; padding: 12px; border-radius: 8px; text-align: center; font-size: 18px; box-shadow: 0 3px 6px rgba(231,76,60,0.3);”>
      ✅ Git & GitHub
    </li>

    <li style=“background: #1abc9c; color: white; padding: 12px; border-radius: 8px; text-align: center; font-size: 18px; box-shadow: 0 3px 6px rgba(26,188,156,0.3);”>
      ✅ Responsive Design
    </li>

  </ul>

  <!– footer –>
  <hr style=“border: 1px dashed #bdc3c7; margin: 30px 0 20px;”>
  <p style=“text-align: center; color: #7f8c8d; font-size: 16px;”>
    ✨ ساخته شده با ❤️ توسط مریم منفرد – ۱۴۰۵ ✨
  </p>

</div>

🎯

خروجی زنده صفحه معرفی

👋 سلام! من مریم منفرد هستم

تصویر پروفایل

من مریم منفرد هستم، مدرس کامپیوتر و علاقه‌مند به برنامه‌نویسی وب.
از سال ۱۳۹۸ وارد دنیای برنامه‌نویسی شدم و الان به صورت تخصصی روی
توسعه فرانت‌اند کار می‌کنم. عاشق تکنولوژی‌های جدید هستم!

🔧 مهارت‌های من

  • ✅ HTML5 & CSS3
  • ✅ JavaScript (ES6+)
  • ✅ React.js
  • ✅ Python
  • ✅ Git & GitHub
  • ✅ Responsive Design

✨ ساخته شده با ❤️ توسط مریم منفرد – ۱۴۰۵ ✨

💡

نکات آموزشی این تمرین:

  • ✅ استفاده از تگ <h1> برای عنوان اصلی
  • ✅ استفاده از تگ <p> برای پاراگراف معرفی
  • ✅ استفاده از تگ <img> با ویژگی‌های src و alt
  • ✅ استفاده از تگ <a> با target=”_blank” برای باز شدن در تب جدید
  • ✅ استفاده از تگ‌های <ul> و <li> برای لیست مهارت‌ها
  • ✅ استفاده از استایل‌های CSS برای زیباسازی (border-radius, box-shadow, gradient)

 

🎨

آموزش CSS

🎭

مفاهیم پایه CSS

🔵 کلاس (Class)

برای گروه‌بندی عناصر استفاده می‌شود:

.box {
  background: blue;
}

🆔 آیدی (ID)

برای عناصر منحصر به فرد:

#header {
  color: red;
}

🎯 سلکتور تگ

استایل دادن به همه تگ‌ها:

p {
  font-size: 16px;
}

📦 باکس مدل

پدینگ، حاشیه، مارجین:

.card {
  padding: 20px;
  margin: 10px;
}

🎨

مثال کامل CSS

/* استایل‌دهی با کلاس و آیدی */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}#main-title {
  color: #333;
  text-align: center;
  font-size: 32px;
}

🎨

تمرین ۳: طراحی کارت

یک کارت پروفایل با CSS طراحی کنید:

  • ✅ یک <div> با کلاس .profile-card
  • ✅ اضافه کردن border-radius برای گوشه‌های گرد
  • ✅ استفاده از box-shadow برای سایه
  • ✅ تنظیم padding و margin مناسب
  • ✅ تغییر رنگ پس‌زمینه با گرادیانت
/* از border-radius: 10px و box-shadow استفاده کنید */
🆔

تمرین ۴: استایل‌دهی با آیدی

یک بخش خبرنامه با آیدی استایل دهید:

  • ✅ یک <div> با آیدی #newsletter
  • ✅ تنظیم رنگ پس‌زمینه آبی روشن
  • ✅ استایل‌دهی به دکمه ارسال
  • ✅ استفاده از border برای حاشیه
  • ✅ اضافه کردن icon با Font Awesome
<i class=”fas fa-envelope”></i> برای آیکون ایمیل

⚡

آموزش JavaScript

🔮

مفاهیم پایه JavaScript

🔄 متغیرها

let name = “علی”;
const age = 25;
var isActive = true;

🎯 توابع

function greet() {
  alert(“سلام!”);
}

🖱️ رویدادها

button.addEventListener(‘click’, () => {
  console.log(‘کلیک شد’);
});

🔍 DOM

document.getElementById(‘title’);
document.querySelector(‘.box’);

⚡

مثال تعاملی JavaScript

<button id=“demo-btn”>کلیک کن</button>
<script>
document.getElementById(‘demo-btn’).onclick = function() {
  alert(‘سلام! شما روی دکمه کلیک کردید’);
};
</script>

🔢

تمرین ۵: ماشین حساب ساده

یک ماشین حساب جمع دو عدد با JavaScript بسازید:

  • ✅ دو فیلد ورودی با <input>
  • ✅ دکمه محاسبه با رویداد کلیک
  • ✅ دریافت مقادیر با document.getElementById
  • ✅ نمایش نتیجه در یک <div>
  • ✅ تبدیل رشته به عدد با parseInt()
// const result = Number(num1) + Number(num2);
🌙

تمرین ۶: حالت تاریک/روشن

یک دکمه برای تغییر تم صفحه ایجاد کنید:

  • ✅ دکمه “تغییر تم” با رویداد کلیک
  • ✅ استفاده از classList.toggle()
  • ✅ تعریف کلاس .dark-mode در CSS
  • ✅ تغییر رنگ پس‌زمینه و متن
  • ✅ استفاده از شرط if برای تشخیص حالت فعلی
// document.body.classList.toggle(‘dark-mode’);

🏆

پروژه نهایی: ساخت اپلیکیشن Todo List

همه مفاهیم HTML، CSS و JavaScript را در این پروژه ترکیب کنید:

📋 بخش HTML

  • ✅ یک <input> برای وظیفه جدید
  • ✅ دکمه “افزودن” با آیدی #add-btn
  • ✅ یک <ul> با آیدی #task-list
  • ✅ هر آیتم لیست شامل متن و دکمه حذف

🎨 بخش CSS

  • ✅ استایل‌دهی به لیست با کلاس .task-item
  • ✅ دکمه حذف با رنگ قرمز
  • ✅ هاور افکت برای آیتم‌ها
  • ✅ طرح‌بندی با flexbox

⚡ بخش JavaScript

  • ✅ رویداد کلیک برای دکمه افزودن
  • ✅ ایجاد عناصر جدید با createElement()
  • ✅ اضافه کردن به لیست با appendChild()
  • ✅ حذف آیتم‌ها با remove()
  • ✅ جلوگیری از افزودن وظیفه خالی
// ساختار کلی پروژه نهایی
<div class=“todo-container”>
  <h1>لیست وظایف</h1>
  <div class=“input-group”>
    <input type=“text” id=“task-input” placeholder=“وظیفه جدید…”>
    <button id=“add-btn”>➕ افزودن</button>
  </div>
  <ul id=“task-list”></ul>
</div>

💎

نکات طلایی برای تمرینات

🔰 HTML

تمام تمرینات را ابتدا در HTML پیاده‌سازی کنید و سپس CSS و JS را اضافه کنید.

🎨 CSS

از کلاس‌ها برای استایل‌دهی گروهی و از آیدی‌ها برای عناصر یکتا استفاده کنید.

⚡ JavaScript

تمرینات را گام به گام انجام دهید و هر بار کنسول مرورگر را بررسی کنید.

✨ تمام تمرینات را در ویرایشگر وردپرس با بلاک “Custom HTML” امتحان کنید! ✨

جزوه آموزش HTML برای وردپرس

یادگیری HTML برای سفارشی‌سازی وردپرس

مقدمه

HTML (زبان نشانه‌گذاری فرا متنی) پایه و اساس همه صفحات وب است. برای سفارشی‌سازی وردپرس، HTML ضروری است. در این جلسه با اصول HTML را برای استفاده در وردپرس آشنای میشوید

نکته مهم

وردپرس از HTML برای ساختار صفحات استفاده می‌کند. وقتی یک پست یا صفحه ایجاد می‌کنید، محتوای شما به HTML تبدیل می‌شود.

ساختار پایه HTML

هر سند HTML دارای یک ساختار پایه است که شامل تگ‌های اصلی می‌باشد:

<!– ساختار پایه یک سند HTML –>
<!DOCTYPE html>
<html lang=“fa” dir=“rtl”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>عنوان صفحه</title>
</head>
<body>
<!– محتوای صفحه اینجا قرار می‌گیرد –>
</body>
</html>

تگ‌های مهم HTML

در وردپرس، این تگ‌ها بیشترین استفاده را دارند:

<!– تگ‌های متنی –>
<h1>عنوان اصلی</h1>
<h2>عنوان فرعی</h2>
<p>این یک پاراگراف است.</p>
<strong>متن پررنگ</strong>
<em>متن تاکیدی</em>
<a href=“https://example.com”>لینک</a><!– تگ‌های رسانه –>
<img src=“image.jpg” alt=“توضیح تصویر”>

<!– تگ‌های ساختاری –>
<div>بخش‌بندی صفحه</div>
<span>بخش‌بندی درون خطی</span>

هشدار

در ویرایشگر وردپرس، هنگام استفاده از HTML مراقب باشید که تگ‌ها را به درستی ببندید. تگ‌های باز می‌توانند باعث بهم ریختگی صفحه شوند.

کار با کلاس‌ها و شناسه‌ها در وردپرس

وردپرس به طور خودکار کلاس‌های CSS به عناصر اضافه می‌کند. شما هم می‌توانید کلاس‌های سفارشی اضافه کنید:

<!– اضافه کردن کلاس و آی‌دی به عناصر –>
<div class=“my-custom-class wp-block” id=“unique-section”>
<p class=“text-highlight”>این یک متن برجسته است.</p>
</div>

کلاس‌های رایج وردپرس

  • aligncenter – برای هم تراز کردن
  • alignleft – برای تراز به چپ
  • alignright – برای تراز به راست
  • wp-caption – برای کپشن تصاویر
  • wp-block – برای بلوک‌های گوتنبرگ

ایجاد لیست در HTML

لیست‌ها در وردپرس برای منوها، فهرست مطالب و … استفاده می‌شوند:

<!– لیست نامرتب –>
<ul>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ul><!– لیست مرتب –>
<ol>
<li>گام اول</li>
<li>گام دوم</li>
<li>گام سوم</li>
</ol>

جاسازی محتوا در وردپرس

در وردپرس می‌توانید ویدئو، نقشه و سایر محتواها را جاسازی کنید:

<!– جاسازی ویدئو –>
<iframe width=“560” height=“315”
src=“https://www.youtube.com/embed/VIDEO_ID”
frameborder=“0” allowfullscreen>
</iframe>
نمونه عملی: ایجاد دکمه در وردپرس

می‌توانید با HTML و CSS داخلی دکمه‌های زیبا ایجاد کنید:

<a href=“#” class=“wp-button”
style=“background: #4CAF50; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; display: inline-block;”>
دکمه وردپرس
</a>

دکمه وردپرس

جدول‌ها در HTML

برای نمایش داده‌های ساختاریافته در وردپرس:

<!– ساخت جدول –>
<table class=“wp-table”>
<tr>
<th>عنوان ستون ۱</th>
<th>عنوان ستون ۲</th>
</tr>
<tr>
<td>داده ۱</td>
<td>داده ۲</td>
</tr>
</table>

نکات پایانی

  1. همیشه از ویرایشگر HTML در وردپرس برای اضافه کردن کدهای پیچیده استفاده کنید.
  2. از پلاگین‌هایی مانند “HTML Editor Syntax Highlighter” برای خوانایی بهتر کدها استفاده کنید.
  3. برای یادگیری بیشتر، به ابزار “Inspector” مرورگر خود مراجعه کنید تا HTML تولید شده توسط وردپرس را بررسی کنید.
نکته کاربردی

در ویرایشگر گوتنبرگ وردپرس، می‌توانید از بلاک “Custom HTML” برای اضافه کردن کدهای HTML سفارشی استفاده کنید. این بلاک کدهای شما را بدون تغییر نمایش می‌دهد.

🎨 🖌️ 💻

آموزش Class, ID و Style در HTML & CSS

🎯 استایل‌دهی به عناصر با کلاس و آیدی

🎭

تگ <style> چیست؟

🧩 تعریف
تگ <style> برای نوشتن کدهای CSS در داخل صفحه HTML استفاده می‌شود.

<style>
  p {
    color: blue;
    font-size: 20px;
  }
</style>

✅
محل قرارگیری: معمولاً در داخل تگ <head> قرار می‌گیرد.

📋

کلاس (Class) در CSS

🔵 کلاس چیست؟

کلاس یک ویژگی (attribute) در HTML است که به عناصر یک نام گروهی می‌دهد. چندین عنصر می‌توانند کلاس یکسان داشته باشند.

⚡ نحوه استفاده

در CSS با . (نقطه) و در HTML با class="نام-کلاس"

📄

کد HTML

<div class=“box”>
  این یک جعبه است
</div>
<p class=“box”>
  این هم یک جعبه است
</p>
🎨

کد CSS

.box {
  background-color: #f0f0f0;
  padding: 20px;
  border: 2px solid #333;
}

💡
نکات مهم کلاس:

  • ✅ یک عنصر می‌تواند چندین کلاس داشته باشد: class="box red large"
  • ✅ چندین عنصر می‌توانند یک کلاس مشترک داشته باشند
  • ✅ نام کلاس‌ها به حروف بزرگ و کوچک حساس هستند (case-sensitive)

🆔

آیدی (ID) در CSS

🆔 آیدی چیست؟

آیدی یک شناسه یکتا (Unique) برای هر عنصر است. هر آیدی فقط باید به یک عنصر در صفحه اختصاص داده شود.

⚡ نحوه استفاده

در CSS با # (تگ) و در HTML با id="نام-آیدی"

📄

کد HTML

<div id=“header”>
  این هدر صفحه است
</div>
<button id=“submit-btn”>
  ارسال
</button>
🎨

کد CSS

#header {
  background: #333;
  color: white;
  padding: 30px;
}

⚠️
تفاوت کلاس و آیدی:

📋 کلاس (.)

  • ✅ چندین بار قابل استفاده
  • ✅ چندین کلاس برای یک عنصر
  • ✅ برای گروه‌بندی عناصر

🆔 آیدی (#)

  • ❌ فقط یک بار در صفحه
  • ❌ یک آیدی برای هر عنصر
  • ✅ برای عناصر منحصر به فرد

⚖️

مقایسه کامل Class و ID

ویژگی کلاس (Class) آیدی (ID)
نماد در CSS .classname #idname
تکرار در صفحه ✅ چندین بار مجاز ❌ فقط یک بار
تعداد برای هر عنصر چندین کلاس مجاز فقط یک آیدی
کاربرد اصلی استایل‌دهی گروهی شناسایی عناصر یکتا
/* مثال ترکیبی از کلاس و آیدی */
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}
#submit-btn {
  background: #28a745;
  color: white;
}

💎

مثال عملی ترکیبی

📋

کد HTML کامل

<div class=“card”>
  <h2 id=“title” class=“text-center text-blue”>
    سلام دنیا!
  </h2>
  <p class=“text-content”>
    این یک پاراگراف با کلاس است
  </p>
  <button id=“btn” class=“btn-primary btn-large”>
    کلیک کن
  </button>
</div>

🎨

کد CSS کامل

/* استایل کلاس‌ها */
.card {
  background: white;
  border-radius: 10px;
  padding:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *