Free Web space and hosting from freehomepage.com
Search the Web

 HTMLStudy
Home » Tạo danh sách ,
BÀI 5: TẠO DANH SÃCH

| BÀI HỌC

Danh sách được dùng để trình bày thông tin thành má»™t dạng dá»… Ä‘á»c hÆ¡n. Chẳng hạn để tạo ra các bảng chỉ mục, ná»™i dung cá»§a má»™t dãy các tài liệu hay các chương.

HTML có hai kiểu danh sách, danh sách có thứ tự (ordered) và danh sách không có thứ tự (unorder).

Danh sách không có thứ tự

Danh sách không có thứ tá»± có các mục bắt đầu bằng các "butllet" hoặc các ký hiệu đánh dấu ở trước. Äể tạo ra danh sách không có thứ tá»± ta dùng các Tag <UL> và <LI>:

<UL>
  <LI>Chỉ mục thứ nhất
  ...
  <LI>Chỉ mục cuối
</UL>

Ví dụ: khi trong phần BODY của file HTML của bạn có đoạn như sau:

<FONT FACE="Arial" SIZE="2">
<H3>Các bá»™ môn trong khoa CNTT trưá»ng Äại há»c Bách khoa Hà ná»™i</H3>
<UL>
  <LI>Bá»™ môn Khoa há»c máy tính
  <LI>Bá»™ môn Kỹ thuật máy tính
  <LI>Trung tâm máy tính
  <LI>Phòng thí nghiệm Liên mạng
</UL>
</FONT>

Thì trên trình duyệt danh sách được hiển thị như sau:

Chân trá»i tri thức - Internet today

Các bá»™ môn trong khoa CNTT trưá»ng Äại há»c Bách khoa Hà ná»™i

  • Bá»™ môn Khoa há»c máy tính
  • Bá»™ môn Kỹ thuật máy tính
  • Trung tâm máy tính
  • Phòng thí nghiệm Liên mạng
Done

Danh sách có thứ tự

Danh sách có thứ tá»± là danh sách mà má»—i mục cá»§a danh sách được đánh số, thưá»ng bắt đầu từ "1". Äể tạo ra danh sách có thứ tá»± ta dùng các Tag <OL> và <LI>:

<OL>
  <LI>Chỉ mục thứ nhất
  ...
  <LI>Chỉ mục cuối cùng
</OL>

Danh sách có thứ tự chỉ khác danh sách không có thứ tự ở chỗ thay Tag <UL> bằng Tag <OL>.

Ví dụ: Nếu trong phần BODY của file HTML có đoạn

<FONT FACE="Arial" SIZE="2">
<H3>Các bước chuẩn bị để há»c HTML</H3>
<OL>
  <LI>Chương trình soạn thảo văn bản trÆ¡n (như NotePad cá»§a Windows)
  <LI>Trình duyệt Web (như Internet Explorer hoặc Nescape Navigator)
  <LI>Bá»™ sách vá» HTML cá»§a tạp chí Internet Today
</OL>
</FONT>

Chân trá»i tri thức - Internet today

Các bước chuẩn bị để há»c HTML

  1. Chương trình soạn thảo văn bản trơn (như NotePad của Windows)
  2. Trình duyệt Web (như Internet Explorer hoặc Nescape Navigator)
  3. Bộ sách vỠHTML của tạp chí Internet Today
Done

Trong trang Web để tạo ra các mục thông tin có cấu trúc logic hơn bạn có thể lồng các danh sách với nhau.

Ví dụ vỠtrộn danh sách:

<FONT FACE="Arial" SIZE="2">
<H3>Ví dụ vỠtrộn danh sách</H3>
<OL>
  <LI> Chỉ mục 1
  <UL>
    <LI> Chỉ mục con 1
    <OL>
      <LI> Chỉ mục con 1
      <LI> Chỉ mục con 2
    </OL>
    <LI> Chỉ mục con 2
  </UL>
  <LI> Chỉ mục 2
</OL>
</FONT>

Ta có danh sách như sau :

Chân trá»i tri thức - Internet today

Ví dụ vỠtrộn danh sách

  1. Chỉ mục 1
    • Chỉ mục con 1
      1. Chỉ mục con 1
      2. Chỉ mục con 2
    • Chỉ mục con 2
  2. Chỉ mục 2
Done

| THỰC HÀNH

ÄÆ°a danh sách vào trang Web cá»§a bạn

Mở một file HTML mới, trong phần BODY bạn tạo một danh sách bằng các Tag HTML như sau:

<FONT FACE="Arial" SIZE="2">
<H3>Mục lục</H3>
<UL>
  <LI>Chương má»™t
  <OL>
    <LI>Giá»›i thiệu chung
    <LI>Những kiến thức vỡ lòng vá» HTML
  </OL>
  <LI>Chương hai
  <OL>
    <LI>Các Tag thông dụng
    <UL>
      <LI>Tag định dạng kiá»u chữ
      <LI>Tag chèn ảnh
    </UL>
    <LI>Các Tag trang trí trang Web
  </OL>
  <LI>Chương ba
  <UL>
    <LI>Các trang Web mẫu
    <LI>Kết thúc
  </UL>
</UL>
</FONT>

Lưu công việc của bạn. Mở trên trình duyệt và so sánh với ví dụ mẫu.

Chân trá»i tri thức - Internet today

Mục lục

  • Chương má»™t
    1. Giới thiệu chung
    2. Những kiến thức vỡ lòng vỠHTML
  • Chương hai
    1. Các Tag thông dụng
      • Tag định dạng kiá»u chữ
      • Tag chèn ảnh
    2. Các Tag trang trí trang Web
  • Chương ba
    • Các trang Web mẫu
    • Kết thúc
Done

Theo Tạp chí Tin há»c I-Today

« Äịnh dạng văn bản ÄÆ°a hình ảnh vào trang Web »