1.Cách thêm hình ảnh vào trong HTML
Để thêm hình ảnh trong HTML ta sử dụng thẻ <img>
Hình ảnh không được chèn vào một trang web về mặt kỹ thuật; hình ảnh sẽ được liên kết với các trang web. Thẻ <img> tạo ra một không gian nắm giữ cho hình ảnh tham chiếu
Thẻ <img> trống chỉ chứa các thuộc tính và không có thẻ đóng
Thẻ <img> có 2 thuộc tính cần thiết:
- Src – Chỉ định đường dẫn đến hình ảnh
- Alt – Chỉ định văn bản thay thế cho hình ảnh
Ví dụ:
Ở đây, tôi sử dụng src để liên kết tới file của hình ảnh và alt để chỉ định văn bản thay thế cho hình ảnh
2.Thuộc tính src
Thuộc tính src chỉ định đường dẫn (URL) đến hình ảnh
Lưu ý: Khi một trang web tải, tại thời điểm đó, chính trình duyệt sẽ lấy hình ảnh từ máy chủ web và chèn nó vào trang. Do đó, hãy đảm bảo rằng hình ảnh thực sự ở cùng một vị trí liên quan đến trang web, nếu không khách truy cập của bạn sẽ nhận được biểu tượng liên kết bị hỏng. Biểu tượng liên kết bị hỏng và văn bản của thuộc tính alt sẽ được hiển thị nếu trình duyệt không thể tìm thấy hình ảnh.
Ví dụ
3.Thuộc tính atl
Thuộc tính alt cung cấp văn bản thay thế cho hình ảnh, nếu người dùng vì lý do nào đó không thể xem nó (vì 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)
Ví dụ:
Ở đây, tôi đã sử dụng thẻ alt để thay thế cho hình ảnh bị lỗi
4.Chỉnh sửa ảnh trong HTML
4.1 Sử dụng thuộc tính width và height
Bạn có thể sử dụng thuộc tính width và height để xác định kích thước về chiều rộng và chiều cao của hình ảnh
Ví dụ:
Ở đây, tôi đã xác định chiều ngang của ảnh là 200px và chiều cao là 250px
4.2 Sử dụng thuộc tính style
Bạn cũng có thể sử dụng thuộc tính style để xác định kích thước chiều rộng và chiều cao của hình ảnh
Ví dụ:
Ở đây, tôi đã chỉ định chiều ngang của hình ảnh là 200px và chiều dọc của hình ảnh là 250px
4.3 Hình ảnh động
Bạn có thể sử dụng thuộc tính style để xác định kích thước chiều dọc chiều ngan của hình ảnh động và dùng thuộc tính CSS float để cho ảnh động sang phải hoăc trái của văn bản
Ví dụ:
Ở đây, tôi xác định kích thước của hình động có chiều ngang là 50px, chiều cao là 70px
5. Bản đồ hình ảnh trong HTML
5.1 Bản đồ hình ảnh là gì ?
Bản đồ hình ảnh là một loại hình ảnh đặc biệt, trên hình ảnh sẽ có các vùng xác định, mỗi vùng đó sẽ được gán với một địa chỉ liên kết
5.2 Cách tạo bản đồ hình ảnh
Ý tưởng: Để tạo ra bản đồ hình ảnh, bạn cần một hình ảnh và một số mã HTML mô tả các khu vực bạn có thể nhấp vào
Để tạo một bản đồ hình ảnh chúng ta cần các bước như sau:
Bước 1: Thêm một hình ảnh vào trang web
Bước 2: Tạo một hệ thống tọa độ và kết hợp với hình ảnh tạo thành bản đồ hình ảnh
5.2.1 Thêm một hình ảnh vào trang web
Ta sử dụng thẻ <img> để chèn tấm ảnh mong muốn vào trang web. Bên trong thẻ <img>, ta thiết lập thuộc tính usemap cú pháp usemap=”#tên bản đồ hệ thống tọa độ” để gán những vùng được xác định lên tấm hình
5.2.2 Tạo một hệ thống tọa độ và kết hợp với hình ảnh
Để tạo một bản đồ hệ thống tọa độ ta cần phải sử dụng :
- Thẻ <map> dùng để xác định một cái bản đồ hệ thống tọa độ với tên giống với tên đã để liên kết ở phần hình ảnh
- Thẻ <area> dùng để xác định một vùng trên bản đồ hệ thống tọa độ:
- Rect – Xác định một vùng hình chữ nhật
- Circle – Xác định một vùng hình tròn
- Poly – Xác định một vùng đa giác
- Default – Xác toàn bộ khu vực
Ví dụ:
