Chèn ảnh bằng HTML - cách thức hoạt động
Nếu bạn muốn chèn một hình ảnh trên trang web của mình bằng HTML, hãy sử dụng thẻ img. Đọc ở đây làm thế nào chính xác điều này hoạt động và những gì bạn phải coi chừng.
Cách chèn hình ảnh bằng HTML - những điều cơ bản
- Với ngày
Có thể chèn hình ảnh. - Nguồn hình ảnh được đưa ra trong thẻ:
chèn tệp "testbild.webp" từ "ảnh" thư mục con trên trang web. - Nguồn bên ngoài thông qua URL cũng có thể:
tích hợp logo CHIP từ các máy chủ của chúng tôi.
Thuộc tính HTML cho hình ảnh nhúng
Nhiều thuộc tính có thể được thêm vào trong thẻ img:
- Sử dụng "chiều rộng" và "chiều cao" để xác định kích thước của hình ảnh trên trang web: Hình ảnh
được hiển thị hình vuông với chiều dài cạnh 100 pixel. - Với "alt", bạn xác định một văn bản thay thế được hiển thị nếu hình ảnh tương ứng không thể được tải. Bạn phải luôn đặt thuộc tính này khi chèn hình ảnh bằng HTML.
- Thuộc tính "viền" chỉ định độ dày của khung tính bằng pixel. Một bức tranh với
có một khung tương đối dày với năm pixel. - Sử dụng "căn chỉnh" để căn chỉnh đồ họa. Các giá trị cho thuộc tính này là "dưới cùng", "trên cùng", "giữa", "trái", "phải" và "giữa".
- Với "hspace" và "vspace", bạn có thể (theo chiều ngang và chiều dọc) đặt khoảng cách cho hình ảnh.
Tôi nên sử dụng định dạng nào?
Có nhiều định dạng hình ảnh khác nhau mà bạn có thể đưa vào mã HTML.
- JPG: hình ảnh định dạng JPG được sử dụng phổ biến nhất cho các trang web. Định dạng này đại diện cho 16, 7 triệu màu. Ngoài ra, JPG có thể được nén rất tốt. Do đó, tệp hình ảnh có thể được thực hiện rất nhỏ, cho phép thời gian tải nhanh.
- PNG: Định dạng PNG cũng có thể hiển thị 16, 7 triệu màu và có thể được nén. Ưu điểm so với định dạng JPG là có thể nén mà không bị mất.
- Các khu vực được xác định ở định dạng PNG cũng có thể được hiển thị trong suốt. Tuy nhiên, các trình duyệt rất cũ có vấn đề hiển thị trong suốt.
- GIF: Nếu bạn muốn chèn hình ảnh chuyển động bằng HTML, định dạng GIF là phù hợp. Chỉ 256 màu được hiển thị ở định dạng này và quá trình nén diễn ra tự động mà không có bất kỳ tùy chọn cài đặt nào.
- Định dạng GIF phù hợp nhất cho đồ họa hoặc logo hoạt hình nhỏ. Để đảm bảo các logo phù hợp hài hòa với một trang, có thể sử dụng độ trong suốt ở định dạng GIF như PNG.
Ví dụ HTML
- Điều này tích hợp logo CHIP từ trang web của chúng tôi.
- Nó được hiển thị với chiều cao 100 pixel và chiều rộng 200 pixel.
- Nếu không thể tải được, "CHIP-Logo" được hiển thị dưới dạng văn bản trống.
- Hình ảnh được đóng khung bởi khung hình hai pixel.
- Nó được căn phải và cách nhau 50 pixel so với các yếu tố phụ khác.