Thẻ HTML <img> thêm hình ảnh vào trang web. Sử dụng thuộc tính src để chỉ định vị trí của hình ảnh bạn muốn nhúng. Thuộc tính alt thường được dùng để hiển thị văn bản thay thế nếu hình ảnh không tải được.
Khi web lần đầu được phát minh, trang web chỉ có thể hiển thị văn bản. Tuy nhiên, khả năng thêm hình ảnh vào trang web nhanh chóng được bổ sung. Kể từ đó, hình ảnh đã trở thành một phần quan trọng của hầu hết các trang trên web. Từ logo đến ảnh chụp, hình ảnh có ở khắp nơi trên internet.
Hướng dẫn này sẽ thảo luận cách sử dụng thẻ <img> để làm việc với Hình ảnh HTML với tư cách là nhà phát triển web. Chúng ta cũng sẽ nói về một vài thuộc tính chính bạn có thể sử dụng với thẻ <img>.
Thẻ Hình ảnh HTML
Thẻ HTML <img> thêm hình ảnh vào tài liệu web. Sử dụng thuộc tính src để chỉ định vị trí của hình ảnh bạn muốn nhúng. Điều này có thể là tệp trên máy tính của bạn hoặc URL đến tệp khác. Thuộc tính alt cho phép bạn chỉ định văn bản thay thế xuất hiện nếu hình ảnh không tải được.
Cú pháp cho thẻ HTML <img>:
<img src="house.png">
Thẻ <img> không có thẻ đóng. Thay vào đó, thẻ kết thúc bằng "/>". Điều này biểu thị rằng thẻ <img> không cần thẻ đóng riêng biệt. Thẻ <img> được hỗ trợ trong tất cả các trình duyệt.
HTML giả định rằng thư mục lưu trữ tệp HTML của bạn là thư mục giống nhau lưu trữ bất kỳ hình ảnh nào bạn tham chiếu. Hành vi này có thể bị bỏ qua bằng cách chỉ định đường dẫn tệp chính xác hoặc URL nơi hình ảnh có thể được tìm thấy.
Trong cú pháp trên, <img> của chúng ta sẽ tham chiếu tệp house.png. Tệp này nằm trong cùng thư mục với tệp HTML chúng ta đang làm việc.
Tuy nhiên, nếu chúng ta lưu trữ tệp hình ảnh trong thư mục khác—gọi là pictures, ví dụ—chúng ta sẽ sử dụng mã này:
<img src="pictures/house.png">
Nếu chúng ta muốn nhúng hình ảnh từ nguồn bên ngoài, chúng ta có thể sử dụng URL tuyệt đối. Đây là ví dụ của thẻ <img> tham chiếu hình ảnh bên ngoài:
<img src="https://www.example.org/pictures/house.png">
Đó nói vậy, thường thì tốt nhất là tham chiếu hình ảnh từ tệp cục bộ bất cứ khi nào có thể. Điều này là vì tham chiếu hình ảnh bên ngoài khiến trình duyệt phải làm nhiều việc hơn so với khi nó truy xuất hình ảnh từ tệp cục bộ.
Ví dụ HTML Hình ảnh
Hãy khám phá ví dụ của thẻ HTML <img> trong hành động. Giả sử chúng ta đang xây dựng trang web cho một quán cà phê địa phương, The Golden Roast. The Golden Roast muốn hình ảnh một cốc cà phê xuất hiện trên trang chủ.
Tệp họ cho chúng ta để thêm vào trang web tên là coffee.png. Thư mục lưu trữ trang HTML của chúng ta cũng lưu trữ hình ảnh này. Để thêm hình ảnh này vào trang web, chúng ta có thể sử dụng mã sau:
<body> <h1>The Golden Roast</h1> <img src="coffee.png"> </body>
Mã của chúng ta trả về:
Hãy phân tích mã. Đầu tiên, chúng ta dùng thẻ <body>, lưu trữ các phần tử chính của trang web. Sau đó, chúng ta dùng thẻ <h1> để định nghĩa tiêu đề trên trang. Văn bản của tiêu đề này là: The Golden Roast.
Ở dòng tiếp theo, chúng ta dùng phần tử img để thêm hình ảnh—gọi là coffee.png—vào mã. Hình ảnh này nằm trong cùng thư mục với tệp HTML. Do đó, chúng ta không cần trỏ đến thư mục bằng thuộc tính src. Chúng ta chỉ cần chỉ định tên tệp.
HTML Hình ảnh: Văn bản thay thế (Alternative Text)
Thêm văn bản thay thế là một phần quan trọng khi làm việc với hình ảnh trong HTML. Văn bản thay thế, được biểu thị bằng thuộc tính alt, là mô tả văn bản của hình ảnh.
Có một số lý do tại sao bạn nên chỉ định thuộc tính alt khi làm việc với hình ảnh. Văn bản alt:
- Mô tả hình ảnh dự định nhưng không tồn tại. Văn bản alt hữu ích nếu hình ảnh không tìm thấy—ví dụ, vì tệp đó không tồn tại trong thư mục bạn chỉ định.
- Mô tả hình ảnh dự định nhưng tải chậm. Nếu người truy cập trang web có kết nối chậm, có thể có độ trễ khi tải hình ảnh.
- Cải thiện khả năng tiếp cận (accessibility). Nếu người truy cập sử dụng trình đọc màn hình (screen reader), có văn bản alt sẽ cho phép họ nghe mô tả về hình ảnh.
Văn bản alt đảm bảo rằng nếu hình ảnh không thể hiển thị vì bất kỳ lý do gì, trang web vẫn trình bày một số văn bản cho người dùng. Nếu bạn không chỉ định văn bản alt và hình ảnh bị hỏng, biểu tượng hình ảnh hỏng sẽ xuất hiện.
Ví dụ HTML Văn bản thay thế
Giả sử chúng ta muốn thêm thuộc tính alt cho hình ảnh trong ví dụ quán cà phê ở trên. Văn bản alt chúng ta muốn chỉ định là Đang rang cà phê, được bao quanh bởi hạt cà phê trên bàn gỗ nâu nhạt. Chúng ta có thể thêm văn bản alt này bằng mã sau:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" alt="Đang rang cà phê, được bao quanh bởi hạt cà phê trên bàn gỗ nâu nhạt."> </body>
Bây giờ, giả sử ai đó di chuyển tệp coffee.png sang thư mục khác. Kết quả là, trang web không còn tìm thấy tệp. Điều này sẽ khiến văn bản alt xuất hiện trên trang web vì hình ảnh không thể tìm thấy. Đây là ví dụ những gì người truy cập sẽ thấy trên trang web trong trường hợp này:
Khi bạn thêm thuộc tính alt, hãy cố gắng giữ nó ngắn gọn, và dùng nó để mô tả chính hình ảnh. Trong ví dụ cà phê, chúng ta mô tả những gì hình ảnh cà phê chứa. Chúng ta không muốn lặp lại văn bản đã có trên trang vì điều đó sẽ gây nhầm lẫn cho người dùng.
HTML Hình ảnh: Tiêu đề (Title)
Bạn có thể sử dụng thuộc tính title để cung cấp thông tin bổ sung về hình ảnh. Khi được sử dụng, thuộc tính title cung cấp một tooltip (mẹo công cụ) xuất hiện khi người dùng di chuột qua hình ảnh.
Thuộc tính title có thể hữu ích nếu bạn muốn thêm tooltip cho hình ảnh. Tuy nhiên, thuộc tính title không có hỗ trợ trình đọc màn hình, và nó không hiển thị trên thiết bị di động (vì không có chuột).
Giả sử chúng ta muốn thêm thuộc tính title với giá trị Một cốc cà phê trên bàn vào hình ảnh từ trước. Chúng ta có thể sử dụng mã sau:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" alt="Đang rang cà phê, được bao quanh bởi hạt cà phê trên bàn gỗ nâu nhạt." title="Một cốc cà phê trên bàn"> </body>
Khi chúng ta di chuột qua hình ảnh với con trỏ, nội dung của thẻ title xuất hiện.
HTML Kích thước hình ảnh: Width và Height
Bạn có thể sử dụng thuộc tính width và height để chỉ định chiều rộng và chiều cao của hình ảnh, tương ứng.
Hãy quay lại ví dụ quán cà phê. Giả sử chúng ta muốn hình ảnh cà phê rộng 400 pixel và cao 400 pixel. Chúng ta không muốn hình ảnh này chiếm quá nhiều không gian trên trang web. Chúng ta có thể sử dụng mã sau để chỉ định các tham số này:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" width="400" height="400"> </body>
Mã của chúng ta trả về:
Như bạn thấy, hình ảnh trong ví dụ này nhỏ hơn hình ảnh từ trước. Trong ví dụ đầu tiên, hình ảnh là 500×500. Bây giờ, hình ảnh là 400×400. Điều này là vì chúng ta chỉ định cả thuộc tính height và width và đặt mỗi thứ thành 400.
HTML Hình ảnh: Định vị hình ảnh
Khi bạn làm việc với hình ảnh, bạn có thể quyết định muốn nó nổi (float) sang trái hoặc phải của trang. Float đề cập đến căn chỉnh ngang—trái hoặc phải—của hình ảnh trên trang. Đó là nơi thuộc tính CSS float xuất hiện.
Giả sử chúng ta muốn hình ảnh cà phê từ trước xuất hiện ở bên phải trang. Chúng ta có thể làm cho điều này xảy ra bằng mã sau:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" width="400" height="400" style="float:right;"> </body>
Mã của chúng ta trả về:
Chúng ta sử dụng thuộc tính float:right; trong thuộc tính style. Điều này cho phép chúng ta chỉ định rằng hình ảnh nên nổi sang phải của trang.
Kết luận
Bạn có thể sử dụng thẻ <img> HTML để đặt hình ảnh trên trang web. Hình ảnh có thể được hiển thị từ tệp hoặc thư mục cục bộ hoặc từ nguồn bên ngoài.
Hướng dẫn này đã thảo luận cách làm việc với thẻ <img> trong HTML. Chúng ta cũng đã nói về cách sử dụng một vài thuộc tính do thẻ HTML <img> cung cấp. Bây giờ bạn đã được trang bị kiến thức cần thiết để bắt đầu sử dụng hình ảnh trong HTML như một chuyên gia!
Bạn muốn tìm hiểu thêm về HTML? Hãy xem hướng dẫn Cách học HTML để có mẹo chuyên gia và danh sách khóa học trực tuyến và tài nguyên học tập.