Hình ảnh có thể cải thiện thiết kế và sự xuất hiện của một trang web.
Đây là những bài mình đem về từ W3C rất chất nhé các bạn! Vì lý do phù hợp với dự án nên mình chia sẻ bài viết... Vì vậy, sẽ có một số quảng cáo được đặt ở những nút Demo các bạn thông cảm click mấy giây nhé... Cảm ơn ạ!..
Thí dụ
<img src="img_chania.jpg" alt="Flowers in Chania">
Cú pháp hình ảnh HTML
Trong HTML, hình ảnh được định nghĩa bằng thẻ <img> .
Thẻ <img> trống, chỉ chứa các thuộc tính, và không có thẻ đóng.
Thuộc tính src xác định URL (địa chỉ web) của hình ảnh:
<img src="url">
Thuộc tính alt
Thuộc tính alt cung cấp một văn bản thay thế cho hình ảnh, nếu người dùng vì một lý do nào đó không thể xem nó (do kết nối chậm, lỗi trong thuộc tính src hoặc nếu người dùng sử dụng trình đọc màn hình).
Giá trị của thuộc tính alt phải mô tả hình ảnh:
Thí dụ
<img src="img_chania.jpg" alt="Flowers in Chania">
Nếu một trình duyệt không thể tìm thấy một hình ảnh, nó sẽ hiển thị giá trị của thuộc tính alt:
Thí dụ
<img src="wrongname.gif" alt="Flowers in Chania">
Lưu ý: thuộc tính alt được yêu cầu. Một trang web sẽ không xác nhận hợp lệ mà không có nó.
Kích thước Hình - Chiều rộng và Chiều cao
Bạn có thể sử dụng thuộc tính style để xác định chiều rộng và chiều cao của một hình ảnh.
Thí dụ
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Ngoài ra, bạn có thể sử dụng các thuộc tính chiều rộng và chiều cao :
Thí dụ
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Thuộc tính chiều rộng và chiều cao luôn xác định độ rộng và chiều cao của hình ảnh theo pixel.
Lưu ý: Luôn xác định độ rộng và chiều cao của hình ảnh. Nếu chiều rộng và chiều cao không được chỉ định, trang có thể nhấp nháy trong khi tải hình ảnh.
Chiều rộng và Chiều cao, hoặc Kiểu dáng?
Cả hai thuộc tính chiều rộng, chiều cao và kiểu đều có giá trị trong HTML5.
Tuy nhiên, chúng tôi khuyên bạn nên sử dụng thuộc tính style. Nó ngăn cản các tờ kiểu dáng thay đổi kích thước của hình ảnh:
Thí dụ
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%; }</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Hình ảnh trong Thư mục Khác
Nếu không được chỉ định, trình duyệt sẽ tìm kiếm hình ảnh trong cùng một thư mục với trang web.
Tuy nhiên, nó là phổ biến để lưu trữ hình ảnh trong một thư mục con. Bạn phải bao gồm tên thư mục trong thuộc tính src:
Thí dụ
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Hình ảnh trên một máy chủ khác
Một số trang web lưu trữ hình ảnh của họ trên máy chủ hình ảnh.
Trên thực tế, bạn có thể truy cập hình ảnh từ bất kỳ địa chỉ web nào trên thế giới:
Thí dụ
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Hình động
HTML cho phép GIF động:
Thí dụ
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Hình ảnh dưới dạng liên kết
Để sử dụng hình ảnh dưới dạng liên kết, đặt thẻ <img> bên trong thẻ <a>:
Thí dụ
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Ghi chú: biên giới: 0; được thêm vào để ngăn IE9 (và trước đó) hiển thị một đường viền xung quanh hình ảnh (khi hình ảnh là một liên kết).
Hình Nổi
Sử dụng thuộc tính thả nổi CSS để cho hình ảnh trôi nổi ở bên phải hoặc bên trái của văn bản:
Thí dụ
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Bản đồ Hình ảnh
Sử dụng thẻ <map> để xác định bản đồ hình ảnh. Bản đồ hình ảnh là một hình ảnh với các khu vực có thể nhấp.
Trong hình ảnh dưới đây, nhấp vào máy tính, điện thoại hoặc tách cà phê:
Thí dụ
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
Thuộc tính name của thẻ <map> được liên kết với thuộc tính usemap của <img> và tạo ra một mối quan hệ giữa hình ảnh và bản đồ.
Thẻ <map> chứa một số thẻ <area>, xác định các khu vực có thể nhấp vào trong bản đồ hình ảnh.
Hình nền
Để thêm hình nền vào một phần tử HTML, sử dụng thuộc tính CSS
background-image:Thí dụ
Để thêm hình nền vào một trang web, chỉ định thuộc tính ảnh nền trên phần BODY:
<body style="background-image:url('clouds.jpg')">
<h2>Background Image</h2>
</body>
Thí dụ
Để thêm một hình nền trên một đoạn, chỉ định thuộc tính hình ảnh nền trên phần tử P:
<body>
<p style="background-image:url('clouds.jpg')">
...
</p>
</body>
Để tìm hiểu thêm về hình nền, hãy nghiên cứu Hướng dẫn về nền CSS của chúng tôi .
Phần tử <hình ảnh>
HTML5 đã giới thiệu phần tử <hình ảnh> để thêm tính linh hoạt hơn khi chỉ định các tài nguyên hình ảnh.
Phần tử <hình ảnh> chứa một số phần tử <source>, mỗi tham chiếu đến các nguồn hình ảnh khác nhau. Bằng cách này trình duyệt có thể chọn hình ảnh phù hợp nhất với chế độ xem và / hoặc thiết bị hiện tại.
Mỗi phần tử <source> có các thuộc tính mô tả khi hình ảnh của chúng phù hợp nhất.
Trình duyệt sẽ sử dụng phần tử <source> đầu tiên với các giá trị thuộc tính phù hợp và bỏ qua bất kỳ phần tử <source> nào sau đây
Thí dụ
Hiển thị một bức ảnh nếu cửa sổ trình duyệt (khung nhìn) tối thiểu là 650 pixel, và một ảnh khác nếu không, nhưng lớn hơn 465 pixel.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Lưu ý: Luôn chỉ định một phần tử <img> là phần tử con cuối cùng của phần tử <picture>. Phần tử <img> được sử dụng bởi các trình duyệt để không hỗ trợ phần tử <picture> hoặc nếu không có thẻ <source> nào được khớp.
Người đọc màn hình HTML
Trình đọc màn hình là một chương trình phần mềm đọc mã HTML, chuyển đổi văn bản và cho phép người dùng "lắng nghe" nội dung. Trình đọc màn hình rất hữu ích cho những người mù, khiếm thị, hoặc học tập bị vô hiệu.
Tóm lược Chương
- Sử dụng phần tử HTML <img> để xác định một hình ảnh
- Sử dụng thuộc tính HTML src để xác định URL của hình ảnh
- Sử dụng thuộc tính alt HTML để xác định một văn bản thay thế cho một hình ảnh, nếu nó không thể được hiển thị
- Sử dụng các thuộc tính HTML chiều rộng và chiều cao để xác định kích thước của hình ảnh
- Sử dụng CSS chiều rộng và chiều cao tính để xác định kích thước của hình ảnh (cách khác)
- Sử dụng thuộc tính thả nổi CSS để cho hình ảnh trôi nổi
- Sử dụng phần tử HTML <map> để xác định bản đồ hình ảnh
- Sử dụng phần tử HTML <area> để xác định các khu vực có thể nhấp được trong bản đồ hình ảnh
- Sử dụng thuộc tính usemap của phần tử HTML <img> để trỏ tới một bản đồ hình ảnh
- Sử dụng phần tử HTML <hình ảnh> để hiển thị các hình ảnh khác nhau cho các thiết bị khác nhau
Lưu ý: Việc tải hình ảnh mất thời gian. Hình ảnh lớn có thể làm chậm trang của bạn. Sử dụng hình ảnh cẩn thận.
Nguồn: Xem ngay
Bản Quyền || Cấm sao chép nội dung dưới mọi hình thức. Nếu muốn sao chép hãy để 5 phút đọc xong các chính sách của chúng tôi tại đây.
Tác giả: Minh Trung
