Vibay: Các thẻ HTML nâng cao

11/11/2012- Trả lời bạn Trần Quốc Vinh:

1. Thẻ Table

<table>

Đây là thẻ tạo khung (bảng html). Một khung gồm 2 cột, nội dung trong khung trôi lên phía trên được viết như sau:

<table border='1' cellpadding='0' cellspacing='0' class='reference' width='570px'>
<tbody>
<tr>
<td bgcolor='#ffffff' height='200px' valign='top' width='280px'>

Nội dung bên trái

</td>

Nội dung bên phải

<td bgcolor='#ffffff' height='200px' valign='top' width='280px'>
</td></tr></tbody></table>

Ví dụ:
<table border='1' cellpadding='0' cellspacing='0' class='reference' width='540px'>
<tbody>
<tr>
<td bgcolor='#ffffff' height='200px' valign='top' width='260px'>
Em tan trường về
Cuối đường mây tỏ
Anh tìm theo Ngọ
Dáng lau lách buồn

Tay nụ hoa thuôn
Vương bờ tóc suối
</td>
<td bgcolor='#ffffff' height='200px' valign='top' width='260px'>
Tìm lời mở nói
Lòng sao ngập ngừng
Lòng sao rưng rưng
Như trời mây ngợp

</td></tr>
</tbody></table>

Kết quả:

Em tan trường về
Cuối đường mây tỏ
Anh tìm theo Ngọ
Dáng lau lách buồn

Tay nụ hoa thuôn
Vương bờ tóc suối

Tìm lời mở nói
Lòng sao ngập ngừng
Lòng sao rưng rưng
Như trời mây ngợp

Ta thấy đoạn thơ bên phải trượt lên phía trên của khung/ bảng, khác với các cách tạo bảng thông thường là nội dung ngắn hơn luôn nằm chính giữa của bảng.

Khung này dùng để tạo tiện ích bài mới đăng theo một chủ đề nào đó trên trang chủ của website. Khi nội dung bên trái dài hơn nội dung bên phải hoặc ngược lại thì nội dung ngắn hơn sẽ trượt lên phía trên (Bạn xem trang chủ của Vibay blog sẽ rõ).

2> Thẻ sup

<sup></sup>

Thẻ này dùng để viết số mũ.

Ví dụ:

10<sup>16</sup>

Kết quả:

10¹⁶

3. Thẻ sub

<sub></sub>

Ngược lại với thẻ <sup>

Ví dụ:

H<sub>2</sub>O

Kết quả:

H₂O

4. Thẻ <script>

<script></script>

a. Phóng to ảnh

Nếu ảnh của bạn đăng trên trang web có kích thước trung bình(400x300,...). Khi người xem muốn phóng to ảnh trên trang web, bạn phải thêm nút "Phóng to" ngay dưới ảnh như sau:

- Thêm đoạn mã sau vào ngay trước thẻ <head> của trang web:

<script>
function changeSizeundefined)
{
document.getElementByIdundefined"compman").height="500";
document.getElementByIdundefined"compman").width="700";
}
</script>

(Thay đổi giá trị 500, 700 cho phù hợp với trang web của bạn)

- Khi đăng ảnh trên trang web, bạn thêm đoạn sau vào ngay dưới ảnh:

<input type="button" onclick="changeSizeundefined)" value="Phóng to">

b. Hiển thị ảnh đang tải trang web trong khi chờ trang web tải về trình duyệt (giống Facebook hay Baomoi.com)

Xem minh họa

Thực hiện:

- Chèn đoạn mã dưới đây vào ngay trước thẻ <head> của trang web

<script type="text/javascript">
function preloader(){
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}//preloader
window.onload = preloader;
</script>
<link href="http://www.netavatar.co.in/demos/loading-image/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11920074-2']);
_gaq.push(['_setDomainName', '.netavatar.co.in']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

- Kế tiếp, chèn đoạn mã dưới đây vào ngay sau thẻ <body> của trang web:

<div id="loading"></div>
<div id="content">
<div style="width:940px;margin:0 auto;">

----
(còn tiếp)

Vibay

Chủ Nhật, 11 tháng 11, 2012

Các thẻ HTML nâng cao

2 nhận xét: