Viết Chữ Đè Lên Ảnh Trong Html, Cách Chèn Hình Ảnh Vào Trang Web Html

Posted on by adminChuyên mục:Kiến thức Internet

Bài viết này, mình sẽ giới thiệu với các bạn cách chèn hình ảnh trong HTML. Trong HTML, hình ảnh được nhận biết thông qua thẻ

Bạn đang xem : Trong html*

Thẻ img là thẻ html bạn dùng tương đối thường xuyên trong quá trình làm web. Vì thế, sau này bạn sẽ vận dụng thẻ img nhiều đó. Bạn dành ra khoảng 30 phút để thực hành với thẻ img(đối với những bạn mới bắt đầu)Công việc đầu tiên bạn cần làm trước khi chèn ảnh, tất nhiên đó là bạn cần tạo một file html để viết code.Bạn đang xem: Viết chữ đè lên ảnh trong html

1. Cách chèn hình ảnh vào file html1. Cách chèn hình ảnh vào file html

Để hiển thị hình ảnh lên web thì bạn sử dụng thẻ img với cú pháp sau:

*
*
Xem thêm : Tải Phần Mềm Làm Nhãn Vở Cá Tính Và Độc Đáo Trên Word, Tạo Một Sổ Sách Hoặc Sách Trong WordRất đơn thuần phải không những bạn

2. Các thuộc tính của thẻ IMG

Thẻ img có vừa đủ những thuộc tính chung của thẻ HTML.Ngoài ra, thẻ img còn có thêm những thuộc tính

2.1 Các thuộc tính hay dùng

src – thuộc tính bắt buộcĐây là thuộc tính chứa đường dẫn trỏ đến file hình ( url ). Có nhiều loại định dạng hình ảnh khác nhau như : gif, png, jpg, …. Và toàn bộ đều có bộc lộ thị được trên website nhờ thẻ img. URL hoàn toàn có thể là URL kèm domain hoặc là URL ở trên máy của bạn ( dạng local ). Ví dụ :hillarypac.org/canh.jpgimages/cooking.pngalthillarypac.org/canh.jpgimages/cooking.png

Thuộc tính này cho phép bạn hiển thị một đoạn text thay thế cho hình ảnh khi url bị sai hoặc có lỗi kết nối. Nghĩa là nó sẽ hiển thị đoạn text thay cho hình ảnh.Ví dụ:

*
. Thuộc tính này không bắt buộc. Tuy nhiên, khi làm chuyên nghiệp thì nó cần có vì tốt cho SEO

. Thuộc tính này không bắt buộc. Tuy nhiên, khi làm chuyên nghiệp thì nó cần có vì tốt cho SEO

*
width và heightThuộc tính thiết lập chiều rộng ( width ) và độ cao ( height ) cho hình ảnh : Ví dụ :

2.2 Các thuộc tính khác

ismapusemap

3. Hỗ trợ các định dạng hình ảnh

ismapusemap

Chuẩn HTML không đưa ra một danh sách định dạng được hỗ trợ. Tuy nhiên, mình xin được giới thiệu với các bạn một số định dạng thường dùng với thẻ JPEG, GIF, PNG, APNG, SVG, BMP, BMP ICO, PNG, ICO

4. Một số cách sử dụng thẻ img

Ví dụ 1:Kết hợp với thẻ a để tạo link cho hình ảnh. Nghĩa là khi click vào hình ảnh sẽ ra 1 trang mớiĐể tạo link cho một hình ảnh, rất đơn thuần là bạn đặt thẻ img bên trong thẻ a

https://final-blade.com/cong-nghe/hoc-html.html” >Ví dụ 2: Căn ảnh nằm ở bên trái hoặc bên phải của đoạn văn bản.Sử dụng thuộc tính css float để đưa ảnh sang bên trái hoặc bên phải đoạn văn bản

Ảnh nằm bên phải, chữ nằm bên trái

Ảnh nằm bên trái, chữ nằm bên phảiVí dụ 3:Thẻ img tích hợp với map để tạo map hình ảnh

Xem bài này để biết cách sử dụng thuộc tính Map trong thẻ Kết luận: Trong bài mình đã giới thiệu cho các bạn cách sử dụng thẻ img để tạo hình ảnh đơn giản trong HTML. Ngoài ra các bạn có thể kết hợp thẻ img với một số thẻ khác để làm những chức năng khá hữu ích khác. Mình cũng có một lời khuyên nho nhỏ cho các bạn là khi chèn ảnh trong html các bạn luôn đảm bảo đủ 2 thuộc tính src và alt nhé, để theo chuẩn w3c.

admin