Chèn hình ảnh trong HTML

Trong bài viết trước, mình đã hướng dẫn các bạn tạo một bảng trong trang HTML

Ở bài này, mình sẽ hướng dẫn các bạn thể hiện hình ảnh trong tài liệu viết bằng ngôn ngữ HTML.

Ví dụ:

<img src="/thư-mục-chứa-ảnh/tên-ảnh.jpg">

Cách viết như trên sẽ cho hiển thị một tấm hình có trên trang web của bạn rồi.

<img src="http://domain-khác.com/thư-mục-chứa-ảnh/tên-ảnh.jpg">

Cách hiển thị một tấm hình từ một thư mục khác hoặc từ một server khác trên trang web của bạn.

Thẻ img và thuộc tính src:

Như chúng ta biết, trong HTML, hình ảnh được xác định bởi thẻ <img>. Nhưng nếu chỉ mình thẻ img không thì chưa đủ để hiển thị hình ảnh trên trang web của bạn được. Mà chúng ta phải cần đến thuộc tính src. Trước tiên ta cần biết rằng Src là chữ viết tắt của source. Giá trị của thuộc tính src chính là địa chỉ URL của hình ảnh mà bạn muốn hiển thị trên trang web.

Dưới đây sẽ là cú pháp cơ bản nhất để hiển thị một bức ảnh trên web.

<img src="url">

Trình duyệt sẽ hiển thị hình ảnh nơi mà có thẻ image được chèn trong tài liệu. Nếu bạn muốn thêm thẻ image vào giữa một đoạn văn, trình duyệt sẽ hiển thị đoạn văn thứ nhất trước, sau đó đến hình và sau cùng là đoạn văn thứ hai.

Thuộc tính Alt

Vì bọ tìm kiếm của google, bing hay yahoo,.... không thể hiểu được hình đó là gì, có nội dung như thế nào. Chính vì vậy để nó có thể hiểu được chúng ta cần thêm vào cho thẻ img thuộc tính alt. Thuộc tính này được sử dụng để xác định chữ thay cho hình. Và nếu hình đó không hiện được thì một dòng chữ này sẽ xuất hiện để báo cho người đọc biết. Gía trị của thuộc tính alt là một dòng chữ như sau:

<img src="logo.jpg" alt="Việt Blogger">

Thuộc tính alt báo cho người đọc biết họ không xem được hình gì khi mà trình duyệt không load được hình đó. Trình duyệt sau đó sẽ hiển thị dòng chữ thay vì hình ảnh. Bạn nên tạo cho mình thói quen thêm thuộc tính "alt" vào mỗi tấm hình trên một trang, để tăng khả năng hiển thị và giúp những người lướt web mà không dùng hình ảnh.

Và kết quả của việc sử dụng thuộc tính này là