آموزش طراحی سایت با HTML و CSS | ایجاد دایرکتوری های پروژه

آموزش طراحی سایت با HTML و CSS ، ایجاد دایرکتوری های پروژه. در قسمت قبل، بسیاری از موارد اساسی مورد نیاز برای نوشتن کدهای HTML را مرور کردیم. در این پست طراحی یک وب سایت ساده با HTML و CSS را شروع خواهیم کرد و در گام اول دایرکتوری های پروژه را می سازیم.

ما در قسمت های قبل مطالب مهمی را در مورد HTML آموخته ایم. مطالبی که تاکنون گفته شده است و ما می دانیم:

• ساختار یک صفحه HTML به چه صورت است.
• تگ ها و عناصر چیست.
• توضیحات مفصلی در مورد برخی از تگ های اساسی که بیشتر مورد استفاده قرار می گیرد داده شده است.
• ایجاد اولین صفحه وب را برای چاپ  “Hello World!” در سایزهای مختلف (با تگ های هدینگ).

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

• VS Code
• Notepad++
• Sublime Text 3
• Atom

ایجاد دایرکتوری های پروژه طراحی یک وب سایت ساده با HTML و CSS

اولین کاری که باید انجام دهیم، ایجاد دایرکتوری هاست. یعنی فایل ها و پوشه هایی که باید برای نوشتن کدها و نگه داری فایل ها نیاز داریم را ایجاد کنیم. در زیر لیستی از فایل ها و پوشه های مورد نیاز را مشاهده می نمایید:

در تصویر بالا می توانید پوشه ها و فایل هایی را که در پروژه استفاده کرده ایم در نوار کناری سمت چپ ویرایشگر به وضوح مشاهده کنید. اما در اینجا چند سوال پیش می آید:

• چرا ایجاد تعداد زیادی پوشه مهم است؟
• برای ایجاد پوشه ها باید از چه قراردادی پیروی کرد؟
• آیا قراردادهای نامگذاری برای نامگذاری پوشه ها و فایل ها وجود دارد؟

چند سوال بالا، سوالات اساسی است که در ذهن همه کسانی که برای اولین بار پروژه ای ایجاد می کنند به وجود می آید.

پاسخ ها:

1. اگر شما نمی خواهید پوشه ای ایجاد کنید و در عوض همه فایل ها، تصاویر و غیره را در دایرکتوری اصلی نگه دارید و هرجا که لازم بود آنها را به درستی لینک کنید، پروژه شما کماکان به درستی کار می کند. اما این کافی نیست. ایجاد پوشه های جداگانه برای مجموعه ای جداگانه از فایل ها، امور را سازماندهی کرده و برای دیگران به راحتی قابل درک است. به عنوان مثال، نگه داشتن همه تصاویر در یک پوشه جداگانه با نام “image”، نگهداری همه فایل های css در پوشه ای با نام “CSS” و غیره.
2. هیچ قرارداد استانداردی برای انجام این کار وجود ندارد. هر سازمان، مجموعه ای از قوانین خود را برای حفظ ساختار سازماندهی می کند. ‌به زبان ساده تر هر شخص یا سازمانی مجموعه ای از قوانین را برای قابل درک بودن، نظم و هماهنگی بیشتر در پروژه های خود در نظر می گیرند. اما رویکرد اصلی که رعایت می شود این است که پوشه های جداگانه ای را برای مجموعه ای جداگانه از فایل ها همانطور که در بالا توضیح داده شد، ایجاد کنیم.
3. باز هم هیچ استانداردی برای نامگذاری فایل ها و پوشه ها به جز “index.html” وجود ندارد. صفحه ای با نام “index.html” پایه و اساس یک پروژه است که مرورگر آن را به عنوان صفحه اصلی در نظر می گیرد. بنابراین، شما باید صفحه اصلی خود را به عنوان “index.html” نامگذاری کنید و برای بقیه فایل ها و پوشه ها، می توانید هر چیزی را که به بهترین نحو محتوای آنها را توصیف می کند، نامگذاری کنید.

اکنون اجازه دهید جزئیات مربوط به دایرکتوری هایی را که برای پروژه خود ایجاد کرده ایم، بررسی کنیم:

project-1: این دایرکتوری اصلی پروژه ما است که شامل تمام پوشه ها و فایل هایی است که در هنگام ساخت پروژه ایجاد خواهیم کرد.

css: این پوشه شامل تمام فایل های CSS است که ما برای استایل دادن به پروژه خود از آنها استفاده خواهیم کرد. در حال حاضر، این پوشه خالی می باشد.

fonts: این پوشه شامل تمام فایل های فونت مورد استفاده در پروژه می باشد.

images: این پوشه شامل تمام تصاویری است که در پروژه از آنها استفاده خواهیم کرد. فعلا این پوشه خالی می باشد.

index.html: صفحه ای با نام “index.html” پایه و اساس پروژه می باشد که مرورگر آن را به عنوان صفحه اصلی در نظر می گیرد. هنگامی که وب سایت ما در مرورگر بارگذاری شود، همه چیز داخل این صفحه ارائه می شود.

سرفصل های آموزش طراحی یک وب سایت ساده با HTML و CSS

1. مقدمه: آموزش طراحی یک وب سایت ساده با HTML و CSS
2. ساختار یک صفحه یا سند HTML
3. ساخت اولین صفحه وب و چاپ Hello World
4. مبانی و مفاهیم پایه HTML
5. شروع پروژه | ایجاد دایرکتوری های پروژه