01699602XXX
Get in touch - Saturday: 8:30 am - 6:00 pm

Friday, August 12, 2016

Học HTML cơ bản-Bài 6

Tag :

Bài 6: Một số phần tử cần biết


Bạn đã có một trang mẫu HTML qua các bài học trước chưa? Đây là ví dụ:
    

  1. <html> 
    2. 

  2.  
    3. 

  3.  <head> 
    4. 

  4.    <title>My website</title> 
    5. 

  5.  </head> 
    6. 

  6.  
    7. 

  7.  <body> 
    8. 

  8.  
    9. 

  9.    <h1>Tiêu đề bài viết</h1> 
    10. 

  10.    <p>Nội dung bài viết</p> 
    11. 

  11.    <h2>Tiêu đề phụ</h2> 
    12. 

  12.    <p>Nội dung bài viết</p> 
    13. 

  13.  
    14. 

  14.  </body> 
    15. 

  15.  
    16. 

  16. </html>
    17.

Bạn sẽ được học gì tiếp theo?

Bây giờ bạn sẽ được học 7 phần tử (element) mới.
Tương tự như cách bạn làm nghiêng đoạn chữ bằng cách đặt nó vào giữa cặp thẻ <em> và</em>. Bạn cũng có thể in đậm một đoạn chữ bằng cách tương tự, đặt vào giữa cặp thẻ mở  <strong> và thẻ đóng </strong>.
Ví dụ 1:
    

  1. <strong>Chữ in đậm</strong>
    2.
Bạn sẽ có kết quả như dưới đây khi xem trên trình duyệt:
Chữ in đậm.
Tiếp theo, đây là cách để thu nhỏ một đoạn chữ bằng cách sử dụng thẻ small:
Ví dụ 2:
    

  1. <small>Đoạn chữ thu nhỏ.</small>
    2.
Bạn sẽ nhìn thấy như bên dưới ở trình duyệt:
Đoạn chữ thu nhỏ.

Tôi có thể dùng nhiều thẻ cùng một lúc được không?

Bạn có thể dùng cùng lúc nhiều thẻ cho cùng một nội dung nhưng phải tránh các phần tử chồng xen kẻ với nhau. Đây là một ví dụ:
Ví dụ 3:
Nếu bạn muốn thu nhỏ một đoạn chữ và cùng lúc tạo nghiêng, đoạn code sẽ như sau:
    

  1. <em><small>Chữ in đậm và nghiêng</small></em> 
    2.
và KHÔNG được như thế này: <small><em>Chữ in đậm và nghiêng</small></em>
Điểm khác nhau mấu chốt là bạn phải đóng thẻ mở đầu tiên ở cuối cùng, điều này tránh cho trình duyệt không lúng túng khi đọc đoạn code của bạn.

Thêm một vài phần tử khác!

Như đã từng đề cập ở bài số 3, một số phần tử chỉ có một thẻ đơn. Đây là các phần tử rỗng và độc lập. Đây là một ví dụ về thẻ <br /> nó dùng để ngắt dòng và xuống hàng:
Ví dụ 4:
    

  1. Đây là một đoạn chữ <br /> và thêm một đoạn khác được ngắt xuống dòng.
    2.
Bạn sẽ có được kết quả trên trình duyệt như sau:
Đây là một đoạn chữ
và thêm một đoạn khác được ngắt dòng
Chú ý rằng các thẻ đơn không có thẻ mở và đóng mà chỉ có tên thẻ + khoảng trắng + dấu / như thẻ này:<br />.
Tương tự, một thẻ khác là <hr /> được dùng làm đường kẻ ngang (“hr” là chữ viết tắt của “horizontal rule” – đường kẻ ngang):
Ví dụ 5:
    

  1. <hr />
    2.
Kết quả xem trên trình duyệt:
Những ví dụ khác về thẻ có đủ một cặp đóng và mở, như thẻ dùng để tạo danh sách liệt kê là  ul, ol và li.
ul là chữ viết tắt của “unordered list” danh sách không có số thứ tự chỉ có chấm hoặc gạch đầu dòng. ol là viết tắt của “ordered list” là danh sách có đánh số thự tự đầu dòng. Các mục được liệt kê trong danh sách sẽ được thêm vào bằng thẻ li  (“list item” – mục liệt kê). hơi rắc rối, nhưng bạn có thể xem ví dụ bên dưới:
Ví dụ 7:
    

  1. <ul> 
    2. 

  2. <li>mục liệt kê</li> 
    3. 

  3. <li>thêm một mục liệt kê khác</li></ul>
    4.
và đây là những gì bạn thấy trên trình duyệt:
  • mục liêt kê khác
  • thêm một mục liêt kê khác
Ví dụ 8:
    

  1. <ol> 
    2. 

  2. <li>Mục số một</li> 
    3. 

  3. <li>Mục số hai</li> 
    4. 

  4. </ol>
    5.
và đây là kết quả:
  1. Mục số một
  2. Mục số hai

Đã hoàn tất bài học?

Tạm thời là như thế, Một lần nữa, hãy thực hành và tự tay tạo ra các trang có chứa các phần tử bạn vừa học trong bài này bao gồm:
    

  1. <strong> Chữ in đậm </strong> 
    2. 

  2. <small> Chữ thu nhỏ </small> 
    3. 

  3. <br /> Xuống hàng 
    4. 

  4. <hr /> Gạch dòng ngang
    5. 

  5. <ul>Danh sách liệt kê</ul> 
    6. 

  6. <ol>Danh sách liệt kê có đánh số</ol> 
    7. 

  7. <li>Mục liệt kê</li>
    8.
Và sẵn sàng cho bài kế tiếp nhé!
--------------------------------------------------------------------------------------------------------

Các bài liên quan




Subscribe to: Post Comments (Atom)

 

Tôi Là BMT

Tôi rất thích học lập trình và mong muốn trở thành lập trình viên chuyên nghiệp .