Sublime Text
<!DOCTYPE html> <html> <head> <style> div.img { margin: 5px; border: 1px solid #ccc; float: left; width: 200px; } div.img:hover { border: 1px solid #777; } div.img img { width:100%; height: auto; } div.desc { padding: 10px; text-align: center; } </style> </head> <body> <div class="img"> <a href="../image/h1.jpg" target="_blank"> <img src="../image/h1.jpg"> </a> <div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div> </div> <div class="img"> <a href="../image/h2.jpg" target="_blank"> <img src="../image/h2.jpg"> </a> <div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div> </div> <div class="img"> <a href="../image/h3.jpg" target="_blank"> <img src="../image/h3.jpg"> </a> <div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div> </div> <div class="img"> <a href="../image/h4.jpg" target="_blank"> <img src="../image/h4.jpg"> </a> <div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <style> div.img { margin: 5px; border: 1px solid #ccc; float: left; width: 200px; } div.img:hover { border: 1px solid #777; } div.img img { width:100%; height: auto; } div.desc { padding: 10px; text-align: center; } </style> </head> <body> <div class="img"> <a href="../image/h1.jpg" target="_blank"> <img src="../image/h1.jpg"> </a> <div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div> </div> <div class="img"> <a href="../image/h2.jpg" target="_blank"> <img src="../image/h2.jpg"> </a> <div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div> </div> <div class="img"> <a href="../image/h3.jpg" target="_blank"> <img src="../image/h3.jpg"> </a> <div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div> </div> <div class="img"> <a href="../image/h4.jpg" target="_blank"> <img src="../image/h4.jpg"> </a> <div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div> </div> </body> </html>