Một dự án web bao gồm nhiều tập tin: nội dung dạng chữ, mã nguồn, stylesheet, nội dung đa phương tiện, và nhiều hơn thế nữa. Khi xây dựng một trang web, bạn cần tập hợp những tập tin này lại với nhau trong máy tính của mình theo cấu trúc hợp lý, đảm bảo rằng chúng có thể tương tác được với nhau, và lấy ra tất cả những nội dung mà bạn cho là đúng, trước khi bạn có thể đẩy chúng lên server. Làm việc với các tập tin bàn luận về một số vấn đề cần quan tâm để bạn có thể thiết lập cấu trúc tập tin hợp lý cho trang web của mình.

Nên lưu trang web của mình vào đâu trên máy tính cá nhân?

Khi làm việc với một trang web trên chính máy tính của mình, bạn nên gom hết đống tập tin cần thiết vào một thư mục duy nhất có cấu trúc tổ chức tập tin giống với server bạn sắp sửa đẩy lên. Bạn muốn đặt thư mục đó vào đâu cũng được, có điều nên đặt ở chỗ nào mà bạn có thể dễ dàng tìm thấy ấy, trên màn hình Desktop chả hạn, hoặc trong thư mục Home, hay là ở trong thư mục gốc.

  1. Kiếm chỗ lưu trữ đống dự án web của mình. Hãy tạo một thư mục có tên là web-projects (cho nó đơn giản).
  2. Trong thư mục này, hãy tạo ra một thư mục khác để lưu trữ dự án web đầu tiên của bạn. Đặt tên cho nó là test-site (hoặc gì đấy dễ nhớ dễ liên tưởng).

Tránh dùng chữ hoa và khoảng trắng

Xuyên suốt bài viết này, chúng tôi sẽ yêu cầu bạn đặt tên cho thư mục và tập tin dưới dạng chữ thường và không có khoảng trắng. Bởi vì:

  1. Trong nhiều máy tính, thường là các web server, phân biệt hoa-thường. Chẳng hạn, nếu bạn lưu hình ảnh của mình vào test-site/MyImage.jpg, rồi gọi nó ra trong một tập tin khác theo đường dẫn test-site/myimage.jpg, có thể sẽ chẳng ra cái gì cả.
  2. Trình duyệt, web server, và ngôn ngữ lập trình không xử lý kí tự khoảng trắng theo cách nhất quán. Chẳng hạn, nếu trong tên tập tin có khoảng trắng, một số hệ thống sẽ coi đó là hai tập tin riêng biệt. Một số server sẽ thay thế khoảng trắng với "%20" (mã kí tự khoảng trắng trong URI), khiến cho tất cả đống đường dẫn của bạn bị hỏng. Nếu bắt buộc phải phân chia, thì hãy dùng dấu gạch nối thay cho dấu gạch dưới: my-file.html vs. my_file.html.

Nói ngắn gọn thì bạn nên dùng dấu gạch nối cho tên tập tin. Công cụ tìm kiếm của Google coi dấu gạch nối là dấu ngăn cách các từ, còn dấu gạch dưới thì không được như vậy. Vì những lí do đó, sẽ tốt hơn cả nếu bạn có thói quen đặt tên ?cho thư mục và tập tin của mình bằng kí tự thường, không có khoảng trắng và sử dụng dấu gạch nối để ngăn cách các từ, chí ít là tới khi bạn hiểu mình đang làm gì. Làm như vậy sẽ giảm thiểu những vấn đề không đáng có trong giai đoạn sau này.

Nên xây dựng cấu trúc trang web như thế nào?

Tiếp đến, hãy nhìn vào cấu trúc trang test của chúng tôi phía trong ví dụ bên dưới đây. Tập tin thường xuất hiện trong hầu như mọi dự án web của chúng tôi là index HTML ?và các thư mục chứa hình ảnh, kiểu và kịch bản. Bắt đầu khởi tạo thôi nào:

  1. index.html: Tập tin này chứa trang chủ của bạn, nói cách khác, là nơi hiển thị ngôn từ và hình ảnh khi người ta lần đầu ghé thăm trang của bạn. Dùng trình soạn thảo của mình, hãy tạo một tập tin mới và đặt tên là index.html và lưu nó bên trong thư mục test-site.
  2. Thư mục images: Thư mục này chứa tất cả những hình ảnh dùng cho trang web của bạn. Tạo thư mục tên là images, ở trong thư mục test-site.
  3. Thư mục styles: Thư mục này chứa mã nguồn CSS dùng để định kiểu cho nội dung trang web của bạn (ví dụ như với kiểu chữ và màu nền). Tạo thư mục tên là styles, ở trong thư mục test-site.
  4. Thư mục scripts: Thư mục này chứa tất cả mã nguồn JavaScript dùng để tạo ra các tương tác bên trong trang web của bạn (ví dụ như nút like của Facebook). Tạo thư mục tên là scripts, ở trong thư mục test-site.

