Cách thêm hình ảnh bằng phần tử img trong HTML
Bạn có thể thêm hình ảnh vào trang web của mình bằng cách sử dụng phần tử img và trỏ đến URL của hình ảnh cụ thể bằng thuộc tính src.
Ví dụ cách thêm hình ảnh vào trang web:
Lưu ý: Lưu ý rằng các phần tử img là phần tử tự đóng. Bạn có thể thêm “dấu cách + /” trước khi đóng ngoặc > như mình để đặt theo chuẩn XHTML (bạn sẽ học XHTML sau, nhưng hãy cứ làm như thế vì nó sẽ tốt cho bạn sau này)
Sử dụng thuộc tính Alt để mô tả ảnh của bạn
Tất cả các phần tử img phải có thuộc tính Alt. Văn bản bên trong thuộc tính alt được sử dụng cho công cụ tìm kiếm và cả người dùng.
Khi tốc độ load của mạng quá kém thì thuộc tính Alt sẽ được hiển thị.
Điều này giúp người dùng vẫn hiểu đây là hình ảnh có ý nghĩa như thế nào ngay cả khi không load được ảnh.
Lưu ý: Nếu hình ảnh được sử dụng chỉ để trang trí (như viền, hoa văn…), thì sử dụng thuộc tính alt trống là phương pháp hay nhất, ví dụ: alt = ””
Lý tưởng nhất là thuộc tính alt không được chứa các ký tự đặc biệt trừ khi quá cần thiết.
Hãy thêm thuộc tính alt vào ví dụ img của chúng tôi ở trên:
Bài tập về thẻ IMG trong HTML
Hãy thử thêm hình ảnh vào website của bạn.
? Chèn thẻ img, trước phần tử h2.
? Bây giờ thiết lập thuộc tính src để nó trỏ đến url này:
Bây giờ thì hãy thêm thuộc tính src bằng đường dẫn hình ảnh của bạn:
Lưu ý: 3 Cách thêm đường dẫn ảnh bằng ảnh tải sẵn trong máy tính
-
Ảnh lưu cùng thư mục với file html của bạn: src = ”meo.jpg”
-
Ảnh lưu trong thư mục con image (thư mục image ngang cấp với file html của bạn): src = ”image/meo.jgp”
-
Ảnh lưu trong thư mục image1 ngang cấp với thư mục cha đang chứa file html của bạn: src = ”./image1/meo.jpg”
? Cuối cùng đừng quên cho hình ảnh của bạn một văn bản thay thế bằng thẻ alt.
Tạo thẻ anchor để liên kết văn bản neo đến một địa chỉ nào đó: Thẻ <a href = ””>Đây là văn bản neo</a>