Chèn ảnh Bằng Thẻ Image Trong HTML | DZR-Web

Trang chủ » Chèn ảnh Vào Web Html » Chèn ảnh Bằng Thẻ Image Trong HTML | DZR-Web

Có thể bạn quan tâm

Skip to content Bài viết gần đây
  • Tổng Hợp 7 Top Ứng Dụng Nghe Nhạc Chất Lượng Cao Phổ Biến Hiện Nay
  • Hosting Là Gì? Tổng Hợp Các Loại Hosting Phổ Biến Trên Thị Trường
  • Khám Phá Top 7 Khóa Học Làm Youtube Kiếm Tiền Hiệu Quả Nhất 2024
  • Visual Studio Là Gì? Tìm Hiểu Tất Tần Tật Thông Tin Về Microsoft Visual Studio
  • Tổng Hợp 7 Chất Liệu Vải May Áo Bếp Nhà Hàng Khách Sạn Đẹp, Cao Cấp
  • EdTech Là Gì? Các Mô Hình EdTech Phổ Biến Hiện Nay Mà Bạn Cần Biết
  • Khám Phá Các Kỹ Năng Quản Lý Mầm Non Hiệu Quả Được Áp Dụng Phổ Biến
  • Tổng Hợp 7+ Top App Học Tiếng Anh Giao Tiếp Được Yêu Thích Nhất Hiện Nay

Để cho website bạn tự làm sinh động, thu hút nhiều đọc giả ghé thăm bạn cần phải chèn thêm ảnh, đối với website sử dụng cấu trúc HTML, bạn có thể chèn ảnh bằng thẻ image trong html theo cú phép sau:

<img src="đường dẫn url tới nơi chứa hình ảnh" ... danh-sách-thuộc-tính/>

Thẻ <img> này là một thẻ trống, nghĩa là nó chỉ có thể chứa danh sách các thuộc tính và không có thẻ đóng.Ví dụ

Bạn thử ví dụ sau:

<!DOCTYPE html> <html> <head> <title>Hinh anh trong HTML</title> </head> <body> <p>Vi du the img trong HTML.</p> <img src="./images/dzr-web.png" alt="Hình ảnh trong HTML" /> </body> </html> Trong đó, bạn có thể sử dụng fie đuôi jpg, gif hoặc png đều được, nhưng bạn phải chọn đúng tên tấm ảnh của mình ở thuộc tính src, nếu sai ảnh sẽ không hiển thị.

Thuộc tính alt chính là miêu tả hình ảnh, bạn có thể thêm không thêm, khi thêm thì sẽ hiển thị tên để người dùng hiểu được bạn đang nói đến cái gì, thuộc tính này rất cần thiết để đáp ứng chuẩn SEO của Google khi làm website từ giao diện đến cấu trúc nội dung và onpage.

Thiết lập vị trí của hình ảnh trong HTML

Chúng ta thường giữ tất cả hình ảnh trong một thư mục riêng. Vì thế hãy lưu các file HTML trong thư mục chính và tạo thư mục phụ image trong thư mục chính để lưu file hình ảnh.

Ví dụ

Giả sử vị trí tệp hình ảnh của chúng ta là “image/test.png”, bạn thử ví dụ sau:

<!DOCTYPE html> <html> <head> <title>Hinh anh trong HTML</title> </head> <body> <p>Vi du the img trong HTML.</p> <img src="./images/dzr-web.png" alt="Hình ảnh trong HTML" /> </body> </html>

Thiết lập chiều cao/độ rộng hình ảnh trong HTML

Bạn có thể thiết lập chiều cao/độ rộng của hình ảnh trên cơ sở sử dụng thuộc tính width và height. Bạn có thể xác định chiều độ rộng, chiều cao của hình sử dụng mối quan hệ hoặc là với Pixel hoặc là với kích thước thật của hình đó.

Ví dụ

<!DOCTYPE html> <html> <head> <title>Thiet lap chieu cao va do rong hinh anh</title> </head> <body> <p>Vi du xac dinh do rong va chieu cao cho hinh anh</p> <img src="./images/dzr-web.png" alt="Hình ảnh trong HTML" width="150" height="100"/> </body> </html>

Thiết lập Border cho hình ảnh trong HTML

Theo mặc định thì sẽ có một Border quanh hình ảnh, bạn có thể xác định độ dày của viền bằng Pixel sử dụng thuộc tính border. Nếu độ dày bằng 0, nghĩa là sẽ không có Border quanh hình ảnh.

Ví dụ

<!DOCTYPE html> <html> <head> <title>Thiet lap border cho hinh anh trong HTML</title> </head> <body> <p>Vi du thiet lap border cho hinh anh</p> <img src="./images/dzr-web.png" alt="Hình ảnh trong HTML" border="3"/> </body> </html>

Căn chỉnh hình ảnh trong HTML

Theo mặc định thì hình ảnh sẽ được căn chỉnh theo cạnh trái của trang web, nhưng bạn có thể sử dụng thuộc tính align để thiết lập lại sự căn chỉnh này: trung tâm hoặc bên phải.

Ví dụ

<!DOCTYPE html> <html> <head> <title>Can chinh hinh anh trong HTML</title> </head> <body> <p>Vi du can chinh hinh anh</p> <img src="./images/dzr-web.png" alt="Hình ảnh trong HTML" border="3" align="right"/> </body> </html>

Chỉ với những bước cơ bản trên thì bạn hoàn toàn có thể edit hình ảnh trong trang web của mình, hy vọng với những chia sẻ trên chúng tôi có thể giúp những bạn đang tự tạo website có thể thêm hình ảnh vào web dễ dàng, giúp web sinh động và thu hút hơn.

  • Facebook
  • Twitter
  • Google+
  • Pinterest
  • LinkedIn
Fake IP bằng Hola Thêm chú thích vào ảnh dễ dàng trong wordpress
  • Trang chủ
  • DZR-WEB
  • Dịch vụ
    • Thiết kế website bán hàng
    • Thiết kế website giới thiệu
    • Thiết kế website E-Learning
    • Thiết kế website nhập hàng
    • Dịch vụ SEO
  • Điều khoản
  • Blogs
  • Liên hệ

Đăng nhập

Tên tài khoản hoặc địa chỉ email *

Mật khẩu *

Đăng nhập Ghi nhớ mật khẩu

Quên mật khẩu?

Từ khóa » Chèn ảnh Vào Web Html