Bài6:Một số phần tử cần biếtBạn đã có một trang mẫu HTML qua các bài học trước chưa? Đây là ví dụ: <html> <head> <title>Đây là tiêu đề trang</title> </head> <body> <h2> Tiêu đề chính </h2> <h2> Tiêu đề phụ </h2> <p>Nội dung bài viết</p> </body> </html>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: Chữ in đậm <html> <head> <title>Đây là tiêu đề trang</title> </head> <body> <strong>Chữ in đậm</strong> </body> </html>Bạn sẽ có kết quả như dưới đây khi xem trên trình duyệt: Bạn sẽ nhìn thấy như bên dưới ở trình duyệt: 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: <html> <head> <title>Đây là tiêu đề trang</title> </head> <body> <em><small>Chữ thu nhỏ và nghiêng</small></em> </body> </html>và KHÔNG được như thế này: <small><em>Chữ thu nhỏ 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: <html> <head> <title>Đây là tiêu đề trang</title> </head> <body> <p>Đây là một đoạn chữ<br/> và thêm một đoạn khác được ngắt xuống dòng.</p> </body> </html>Bạn sẽ có được kết quả trên trình duyệt như sau:
Tương tự, một thẻ khác là<hr/>được dùng làm đường kẻ ngang(hrlà chữ viết tắt củahorizontal rule đường kẻ ngang): Ví dụ5: <html> <head> <title>Đây là tiêu đề trang</title> </head> <body> <hr/> </body> </html>Kết quả xem trên trìnhduyệt: Ví dụ 7: Thẻ danh sách liệt kê không đánh dấu thứ tự là ul <html> <head> <title>Đây là tiêu đề trang</title> </head> <body> <ul> <li>Mục liệt kê không có thứ tự</li> <li>Mục liệt kê không có thứ tự</li> </ul> </body> </html>
Đã 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: <html> <head> <title>Đây là tiêu đề trang</title> </head> <body> <strong>Chữ in đậm</strong> <em><small>Chữ thu nhỏ và nghiêng</small></em> <p>Đây là một đoạn chữ<br/> và thêm một đoạn khác được ngắt xuống dòng.</p> <p>Thẻ tạo thước kẻ ngang</p> <hr/> <p>Thẻ danh sách liệt kê không đánh dấu thứ tự</p> <ul> <li>Mục liệt kê không có thứ tự</li> <li>Mục liệt kê không có thứ tự</li> </ul> <p>Thẻ danh sách liệt kê có đánh dấu thứ tự</p> <ol> <li>mục liệt kê có thứ tự</li> <li>mục liệt kê có thứ tự</li> </ol> </body> </html>Kết quả: Facebook Comments
|