Sử dụng thẻ Image trong HTML

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

Chào các bạn,hôm nay anh sẽ hướng dẫn mọi người cách sử dụng thẻ hình ảnh là như thế nào?

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ướt 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>

5. Image link

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>

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments