Cách chèn hình ảnh trong html bài 4 Người đăng: Chiến Thần Ngày: 23122016 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ẻ . Thẻ là thẻ rỗng, nó không có thẻ đóng. Để tìm hiểu chi tiết, các bạn theo dõi bài viết sau: Học HTML Cách chèn hình ảnh 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. 1. 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: Ví dụ: Và kết quả hiển thị trên web sẽ là: Học HTML Cách chèn hình ảnh trong html Rất đơn giản phải không các bạn 2. Các thuộc tính của thẻ IMG Thẻ img có đầy đủ các thuộc tính chung của thẻ HTML. Ngoài ra, thẻ img còn có thêm các 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à tất cả đều có thể hiện thị được trên website nhờ thẻ img. URL có thể là URL kèm domain hoặc là URL ở trên máy của bạn (dạng local). Ví dụ: tech12h.comcanh.jpg imagescooking.png alt 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 Học HTML Cách chèn hình ảnh trong html width và height Thuộc tính thiết lập chiều rộng (width) và chiều cao (height) cho hình ảnh: Ví dụ: 2.2 Các thuộc tính khác ismap Sử dụng thuộc tính này thì khi click lên image, tọa độ vị trí click chuột sẽ được gửi về server. Thuộc tính này chỉ được cho phép khi thẻ được đặt trong thẻ a với một href hợp lệ. usemap Sử dụng thẻ để thiết lập một bản đồ ảnh. Một bản đồ ảnh là một hình ảnh với các khu vực có thể click. Thuộc tính name của thẻ được kết hợp với thuộc tính usermap để tạo ra một mối quan hệ giữa hình ảnh và bản đồ. Thẻ có chứa một số thẻ để thiết lập vùng có thể click vào hình ảnh bản đồ. 3. Hỗ trợ các định dạng hình ảnh 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 giản là bạn đặt thẻ img bên trong thẻ a 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ải
Ví dụ 3: Thẻ img kết hợp với map để tạo bản đồ 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.
Cách chèn hình ảnh html [bài 4] Người đăng: Chiến Thần - Ngày: 23/12/2016 Bài viết này, giới thiệu với bạn cách chèn hình ảnh HTML Trong HTML, hình ảnh nhận biết thơng qua thẻ Thẻ thẻ rỗng, khơng có thẻ đóng Để tìm hiểu chi tiết, bạn theo dõi viết sau: Thẻ img thẻ html bạn dùng tương đối thường xuyên trình làm web Vì thế, sau bạn vận dụng thẻ img nhiều Bạn dành khoảng 30 phút để thực hành với thẻ img(đối với bạn bắt đầu) Công việc bạn cần làm trước chèn ảnh, tất nhiên bạn cần tạo file html để viết code Cách chèn hình ảnh vào file html Để hiển thị hình ảnh lên web bạn sử dụng thẻ img với cú pháp sau: Ví dụ: