📁 درس دهم: ساختار حرفهای یک پروژه HTML
🎯 هدف این درس: آشنایی با ساختار حرفهای پروژههای HTML، سازماندهی فایلها و پوشهها، مدیریت صفحات، تصاویر، فایلهای CSS و سایر منابع پروژه
مهمان عزیز! 👋
به درس دهم از دوره HTML سطح مقدماتی خوش آمدی.
تا اینجا با بسیاری از مفاهیم مهم HTML آشنا شدی. ساختار صفحات، عناصر معنایی، متن، تصاویر، فرمها، جدولها، لینکها، دسترسپذیری و اصول اولیه HTML مناسب برای SEO را یاد گرفتی.
حالا وقت آن رسیده است که از نوشتن فایلهای HTML بهصورت جداگانه عبور کنیم و یاد بگیریم یک پروژه واقعی را چگونه سازماندهی کنیم.
💡 یک نکته مهم مهمان:
یک پروژه حرفهای فقط به کدنویسی درست نیاز ندارد. نظم در نامگذاری فایلها، پوشهها و منابع باعث میشود پروژه در آینده راحتتر توسعه و مدیریت شود.
🏗️ بخش ۱: پروژه HTML چیست؟
یک پروژه HTML معمولاً فقط یک فایل HTML نیست.
حتی یک وبسایت ساده ممکن است چندین صفحه، فایل CSS، تصاویر، فایلهای JavaScript، فونتها و منابع مختلف داشته باشد.
برای مثال، یک وبسایت شخصی میتواند صفحه اصلی، صفحه درباره من، صفحه تماس با ما و چند فایل دیگر داشته باشد.
📦 اجزای رایج یک پروژه HTML
- HTML: ساختار و محتوای صفحات
- CSS: ظاهر و طراحی صفحات
- JavaScript: تعامل و رفتارهای پویا
- Images: تصاویر و فایلهای گرافیکی
- Fonts: فونتهای مورد استفاده پروژه
- Assets: سایر منابع مورد نیاز پروژه
یک پروژه ساده
فرض کنیم میخواهیم یک وبسایت شخصی ساده بسازیم. در ابتدا ممکن است تمام فایلها را در یک پوشه قرار دهیم.
ساختار ساده پروژه
Project
HTML5
my-website/
├── index.html
├── about.html
├── contact.html
├── style.css
└── script.js
این ساختار برای یک پروژه بسیار کوچک قابل استفاده است، اما وقتی پروژه بزرگتر شود بهتر است فایلها را در پوشههای مشخص قرار دهیم.
📂 بخش ۲: ساختار حرفهای پوشههای پروژه
یکی از ساختارهای مناسب برای یک پروژه HTML میتواند به شکل زیر باشد:
ساختار حرفهای پروژه
Project
Structure
my-website/
│
├── index.html
├── about.html
├── contact.html
│
├── css/
│ └── style.css
│
├── js/
│ └── script.js
│
├── images/
│ ├── logo.png
│ ├── profile.jpg
│ └── banner.jpg
│
└── fonts/
└── custom-font.woff2
📋 کاربرد فایلها و پوشهها
| فایل یا پوشه | کاربرد |
|---|---|
index.html |
صفحه اصلی سایت |
about.html |
صفحه درباره ما |
contact.html |
صفحه تماس با ما |
css/ |
فایلهای مربوط به استایل |
js/ |
فایلهای JavaScript |
images/ |
تصاویر پروژه |
fonts/ |
فونتهای پروژه |
🏠 بخش ۳: نقش فایل index.html
در بسیاری از پروژههای وب، فایل index.html به عنوان صفحه اصلی پروژه استفاده میشود.
وقتی کاربر وارد صفحه اصلی یک وبسایت میشود، معمولاً سرور به دنبال فایل اصلی پروژه میگردد. در یک پروژه ساده HTML، این فایل میتواند index.html باشد.
index.html
HTML
HTML5
<!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>
<h1>
به وبسایت من خوش آمدید
</h1>
<p>
این صفحه اصلی پروژه HTML من است.
</p>
</body>
</html>
⚠️ توجه:
نام index.html یک قرارداد بسیار رایج برای صفحه اصلی است. استفاده از این نام باعث میشود ساختار پروژه برای توسعهدهندگان و سرویسهای وب قابل فهمتر باشد.
🎨 بخش ۴: سازماندهی فایلهای CSS
بهتر است فایلهای CSS را داخل پوشهای مانند css قرار دهیم.
این کار باعث میشود فایلهای مربوط به ظاهر پروژه از فایلهای HTML جدا باشند.
برای مثال:
style.css
CSS
CSS3
/css
style.css
سپس از داخل فایل HTML، مسیر فایل CSS را مشخص میکنیم.
اتصال CSS
HTML
HTML5
<link
rel="stylesheet"
href="css/style.css"
>
⭐ نکته حرفهای:
مسیر css/style.css یعنی ابتدا وارد پوشه css شو و سپس فایل style.css را پیدا کن.
🖼️ بخش ۵: سازماندهی تصاویر
تصاویر یکی از مهمترین منابع هر وبسایت هستند.
بهتر است تصاویر را داخل پوشهای مانند images قرار دهیم تا فایلهای پروژه مرتب باقی بمانند.
پوشه تصاویر
Images
Assets
images/
├── logo.png
├── profile.jpg
├── banner.jpg
└── products/
├── product-1.jpg
└── product-2.jpg
حالا اگر بخواهیم تصویر لوگو را در صفحه HTML نمایش دهیم، باید مسیر آن را بهدرستی مشخص کنیم.
نمایش تصویر
HTML
HTML5
<img
src="images/logo.png"
alt="لوگوی وبسایت"
>
⚠️ توجه:
نام فایلها را تا حد امکان ساده، واضح و قابل تشخیص انتخاب کن. استفاده از نامهایی مانند my-final-image-2.jpg در پروژههای بزرگ میتواند مدیریت فایلها را سخت کند.
🔗 بخش ۶: مسیرهای نسبی در پروژه
وقتی فایلهای پروژه در پوشههای مختلف قرار میگیرند، باید مسیر صحیح آنها را در HTML مشخص کنیم.
به این مسیرها معمولاً Relative Path یا مسیر نسبی گفته میشود.
فایل در همان پوشه
اگر دو فایل در یک پوشه باشند، میتوانیم مستقیماً نام فایل را بنویسیم.
مسیر ساده
HTML
HTML5
<a href="about.html">
درباره ما
</a>
ورود به یک پوشه
برای ورود به یک پوشه از علامت / استفاده میکنیم.
مسیر پوشه
HTML
HTML5
<a href="pages/about.html">
درباره ما
</a>
بازگشت به پوشه قبلی
برای رفتن یک سطح به عقب از ../ استفاده میکنیم.
بازگشت به پوشه قبلی
HTML
HTML5
<a href="../index.html">
صفحه اصلی
</a>
💡 نکته کلیدی مهمان:
folder/file.html یعنی وارد پوشه شو، ../ یعنی یک سطح به عقب برگرد و نام فایل را بدون مسیر اضافی بنویس.
📝 بخش ۷: نامگذاری حرفهای فایلها
نامگذاری فایلها شاید در ابتدا موضوع سادهای به نظر برسد، اما در پروژههای بزرگ اهمیت زیادی پیدا میکند.
✅ نامهای مناسب
index.htmlabout.htmlcontact.htmlstyle.cssscript.jsprofile-image.jpg
❌ نامهای نامناسب
New File.htmlmy file final final.htmlعکس جدید.jpgtest123456.htmlfinal-version-new-2-final.html
بهتر است نام فایلها کوتاه، مشخص و قابل فهم باشند. همچنین در پروژههای وب معمولاً استفاده از حروف انگلیسی، اعداد و خط تیره انتخاب مناسبی است.
🧩 بخش ۸: ساخت یک پروژه چندصفحهای
حالا میخواهیم یک پروژه کوچک چندصفحهای ایجاد کنیم.
این پروژه شامل صفحه اصلی، درباره ما و تماس با ما خواهد بود.
ساختار پروژه
پروژه چندصفحهای
Project
HTML5
personal-site/
│
├── index.html
│
├── pages/
│ ├── about.html
│ └── contact.html
│
├── css/
│ └── style.css
│
├── js/
│ └── script.js
│
└── images/
└── profile.jpg
صفحه اصلی
index.html
HTML
HTML5
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>صفحه اصلی</title>
</head>
<body>
<header>
<h1>وبسایت شخصی من</h1>
<nav>
<a href="index.html">خانه</a>
<a href="pages/about.html">درباره من</a>
<a href="pages/contact.html">تماس با من</a>
</nav>
</header>
<main>
<h2>به وبسایت من خوش آمدید</h2>
<p>
این صفحه اصلی وبسایت شخصی من است.
</p>
</main>
<footer>
<p>تمامی حقوق محفوظ است.</p>
</footer>
</body>
</html>
صفحه درباره ما
فایل about.html داخل پوشه pages قرار دارد. بنابراین برای اتصال فایل CSS باید مسیر مناسب را مشخص کنیم.
about.html
HTML
HTML5
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
rel="stylesheet"
href="../css/style.css"
>
<title>درباره من</title>
</head>
<body>
<h1>درباره من</h1>
<p>
من در حال یادگیری HTML هستم.
</p>
<a href="../index.html">
بازگشت به صفحه اصلی
</a>
</body>
</html>
💡 دقت کن:
در index.html مسیر CSS برابر css/style.css است، اما در pages/about.html باید از ../css/style.css استفاده کنیم، چون فایل یک پوشه پایینتر قرار گرفته است.
🧹 بخش ۹: چرا سازماندهی پروژه اهمیت دارد؟
تصور کن یک پروژه ۵۰ صفحهای داشته باشیم و تمام تصاویر، فایلهای CSS، JavaScript و صفحات را در یک پوشه قرار داده باشیم.
پیدا کردن یک فایل خاص در چنین پروژهای بسیار دشوار خواهد بود.
✅ مزایای ساختار منظم
- پیدا کردن فایلها سریعتر میشود.
- توسعه پروژه آسانتر میشود.
- خطاهای مربوط به مسیر فایلها کاهش پیدا میکند.
- همکاری چند توسعهدهنده روی پروژه سادهتر میشود.
- نگهداری پروژه در آینده راحتتر خواهد بود.
- ساختار پروژه برای توسعهدهندگان دیگر قابل فهمتر است.
🧪 پروژه عملی: ساخت وبسایت شخصی
🚀 پروژه کوچک این درس
حالا یک پروژه واقعی کوچک ایجاد میکنیم که شامل صفحه اصلی، صفحه درباره ما، صفحه تماس، فایل CSS، فایل JavaScript و پوشه تصاویر باشد.
ساختار نهایی پروژه
پروژه نهایی درس
Project
HTML5
personal-website/
│
├── index.html
│
├── pages/
│ ├── about.html
│ └── contact.html
│
├── css/
│ └── style.css
│
├── js/
│ └── script.js
│
├── images/
│ ├── profile.jpg
│ └── logo.png
│
└── fonts/
└── custom-font.woff2
فایل CSS
style.css
CSS
CSS3
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #F8FAFC;
color: #1E293B;
}
header {
background-color: #2563EB;
color: white;
padding: 30px;
text-align: center;
}
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
}
main {
max-width: 900px;
margin: 40px auto;
padding: 20px;
}
footer {
text-align: center;
padding: 20px;
background-color: #E2E8F0;
}
فایل JavaScript
در این درس تمرکز اصلی ما روی HTML است، اما میتوانیم فایل JavaScript را نیز از ابتدا در ساختار پروژه قرار دهیم.
script.js
JavaScript
ES6+
console.log("پروژه HTML با موفقیت اجرا شد!");
اتصال JavaScript به HTML
اتصال JavaScript
HTML
HTML5
<script src="js/script.js"></script>
🧠 بخش ۱۰: چند قانون مهم برای ساختار پروژه
- صفحه اصلی پروژه را معمولاً با نام
index.htmlایجاد کن. - فایلهای CSS را در پوشهای مانند
cssقرار بده. - فایلهای JavaScript را در پوشهای مانند
jsقرار بده. - تصاویر را در پوشهای مانند
imagesنگهداری کن. - صفحات اضافی را میتوان در پوشهای مانند
pagesقرار داد. - نام فایلها را کوتاه، واضح و قابل تشخیص انتخاب کن.
- مسیر فایلها را همیشه نسبت به فایل HTML بررسی کن.
- از ایجاد پوشهها و فایلهای غیرضروری خودداری کن.
📝 تمرینهای عملی
🎯 تمرین شماره ۱
یک پوشه با نام my-website ایجاد کن و داخل آن فایل index.html قرار بده.
سپس دو فایل about.html و contact.html نیز ایجاد کن.
🎯 تمرین شماره ۲
داخل پروژه پوشههای css، js و images ایجاد کن و فایلهای مربوط به هر بخش را داخل پوشه مناسب قرار بده.
🎯 تمرین شماره ۳
صفحه اصلی را به صفحات درباره ما و تماس با ما لینک کن.
سپس از صفحات داخلی، یک لینک برای بازگشت به صفحه اصلی ایجاد کن.
🎯 تمرین شماره ۴
یک تصویر داخل پوشه images قرار بده و آن را در صفحه اصلی با استفاده از مسیر نسبی نمایش بده.
🧩 جمعبندی درس
مهمان عزیز، در این درس یاد گرفتی که یک پروژه HTML حرفهای فقط مجموعهای از فایلهای HTML نیست.
با ایجاد یک ساختار منظم میتوانی صفحات، فایلهای CSS، JavaScript، تصاویر و سایر منابع پروژه را به شکل قابل مدیریت سازماندهی کنی.
- ✅ مفهوم ساختار پروژه HTML
- ✅ نقش فایل
index.html - ✅ سازماندهی فایلهای HTML
- ✅ ساخت پوشه CSS و مدیریت فایلهای استایل
- ✅ ساخت پوشه JavaScript
- ✅ سازماندهی تصاویر در پوشه images
- ✅ مفهوم مسیر نسبی و استفاده از
../ - ✅ اصول نامگذاری حرفهای فایلها
- ✅ ساخت یک پروژه چندصفحهای
در درس بعدی، تمام مهارتهایی را که در این دوره یاد گرفتهایم کنار هم قرار میدهیم و یک وبسایت چندبخشی و استاندارد با HTML میسازیم.
