Hình Ảnh

Để tạo hình ảnh chúng ta dùng thẻ <img>:

<img src="http://www.hoclaptrinh.org/img/logo.png" width="200">

Chạy

Lưu ý: Thẻ <img> là thẻ tự đóng nên chúng ta chỉ dùng thẻ mở là được.

Ở ví dụ trên, trong thẻ mở chúng ta thấy có thuộc tính src. Thuộc tính này dùng để quy định đường dẫn của ảnh. Đường dẫn này có thể là đường dẫn tuyệt đối (như ở ví dụ trên) hoặc trong trường hợp liên kết của hình ảnh và liên kết của trang hiện tại có cùng một tên miền ta có thể sử dụng đường dẫn tương đối như sau:

<img src="/img/logo.png" width="200">

Chạy

Thuộc Tính width Và height

Thuộc tính widthheight dùng lần lượt để quy định bề rộng và bề dài của ảnh. Nếu các thuộc tình này không xuất hiện trong thẻ <img> thì chúng sẽ có giá trị mặc định là 100% bề rộng hoặc bề dài của ảnh gốc.

<img src="http://www.hoclaptrinh.org/img/logo.png" width="50%">

Chạy

Thuộc Tính title

Thuộc tính title quy đinh tiêu đề của ảnh. Khi người dùng rê chuột lên trên ảnh thì trình duyệt sẽ hiển thị một popup nhỏ với nội dung là giá trị của thuộc tính title này.

<img src="http://www.hoclaptrinh.org/img/logo.png" width="50%" title="Logo hoclaptrinh.org">

Chạy

Thuộc Tính alt

Thuộc tính alt (viết tắt của từ alternative nghĩa là thay thế) được các máy tìm kiếm như Google hay Bing sử dụng để xác định nội dung của hình ảnh vì các máy tìm kiếm này không thể đọc được hình ảnh mà chỉ đọc được văn bản.

<img src="http://www.hoclaptrinh.org/img/logo.png" width="50%" alt="Logo hoclaptrinh.org">

Chạy

Mặc dù không tạo ra sự khác biệt nào khi được hiển thị trên trình duyệt. Bạn vẫn nên sử dụng thuộc tính alt vì nó giúp các máy tìm kiếm đọc tốt hơn nội dung của trang.

HTML Frontend Thiết Kế Web
Thêm Bình Luận: