Tại sao html chỉ mục của tôi không hoạt động?

Trang web của bạn nên sống ở đâu trên máy tính của bạn?

Khi bạn đang làm việc cục bộ trên một trang web trên máy tính của mình, bạn nên giữ tất cả các tệp liên quan trong một thư mục duy nhất phản ánh cấu trúc tệp của trang web đã xuất bản trên máy chủ. Thư mục này có thể nằm ở bất cứ đâu bạn thích, nhưng bạn nên đặt nó ở đâu đó mà bạn có thể dễ dàng tìm thấy, có thể trên Màn hình nền, trong thư mục Home hoặc thư mục gốc của ổ cứng.

1. Chọn một nơi để lưu trữ các dự án trang web của bạn. Bên trong địa điểm bạn đã chọn, tạo một thư mục mới có tên là web-projects (hoặc tương tự). Đây là nơi tất cả các dự án trang web của bạn sẽ sống
2. Trong thư mục đầu tiên này, hãy tạo một thư mục khác để lưu trữ trang web đầu tiên của bạn trong. Gọi nó là test-site (hoặc một cái gì đó giàu trí tưởng tượng hơn)

Một bên về vỏ bọc và khoảng cách

Bạn sẽ nhận thấy rằng trong suốt bài viết này, chúng tôi yêu cầu bạn đặt tên cho các thư mục và tệp hoàn toàn bằng chữ thường không có khoảng trắng. Điều này là do

1. Nhiều máy tính, đặc biệt là máy chủ web, phân biệt chữ hoa chữ thường. Vì vậy, ví dụ: nếu bạn đặt một hình ảnh trên trang web của mình tại test-site/MyImage.jpg và sau đó trong một tệp khác, bạn cố gọi hình ảnh đó là test-site/myimage.jpg, nó có thể không hoạt động
2. Trình duyệt, máy chủ web và ngôn ngữ lập trình không xử lý không gian một cách nhất quán. Ví dụ: nếu bạn sử dụng khoảng trắng trong tên tệp của mình, một số hệ thống có thể coi tên tệp là hai tên tệp. Một số máy chủ sẽ thay thế các khu vực trong tên tệp của bạn bằng "%20" (mã ký tự cho khoảng trắng trong URL), dẫn đến tất cả các liên kết của bạn bị hỏng. Tốt hơn là tách các từ bằng dấu gạch nối, thay vì dấu gạch dưới. my-file.html so với. my_file.html

Câu trả lời ngắn gọn là bạn nên sử dụng dấu gạch nối cho tên tệp của mình. Công cụ tìm kiếm của Google coi dấu gạch ngang là dấu tách từ nhưng không coi dấu gạch dưới theo cách đó. Vì những lý do này, tốt nhất bạn nên tập thói quen viết tên thư mục và tệp của mình bằng chữ thường, không có dấu cách và các từ được phân tách bằng dấu gạch nối, ít nhất là cho đến khi bạn biết mình đang làm gì. Bằng cách đó, bạn sẽ gặp ít vấn đề hơn sau này

Trang web của bạn nên có cấu trúc như thế nào?

Tiếp theo, hãy xem trang web thử nghiệm của chúng ta nên có cấu trúc như thế nào. Những thứ phổ biến nhất chúng tôi sẽ có trên bất kỳ dự án trang web nào chúng tôi tạo là tệp HTML chỉ mục và các thư mục để chứa hình ảnh, tệp kiểu và tệp tập lệnh. Hãy tạo những thứ này ngay bây giờ

1. index.html. Tệp này thường sẽ chứa nội dung trang chủ của bạn, nghĩa là văn bản và hình ảnh mà mọi người nhìn thấy khi họ truy cập trang web của bạn lần đầu tiên. Sử dụng trình soạn thảo văn bản của bạn, tạo một tệp mới có tên là index.html và lưu nó ngay bên trong thư mục test-site của bạn
2. thư mục web-projects0. Thư mục này sẽ chứa tất cả các hình ảnh mà bạn sử dụng trên trang web của mình. Tạo một thư mục có tên là web-projects0, bên trong thư mục test-site của bạn
3. Thư mục web-projects3. Thư mục này sẽ chứa mã CSS được sử dụng để tạo kiểu cho nội dung của bạn (ví dụ: đặt văn bản và màu nền). Tạo một thư mục có tên là web-projects3, bên trong thư mục test-site của bạn
4. Thư mục web-projects6. Thư mục này sẽ chứa tất cả mã JavaScript được sử dụng để thêm chức năng tương tác vào trang web của bạn (e. g. các nút tải dữ liệu khi được nhấp). Tạo một thư mục có tên là web-projects6, bên trong thư mục test-site của bạn

