آموزش طراحی سایت

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

16 views14:43

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