Các website lớn như BBC hay Tuổi Trẻ luôn cho các hình ảnh minh họa trên trang web của họ nằm trong 1 cái khung và được đặt bên trái hoặc phải nội dung bài viết. Chúng ta cũng thấy một vài dòng miêu tả nhỏ đặt bên dưới mỗi hình. Các dòng chữ này miêu tả về bức hình bạn xem và đôi khi chứa thông tin bản quyền của bức ảnh.
Hình minh họa trên BBC
Có hai điều lợi khi thêm miêu tả vào một bức ảnh:
1. Tạo phong cách riêng và thân thiện cho người sử đọc: người đọc có thể biết được ngữ cảnh của bức ảnh, bức ảnh được nêu ra để nói về điều gì và những dòng miêu tả nhỏ này giúp người đọc nắm được nội dung bài viết mà không cần phải xem tòan bộ nội dung.
2. Vì nục đích SEO: vì các dòng miêu tả này nằm gần bức ảnh nó sẽ giúp bức ảnh được đánh giá và xếp hạng cao hơn trên các cỗ máy tìm kiếm.
Vậy làm thế nào để thêm các dòng miêu tả và canh chỉnh các bức ảnh trên trang web?
Hình minh họa trên Tuổi Trẻ
Chỉ với một vài dòng mã CSS và HTML đơn giản là bạn có thể biến các bức ảnh trên trang web của mình trông giống như của BBC và Tuổi Trẻ.
Đầu tiên bạn thêm đoạn mã CSS sau đây vào file CSS của bạn hoặc dán nó vào template blog của bạn phía sau tag <HEAD>
<style type="text/css">
.picture { background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
</style>
Bước tiếp theo bạn thêm đoạn mã sau đây vào nơi mà bạn muốn đặt bức ảnh của mình. Thao tác này cũng giống như bạn thêm 1 bức ảnh bình thường nhưng ở đây nó được đặt trong một tag <DIV>
<div class="picture left" style="width:278px;"> <img src="đường dẫn" width="276" height="120" alt="tên miêu tả ảnh" /> <br />các dòng miêu tả ở đây </div>
Trong đoạn mã trên thì đường dẫn chính là đường dẫn của bức ảnh, tên miêu tả ảnh là dòng chữ sẽ hiện lên thay bức ảnh khi nó không hiện được. Khung hình được canh trái mói dòng lệnh class="picture left", nếu bạn muốn khung hình xuất hiện bên phải thì bạn thay left bằng right trong dòng lệnh trên. Ở đây chiều rộng của khung chứa hình được xác định là 278, bạn có thể thay đổi chiều rộng khung bằng cách thay đổi giá trị 278 này. Chiều rộng và cao của bức ảnh được cho lần lượt là 276 và 120, bạn cũng có thể thay đổi nó cho phù hợp với bức ảnh của mình. Nếu bạn hay sử dụng các thẻ HTML thì chúng rất quen và dễ dàng đúng không? Khi bạn muốn thay đổi cách canh lề, màu chữ hay kích thước font... thì bạn chỉnh sửa phần mã trong CSS ở trên.
