Làm quen với tag <img>

Có bạn gửi tin nhắn trên meebo room của ThuThuatChoBlogger.BlogSpot.com hỏi làm thế nào để hiển thị một hình nhỏ mà khi click vào hình này thì một hình lớn hơn của nó hiện ra. Thật ra nếu bạn là dân IT thì chuyện này quá đơn giản, những người chưa biết về HTML (hypertext markup language: ngôn ngữ đánh dấu siêu văn bản) thì thấy nó rối lắm và phức tạp. Tôi sẽ hướng dẫn bạn về tag này.

Những gì bạn nhìn thấy trên trình duyệt của bạn như hình ảnh, âm thanh, ký tự … khi bạn lướt web thật ra nó được lưu trữ ở đâu đấy trên các webserver. Chúng được liên kết với nhau thông qua những siêu liên kết (hyperlink), được tải về máy của bạn và hiển thị trên trình duyệt.

Trước hết, để hiển thị một hình ảnh, trong HTML hình ảnh này phải để trong tag <img>

Nếu bạn có liên kết đến hình ảnh. Ví dụ: http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif để hiện thị bạn phải đặt nó nắm trong tag <img> như sau:

<img src="http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" />

Không giống các tag khác, tag <img> không có tag đóng vì vậy người ta thêm dấu / ở cuối.
Src (source): là liên kết đến hình ảnh. Hình ảnh là những file có phần mở rộng .jpg, .bmp, .gif,…

Kết quả hiển thị:

Tag <img> còn một số thuộc tính khác.

<img border="0" width="100" height="100" alt="Tên hình ảnh hoặc tên của liên kết thay thế" src=”http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif” />

Border: dòng kẻ bao quanh hình.

Width và height: kích thước chiều rộng và cao của hình bằng đơn vị pixel hoặc phần trăm lớn hơn hay nhỏ hơn ảnh gốc. Ví dụ: width="468" height="60" kích cở banner mà bạn thường thấy, width="90%" heighr="90%" kích cở nhỏ hơn ảnh gốc 100% - 90%=10%.

Alt (alternate): Tên hình ảnh hoặc tên của liên kết thay thế, thường là để chú thích, dòng chữ này sẽ hiển thị trước trong khi chờ hình ảnh hiển thị.

Nếu bạn muốn text liên kết đến hình ảnh, bạn cần phải biết tag <a>. Tag đóng của nó là </a>.

<a href=”http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif” />Hình ảnh</a>

Kết quả hiển thị

Hình ảnh

Nếu bạn muốn Hình ảnh liên kết đến một trang web, bạn cần thay text bằng tag dùng cho hình ảnh như ở trên.

<a href="http://www.giangdaytructuyen.com"/><img border="0" src="http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" />
</a>

Ví dụ tôi sử dụng link đến trang http://www.giangdaytructuyen.com

Kết quả hiển thị:

Nếu bạn muốn hình ảnh link đến hình ảnh, như vậy sẽ là

<href="http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb2.gif"/><img    border="0" src="http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" />
</a>

Kết quả hiển thị:

Nếu bạn chỉ có một hình, muốn cho hình này hiển thị ở kích thước nhỏ và khi click vào thì nó hiển thị kích thước lớn, như chế độ xem ảnh thumbnails của hệ điều hành, thì bạn định lại kích thước width và height:

Ví dụ: Ảnh gốc 90 pixels, tôi cho nó 50 pixels:

<a href="http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" ><img width="50" weight="50" src="http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" />
</a>

Kết quả hiển thị

Bạn có thể định theo phần trăm.

Chưa hết nếu bạn muốn khi click vào hình này thì tự động một cửa sổ mới chứa hình ảnh hiển thị chứ không phải hình ảnh load thay thế ngay trang bạn đang xem, bạn cần thêm target="_blank"

<a href="http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" target="_blank"><img width="50" weight="50" src="http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" />
</a>

Bạn click vào kết quả này để hiểu hơn.

Để sử dụng tag này, ngay tại cửa sổ đăng bài của bạn, click trên Edit Html để chèn tag vào nơi bạn cần minh hoạt hình ảnh và soạn thảo.

Chúc bạn thành công.