Hình ảnh html

Công nghệ Lập trình HTML

26/09
Thạch
HTML
0
632

Các hướng dẫn xây dựng Web được tổ chức tốt và dễ hiểu với rất nhiều ví dụ về cách sử dụng HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML và hơn thế nữa.

Hình ảnh HTML

Hình ảnh có thể cải thiện thiết kế và giao diện của một trang web.

Thí dụ

<img src="anh1.jpg" alt="Ảnh 1">

Thí dụ

<img src="hoa_qua.jpg" alt="Hoa Quả">

Cú pháp hình ảnh HTML

<img>Thẻ HTML được sử dụng để nhúng một hình ảnh vào một 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. Các <img>thẻ tạo ra một không gian nắm giữ cho hình ảnh tham chiếu.
Các <img>thẻ trống, nó chỉ chứa các thuộc tính, và không có một thẻ đóng.
Các <img>thẻ có hai thuộc tính cần thiết:

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

Cú pháp

<img src="url" alt="alternatetext">

Thuộc tính src

srcThuộc tính 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à altvăn bản được hiển thị nếu trình duyệt không thể tìm thấy hình ảnh.

Thí dụ

<img src="hoa_qua.jpg" alt="Hoa Quả">

Thuộc tính alt

altThuộc tính 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 altthuộc tính phải mô tả hình ảnh:

Thí dụ

<img src="hoa_qua.jpg" alt="Hoa Quả">

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 alt thuộc tính:

Thí dụ

<img src="khiem_thi.jpg" alt="Khiếm thị">

Mẹo: Trình đọc màn hình là một chương trình phần mềm đọc mã HTML và cho phép người dùng "nghe" nội dung. Trình đọc màn hình hữu ích cho những người khiếm thị hoặc khuyết tật về khả năng học tập.

Kích thước hình ảnh - Chiều rộng và Chiều cao

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

Thí dụ

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Ngoài ra, bạn có thể sử dụng các thuộc tính widthvà height:

Thí dụ

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Các widthvà heightcác thuộc tính luôn 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.

Chiều rộng và Chiều cao, hoặc Phong cách?

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

Thí 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>

Hình ảnh trong một 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 bao gồm tên thư mục trong srcthuộc tính:

Thí dụ

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

Hình ảnh trên Máy chủ / Trang web khác

Một số trang web trỏ đến một hình ảnh trên một máy chủ khác.
Để trỏ đến một hình ảnh trên một máy chủ khác, bạn phải chỉ định một URL tuyệt đối (đầy đủ) trong srcthuộc tính:

Thí dụ

<img src="https://sinitc.com/images/sinitc.jpg" alt="sinitc.com">

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; nó có thể đột ngột bị xóa hoặc thay đổi.

Hình ảnh động

HTML cho phép GIF động:

Thí dụ

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Hình ảnh dưới dạng liên kết

Để sử dụng hình ảnh làm liên kết, hãy đặt <img>thẻ bên trong <a> thẻ:

Thí dụ

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Hình ảnh nổi

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

Thí dụ

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
Hình ảnh nằm bên phải.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
Hình ảnh nằm bên trái.</p>

Các định dạng hình ảnh chung

Dưới đây là các loại tệp hình ảnh phổ biến nhất, được hỗ trợ trong tất cả các trình duyệt (Chrome, Edge, Firefox, Safari, Opera):

Viết tắt	Định dạng tệp	Phần mở rộng tệp
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

Tóm tắt chương

Sử dụng <img>phần tử HTML để xác định hình ảnh
Sử dụng srcthuộc tính HTML để xác định URL của hình ảnh
Sử dụng altthuộc tính HTML để xác định văn bản thay thế cho hình ảnh, nếu nó không thể được hiển thị
Sử dụng HTML widthvà heightthuộc tính hoặc CSS widthvà height thuộc tính để xác định kích thước của hình ảnh
Sử dụng thuộc tính CSS floatđể cho hình ảnh nổi sang trái hoặc sang phải