Học Làm Web

Tự học thiết kế trang web từng bước từng bước một – bài 13

Như vậy, ở cuối bài 12 trước, bạn đã học thêm được một thẻ HTML (thẻ <frameset> và thẻ con<frame>). Thẻ này là dạng thẻ kép, nó giống như kiểu thẻ <table> vậy, bản thân <table> và </table> không làm nên bảng nào cả. Nó chỉ khởi tạo khung (frame với thẻ <frameset>) và bảng (table với thẻ <table>)

Bài này ta học thẻ <ul> và các thẻ con của nó.

Cú pháp thẻ <ul> hoặc <ol> :

MÃ: CHỌN TẤT CẢ
<ul>
Những lợi ích của răng giả
<li>Nhai thức ăn để giữ gìn sức khỏe</li>
<li>Giữ những răng còn lại không bị nghiêng</li>
<li>Nói cười duyên dáng</li>
</ul>

Kết quả đoạn mã trên sẽ là:

ranggiaty1.gif
ranggiaty1.gif (2.16 KiB) Đã xem 1559 lần.

Như vậy, bạn có nhận xét gì? Có phải là thẻ <ul> bọc bên ngoài thẻ <li> hay không? Đúng thế đấy. Và những dòng nào được thẻ <li> bao bọc bạn sẽ thấy đầu dòng tự nhiên xuất hiện một dấu chấm tròn, còn những dòng nào không có thẻ <li> bọc thì sẽ vẫn là văn bản bình thường.

Kết luận: thẻ <ul> và thẻ <li> kết hợp sẽ giúp cho bạn tạo một danh sách không có thứ tự. Tức là nó cứ như ta gạch đầu dòng vậy, nhưng bằng dấu chấm tròn. Sau này ta sẽ bạn học đến CSS thì sẽ có cách biến cái “gạch đầu dòng” ấy thành một loại dấu khác đẹp mắt hơn.

Tương tự như vậy, thẻ <ol> và thẻ <li> (thẻ này không thay đổi) sẽ giúp cho ta tạo một danh sách có thứ tự, tức là tự động nó đánh số vào trước mỗi dòng mà ta đặt trong cặp thẻ <li> và </li> mà ta không cần phải quan tâm hay đánh số bằng tay.

MÃ: CHỌN TẤT CẢ
<ol>
5 điều Bác Hồ dạy các em thiếu niên nhi đồng
<li>Yêu tổ quốc, yêu đồng bào</li>
<li>Học tập tốt, lao động tốt</li>
<li>Đoàn kết tốt, kỷ luật tốt</li>
<li>Giữ gìn vệ sinh thật tốt</li>
<li>Khiêm tốn, thật thà, dũng cảm</li>
</ol>

Sẽ cho kết quả:

5dieuge2.gif
5dieuge2.gif (4.27 KiB) Đã xem 1559 lần.

Tương tự, bạn thấy rằng những dòng / đoạn văn nào được cặp giữ <li> và </li> thì nó sẽ có số thứ tự đánh ở đầu dòng, những dòng không có <li> thì vẫn là văn bản bình thường.

Kết bài:

– Để tạo danh sách có thứ tự ta dùng phối hợp thẻ: <ol><li>chữ</li></ol>

MÃ: CHỌN TẤT CẢ
<ol>
<li>Đoạn văn / dòng văn bản ở đây</li>
<li>Đoạn văn / dòng văn bản ở đây</li>
<li>Đoạn văn / dòng văn bản ở đây</li>
</ol>

– Để tạo danh sách không có thứ tự, ta dùng phối hợp thẻ: <ul><li>chữ</li></ul>

MÃ: CHỌN TẤT CẢ
<ul>
<li>Dòng thứ nhất đây</li>
<li>Dòng thứ hai ngự trị nơi này</li>
<li>Dòng thứ ba...</li>
</ul>

<< Quay Lại – Tiếp Theo>>

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: