Nguyên tắc cơ bản HTML - Hiển thị hình ảnh

• Có Thể 16, 2024

Khi bạn đã đăng văn bản trang web của mình và được định dạng theo ý thích của mình, đây là lúc để thêm gia vị cho trang bằng một vài hình ảnh. Hình ảnh không chỉ có thể thêm màu sắc và cuộc sống vào các trang của bạn, bạn cũng có thể sử dụng chúng để tạo hiệu ứng văn bản khó thực hiện hoặc không thể thực hiện với văn bản và định dạng thông thường. Ví dụ: các lựa chọn phông chữ của bạn thường sẽ bị giới hạn ở số lượng nhỏ các phông chữ mà bạn có thể chắc chắn được cài đặt trên máy tính của khách truy cập, vì nếu chúng không được cài đặt phông chữ, chúng không thể nhìn thấy nó trên trang web của bạn! Bất cứ khi nào bạn đăng văn bản ở một phông chữ không có sẵn, máy tính của khách truy cập sẽ hiển thị nó ở bất kỳ phông chữ có sẵn nào theo phong cách gần nhất, thường có thể phá hỏng thiết kế trang web của bạn.

Mặt khác, nếu bạn sử dụng chương trình chỉnh sửa hình ảnh để chụp văn bản bằng phông chữ ưa thích và đăng nó dưới dạng GIF hoặc JPEG trên trang web của bạn, bất kỳ khách truy cập nào cũng sẽ thấy nó chính xác như bạn dự định - vì giờ đây nó là hình ảnh của văn bản chứ không phải văn bản chính nó. Điều này có thể giải phóng bạn để sử dụng phông chữ huyền ảo trong các tiêu đề của bạn và nhóm chúng theo những cách khác thường.

Thẻ cơ bản được sử dụng để hiển thị hình ảnh như sau:



Đoạn mã trên sẽ hoạt động hoàn hảo trong HTML. Nếu bạn đang sử dụng XHTML hoặc muốn chắc chắn rằng trang web của bạn đã sẵn sàng XHTML, bạn nên thêm dấu gạch chéo để đóng thẻ, vì trong XHTML, bạn không thể sử dụng thẻ kết thúc mở:



'Src' là viết tắt của nguồn và bạn sẽ sử dụng nó để chỉ định đường dẫn tệp đến hình ảnh của mình - nói cách khác, để cho trình duyệt biết nơi có thể tìm thấy hình ảnh trên trang web của bạn. Nếu bạn giữ hình ảnh của mình trong cùng thư mục với các trang web của mình, bạn không cần liệt kê thư mục trong văn bản 'src' - bạn chỉ cần nhập tên tệp hình ảnh.

Khi bạn đã chỉ định nguồn hình ảnh của mình, bạn có thể nâng cao khung cơ bản này bằng nhiều thuộc tính tùy chọn khác nhau để tận dụng tối đa hình ảnh của mình. Một thuộc tính bạn gần như luôn luôn sử dụng là thuộc tính 'alt'. Điều này cho phép bạn chỉ định văn bản nào trình duyệt sẽ hiển thị nếu không thể hiển thị hình ảnh của bạn vì một số lý do. Văn bản 'alt' được chuẩn bị như sau:



Một bộ thuộc tính hữu ích khác là thẻ 'width' và 'height'. Điều này cho phép bạn hiển thị hình ảnh ở một kích thước khác với kích thước hình ảnh thực tế. Bạn có thể sử dụng chúng để điều chỉnh hình ảnh của mình sao cho phù hợp hoàn hảo với thiết kế trang tổng thể của bạn. Tuy nhiên, thông thường nên thay đổi kích thước hình ảnh thực tế bằng các chương trình chỉnh sửa hình ảnh và sau đó đăng hình ảnh lên mạng, vì hai lý do. Đầu tiên, phần mềm chỉnh sửa hình ảnh hầu như sẽ luôn mang lại cho bạn kết quả tốt hơn là điều chỉnh kích thước bằng tay. Thứ hai, thay đổi thẻ 'chiều rộng' và 'chiều cao' không thay đổi kích thước tệp của hình ảnh thực tế, vì vậy nếu bạn có một hình ảnh khổng lồ mà bạn hiển thị dưới dạng hình thu nhỏ, hình ảnh sẽ mất nhiều thời gian để tải và sẽ nhai như nhiều băng thông như thể bạn đã hiển thị nó ở kích thước đầy đủ.

Khi chỉ định kích thước của hình ảnh, bạn có thể liệt kê chiều cao, chiều rộng hoặc cả hai. Kích thước được chỉ định bởi pixel như bạn có thể thấy bên dưới:



Bạn cũng có thể 'căn chỉnh' hình ảnh của mình để xử lý chúng một cách trơn tru với dòng văn bản của bạn. Nếu bạn chọn căn lề trái, văn bản sẽ bắt đầu bên phải hình ảnh. Nếu bạn chọn căn chỉnh bên phải, hình ảnh sẽ hiển thị ở bên phải của trang và văn bản của bạn sẽ xuất hiện ở bên trái của hình ảnh và sau đó chuyển sang một dòng mới.

Căn chỉnh hình ảnh được thiết lập như sau:



Bạn cũng có thể đặt căn chỉnh thành "trên cùng", "dưới cùng" hoặc "giữa" để làm cho hình ảnh thẳng hàng với đầu hoặc cuối của dòng văn bản. Nếu bạn không chỉ định căn chỉnh, hình ảnh sẽ mặc định là "dưới cùng".

Là một ghi chú bên cạnh, bạn có thể bao gồm các thuộc tính hình ảnh của bạn (src, align, alt, v.v.) theo bất kỳ thứ tự nào trong các thẻ hình ảnh. Sở thích cá nhân của tôi là liệt kê thuộc tính 'src' trước tiên, vì đó là thuộc tính cơ bản nhất và phải được bao gồm trong mọi thẻ hình ảnh, nhưng bạn có thể sử dụng bất kỳ chuỗi nào cảm thấy tự nhiên nhất đối với bạn.

Video HướNg DẫN: Cách kiểm tra lỗi hiển thị website liên quan tới HTML và CSS cho người mới học (Có Thể 2024).