Đưa File Html Lên Web

      38

Trong bài này, mình sẽ hướng dẫn bạn cách đưa một trang web đơn giản lên host miễn phí. Ở đây, mình dùng một host được cung cấp bởi: https://www.000webhost.com/. Host này cung cấp các tính năng cơ bản. Nào, hãy cùng bắt đầu.

Bạn đang xem: đưa file html lên web

Kiến thức liên quan

Để hoàn thành được bài hướng dẫn này, bạn cần có những kiến thức sau:

Hiểu về hoạt động của một trang web đơn giản gồm các file html, css, javascript

Chuẩn bị

Để đưa web của bạn lên internet, trước tiên, bạn cần chuẩn bị toàn bộ các file html, css, js ở máy cá nhân. Để giảm thiểu những rủi ro gây ra lỗi khi chạy trên internet, bạn nên kiểm tra kĩ web của mình ở máy tính cá nhân trước nhé.

Thêm một chú ý nhỏ, trong các file html của bạn, bạn chọn ra một file làm trang chủ, và đặt tên nó là index.html. 

Đây là project của mình đã chuẩn bị trên máy:

*

Đăng kí tài khoản 

Bước 1: Bạn truy cập đường dẫn sau: https://www.000webhost.com/

Bước 2: Đăng kí tài khoản (nếu đã có tài khoản, bạn có thể bỏ qua mục này).

Bạn click vào nút FREE SIGN UP để đăng kí tài khoản. 000webhost cho phép dùng email để đăng kí, hoặc sử dụng các tài khoản mạng xã hội. 

*

Sau khi đăng kí, bạn sẽ nhận được email thông báo về tài khoản đã tạo.

Bước 3: Đăng nhập tài khoản, bạn sẽ được dẫn đến trang quản lí https://www.000webhost.com/members/website/list

Tạo web site 

Bước 4: Để tạo web site, bạn click vào nút: Create new Site

Bạn điền đường dẫn cho web site. Bạn có thể sử dụng mật khẩu do hệ thống tự sinh ra hoặc đặt mật khẩu riêng cho dễ nhớ. Bạn sẽ cần dùng mật khẩu này cho những lần đăng nhập sau để quản lí site của bạn. 

*

Bước 5: Quản lí site, bạn trở lại trang quản lí: https://www.000webhost.com/members/website/list

Ở đây, sẽ liệt kê các site mà bạn đã tạo ra. Với tài khoản miễn phí, bạn tạo được tối đa 2 site. 

Bạn chọn site cần quản lí và click vào Manage Website ở giữa hình

*

Bước 6: Tiến hành tải các file lên host

Bạn sử dụng công cụ Upload để đưa toàn bộ các file trong project lên folder có tên là public_html.

Xem thêm: Cách Sửa Máy In Ở Chế Độ Offline Nguyên Nhân Do Đâu? Xử Lý Như Thế Nào?

Cần chú ý là: project có cấu trúc thư mục như thế nào, thì bạn giữ nguyên cấu trúc đó khi đưa lên public_html

*

Bước 7: Kiểm tra lại web đã hoạt động

Bạn nào đường dẫn web mà bạn đã tạo ra. Ví dụ như của mình là https://thietkewebhcm.com.vn.000webhostapp.com/. Các web chỉ khác nhau ở đoạn đầu thôi, còn đoạn sau 000webhostapp.com thì giống nhau. Bạn không thể thay đổi được đoạn này.

OK, nếu web của bạn đã hiển thị, chúc mừng bạn đã đưa thành công web lên internet.

Bạn có thể khoe nó với bạn bè !!!

Một số lỗi thường gặp:

1. Khi bạn vào web ở bước 7 thì không thấy web hiện lên, bạn nhận được thông báo "404 Page Not Found"

*

Nguyên nhân: bạn không có file index.html trong thư mục public_html. Để web hoạt động được, web cần 1 file được gọi là default document (trang mặc định). Trong trường hợp bạn vào web mà không chỉ định rõ bạn muốn truy cập vào file html nào, thì file mặc định sẽ được gọi đến. Cụ thể ở đây, web sẽ sử dụng file có tên là index.html

Cách sửa: bạn chọn file làm trang chủ cho web, và đổi tên nó thành index.html. Nhớ là đổi tên file ở folder public_html nhé. Sau khi đổi xong, bạn hãy thử lại web

2. Một số ảnh không được tải lên đúng như mong muốn

Nguyên nhân 1: khi upload lên folder public_html, bạn đã không giữ đúng cấu trúc thư mục như đang để ở máy cá nhân

Cách sửa 1: hãy kiểm tra lại cấu trúc thư mục ở folder public_html và chắc chắn là nó giống cấu trúc ở máy bạn

Nguyên nhân 2: bạn đang để đường dẫn tuyệt đối. Ví dụ: bạn sử dụng 1 ảnh nào đó trong máy và để đường dẫn tuyệt đối C://Project1/images/flower.jpg. Đường dẫn này sẽ không còn đúng khi bạn chuyển project lên folder public_html.

Cách sửa 2: bạn cần chuyển sang sử dụng đường dẫn tương đối

Để tìm hiểu thêm về cách đặt đường dẫn cho file trong html, các bạn có thể tham khảo ở w3school HTML File Paths

3. Css hoặc javascript không hoạt động.

Cả hai trường hợp này tương tự như trường hợp ảnh bị sai ở trên. Bạn kiểm tra lại đường dẫn cho chính xác.