سر و کله زدن با فایل ها

Previous Overview: Getting started with the web Next

یک وب سایت شامل فایل های زیادی است : مانند محتوای متنی,کد ها,صفحه بندی ها ,محتوای رسانه ای و موارد دیگر .
وقتی شما در حال ساختن یک وب سایت هستید,شما باید تمام این فایل ها و محتوا را در یک ساختار درست و منطقی در رایانه خودتان بکار ببرید و مطمئن شوید که با یک دیگر ارتباط برقرار می کنند و تمام محتوا درست به نظر می رسند , قبل از اینکه به آن ها را به سرور اصلی آپلود کنید.
سر و کله زدن با فایل ها ممکن است مشکلاتی به وجود بیاورد بنابرین شما باید آگاهانه یک ساختار محتاطانه برای خود درست کنید که مشکلات کمتری ظاهر شوند.

وب سایت شما باید در کجای رایانه قرار بگیرد؟

وقتی شما به صورت محلی(در رایانه خودتان) مشغول کار بر روی سایتی هستید,شما باید تمام فایل های مرتبط با سایت شما باید در یک پوشه جمع آوری و نگهداری شوند که ساختار فایل سایت شما را در سرور شامل میشود.
این پوشه می تواند در هر جایی قرار بگیرد ولی توصیه می شود که در مکانی که به راحتی قابل دسترس باشد قرار بگیرد مثل دسکتاپ و ....

یک مکان برای ذخیره سازی پروژه سایت خود انتخاب کنید.در آنجا یک پوشه جدید به نام پروژه-وب یا چیزی شبیه آن انتخاب کنید. این جایی است که پروژه وب سایت شما ساخته می شود.
در پوشه اول (پروژه-وب) یک پوشه دیگر برای ذخیره سازی اولین سایت خود ایجاد کنید به نام سایت-آزمایشی یا چیزی شبیه آن.

قرار دادن جای خالی را کنار بگذارید

شما در حین مطالعه این مقاله متوجه می شوید که در انتخاب نام پوشه و فایل هایتان باید از حروف کوچک و بدون فاصله (space) و جای خالی استفاده کنید.

بسیاری از رایانه ها بخصوص رایانه های سرور به حروف حساس اند . برای مثال اگر شما عکسی را در سایتتان قرار دهید test-site/MyImage.jpg و بعدا در در فایل دیگری بخواهید از ان استفاده کنید مثل test-site/myimage.jpg ممکن است که کار نکند.
مرورگرها,وب سرور ها, زبان های برنامه نویسی نمی توانند جای خالی (space) را پردازش کنند. برای مثال اگر شما از جای خالی در نامگذاری فایل هایتان استفاده کرده باشد بعضی از سیستم ها ان را به عنوان دو فایل جدا گانه در نظر می گیرند. بعضی از سرور ها ان را با %20 (کد کاراکتر space در url) جایگزین می کنند که باعث خرابی می شود .بهتر است از - به جای space استفاده کنید مثل my-file.html یا my_file.html (خط تیره از اندر لاین بهتر است)

کوتاه ترین جواب این است که از خط تیره برای اسم فایل های خود استفاده کنید . موتور جست و جوی گوگل خط تیره را به عنوان جدا کننده کلمه به حساب می آورد ولی با آندرلاین اینگونه برخورد نمی کند . برای همین دلایل بهتر است عادت کنیم که نام فایل ها و فولدر ها را با حروف کوچک و بدون فاصله و با جداکننده خط تیره بنویسیم . حداقل حالا که می دونید چه کار می کنید . این راه شما را در آینده در این مسیر با مشکلات کمتری مواجه خواهد کرد .

ساختار وب سایت شما چگونه باید باشد؟

index.html: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. Using your text editor, create a new file called index.html and save it just inside your test-site folder.
images folder: This folder will contain all the images that you use on your site. Create a folder called images, inside your test-site folder.
styles folder: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder called styles, inside your test-site folder.
scripts folder: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). Create a folder called scripts, inside your test-site folder.

Note: On Windows computers, you might have trouble seeing the file names, because Windows has an annoying option called Hide extensions for known file types turned on by default. Generally you can turn this off by going to Windows Explorer, selecting the Folder options... option, unchecking the Hide extensions for known file types checkbox, then clicking OK. For more specific information covering your version of Windows, do a Yahoo search!

File paths

To make files talk to one another, you have to provide a file path between them — basically a route so one file knows where another one is. To demonstrate this, we will insert a little bit of HTML into our index.html file, and make it display the image you chose in the article "What will your website look like?"

Copy the image you chose earlier into your images folder.
Open up your index.html file, and insert the following code into the file exactly as shown. Don't worry about what it all means for now — we'll look at the structures in more detail later in the series.
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image">
  </body>
</html> 
```
The line <img src="" alt="My test image"> is the HTML code that inserts an image into the page. We need to tell the HTML where the image is. The image is inside the images directory, which is in the same directory as index.html. To walk down the file structure from index.html to our image, the file path we'd need is images/your-image-filename. For example, our image is called firefox-icon.png, so the file path is images/firefox-icon.png.
Insert the file path into your HTML code between the double quote marks of the src="" code.
Save your HTML file, then load it in your web browser (double-click the file). You should see your new webpage displaying your image!

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

Some general rules for file paths:

To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. my-image.jpg.
To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. subdirectory/my-image.jpg.
To link to a target file in the directory above the invoking HTML file, write two dots. So for example, if index.html was inside a subfolder of test-site and my-image.jpg was inside test-site, you could reference my-image.jpg from index.html using ../my-image.jpg.
You can combine these as much as you like, for example ../subdirectory/another-subdirectory/my-image.jpg.

For now, this is about all you need to know.

Note: The Windows file system tends to use backslashes, not forward slashes, e.g. C:\windows. This doesn't matter in HTML — even if you are developing your web site on Windows, you should still use forward slashes in your code.

What else should be done?

That is about it for now. Your folder structure should look something like this:

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file