Ảnh trong HTML - HTML Images

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    6 thg 10, 2022

  • Số lượt xem

    289 lượt xem


Trong một trang HTML để làm cho một trang web trông đẹp hơn hay bổ sung thêm thông tin thì ngoài các văn bản thì ta còn cần sử dụng các hình ảnh.

Ví dụ về Images trong HTML

<img src="images/blog/lap-trinh-web.jpg" >

 

Cú pháp

Thẻ HTML <img> được sử dụng để nhúng hình ảnh vào trang web.

Hình ảnh không được chèn vào một trang web về mặt kỹ thuật; hình ảnh được liên kết với các trang web.

Thẻ <img> tạo không gian lưu giữ cho hình ảnh được tham chiếu.

Thẻ <img> là một empty tag, nó chỉ chứa các thuộc tính và không có thẻ đóng. Thẻ <img> có hai attribute bắt buộc:

  • src - Chỉ định đường dẫn đến hình ảnh
  • alt - Chỉ định văn bản thay thế cho hình ảnh

HTML Images - src Attribute

Attribute src bắt buộc 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 thay thế được hiển thị nếu trình duyệt không thể tìm thấy hình ảnh.

<img alt="lap trinh web" src="images/blog/lap-trinh-web.jpg" >

 

HTML Images - alt Attribute

Attribute alt bắt buộc 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).

Giá trị của thuộc tính alt nên là mô tả hình ảnh:

<img alt="lap trinh web" src="images/blog/lap-trinh-web.jpg" >

Nếu trình duyệt không thể tìm thấy hình ảnh, nó sẽ hiển thị giá trị của thuộc tính alt:

Image Size - Width và Height

Bạn có thể sử dụng attribute style để chỉ định chiều rộng và chiều cao của hình ảnh.

<img alt="lap trinh web" src="images/blog/lap-trinh-web.jpg" style="width:500px;height:600px;">

Ngoài ra, bạn có thể sử dụng các attributte widthheight:

<img alt="lap trinh web" src="images/blog/lap-trinh-web.jpg" width="500" height="600">

Attributte widthheight luôn xác định chiều rộng và chiều cao của hình ảnh bằng pixel.

Lưu ý: Luôn chỉ định chiều rộng và chiều cao của hình ảnh. Nếu chiều rộng và chiều cao không được chỉ định, trang web có thể nhấp nháy trong khi tải hình ảnh.

 

Nên chọn Width và Height, hay Style?

Các attribute width, heightstyle đều hợp lệ trong HTML. Tuy nhiên, chúng tôi khuyên bạn nên sử dụng attribute style. Nó ngăn các trang định kiểu thay đổi kích thước của hình ảnh:

Ví dụ

<!DOCTYPE html>  <html>  <head>  <style>  img {    width: 100%;  }  </style>  </head>  <body>    <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">    <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">    </body>  </html>

 

Images trong thư mục khác

Nếu bạn có hình ảnh của mình trong một thư mục con, bạn phải khai báo rõ tên thư mục trong attribute src:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

 

Images ở một server hoặc website khác

Một số trang web trỏ đến một hình ảnh trên một server khác. Để trỏ đến một hình ảnh trên một server khác, bạn phải chỉ định một Absolute URL trong thuộc tính src:

<img src="https://truonghoclaptrinh.com/images/logo%20beready%20academy.png" alt="logo beready academy">

Lưu ý về hình ảnh bên ngoài: Hình ảnh bên ngoài có thể thuộc bản quyền. Nếu bạn không được phép sử dụng nó, bạn có thể vi phạm luật bản quyền. Ngoài ra, bạn không thể kiểm soát hình ảnh bên ngoài; chúng có thể đột ngột bị xóa hoặc thay đổi.

Image Floating

Sử dụng thuộc tính float của CSS để cho hình ảnh nổi sang phải hoặc sang trái của văn bản:

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">  Hình ảnh trôi về bên phải của văn bản</p>    <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">  Hình ảnh trôi về bên trái của văn bản</p>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.