Hôm nay Blog Mạng Lưới Toàn Cầu sẽ giới thiệu với bạn thẻ img - một trong các thẻ hay dùng nhất trong HTML, nó sử dụng để đưa hình ảnh vào trang web. Cấu trúc của nó như sau:
<img src="images/ducanh.jpg" alt="Nguyễn Đức Anh" height="100" width="100" />
- Theo đó src dùng để thông báo về nguồn bức ảnh - hay nói cách khác là nơi bức ảnh được lưu trữ. Thông thường bạn sẽ lưu các ảnh ở thư mục riêng có tên là images do vậy trong ví dụ trên đường dẫn của ảnh là: images/ducanh.jpg
- Còn alt dùng trong trường hợp ảnh bị lỗi không tải được thì dòng chữ trong alt sẽ thay thế.
- Height và Width lần lượt là chiều cao và chiều rộng của bức ảnh - bạn có thể dùng chỉ số này để phóng to hoặc thu nhỏ kích cỡ bức ảnh, nếu bạn không để gì thì mặc định bức ảnh sẽ hiện kích cỡ nguyên gốc.
- Đơn vị của Height và Width là px (pixel), trong code bạn không cần điền đơn vị vào, chỉ cần điền số, trình duyệt sẽ tự hiểu nó là px. Ngoài ra nếu có thay đổi kích cỡ ảnh thông qua Height và Width thì thường là bạn thu nhỏ ảnh (so với kích cỡ gốc), chứ ít khi phóng to, vì phóng to hay làm ảnh mờ.
- Giải thích mấy từ viết tắt của code, img là viết tắt của image (hình ảnh), src là viết tắt của source (nguồn), alt là viết tắt của alternative text (văn bản thay thế).
Dưới đây là các ví dụ minh họa cụ thể:
- Ảnh với kích cỡ nguyên gốc:
- Vẫn ảnh trên nhưng dùng width và height để giảm kích cỡ:
- Nếu width và height không đúng tỷ lệ sẽ dẫn tới ảnh bị méo:
- Nếu vì một lý do nào đó mà ảnh không tải được bạn sẽ thấy hình bên dưới:
Có bạn hỏi, trường hợp lỗi xảy ra khi nào, nó xảy ra khi bạn để đường dẫn ảnh không đúng, ảnh không tồn tại trong thư mục hoặc tên ảnh sai.
- Nếu bạn muốn click vào ảnh để nó dẫn đến bài viết (giống như các tờ báo mạng) thì bạn bao thẻ a ở bên ngoài thẻ ảnh với cấu trúc như sau:
<a href="http://www.mangluoitoancau.com/"><img src="images/ducanh.jpg" /></a>
Đường link muốn dẫn ở trong thuộc tính href của thẻ <a>. Bạn thử click vào ảnh trên, nó sẽ mở tab mới dẫn đến trang chủ của blog.
- Để SEO (tối ưu hóa với máy tìm kiếm) cho ảnh và cũng để ảnh cung cấp nhiều thông tin hơn tới người đọc, bạn còn có thuộc tính title, dưới đây là code mẫu:
<img alt="Nguyễn Đức Anh" src="images/ducanh.jpg" title="Nguyễn Đức Anh" />
Giờ bạn thử di chuột vào ảnh trên, sẽ thấy xuất hiện chữ Nguyễn Đức Anh, đây chính là title của ảnh, nó cũng giống kiểu tiêu đề của bài viết.
- Trong CSS thì để tác động đến ảnh bạn dùng lệnh sau:
img {
Lệnh CSS được gõ ở đây;
}
Các lệnh hay dùng nhất là margin để căn lề cho ảnh, căn ảnh chính giữa, float để cho ảnh trôi về bên trái hoặc bên phải.
- Vì hình ảnh chiếm chủ yếu dung lượng đường truyền nên lời khuyên là không nên dùng ảnh quá nhiều, điều đó làm trang web đỡ tốn không gian lưu trữ, băng thông, và người dùng cũng tải trang nhanh hơn.
- Nên dùng phần mềm để giảm dung lượng ảnh khi cần, không dùng ảnh quá lớn so với mức cần thiết.
- Có thể lưu trữ ảnh ở các dịch vụ trung gian để tránh tốn băng thông cho host, nhưng điều đó chỉ cần khi trang web có lưu lượng truy cập lớn, còn nếu ít thì để ảnh trên hosting của bạn vẫn tốt hơn.
Ngoài ra bạn có thể thích hiệu ứng phóng to ảnh bằng CSS3 hoặc code bo tròn ảnh.
Xem thêm:
No comments:
Post a Comment