Sử Dụng Thẻ Image Trong HTML | Lê Vũ Nguyên Dạy Học Lập Trình

Có thể bạn quan tâm

HTML

HTML là gì
Các thẻ cơ bản
Thuộc tính
Formatting
Thẻ Meta
Cụm từ
Hình Ảnh
Table
Màu sắc
Style
Block và Inline
Danh sách
Form
Media
Layout
Dom là gì

Sử dụng thẻ Image trong HTML nguyen.le , 15 min read Nội dung bài viết

Giới thiệu nội dung bài viết
1. Chèn ảnh vào văn bản
2. Thêm kích thước cho hình ảnh
3. Tạo border hình ảnh
4. Canh chỉnh hình ảnh
5. Image link
6. Video Demo
7. Thực hành online và source code

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> Simple Image Insert <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> Setting image width and height <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> Setting image Border <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> Setting image Alignment <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> Click following link <a href = "https://levunguyen.com" target = "_self"> <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> </a> </body> </html>