Định vị - định vị ảnh theo kiểu RFA (đang soạn)

Định vị một đối tượng trên trang blog (Bài viết cho lớp 2 tin học - các ông bà già) --------------------------------------------------------------- Vài khái niệm cơ sỏ: Trang là tất cả những gì xuất hiện trên màn hình. Ta thường nói trang web, trang blog. Xuất hiện trên màn hình có thể gồm các table , box, khung, cột, văn bản, hình ảnh, video, âm thanh, marquee ..... hoặc kết hợp giữa chúng, ta gọi chung là các đối tượng. Các đối tượng xuất hiện có vị trí rõ ràng (không cái nào đè chồng lên hay che khuất cái nào, trừ có marquee có thể cho phép chạy che chốc lát). Việc xếp đặt vị trí của các đói tượng trong một trang gọi tắt là định vị. Định vị có 3 kiểu : Trái, phải, giữa và có xác định tương quan giữa cái này với cái kia. Thông thường một trang web đối tượng được xuất hiện chiếm diện tích lớn nhất là văn bản.. Khi cho một đối tượng khác văn bản ví dụ hình ảnh, video, audio … xuất hiện trên trang thì người ta hay lấy văn bản làm nền để liên hệ. Ví dụ nói có một ảnh hay audio minh họa cho bài viết, .. Vấn đề đặt ra là đối tượng xen lẫn với văn bản nằm ở đâu trên trang văn bản và nó được phân cách với vùng văn bản cạnh nó một khoảng cách là bao?  . Ví dụ đối tượng là ảnh xuất hiện trong bài văn bản thì vấn đề đặt ra là: - Nó nằm ở bên trái hay ở giữa hay  bên phải.? - Khi nó nằm bên trái thì dĩ nhiên văn bản sẽ nằm về bên phải nó và cách nó một khoảng trống đủ để phân biệt. - Khi nó nằm ở bên phải thì văn bản sẽ ở bên trái. - Khi nố nằm chính giữa thì văn bản phải ở phía trên hoặc phía dưới nó Để nhận biết vị trí tương đối của ảnh trên trang văn bản thì kích thước ngang của ảnh phải nhỏ hơn kích thước ngang chuẩn của trang web (blog)  . Cách định vị Có nhiều cách để định vị cho một đối tượng, nhưng thông thường người ta sử dụng HTML để làm việc này. Sau đây xin giới thiệu một ví dụ định vị ảnh mà site RFA hay áp dụng: Giả sử ta có tấm ảnh có địa chỉ sau: http://www.rfa.org/vietnamese/in_depth/chopsticks-become-a-bunch-ml-04072014083205.html/0012-250.jpg Kích thước gốc của ảnh là 250x188 Muốn định vị ảnh về bên trái trang. Ngoài ra.có kèm một khung có kích thước ngang bằng ngang ảnh  và nằm sát đáy ảnh để gõ lời chú thích cho ảnh.. Khung này dùng nền tối và chữ ghi chú sẽ được tô màu sáng ----------------------------------------------------------------------------------------------   Đoạn code định vị ảnh về bên trái như sau: <div style="float: left; margin-bottom: 10px; margin-left: 0px; margin-right: 20px; padding: 0px; width: 250px;"> <img alt="0012-250.jpg" src="http://www.rfa.org/vietnamese/in_depth/chopsticks-become-a-bunch-ml-04072014083205.html/0012-250.jpg/image" height="188"; width: 250px"> <div style="background-color: #333333; box-sizing: border-box; color: white; float: left; font-size: 12px; margin: -6px 0px -1px; padding: 5px 10px 7px; width: 250px;"> Lời ghi chú.</div> </div> <div style="text-align: justify;"> <span style="font-family: Times, Times New Roman, serif; font-size: large;">abc</span></div> </div> ----------------------------------- Hiển thị : : Lời ghi chú. abc -------------------------------------------------------------------------------------------------------- Đoạn code định vị ảnh về bên phải như sau: <div style="float: right; margin-bottom: 10px; margin-left: 20px; margin-right: 0px; padding: 0px; width: 250px;"> <img alt="0012-250.jpg" src="http://www.rfa.org/vietnamese/in_depth/chopsticks-become-a-bunch-ml-04072014083205.html/0012-250.jpg/image" height="188"; width: 250px"> <div style="background-color: #333333; box-sizing: border-box; color: white; float: left; font-size: 12px; margin: -6px 0px -1px; padding: 5px 10px 7px; width: 250px;"> Lời ghi chú.</div> </div> <div style="text-align: justify;"> <span style="font-family: Times, Times New Roman, serif; font-size: large;">abc</span></div> </div> Hiển thị: Lời ghi chú. abc ---------------------------------------------------------------------------------------------------------- Lưu ý : Sự khác biệt ở hai code trên chỉ là chỗ kiểu (style ) load . Code trên là load: left. Code dưới là load:right. và cách để margin-left và margin-right.. (lề trái và lề phải). ------------------------ Soạn ngày 8/4/2014 Bình Minh.