Học HTML – Tạo menu website, tạo list danh sách menu

Bài này thuộc phần 6 nằm trong tổng 9 phần của serie Học HTML cơ bản

Trong một website thì không thể thiếu được 1 menu, dù nó có được làm như thế nào thì bắt buộc vẫn phải có để điều hướng người dùng, hoặc là đôi khi trong bài viết các bạn muốn tạo cho mình một vài cái list danh sách…thì tất cả những thứ đó đều phải sử dụng đến thẻ tạo list của HTML.

Hiện tại trong HTML có 3 kiểu list khác nhau để bạn dễ dàng tạo cho mình menu website hoặc list danh sách trong bài viết bao gồm: Sắp xếp tự động, không sắp xếp, có mô tả.

  1. <ul>. Sắp xếp tự động ( An ordered list ): mặc định của nó sẽ được đánh số tự động từ 1 đến n, bạn cũng dễ dàng thay đổi cách đánh số của nó bằng chữ cái.
  2. <ol>. Không sắp xếp ( An unordered list ): mặc định của list này sẽ không được đánh số mà nó chỉ hiển thị đằng trước nó là một chấm tròn hoặc một kí tự vuông đặc trưng.
  3. <dl>. Kiểu mô tả, định nghĩa ( A definition list ): Không hiển thị gì trước các danh sách mà thay vào đó nó sẽ hiển thị thêm một đoạn mô tả ngay phía dưới danh sách và được thụt lìu vào 1 tab.

Để hiểu rõ hơn về sự khác nhau này bạn có thể  tham khảo hình bên dưới.

tạo menu web

Không hiểu sao trước ở trên trang w3school nó có cả 3 menu mà giờ tìm thì chỉ còn lại 2, thôi thì các bạn đọc phần dưới sẽ hiểu thêm.

Danh sách có sắp xếp

<!DOCTYPE html>
 <html>
   <body>
       <h2>Ví dụ về danh sách có sắp xếp</h2>
       <ol>
          <li>Danh sách 1</li>
          <li>Danh sách 2</li>
          <li>Danh sách 3</li>
          <li>Danh sách 4</li>
       </ol>
   </body>
</html>

 

Được bắt đầu và kết thúc bằng cặp thẻ <ol></ol> thì tự động mặc định nó sẽ hiển thị đằng trước tên danh sách một con số được đánh tăng dần. Và kết quả sẽ là:

Ví dụ về danh sách có sắp xếp

  1. Danh sách 1
  2. Danh sách 2
  3. Danh sách 3
  4. Danh sách 4

Các loại thuộc tính

Mặc định của loại danh sách tự động nó là số, thể nhưng bạn cũng có thể thay đổi những số đó bằng một ký tự khác, dĩ nhiên những ký tự này phải cho phép tăng dần. Sau đây là những loại ký tự bạn có thể thay thế.

<ol type=“1”> – Mặc định theo dạng số.

<ol type=“I”> – Hiển thị dạng số la mã in hoa.

<ol type=“i”> – Hiển thị dạng số la mã thường.

<ol type=“a”> – Hiển thị theo bảng chữ cái thường.

<ol type=“A”> – Hiển thị theo bảng chữ cái in hoa.

Cách dùng: đặt trong thẻ mở <ol> một thuộc tính type=" giá trị " để định dạng kiểu hiển thị, ví dụ mình sẽ hiển thị nó theo dạng chữ la mã thường thì mình sẽ làm như sau.

<!DOCTYPE html>
<html>
    <body>
        <strong>Ví dụ về danh sách có sắp xếp</strong>
        <ol type="i">   <!--giá trị được thêm vào vị trí này-->
           <li>Danh sách 1</li>
           <li>Danh sách 2</li>
           <li>Danh sách 3</li>
           <li>Danh sách 4</li>
        </ol>
</body>
</html>

 

Và bây giờ nó sẽ có dạng như thế này.

Ví dụ về danh sách có sắp xếp

  1. Danh sách 1
  2. Danh sách 2
  3. Danh sách 3
  4. Danh sách 4

Chú ý: bạn có thể đặt cho nó một thời điểm bắt đầu đếm, thông thường nó sẽ đếm từ 1 đến n. Thế nhưng bạn muốn nó đếm nhảy cóc ví dụ bắt đầu từ n trở đi chẳng hạn. Lúc đó trong thẻ <ol type="i"> bạn cách ra 1 dấu cách và thêm vào đó thuộc tính start="giá trị" . Nếu mình muốn nó đếm từ số 3 thì mình sẽ viết code như sau:  <ol type="i" start="3">

Danh sách không sắp xếp

<!DOCTYPE html>
<html>
  <body>
      <strong>Ví dụ về danh sách có sắp xếp</strong>
      <ul>
          <li>Danh sách 1</li>
          <li>Danh sách 2</li>
          <li>Danh sách 3</li>
          <li>Danh sách 4</li>
       </ul>
   </body>
</html>

Được bắt đầu và kết thúc bằng cặp thẻ <ul></ul> thì tự động mặc định nó sẽ hiển thị đằng trước tên danh sách một chấm tròn. Và kết quả sẽ là:

  • Danh sách 1
  • Danh sách 2
  • Danh sách 3
  • Danh sách 4

Các loại thuộc tính

Cũng giống như loại danh sách có sắp xếp, đối với danh sách không sắp xếp nó cũng cho phép đặt vào một vài thuộc tính để xóa bỏ cái mặc định của nó, thay vào đó sẽ là một hình khác. Sau đây là 3 thuộc tính được phép đặt vào cặp thẻ <ul></ul>.

<ul type=”square”> – Hiển thị dạng chấm vuông đen.
<ul type=”disc”> – Mặc định chấm tròn.
<ul type=”circle”> – Hiển thị chấm tròn trắng rỗng giữa.

Cách dùng: đặt trong thẻ mở <ul> một thuộc tính type=" giá trị " để định dạng kiểu hiển thị, ví dụ mìnhh sẽ hiển thị nó theo dạng chấm vuông mà đen.

<!DOCTYPE html>
<html>
   <body>
       <strong>Ví dụ về danh sách có sắp xếp</strong>
       <ol type="square">   <!--giá trị được thêm vào vị trí này-->
          <li>Danh sách 1</li>
          <li>Danh sách 2</li>
          <li>Danh sách 3</li>
          <li>Danh sách 4</li>
        </ol>
    </body>
</html>

Và nó sẽ trông như thế này:

  • Danh sách 1
  • Danh sách 2
  • Danh sách 3
  • Danh sách 4

Danh sách có mô tả

<!DOCTYPE html>
  <html>
     <body>
        <strong>Ví dụ về danh sách có sắp xếp</strong>
        <dl>
           <dt><b>HTML</b></dt>
             <dd>Học html qua video tại baonguyenblog</dd>
           <dt><b>CSS</b></dt
             <dd>Học css qua video tại baonguyenblog</dd>
         </dl>
     </body>
</html>

 

Được nằm trong cặp thẻ lớn <dl></dl>, trong đó có thêm 2 thẻ nữa, mình định nghĩa nó lại như sau:

<dl> – Bắt đầu một cuốn sách.

<dt> – Tên cuốn sách.

<dd> – Trình bày tóm tắt ngắn về cuốn sách.

Và kết quả nó sẽ hiển thị như sau:

Ví dụ về danh sách có sắp xếp

HTML
Học html qua video tại baonguyenblog
CSS
Học css qua video tại baonguyenblog

Lời kết

Nhìn chung ở bài này mình đã hướng dẫn các bạn rất chi tiết cách để tạo danh sách cho bài viết, đồng thời đây cũng chính là cách để các bạn tạo menu website của các bạn. Còn về cách tạo menu website thì mình sẽ không nói ở bài này mà sẽ hẹn các bạn ở serie thiết kế giao diện website bằng html.

Bài viết khác cùng serie

Bảo Nguyễn

Đam mê dòng nhạc Bolero, thích con gái công sở và thích bàn luận quân sự.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz

Create Account



Log In Your Account