Làm thế nào để Thêm Hình ảnh vào trang Web dựa trên HTML5 và CSS3 của bạn

Mỗi khi bạn khám phá web, bạn sẽ phải chạy vào hàng tấn ảnh trên mỗi trang HTML5 và CSS3 mà bạn truy cập. Thông thường, hình ảnh được sử dụng theo bốn cách trên các trang web:

• Liên kết ngoài: Trang có văn bản với một liên kết nhúng vào nó. Khi người dùng nhấp vào liên kết, hình ảnh sẽ thay thế trang trong trình duyệt web. Để tạo một ảnh liên kết bên ngoài, chỉ cần thực hiện một liên kết thông thường, nhưng hướng về một tệp hình ảnh chứ không phải tệp HTML (HyperText Markup Language).

• Hình ảnh nhúng: Hình ảnh được nhúng vào trang. Văn bản của trang thường chảy xung quanh hình ảnh. Đây là loại hình phổ biến nhất được sử dụng trên web.

• Hình nền: Một hình ảnh có thể được sử dụng làm nền cho toàn bộ trang hoặc cho một phần cụ thể của trang. Hình ảnh thường đòi hỏi một số thao tác đặc biệt để làm cho chúng phù hợp với việc sử dụng nền.

• Custom bullets: Với CSS, bạn có thể chỉ định một hình ảnh nhỏ là một viên đạn cho một danh sách được sắp thứ tự hoặc không có thứ tự. Điều này cho phép bạn thực hiện bất kỳ loại dấu danh sách tùy chỉnh nào bạn có thể vẽ.

Làm thế nào để liên kết đến một hình ảnh

Cách dễ nhất để kết hợp hình ảnh là liên kết với chúng. Hãy xem externalImage. trang html.

Mã trang không nhiều hơn một liên kết đơn giản:

externalImage. html

Liên kết đến một ảnh bên ngoài
Susan B. Constant

href trỏ đến một tệp hình ảnh chứ không phải là một trang HTML. Bạn có thể trỏ đến bất kỳ loại tập tin nào bạn muốn trong một thẻ neo. Nếu trình duyệt biết loại tệp, trình duyệt sẽ hiển thị tệp. Nếu trình duyệt không biết định dạng tệp, máy tính của người dùng sẽ cố gắng hiển thị tệp bằng bất kỳ chương trình nào thường sử dụng để mở loại tệp đó.

Điều này làm việc tốt cho hầu hết các hình ảnh vì hình ảnh được hiển thị trực tiếp trong trình duyệt.

Bạn có thể sử dụng thủ thuật anchor này với bất kỳ loại tệp nào, nhưng kết quả có thể rất khó dự đoán. Nói chung, lưu thủ thuật này cho các định dạng phổ biến, như GIF và JPG.

Hầu hết các trình duyệt tự động thay đổi kích thước hình ảnh để phù hợp với kích thước trình duyệt. Điều này có nghĩa là một hình ảnh lớn có vẻ nhỏ hơn nó thực sự, nhưng người dùng vẫn phải đợi cho toàn bộ hình ảnh để tải về.

Bởi vì đây là một tham chiếu tương đối, hình ảnh được chỉ định phải nằm trong cùng một thư mục với tệp HTML. Khi người dùng nhấp vào liên kết, trang sẽ được thay thế bằng hình ảnh.

Liên kết ngoài rất dễ tạo, nhưng chúng có một số vấn đề:

• Họ không xem trước hình ảnh. Người dùng chỉ có mô tả văn bản để tìm ra những gì hình ảnh có thể được.

• Chúng làm gián đoạn dòng chảy. Nếu trang chứa một loạt các hình ảnh, người dùng phải rời khỏi trang để xem hình ảnh.

• Người dùng phải sao lưu để trở lại trang chính. Hình ảnh trông giống như một trang web, nhưng nó không phải là. Không có liên kết hoặc văn bản giải thích nào trong hình ảnh cho biết cách truy cập trang web. Hầu hết người dùng biết nhấp vào nút Quay lại của trình duyệt nhưng không cho rằng tất cả người dùng đều biết phải làm gì.

Làm thế nào để thêm hình ảnh nội tuyến bằng cách sử dụng thẻ

Thay thế cho việc cung cấp liên kết đến hình ảnh là nhúng hình ảnh của bạn vào trang.

Mã cho thấy hình ảnh này được bao gồm trong trang như thế nào:

embeddedImage.

Susan B. Constant

Susan B. Constant là hạm đội của ba tàu nhỏ đưa người định cư đến Jamestown, thuộc địa Anh đầu tiên thành công ở thế giới mới. Đây là một bản sao nằm gần Jamestown, Virginia.

Thẻ hình ảnh là ngôi sao của trang này. Thẻ này cho phép bạn lấy một tệp hình ảnh và kết hợp trực tiếp nó vào trang. Thẻ ảnh là một thẻ một lần. Nó không kết thúc với. Thay vào đó, hãy sử dụng các ký tự ở cuối định nghĩa để cho biết rằng thẻ này không có nội dung.

Bạn có thể nhận thấy rằng Susan B. Hằng được in nghiêng trong trang sử dụng thẻ để có được hiệu ứng này. nhấn mạnh nhấn mạnh, và có nghĩa là nhấn mạnh. Theo mặc định, bất kỳ văn bản nào trong một cặp được in nghiêng, và văn bản được in đậm. Bạn có thể thay đổi hành vi này bằng CSS.

src (source)

Thuộc tính src cho phép bạn chỉ ra URL của hình ảnh. Đây có thể là một tài liệu tham khảo tuyệt đối hoặc tương đối. Liên kết đến một hình ảnh trong cấu trúc thư mục của bạn nói chung là tốt nhất bởi vì bạn không thể chắc chắn một hình ảnh bên ngoài sẽ vẫn ở đó khi người dùng truy cập vào trang.

chiều cao và chiều rộng

Chiều cao và chiều rộng thuộc tính được sử dụng để chỉ kích thước của hình ảnh. Trình duyệt sử dụng thông tin này để cho biết có bao nhiêu chỗ để dự trữ trên trang.

Thuộc tính chiều cao và chiều rộng nên mô tả kích thước của một hình ảnh. Bạn có thể sử dụng các thuộc tính này để thực sự thay đổi kích thước của một hình ảnh, nhưng đó là một ý tưởng tồi. Thay đổi kích thước hình ảnh bằng trình chỉnh sửa hình ảnh của bạn. Nếu bạn sử dụng các thuộc tính này, người dùng phải chờ cho hình ảnh đầy đủ, ngay cả khi cô ấy sẽ thấy một phiên bản nhỏ hơn. Không làm cho người dùng chờ thông tin mà cô ấy sẽ không nhìn thấy.

alt (văn bản thay thế)

Thuộc tính alt cho phép bạn xác định văn bản thay thế mô tả hình ảnh. Thông tin văn bản thay thế được sử dụng khi người dùng đã tắt hình ảnh và người đọc màn hình. Thông tin trong thẻ alt cũng được sử dụng trong phần mềm tìm kiếm hình ảnh như Google Images.

Thuộc tính alt được yêu cầu trên tất cả các hình ảnh.

Ngoài ra, thẻ là một thẻ nội tuyến, vì vậy nó cần phải được nhúng vào bên trong một thẻ cấp độ chặn.