Thẻ là một thẻ HTML được sử dụng để chèn ảnh vào trang web. Nó là một thẻ rỗng, có nghĩa là không có thẻ đóng tương ứng, và chỉ chứa các thuộc tính để cung cấp thông tin về ảnh như đường dẫn và mô tả. Trong bài viết này Stringee sẽ cùng bạn tìm hiểu về thẻ này cũng như cách chèn ảnh trong HTML.
1. Cách chèn ảnh vào HTML với thẻ IMG
Để chèn ảnh vào trang web của bạn bằng HTML, bạn cần sử dụng thẻ và cung cấp đường dẫn [URL] tới tệp ảnh. Lưu ý:
- Đảm bảo rằng bạn đã có tệp ảnh trên máy tính hoặc một đường dẫn URL tới tệp ảnh trên Internet.
- Tạo một thẻ trong mã HTML của bạn. Thẻ này sẽ là nơi chứa ảnh.
Dưới đây là cú pháp để chèn một ảnh vào HTML:
- Trong đó, thuộc tính src chứa đường dẫn tới tệp ảnh. Nếu tệp ảnh nằm trong cùng thư mục với tệp HTML của bạn, bạn chỉ cần cung cấp tên tệp ảnh. Nếu ảnh nằm ở một thư mục khác, bạn cần cung cấp đường dẫn tương đối hoặc đường dẫn tuyệt đối.
- Thuộc tính alt là văn bản mô tả ảnh, nó sẽ hiển thị khi không thể tải được hoặc khi người dùng di chuột qua ảnh. Đây là một yếu tố quan trọng cho truy cập và tối ưu hóa SEO.
\>>> Xem thêm bài viết về HTML:
- Các cách phổ biến để nhúng CSS vào HTML
- Thẻ a trong HTML
2. Các thuộc tính của thẻ IMG
- src: Xác định đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web Ví dụ:
- alt: Xác định một nội dung văn bản sẽ được hiển thị thay thế khi đường dẫn đến tập tin hình ảnh không chính xác Ví dụ:
- border: Xác định độ dày của đường viền bao xung quanh tấm hình Ví dụ:
- width: Thiết lập chiều rộng cho tấm hình Ví dụ:
- height: Thiết lập chiều cao cho tấm hình Ví dụ:
- vspace: Xác định khoảng cách lề phía trên và lề phía dưới của tấm hình Ví dụ:
- hspace: Xác định khoảng cách lề bên trái và lề bên phải của tấm hình Ví dụ:
- align: Xác định vị trí của tấm hình so với các văn bản xung quanh Ví dụ:
- usemap: Xác định một "bản đồ hệ thống tọa độ của các vùng" để kết hợp với tấm hình, tạo ra một bản đồ ảnh. Bạn sẽ được tìm hiểu rõ về thuộc tính này trong bài thẻ &
\>>> Xem thêm bài viết: - Node.js là gì? Kiến thức tổng quan từ A-Z về Node.js
- Giải thích về Asynchronous trong JavaScript và cách thức hoạt động
- NestJS là gì? Tính năng hữu ích của NestJS đối với lập trình viên
3. Những lưu ý khi sử dụng thẻ IMG
- Thẻ img luôn thi kèm với thuộc tính alt để tối ưu hóa công cụ tìm kiếm tốt hơn
- Kích thước của ảnh không nên quá lớn, không nên vượt quá 500KB/ảnh để tránh trường hợp load ảnh quá lâu, tốn lưu lượng của người sử dụng.
Tổng kết
Chúng ta đã tìm hiểu xong về thẻ IMG và cách sử dụng thẻ IMG trong HTML. Hiện nay trong hầu hết các bài viết, ngoài nội dung văn bản thì hình ảnh cũng là một dạng nội dung phổ biến trên web. Vì thế thao tác chèn ảnh vào website là một kỹ năng không thể thiếu ở lập trình viên website.
Stringee hiện là đơn vị cung cấp bộ giải pháp giao tiếp Communication APIs giúp doanh nghiệp dễ dàng tích hợp các tính năng giao tiếp như gọi thoại/gọi video/chat vào ứng dụng hoặc website sẵn trong thời gian ngắn với chi phí tối ưu nhất. Giải pháp này cũng được hỗ trợ cho nền tảng React Native, chi tiết xin mời quý bạn đọc xem thêm tại đây.
Thông thường để thay đổi phông nền cho một hình ảnh, bạn cần nhờ đến những phần mềm xử lý ảnh chuyên nghiệp, cắt đối tượng ra khỏi nền của hình ảnh sau đó ghép đối tượng đó vào phông nền mới. Tuy nhiên, với ứng dụng miễn phí dưới đây, mọi chuyện đều được thực hiện một cách tự động và rất nhanh chóng.
Teleport - Auto Background Change [gọi tắt là Teleport] là ứng dụng xử lý ảnh miễn phí cho phép tự động nhận diện đối tượng có trong hình ảnh, sau đó cắt đối tượng ra khỏi hình ảnh gốc và ghép đối tượng đó vào một nền mới. Người dùng có thể chọn sẵn các hình nền do ứng dụng cung cấp hoặc lựa chọn hình nền của riêng mình, để có thể tạo ra những bức ảnh độc đáo và thú vị.
Với người dùng Android, download ứng dụng miễn phí tại đây hoặc tại đây [tương thích Android 4.4 trở lên].
Ứng dụng cho phép người dùng chụp một hình ảnh mới để bắt đầu xử lý hoặc lựa chọn các hình ảnh có sẵn trên thiết bị để xử lý. Giao diện của ứng dụng là giao diện chụp ảnh, người dùng có thể nhấn vào nút “Gallery” để chọn những hình ảnh sẵn có trên thiết bị.
Sau khi chọn, ứng dụng sẽ yêu cầu người dùng cắt lại hình ảnh để sử dụng cho phù hợp với tỷ lệ do ứng dụng cung cấp. Bạn có thể nhấn vào dấu tích ở góc trên bên sau khi đã cắt lại hình ảnh cho hợp lý.
Sau khi cắt ảnh, ứng dụng sẽ tự động nhận diện đối tượng có trong ảnh và sẽ xử lý để xóa đi nền của hình ảnh, chỉ giữ lại đối tượng chính này, sau đó ghép đối tượng đã được chọn vào phông nền sẵn có của ứng dụng một cách rất chuẩn xác và đẹp mắt.
Bạn có thể sử dụng hai ngón tay để phóng to/thu nhỏ đối tượng trên nền ghép để giúp thay đổi tỷ lệ sao cho phù hợp và đẹp mắt nhất với nền đã được chọn.
Ứng dụng cung cấp sẵn cho người dùng một vài phông nền để lựa chọn ghép ảnh của mình vào đó, bạn có thể lựa chọn phông nền nào cho phù hợp nhất với bức ảnh của mình. Trong trường hợp bạn muốn cắt và ghép ảnh vào một phông nền do tự mình chọn, bạn nhấn nút “Set custom background” rồi chọn hình ảnh mà bạn muốn sử dụng làm nền.
Sau khi chọn hình ảnh muốn làm nền để ghép, ứng dụng cũng yêu cầu người dùng phải cắt lại hình ảnh này để phù hợp với kích cỡ ảnh do ứng dụng tạo ra. Nhấn dấu tích ở góc trên bên phải để lưu lại hình ảnh nền đã cắt.
Một khi đã xử lý xong hình ảnh nền, lập tức ứng dụng sẽ ghép đối tượng trong bức ảnh của bạn vào hình nền đã chọn để tạo ra một bức ảnh mới.
Để lưu lại hình ảnh sau khi đã ghép phông nền mới, bạn nhấn vào biểu tượng dấu mũi tên chỉ lên có trên giao diện ứng dụng, sau đó chọn biểu tượng Facebook để chia sẻ hình ảnh lên Facebook hoặc biểu tượng mũi tên chỉ xuống để lưu hình ảnh vào thiết bị của mình. Bạn cũng có thể nhấn vào biểu tượng dấu “...” để có thêm nhiều tùy chọn chia sẻ hình ảnh, như gửi qua email hay gửi qua tin nhắn Messenger...
Quá trình xử lý của Teleport đều được thực hiện một cách tự động và rất chuẩn xác, người dùng chỉ việc tùy chọn hình ảnh và phông nền để quá trình ghép ảnh được thực hiện. Có thể nói Teleport là một ứng dụng xử lý ảnh hữu ích và thú vị để bạn có thể tự tạo ra cho mình những hình ảnh độc đáo nhất.