Hôm nay Kiến càng 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="thu-muc-anh/ten-anh.jpg" alt="mô tả cho ảnh" height="chiều cao của ảnh" width="chiều rộng của ảnh" />
- 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 có thể 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ế. Nó còn có tác dụng trong SEO (Search Engine Optimize / Tối ưu cho máy tìm kiếm), khi giúp máy tìm kiếm hiểu được nội dung cơ bản của bức ảnh; 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. PS: một số CMS như WordPress sẽ không hiển thị ảnh nếu bạn không chỉ định cụ thể giá trị củaheight
vàwidth
. Ví dụ:height="100" width="100"
;- Đơ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 vỡ / 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 (tuy nhiên một số trình duyệt xử lý được vấn đề này để nó không 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, nó sẽ hiện ra thẻ alt- một thẻ quan trọng trong SEO ảnh:

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ên đặt tên ảnh không dấu viết cách nhau bởi dấu – để tránh các lỗi liên quan đến tên ảnh);
Lỗi không hiển thị ảnh là một lỗi nghiêm trọng không chỉ với SEO mà còn là với trải nghiệm người dùng (họ sẽ rất tức giận!).
Một những nguyên nhân hàng đầu gây ra vấn đề này là do sử dụng ảnh từ bên thứ ba (ảnh có đường dẫn từ website khác), do vậy bạn không nắm toàn quyền ảnh có hiển thị hay còn được lưu trữ hay không.
Bạn có thể dùng các công cụ kiểm tra liên kết gãy 404 để xem các ảnh trên website của bạn có hiển thị bình thường không.
- 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, bạn có thể dùng thêm thuộc tính
target="_blank"
để ảnh mở ra trong tab mới:
<a href="https://kiencang.net/"><img src="images/ducanh.jpg" alt="Kiến càng" /></a>
Kết quả:

Đườ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 (so với alt thì title không quan trọng bằng, WordPress tự động lấy thông tin của thẻ alt để điền vào thẻ title):
<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à chỉ dùng ảnh khi cần thiết, đ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. Cái này đặc biệt quan trọng nếu bạn đang dùng hosting nhỏ hoặc/và cần tối ưu tốc độ;
- Nên dùng phần mềm để giảm dung lượng ảnh khi cần (ưu tiên nén ảnh không mất chất lượng), không dùng ảnh có kích thước quá lớn so với mức cần thiết (ví dụ màn hình chỉ rộng 800px nhưng bạn dùng ảnh có kích cỡ 2000px). PS: với WordPress bạn nên sử dụng các plugin tối ưu ảnh thay vì dùng phần mềm;
- 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 không quá lớn thì để ảnh trên hosting của bạn vẫn tốt cho SEO hơn & giảm rủi ro mất ảnh do bên thứ ba xóa hoặc tạm ngừng dịch vụ.
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.
Anh ơi cho em hỏi là chỉ cần lưu mã code như anh ghi ở trên là sẽ mở được nội dung ảnh mình cần hay phải gắn thêm gì vào notepad++ ạ?
Không cần gắn thêm gì em nhé, cái notepad++ là trình soạn thảo thôi. Em code, rồi có thư mục ảnh, rồi đặt file html tương ứng với thư mục là ảnh hiện lên thôi.
Mình có thể inb face với bạn trao đổi được không?, mình xin cảm ơn trước.
Mình thích trao đổi công việc qua email hơn. Email của mình đây nhé: ducanhstarbucks@gmail.com
Hi bạn,
Mình không chuyên về HTLM, mình sử dụng blogspot để viết.
Mình có thắc mắc là khi ấn vào hình ảnh bất kì trong bài, nó không hiện lên trình xem ảnh mà bị đẩy đến địa chỉ gốc của hình, đều này khá khó chịu
Không biết cách khắc phục ntn hay có đoạn code nào không?
Mong nhận phản hồi sớm từ bạn
Trang của mình: https://www.binder-vn.com/2018/10/tu-am-binder-bf-115-tu-am-oi-luu-cuong.html
Khi click vào hình sẽ bị dẫn đến trang: https://4.bp.blogspot.com/-KHXWIUlscIg/W8RGDIF5lqI/AAAAAAAABoE/69JwuoqUS-A4BhNkor2hL03pyMOPGxbSgCLcBGAs/s1600/BF115A.jpg
Cái này có khả năng là mặc định của blogspot. Tuy nhiên mình nghĩ có thể thay đổi được theo ý bạn nếu chọn được theme thích hợp. Nhưng lâu rồi mình không dùng blogspot nên tiếc là không có gợi ý nào cho bạn được cả.
Chào bạn,
Mình cũng làm theo hướng dẫn mà hình ảnh xuất bản ra vẫn cứ không theo mình điều chỉnh. Cụ thể là trang này. Bạn xem giúp mình với nhé!
http://www.bestofwhere.com/2019/07/gia-lai-where-hides-series-of-beautiful-scenery.html
Cái bạn đang dùng là blogspot, thì bản thân nó có công cụ giúp mình tùy chỉnh hình ảnh rồi, mình nghĩ không cần phải can thiệp code, đễ đỡ phức tạp. áy bạn có phải là ảnh trên trang sắp xếp không đều?