Thẻ HTML 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 đặt trên giường. Thuộc tính alt thường được sử dụng để hiển thị văn bản thay cho hình ảnh nếu hình ảnh không thể tải.

Khi web lần đầu tiên được phát minh, các 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 thêm vào. 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ừ biểu trưng đến hình ảnh, hình ảnh có ở khắp mọi nơi trên internet.

Hướng dẫn này sẽ thảo luận về cách sử dụng để 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 số thuộc tính chính mà bạn có thể sử dụng với thẻ.

Thẻ hình ảnh HTML

HTML thẻ 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. Đây có thể là một tệp trên máy tính của bạn hoặc một URL đến một 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 thể tải.

Đây là cú pháp cho HTML thẻ:

thẻ 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ẻ không cần thẻ đóng riêng biệt. thẻ đượ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 chính là thư mục lưu trữ bất kỳ hình ảnh nào mà bạn tham khảo. Hành vi này có thể được bỏ qua bằng cách chỉ định đường dẫn tệp hoặc URL chính xác nơi có thể tìm thấy hình ảnh.

Trong cú pháp trên, của chúng tôi sẽ tham chiếu đến tệp house.png. Tệp này nằm trong cùng thư mục với tệp HTML mà chúng tôi đang làm việc.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Tuy nhiên, nếu chúng tôi đang lưu trữ các tệp hình ảnh của mình trong một thư mục khác — chẳng hạn như hình ảnh — thì chúng tôi sẽ sử dụng mã này:

Nếu chúng ta muốn nhúng một hình ảnh từ một nguồn bên ngoài, chúng ta có thể sử dụng một URL tuyệt đối. Đây là một ví dụ về thẻ tham chiếu đến hình ảnh bên ngoài:

Điều đó nói rằng, tốt nhất là bạn nên tham chiếu một hình ảnh từ một tệp cục bộ bất cứ khi nào có thể. Điều này là do việc tham chiếu một hình ảnh bên ngoài làm cho trình duyệt hoạt động nhiều hơn so với khi nó truy xuất hình ảnh từ một tệp cục bộ.

Ví dụ về hình ảnh HTML

Hãy khám phá một ví dụ về HTML đang hoạt động. Giả sử chúng ta đang xây dựng một trang web cho một quán cà phê địa phương, The Golden Roast. Golden Roast muốn hình ảnh một tách cà phê xuất hiện trên trang chủ của họ.

Tệp họ cung cấp cho chúng tôi để thêm vào trang web có tên là coffee.png. Thư mục lưu trữ trang HTML của chúng tôi cũng lưu trữ hình ảnh này. Để thêm hình ảnh này vào trang web của chúng tôi, chúng tôi có thể sử dụng mã sau:

  
 The Golden Roast 
   

Mã của chúng tôi trả về:

Hãy chia nhỏ mã của chúng ta. Đầu tiên, chúng tôi sử dụng , thẻ này lưu trữ các yếu tố chính của trang web của chúng tôi. Sau đó, chúng tôi sử dụng

để xác định một tiêu đề trên trang của chúng tôi. Nội dung của tiêu đề này là:The Golden Roast.

Trên dòng tiếp theo, chúng tôi đã sử dụng phần tử img để thêm một hình ảnh - được gọi là coffee.png - vào mã của chúng tôi. Hình ảnh này được chứa trong cùng một thư mục với tệp HTML của chúng tôi. Do đó, chúng tôi không cần phải trỏ đến một thư mục bằng thuộc tính src. Chúng tôi chỉ xác định tên của tệp.

HTML hình ảnh:Văn bản thay thế

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 đại diện bởi thuộc tính alt , là một mô tả bằng văn bản của một 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 thay thế:

1. Mô tả một hình ảnh dự định nhưng không tồn tại . Văn bản thay thế rất hữu ích nếu không tìm thấy hình ảnh — ví dụ:vì tệp đó không tồn tại trong thư mục bạn chỉ định.
2. Mô tả một hình ảnh dự kiến ​​nhưng tải chậm . Nếu khách truy cập trang web có kết nối chậm, có thể có sự chậm trễ khi tải hình ảnh.
3. Cải thiện khả năng tiếp cận . Nếu khách truy cập đang sử dụng trình đọc màn hình, việc có văn bản thay thế sẽ cho phép họ nghe mô tả về hình ảnh.

Văn bản thay thế đảm bảo rằng nếu một hình ảnh không thể được hiển thị vì bất kỳ lý do gì, trang web sẽ vẫn hiển thị một số văn bản cho người dùng. Nếu bạn không chỉ định văn bản thay thế và hình ảnh bị hỏng, biểu tượng hình ảnh bị hỏng sẽ xuất hiện.

Ví dụ về văn bản thay thế HTML

