Các Lỗi Hiển Thị Thường Gặp

Khi thiết kế trang web chúng ta có thể gặp phải một số lỗi nhỏ khiến trang hiển thị không đúng hoặc có phần tử không hiển thị, những điều này thường gây ra do các nguyên nhân như do đánh máy, do sơ xuất như quyên, nhớ nhầm, thiếu cẩn thận, một vài trường hợp lỗi xẩy ra là do ít kiến thức, ít kinh nghiệm, và để khắc phục những vấn đề này ngoài việc người thiết kế cần được trang bị kiến thức vững vàng, cẩn thận trong công việc thì họ cần có hiểu biết về nhận biết lỗi, cách khắc phục lỗi. Để nâng cao họ dưới đây chúng tôi chia sẻ 6 lỗi hiển thị thường gặp khi thiết kế trang web và cách khắc phục.

Lỗi mất ảnh

1. Lỗi khai báo loại tài liệu

Khai báo DOCTYPE để trình duyệt biết được loại mã HTML mà trang web sử dụng, việc khai báo DOCTYPE không đúng thường sẽ dẫn đến tình trạng hiển thị không thống nhất và/hoặc hiển thị lỗi.

Dưới đây là các cách khai báo DOCTYPE đúng cho trang web:

+ HTML 5

<!DOCTYPE html>

+ HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

+ HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

+ HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

2. Lỗi vỡ giao diện

Các lỗi vỡ giao diện thường xẩy ra khi trang web không nhận được tệp định kiểu .css, cách khắc phục:

- Kiểm tra tệp định kiểu .css cho trang web xem đã đúng chưa.
- Làm sạch trình duyệt hiển thị trang web.

3. Lỗi mất ảnh hay không hiển thị ảnh

Trong một số trường hợp trang web không hiển thị ảnh, điều này thường do một số nguyên nhân chính sau:

- Trang web không chỉ tới vị trí chính xác URL của hình ảnh.
- Vị trí hoặc máy tính lưu trữ hình ảnh đã di chuyển hoặc xóa hình ảnh và trang web chưa được cập nhật.
- Do máy tính lưu trữ hình ảnh đang nhận được quá nhiều yêu cầu và tạm thời nó không thể đáp ứng.
- Phần mềm bảo vệ của bạn đang chặn hình ảnh.

Hướng khắc phục:

- Khai báo ALT cho hình ảnh.
- Kiểm tra nguồn ảnh.
- Kiểm tra các tính năng chặn ảnh của trình duyệt.

4. Lỗi hiển thị không đúng

Các lỗi hiển thị không đúng thường xẩy ra khi viết không đúng định dạng html, ví dụ như:

- Không sử dụng dấu ngoặc kép cho giá trị của thuộc tính

Sai:
<img src=hinh_anh.jpg />

Đúng:
<img src=”hinh_anh.jpg”/>

- Thiếu thẻ đóng

Các thẻ html thường là có thẻ mở và thẻ đóng (ví dụ như <span>nội dòng</span>), khi viết mã nếu thiếu thẻ đóng thì trình duyệt sẽ hiển thị sai kết quả.

- Đóng sai thứ tự theo các thẻ đã mở

Sai:
<div><p><a href=”#”>Xem chi tiết</p></a></div>

Đúng:
<div><p><a href=”#”>Xem chi tiết</a></p></div>

5. Lỗi không đáp ứng thiết bị

Khi thiết kế website đáp ứng nhưng trang web không đáp ứng trên các thiết bị điều này thường là do không khai báo thẻ meta viewport trong phần <head> của trang. Mọi website đáp ứng cần có thẻ meta viewport trong cặp thẻ <head> như sau:

<meta name="viewport" content="width=device-width, initial-scale=1" />
  • Thẻ <meta> viewport thiết lập cho trang web hiển thị tương ứng với kích thước của từng thiết bị khác nhau.
  • Thuộc tính width=device-width đặt chiều rộng của trang web theo chiều rộng màn hình của thiết bị.
  • Thuộc tính initial-scale=1.0 thiết lập mức độ phóng ban đầu khi trang web được trình duyệt tải lần đầu tiên, người dùng sẽ không thể zoom khi thuộc tính này có giá trị bằng 1.

6. Lỗi các phần tử quá nhỏ hoặc quá gần

Khi hiển thị trên thiết bị di động trang web có thể gặp phải các lỗi như kích thước phông chữ quá nhỏ, các phần tử cảm ứng quá gần.

- Kích thước phông chữ quá nhỏ

Khắc phục bằng cách sử dụng các kích thước phông chữ thích hợp cho các kích cỡ màn hình hiển thị, đảm bảo website có các phông chữ đủ lớn để đọc được và không cần phải phóng to để đọc.

- Các phần tử cảm ứng quá gần

Ví dụ như nút và liên kết điều hướng.

Khắc phục bằng cách đảm bảo định kích thước phù hợp và giãn cách các nút và liên kết điều hướng sao cho phù hợp khi truy cập trên thiết bị di động.