Chú ý: Trên máy tính sử dụng Windows, bạn có thể sẽ gặp phải vấn đề khi xem tên tập tin, bởi lẽ Windows có một option tên là Hide extensions for known file types được bật sẵn. Bạn có thể tắt nó đi bằng cách vào Windows Explorer, chọn Folder options..., bỏ chọn Hide extensions for known file types, và nhấn OK. Tuỳ theo phiên bản Windows sẽ có cách xử lý riêng biệt, bạn có thể tìm trên mạng. 

Đường dẫn tập tin

Để các tập tin có thể tương tác được với nhau, bạn phải tạo ra đường dẫn giữa chúng — đơn giản chỉ là một route để tập tin này biết tập tin kia ở chỗ khỉ nào. Vào việc nào, ta sẽ thêm một chút HTML vào tập tin index.html, và bảo nó hiển thị hình ảnh bạn đã chọn ở bài "Trang web của bạn sẽ trông như thế nào?"

  1. Sao chép hình ảnh bạn từng chọn và lưu vào thư mục images.
  2. Mở tập tin index.html của bạn lên, và thêm đoạn mã bên dưới. Đừng bận tâm về ý nghĩa của nó vào lúc này — ta sẽ tìm hiểu sâu hơn ở các bài viết sau.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
      </head>
      <body>
        <img src="" alt="My test image">
      </body>
    </html> 
  3. Dòng <img src="" alt="My test image"> là một mã HTML để thêm ảnh vào trang. Ta cần phải bảo thằng HTML nơi chứa hình ảnh. Ta vừa lưu hình ảnh vào thư mục images ở bước 1, cùng thư mục với tập tin index.html. Để index.html tìm ra hình ảnh đó, đường dẫn mà ta cần sẽ là images/tên-tập-tin-hình-ảnh-của-bạn. Chẳng hạn, hình ảnh của ta có tên là firefox-icon.png, đường dẫn sẽ là images/firefox-icon.png.
  4. Thêm đường dẫn đó vào trong mã nguồn HTML của bạn, nằm giữa dấu ngoặc kép src="".
  5. Lưu lại tập tin HTML, và tải lại trang (nhấn đúp vào tập tin .html). Bạn sẽ thấy trang web của mình đã hiển thị hình ảnh mà bạn vừa thêm vào! 

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

Một số rule cơ bản cho đường dẫn tập tin:

  • Để dẫn cho tập tin có nằm cùng thư mục với tập tin HTML, chỉ cần dùng tên tập tin thôi, ví dụ my-image.jpg.
  • Để trỏ tới thư mục con bên trong thư mục gốc, viết tên thư mục ấy trước tên tập tin, kèm theo dấu sược tiến, ví dụ subdirectory/my-image.jpg.
  • Để dẫn tập tin nằm trên thư mục chứa tập tin HTML, viết thêm hai dấu chấm. Chả hạn, nếu index.html nằm trong thư mục con test-site và my-image.jpg nằm cùng thư mục với test-site, bạn có thể trỏ tới my-image.jpg từ index.html bằng ../my-image.jpg.
  • Bạn muốn lồng bao nhiêu cũng được tuỳ sở thích ../thư-mục-con/?thư-mục-cháu/my-image.jpg.

Tạm thời thế đã.

Chú ý: Hệ thống tập tin của Windows thường sử dụng dấu sược ngược, ví dụ C:\windows. Việc này không gây ảnh hưởng gì trong HTML — nếu bạn phát triển trang web trên nền Windows, bạn vẫn nên sử dụng dấu sược tiến.

Còn phải làm gì nữa không?

Tạm thời thế là ổn. Cấu trúc thư mục của bạn sẽ trông kiểu như vầy:

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

 

Trong mô-đun này

 

Document Tags and Contributors

Những người đóng góp cho trang này: thanhNamDuong, PurpleLover
Cập nhật lần cuối bởi: thanhNamDuong,