Nhìn vào bất kỳ trang web trực tuyến ngày hôm nay và bạn sẽ nhận thấy rằng họ chia sẻ một số điểm chung. Một trong những đặc điểm được chia sẻ đó là hình ảnh. Các hình ảnh phù hợp thêm rất nhiều vào một bài thuyết trình của trang web. Một số hình ảnh đó, như biểu trưng của công ty, giúp xây dựng thương hiệu trang web và kết nối thực thể kỹ thuật số đó với công ty thực của bạn.
Để thêm hình ảnh, biểu tượng hoặc đồ họa vào trang web của bạn, bạn cần phải sử dụng thẻ trong mã HTML của trang. Bạn đặt thẻ IMG trong HTML của bạn chính xác nơi bạn muốn đồ họa hiển thị. Trình duyệt web hiển thị mã của trang sẽ thay thế thẻ này bằng đồ họa thích hợp khi trang được xem. Quay lại ví dụ về biểu tượng công ty của chúng tôi, dưới đây là cách bạn có thể thêm hình ảnh đó vào trang web của mình:
Thuộc tính hình ảnh
Nhìn vào mã HTML ở trên, bạn sẽ thấy rằng phần tử bao gồm hai thuộc tính. Mỗi người trong số họ là cần thiết cho hình ảnh.
Thuộc tính đầu tiên là "src". Đây hoàn toàn là tệp hình ảnh mà bạn muốn hiển thị trên trang. Trong ví dụ của chúng tôi, chúng tôi sử dụng tệp có tên "logo.png". Đây là đồ họa mà trình duyệt web sẽ hiển thị khi nó hiển thị trang web.
Bạn cũng sẽ nhận thấy rằng trước tên tệp này, chúng tôi đã thêm một số thông tin bổ sung, "/ images /". Đây là đường dẫn tệp. Dấu gạch chéo về phía trước ban đầu cho máy chủ xem xét thư mục gốc của thư mục. Sau đó, nó sẽ tìm một thư mục có tên là "hình ảnh" và cuối cùng là tệp "logo.png". Sử dụng thư mục có tên là "hình ảnh" để lưu trữ tất cả đồ họa của trang web là một thực tế khá phổ biến, nhưng đường dẫn tệp của bạn sẽ bị thay đổi thành bất kỳ điều gì có liên quan đến trang web của bạn.
Thuộc tính bắt buộc thứ hai là văn bản "alt". Đây là "văn bản thay thế" được hiển thị nếu hình ảnh không tải được vì một lý do nào đó. Văn bản này, trong ví dụ của chúng tôi, đọc "Biểu trưng công ty" sẽ được hiển thị nếu hình ảnh không tải được. Tại sao điều đó lại xảy ra? Một loạt các lý do:
- Đường dẫn tệp không chính xác
- Tên tệp sai chính tả hoặc lỗi chính tả
- Lỗi truyền
- Tệp đã bị xóa khỏi máy chủ
Đây chỉ là một vài khả năng cho lý do tại sao hình ảnh được chỉ định của chúng tôi có thể bị thiếu. Trong những trường hợp này, văn bản thay thế của chúng tôi sẽ hiển thị thay thế.
Văn bản thay thế cũng được phần mềm trình đọc màn hình sử dụng để "đọc" hình ảnh cho khách truy cập bị khiếm thị. Vì họ không thể nhìn thấy hình ảnh giống như chúng tôi, văn bản này cho phép họ biết chính hình ảnh đó là gì. Đây là lý do tại sao alt văn bản là cần thiết và lý do tại sao nó nên nêu rõ hình ảnh là gì!
Một sự hiểu lầm phổ biến của alt văn bản là nó có nghĩa là cho mục đích công cụ tìm kiếm. Đây không phải là sự thật. Mặc dù Google và các công cụ tìm kiếm khác đọc văn bản này để xác định hình ảnh là gì (hãy nhớ rằng, họ cũng không thể "xem" hình ảnh của bạn), bạn không nên viết văn bản thay thế để chỉ thu hút công cụ tìm kiếm. Tác giả rõ ràng văn bản thay thế có nghĩa là cho con người. Nếu bạn cũng có thể thêm một số từ khóa vào thẻ hấp dẫn công cụ tìm kiếm, điều đó là tốt, nhưng luôn đảm bảo văn bản thay thế là mục đích chính bằng cách nêu rõ hình ảnh dành cho bất kỳ ai không thể xem tệp đồ họa.
Các thuộc tính khác
Thẻ IMG cũng có hai thuộc tính khác mà bạn có thể thấy khi sử dụng khi bạn đặt một hình ảnh trên trang web của mình - chiều rộng và chiều cao. Ví dụ, nếu bạn sử dụng một trình soạn thảo WYSIWYG như Dreamweaver, nó sẽ tự động thêm thông tin này cho bạn. Đây là một ví dụ:
Các thuộc tính WIDTH và HEIGHT cho trình duyệt biết kích thước của hình ảnh. Trình duyệt sau đó biết chính xác khoảng trống trong bố cục để phân bổ và nó có thể chuyển sang phần tử tiếp theo trên trang trong khi tải xuống hình ảnh. Vấn đề với việc sử dụng thông tin này trong HTML của bạn là bạn có thể không muốn hình ảnh của mình hiển thị ở kích thước chính xác đó. Ví dụ: nếu bạn có trang web đáp ứng có thay đổi kích thước dựa trên màn hình của khách truy cập và kích thước thiết bị, bạn cũng sẽ muốn hình ảnh của mình linh hoạt. Nếu bạn nêu trong HTML của bạn kích thước cố định là gì, bạn sẽ thấy rất khó ghi đè với các truy vấn phương tiện CSS đáp ứng. Vì lý do này, và để duy trì sự tách biệt về kiểu dáng (CSS) và cấu trúc (HTML), chúng tôi khuyên bạn KHÔNG nên thêm các thuộc tính chiều rộng và chiều cao vào mã HTML của mình.
Một lưu ý: Nếu bạn để nguyên các hướng dẫn định cỡ này và không chỉ định kích thước trong CSS, trình duyệt sẽ hiển thị hình ảnh ở kích thước gốc mặc định của nó.
Biên tập bởi Jeremy Girard