Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML
Webdesign

Chỉ dẫn nhanh: Hãy nhớ định phong cách cho thuộc tính ALT của bạn

by
Length:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Consider Wrapping Your Code With a “figure” Element
Quick Tip: Set Relative URLs With the “base” Tag

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Thuộc tính alt bên trong một thẻ <img> cung cấp nội dung thay thế cho những người dùng không thể nạp hình ảnh, hoặc những người dùng đã vô hiệu hoá toàn bộ việc hiển thị hình ảnh. Chúng ta hay sử dụng thuộc tính này để làm cho nội dung của chúng ta dễ truy xuất hơn, nhưng bạn đã bao giờ cân nhắc xem nó thật sự trông như thế nào không?

Chúng ta sẽ sử dụng mẫu email mà chúng ta xây dựng trong một bài trước đó như là một ví dụ, nhưng các nguyên tắc cũng áp dụng cho thiết kế dựa trên trình duyệt web.

Nếu chúng ta mở tập tin trong trình duyệt với việc hiển thị hình ảnh đã bị vô hiệu hoá, thì nó sẽ trông như thế này:

altTagsBefore

Rõ ràng văn bản ALT không có gì hấp dẫn—đặc biệt là các liên kết. Chúng ta có thể làm một vài điều để làm cho nó trông đẹp hơn.

Đối với tiêu đề chính, chúng ta sẽ làm cho văn bản hơi lớn hơn và thay đổi nó thành màu xanh đậm thay vì màu đen. Chúng ta làm điều này bằng cách thêm phong cách vào phần tử cha (trong trường hợp này là một cell). Các phong cách sau đó sẽ được áp dụng cho các thẻ alt bên trong cell đó.

Đây là cell của chúng ta:

Chúng ta sẽ thêm một chuỗi phong cách vì thế nó trông như thế này:

Và chúng ta sẽ định phong cách cho các liên kết mạng xã hội của chúng ta, để chúng trở thành màu trắng:

altTagsAfter

Thật đơn giản! Bây giờ chúng ta có thể tự tin là email của chúng ta sẽ hiển thị tốt, ngay cả với việc hiển thị hình ảnh đã bị vô hiệu hoá.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.