Ghi chú. Trên máy tính Windows, bạn có thể gặp khó khăn khi nhìn thấy tên tệp vì Windows có một tùy chọn có tên Ẩn tiện ích mở rộng cho các loại tệp đã biết được bật theo mặc định. Nói chung, bạn có thể tắt tính năng này bằng cách truy cập Windows Explorer, chọn tùy chọn Tùy chọn thư mục…, bỏ chọn hộp kiểm Ẩn tiện ích mở rộng cho các loại tệp đã biết, sau đó nhấp vào OK. Để biết thêm thông tin cụ thể về phiên bản Windows của bạn, bạn có thể tìm kiếm trên web

Đường dẫn tệp

Để làm cho các tệp giao tiếp với nhau, bạn phải cung cấp một đường dẫn tệp giữa chúng - về cơ bản là một tuyến đường, để một tệp biết vị trí của một tệp khác. Để chứng minh điều này, chúng tôi sẽ chèn một chút HTML vào tệp index.html của chúng tôi và làm cho nó hiển thị hình ảnh bạn đã chọn trong bài viết "Trang web của bạn sẽ trông như thế nào?"

1. Sao chép hình ảnh bạn đã chọn trước đó vào thư mục web-projects0 của bạn
2. Mở tệp index.html của bạn và chèn đoạn mã sau vào tệp chính xác như được hiển thị. Đừng lo lắng về ý nghĩa của nó lúc này — chúng ta sẽ xem xét các cấu trúc chi tiết hơn ở phần sau của loạt bài này

   DOCTYPE html>
   <html lang="en-US">
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width" />
       <title>My test pagetitle>
     head>
     <body>
       <img src="" alt="My test image" />
     body>
   html>
   

3. Dòng test-site2 là mã HTML chèn hình ảnh vào trang. Chúng ta cần cho HTML biết hình ảnh ở đâu. Hình ảnh nằm trong thư mục hình ảnh, cùng thư mục với index.html. Để đi xuống cấu trúc tệp từ index.html đến hình ảnh của chúng tôi, đường dẫn tệp chúng tôi cần là test-site5. Ví dụ: hình ảnh của chúng tôi được gọi là test-site6, vì vậy đường dẫn tệp là test-site7
4. Chèn đường dẫn tệp vào mã HTML của bạn giữa các dấu ngoặc kép của mã test-site8
5. Thay đổi nội dung của thuộc tính test-site9 thành mô tả về hình ảnh mà bạn đang đưa vào. Trong trường hợp này, test-site/MyImage.jpg0
6. Lưu tệp HTML của bạn, sau đó tải tệp đó trong trình duyệt web của bạn (bấm đúp vào tệp). Bạn sẽ thấy trang web mới hiển thị hình ảnh của mình

Một số quy tắc chung cho đường dẫn tệp

• Để liên kết đến một tệp đích trong cùng thư mục với tệp HTML đang gọi, chỉ cần sử dụng tên tệp, e. g. test-site/MyImage.jpg1
• Để tham chiếu một tệp trong thư mục con, hãy viết tên thư mục ở phía trước đường dẫn, cộng với dấu gạch chéo về phía trước, e. g. test-site/MyImage.jpg2
• Để liên kết đến một tệp đích trong thư mục phía trên tệp HTML đang gọi, hãy viết hai dấu chấm. Vì vậy, ví dụ: nếu index.html nằm trong thư mục con của test-site và test-site/MyImage.jpg1 nằm trong test-site, bạn có thể tham chiếu test-site/MyImage.jpg1 từ index.html bằng cách sử dụng test-site/MyImage.jpg9
• Bạn có thể kết hợp những thứ này bao nhiêu tùy thích, ví dụ như test-site/myimage.jpg0

Hiện tại, đây là tất cả những gì bạn cần biết

Ghi chú. Hệ thống tệp Windows có xu hướng sử dụng dấu gạch chéo ngược, không phải dấu gạch chéo lên, e. g. test-site/myimage.jpg1. Điều này không quan trọng trong HTML — ngay cả khi bạn đang phát triển trang web của mình trên Windows, bạn vẫn nên sử dụng dấu gạch chéo lên trong mã của mình

Tại sao mã HTML lập chỉ mục của tôi không hoạt động?

Tại sao trang HTML của tôi không tải?

Tại sao tệp HTML của tôi không mở được trong Chrome?

Tại sao trang HTML của tôi trống?