Giả sử chúng ta muốn thêm thuộc tính alt vào hình ảnh trong ví dụ về quán cà phê của chúng ta ở trên. Văn bản thay thế mà chúng tôi muốn chỉ định là Rang cà phê, được bao quanh bởi hạt cà phê trên bàn gỗ màu nâu nhạt. Chúng tôi có thể thêm văn bản thay thế này bằng cách sử dụng mã sau:

  
 The Golden Roast 
    

 Bây giờ, giả sử rằng ai đó di chuyển tệp coffee.png của chúng tôi sang một thư mục khác. Do đó, trang web của chúng tôi không thể tìm thấy tệp nữa. Điều này sẽ làm cho văn bản thay thế của chúng tôi xuất hiện trên trang web vì không thể tìm thấy hình ảnh. Dưới đây là ví dụ về những gì khách truy cập sẽ thấy trên trang web của chúng tôi trong trường hợp này:
  

 Khi bạn thêm thuộc tính alt, hãy cố gắng giữ cho nó ngắn gọn và sử dụng nó để mô tả chính hình ảnh. Trong ví dụ về cà phê của chúng tôi, chúng tôi đã mô tả hình ảnh của cà phê chứa những gì. Chúng tôi 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. 
 
 Hình ảnh HTML:Tiêu đề 
 

 Bạn có thể sử dụng thuộc tính tiêu đề để cung cấp thêm thông tin về hình ảnh. Khi được sử dụng, thuộc tính title cung cấp một chú giải công cụ xuất hiện khi người dùng di chuột qua hình ảnh. 
 

 Thuộc tính tiêu đề có thể hữu ích nếu bạn muốn thêm chú giải công cụ vào hình ảnh. Tuy nhiên, thuộc tính title không hỗ trợ trình đọc màn hình và nó không hiển thị trên các thiết bị di động (không có chuột). 
 

 Giả sử chúng ta muốn thêm thuộc tính tiêu đề có giá trị  Tách cà phê trên bàn  đến hình ảnh của chúng tôi từ trước đó. Chúng tôi có thể sử dụng mã sau để làm như vậy:
 
  
 The Golden Roast 
   
  

 Khi chúng ta di chuột qua hình ảnh bằng con trỏ, nội dung của thẻ tiêu đề sẽ xuất hiện. 
 
 Kích thước hình ảnh HTML:Chiều rộng và Chiều cao 
 

 Bạn có thể sử dụng các thuộc tính chiều rộng và chiều cao của hình ảnh để 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ụ về quán cà phê của chúng ta. Giả sử chúng ta muốn hình ảnh cà phê của mình có chiều rộng 400 pixel x chiều dài 400 pixel. Chúng tôi không muốn hình ảnh này chiếm quá nhiều dung lượng trên trang web. Chúng tôi có thể sử dụng mã sau để chỉ định các tham số này:
 
  
 Golden Roast 
   
 

 Mã của chúng tôi trả về:
  

 Như bạn có thể thấy, hình ảnh của chúng tôi trong ví dụ này nhỏ hơn hình ảnh trước đó. Trong ví dụ đầu tiên của chúng tôi, hình ảnh của chúng tôi là 500 × 500. Bây giờ, hình ảnh của chúng tôi là 400 × 400. Điều này là do chúng tôi đã chỉ định cả thuộc tính chiều cao và chiều rộng và đặt mỗi thuộc tính 400. 
 
 Hình ảnh HTML:Định vị Hình ảnh 
 

 Khi bạn đang làm việc với một hình ảnh, bạn có thể quyết định rằng bạn muốn nó nổi sang trái hoặc phải của trang. Float đề cập đến việc căn chỉnh theo chiều ngang — trái hoặc phải — của hình ảnh trên trang. Đó là nơi xuất hiện thuộc tính float của CSS. 
 

 Giả sử chúng tôi muốn hình ảnh cà phê của chúng tôi từ trước đó xuất hiện ở phía bên phải của trang. Chúng tôi có thể thực hiện điều này bằng cách sử dụng mã sau:
 
  
 Golden Roast 
    

 Mã của chúng tôi trả về:
  

 Chúng tôi đã sử dụng  float:right;  thuộc tính trong một thuộc tính kiểu. Điều này cho phép chúng tôi chỉ định rằng hình ảnh của chúng tôi sẽ nổi ở bên phải trang của chúng tôi. 
 
 
 
 Kết luận 
 

 Bạn có thể sử dụng    Thẻ 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 về cách làm việc với    trong HTML. Chúng tôi cũng đã nói về cách sử dụng một số thuộc tính được cung cấp bởi HTML    nhãn. Giờ đây, 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 người chuyên nghiệp! 
 

 Bạn có muốn tìm hiểu thêm về HTML? Hãy xem hướng dẫn Cách học HTML của chúng tôi để biết các mẹo của chuyên gia cũng như danh sách các khóa học và tài nguyên học tập trực tuyến.