Hình ảnh là một phần rất quan trọng của trang web vì nó cải thiện sự xuất hiện của trang web và tăng tương tác với khách hàng. USP của nhiều trang web là cách họ sắp xếp các hình ảnh khác nhau trên trang web của mình và thêm hương vị cho nó. Trong này Bài viết hình ảnh, chúng ta sẽ hiểu cách nhúng hình ảnh vào trang web bằng HTML theo thứ tự sau:
Cách thêm hình ảnh vào HTML
Để nhúng hình ảnh vào trang web, HTML cung cấp cho bạn nhãn. Một điểm quan trọng khác cần nhớ là,
không có thẻ đóng. scr thuộc tính được sử dụng để chỉ định đường dẫn của hình ảnh, có thể là url hoặc đường dẫn hình ảnh từ hệ thống / máy chủ. Trước tiên, chúng ta hãy bắt đầu với cú pháp cơ bản của việc nhúng hình ảnh vào trang web bằng HTML.
Cú pháp
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Mã mẫu
Hình ảnh HTML Nhúng hình ảnh vào trang web
Tương tự như các thẻ khác, có nhiều thuộc tính khác nhau được liên kết với nhãn. Chúng ta hãy xem xét từng cái một, hiểu nhu cầu và cách sử dụng chúng.
Thẻ hình ảnh HTML
- Thuộc tính alt
Thuộc tính alt là văn bản thay thế cho hình ảnh. Lý do tại sao thuộc tính alt được giới thiệu là nếu vì bất kỳ lý do gì mà hình ảnh không thể tải thì một văn bản thay thế sẽ xuất hiện đưa ra ý tưởng về hình ảnh. Các lý do khiến hình ảnh không tải được có thể là kết nối internet chậm hoặc hình ảnh không nằm trong nguồn được cung cấp, v.v.
Nếu hình ảnh nằm trong cùng một thư mục chứa tệp HTML, bạn có thể chỉ định trực tiếp tên của tệp. Nếu không, bạn có cung cấp đường dẫn tuyệt đối của tệp hình ảnh.
Giá trị của thuộc tính alt phải mô tả hình ảnh.
Thí dụ
Hình ảnh HTML Nhúng hình ảnh vào trang web
làm cách nào để cài đặt php
- Chiều rộng và chiều cao của hình ảnh
Thuộc tính Style được sử dụng để đặt chiều cao và chiều rộng của hình ảnh. Trong thuộc tính style, bạn chỉ định kiểu CSS.
Hình ảnh HTML Nhúng hình ảnh vào trang web
Một số điểm quan trọng khi nhúng hình ảnh vào trang web bằng HTML là:
- Thuộc tính chiều rộng và chiều cao được xác định bằng pixel.
- Bạn cũng có thể xác định chiều rộng và chiều cao của hình ảnh theo tỷ lệ phần trăm. Nó sẽ xem xét tỷ lệ phần trăm theo toàn bộ trang web.
- Nếu bạn chỉ xác định một trong số chúng thì nó sẽ điều chỉnh cái khác cho phù hợp.
- Nhúng hình ảnh bằng URL
HTML cũng cung cấp cho bạn sự linh hoạt trong đó bạn có thể chọn hình ảnh từ một máy chủ khác chỉ bằng cách chỉ định URL. Bạn có thể sử dụng một máy chủ riêng để lưu trữ hình ảnh và sau đó nhúng các hình ảnh đó bằng URL.
Hình ảnh HTML Nhúng hình ảnh vào trang web
- Hình ảnh dưới dạng liên kết
Bạn cũng có thể sử dụng hình ảnh như một liên kết nơi người dùng có thể nhấp vào hình ảnh và truy cập vào một trang web mới. Để làm như vậy, bạn chỉ cần đặt ngày trong nhãn.
Hình ảnh HTML Nhúng hình ảnh vào trang web
- Hình ảnh nổi
Bạn cũng có thể điều chỉnh căn chỉnh của hình ảnh bằng cách sử dụng thuộc tính float của CSS. Tất cả thuộc tính CSS cần được chỉ định trong thuộc tính style.
Hình ảnh HTML
- Bản đồ hình ảnh
Đây là một trong những tính năng quan trọng được cung cấp bởi HTML. thẻ giúp xác định một bản đồ hình ảnh. Bạn phải tự hỏi bản đồ hình ảnh là gì. Bản đồ hình ảnh là hình ảnh có các khu vực có thể nhấp
Hình ảnh HTML
- Hình nền
Bạn cũng có thể thêm hình nền vào trang web. Bạn chỉ cần sử dụng thuộc tính CSS, tức là background-image trong thẻ style và thêm nó vào phần tử HTML.
Hình ảnh HTMLHình nền
Yếu tố CƠ THỂ
Với điều này, chúng ta đến phần cuối của Blog Hình ảnh HTML này.Bây giờ sau khi thực hiện các đoạn mã trên, bạn đã hiểu cách chèn hình ảnh trong HTML. Tôi hy vọng blog này là thông tin và giá trị gia tăng cho bạn.
Kiểm tra của chúng tôi đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này giúp bạn thành thạo các kỹ năng làm việc với công nghệ web back-end và front-end. Nó bao gồm đào tạo về Phát triển Web, jQuery, Angular, NodeJS, ExpressJS và MongoDB.
c ++ nhảy sang dòng
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog “Hình ảnh HTML” và chúng tôi sẽ liên hệ lại với bạn.