Bạn muốn biết cách đưa hình ảnh vào file HTML nhưng chưa biết làm thế nào? Đừng lo, hãy đọc ngay hướng dẫn chi tiết dưới đây để hiểu cách sử dụng thẻ IMG để hiển thị hình ảnh trong HTML.
Bước 1: Tạo File HTML và Chuẩn Bị Ảnh
Trước khi bắt đầu, hãy tạo một thư mục mới và mở nó trong trình soạn thảo mã nguồn VSCode. Tiếp theo, tạo một file mới trong VSCode và gõ "html:5", sau đó nhấn Tab để tạo khung code.
Để chuẩn bị ảnh, bạn chỉ cần tải bức ảnh mà bạn muốn sử dụng và lưu nó trong cùng thư mục với file HTML.
Bước 2: Nhập Thẻ IMG
Trỏ con chuột vào nơi bạn muốn chèn thẻ IMG vào file HTML và nhập "img", sau đó nhấn Tab. Thẻ IMG sẽ hiển thị như sau:
Trong hình ảnh trên, bạn có thể thấy 2 thuộc tính kèm theo thẻ IMG là:
src: Đây là thuộc tính để trỏ đến file ảnh mà bạn muốn hiển thị trong HTML. Để sử dụng thuộc tính này, chỉ cần đặt con trỏ chuột vào dấu ngoặc kép và gõ "./", sau đó chọn file ảnh.
=> 
Nếu sau khi thực hiện đúng các bước mà ảnh không hiển thị, hãy cài đặt một tiện ích mở rộng cho VSCode có tên là "Path Intellisense".
Sau đó, nhấp chuột phải vào file HTML và chọn "View in Browser" để xem ảnh hiển thị trên trình duyệt.
Bước 3: Thay Đổi Đường Dẫn Của File Ảnh
Trong trường hợp đường dẫn của ảnh trong thuộc tính src bị sai, hãy xóa đường dẫn cũ và nhập lại ./, sau đó chọn file ảnh.
Sau đó, nhấn F5 trong file HTML đang mở trên trình duyệt để xem ảnh được hiển thị bình thường.
Lưu ý: Một trường hợp khác khiến ảnh không hiển thị là khi bạn tạo một file mới và không đặt file ảnh trong cùng thư mục với file HTML. Trong trường hợp này, hãy xóa đường dẫn cũ trong đoạn mã, nhập ../ vào thuộc tính src, sau đó chọn nơi lưu file ảnh.
Sau đó, tải lại trang trên trình duyệt để xem ảnh hiển thị bình thường.
Kết Luận
Như vậy, việc sử dụng thẻ IMG để hiển thị hình ảnh trong HTML rất đơn giản. Bạn hãy thực hành ngay để ghi nhớ các bước. Đừng quên theo dõi Gitiho để cập nhật kiến thức HTML mới nhé! Nếu bạn muốn học HTML một cách đầy đủ và chi tiết qua video bài giảng, hãy tham gia khóa học "Nhập Môn HTML cùng chuyên gia Nguyễn Đình Nam". Khóa học sẽ giúp bạn nắm vững kiến thức và cách thức hoạt động của HTML, từ đó xây dựng nền tảng cho việc xây dựng website.
Chúc bạn học tập hiệu quả!
