HTML

Sử dụng thẻ Image trong HTML

nguyen.le , 15 min read

Giới thiệu nội dung bài viết

Trong quá trình học và làm việc với lập trình web HTML, chắc hẳn các bạn sẽ cần sử dụng các thẻ hình ảnh img rất nhiều. Vì vậy đòi hỏi người học lập trình web HTML như chúng ta phải nắm vững các loại thẻ cũng như cách sử dụng mỗi loại thẻ hình ảnh img để áp dụng thành thạo khi làm trong các dự án lập trình web HTML.
Trong phạm vi bài viết này, anh sẽ trình bày về các cách sử dụng thẻ hình ảnh img quan trọng và phổ biến trong lập trình web HTML bao gồm chèn ảnh vào văn bản, thêm kích thước, tạo border, canh chỉnh cho hình ảnh và cách thêm đường link vào hình ảnh. Để sử dụng thẻ hình ảnh image trong HTML, chúng ta sẽ sử dụng các thẻ và các thuộc tính.
Cụ thể cách thao tác với các thẻ và các thuộc tính như thế nào để sử dụng thẻ hình ảnh trong HTML? Những chia sẻ dưới đây sẽ sớm giúp bạn giải đáp những thắc mắc trên ngay nhé.

1. Chèn ảnh vào văn bản

Để chèn ảnh vào văn bản ta sử dụng thẻ img với cú pháp như sau

1

<img src = "Image URL" ... attributes-list/>

Ví dụ chúng ta chèn một ảnh test.png vào tài liệu

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
   
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
   
</html>

  • Thuộc tính src : chỉ ra nơi nào chúng ta chứa file ảnh

  • Thuộc tính alt : chú thích cho hình ảnh

2. Thêm kích thước cho hình ảnh

Chúng ta có thể thêm kích thước chiều dài và rộng cho hình ảnh bằng thuộc tính width và height như sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>

<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>
   
   <body>
      <p>Setting image width and height</p>
      <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
   </body>
   
</html>

3. Tạo border hình ảnh

Chúng ta có thể tạo border cho hình ảnh bằng cách dùng thuộc tính border

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>

<html>

   <head>
      <title>Set Image Border</title>
   </head>
   
   <body>
      <p>Setting image Border</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
   </body>
   
</html>

4. Canh chỉnh hình ảnh

Chúng ta có thể canh chỉnh hình ảnh ở vị trí bên trái, phải hay ở giữa bằng cách sử dụng thuộc tính align như sau

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Alignment</title>
   </head>
   
   <body>
      <p>Setting image Alignment</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
   </body>
   
</html>

Chúng ta có thể thêm đường link vào ảnh. Khi người dùng click vô ảnh sẽ chạy tới trang web mà chúng ta link đến bằng cách sử dụng thẻ a và thuộc tính href (trang web sẽ được mở)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>

   <head>
      <title>Image Hyperlink Example</title>
   </head>
   
   <body>
      <p>Click following link</p>
      <a href = "https://levunguyen.com" target = "_self"> 
         <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
   
</html>

6. Video Demo

7. Thực hành online và source code

Sourcecode

Sourcecode

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments