Trong các hoạt động trước, bạn đã tìm hiểu:
- Kiến thức cơ bản về phần tử và thẻ HTML.
- Cách định cấu trúc trang web.
- HTML ngữ nghĩa và các phương pháp hay nhất.
Với bài viết này, bạn sẽ tiếp tục xây dựng dựa trên kiến thức về HTML và đề cập đến các phần tử HTML bổ sung.
Phần tử nội dung văn bản
<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>
Các thành phần này hỗ trợ việc tạo nội dung văn bản, đồng thời bổ sung cấu trúc, kiểu và ý nghĩa. Có nhiều đoạn nội dung văn bản có thể kết hợp các phần tử sau.
Phần tử khung trích dẫn
<blockquote cite="https://www.goodreads.com/quotes">
<p>Be the change that you wish to see in the world.</p>
</blockquote>
Ví dụ này cho thấy cách sử dụng phần tử <blockquote>, cho thấy một câu nói nổi tiếng của Mahatma Gandhi. Có rất nhiều câu trích dẫn hay ở đó cung cấp nội dung và ý nghĩa đáng nhớ. Hãy nghĩ về một số nhân vật truyền cảm hứng mà bạn yêu thích và câu trích dẫn của họ.
Sử dụng phần tử <blockquote> khi sử dụng dấu ngoặc kép và thông tin tham chiếu từ một nguồn. Phần tử <blockquote> tạo ra một thụt đầu dòng và căn chỉnh duy nhất trong bản trình bày, đồng thời sử dụng cả thẻ mở và thẻ đóng. <blockquote> đặc biệt hữu ích khi sử dụng dấu ngoặc kép dài hơn bao gồm nhiều dòng văn bản.
Bạn cũng có thể sử dụng nhiều phần tử trong một phần tử <blockquote>, chẳng hạn như tiêu đề, đoạn văn hoặc danh sách.
Phần tử <details>
<details>
<summary>Details</summary>
Additional Information
</details>
Thông thường, trang web sẽ có phần Câu hỏi thường gặp và thông tin bổ sung dành cho người dùng. Có các phần Câu hỏi thường gặp thường gặp đối với thông tin sản phẩm, hành trình đi lại hoặc bất kỳ loại tình huống hỏi đáp nào.
Phần tử <details> rất hữu ích khi sử dụng một tiện ích được công bố có chứa thông tin bổ sung. Phần tử này bao gồm chức năng bật/tắt tích hợp sẵn và người dùng có thể mở cũng như đóng nút bật/tắt. Khi nút bật/tắt này ở trạng thái mở, nội dung thông tin bổ sung sẽ mở rộng và người dùng có thể đọc. Khi nút bật/tắt này đóng, nội dung thông tin bổ sung sẽ bị ẩn đối với người dùng. Để đặt tên cho tiện ích <details>, hãy sử dụng phần tử <summary>.
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
alt="Google logo">
<figcaption>Google logo</figcaption>
</figure>
Đây là phần tử <figure> đang hoạt động. Ở đây, bạn thấy rằng <figure>, được dùng cùng với phần tử <figcaption>, có thể dùng để nâng cao trải nghiệm hình ảnh.
Bạn sẽ luôn thấy hình ảnh trên web và các dữ liệu trực quan hữu ích khác. Các thành phần hình ảnh giúp thu hút sự chú ý của khách truy cập và tạo ra trải nghiệm chất lượng cao cho người dùng. Phần tử <figure> là một cách gắn nhãn hình ảnh, bảng, biểu đồ, v.v. Phần tử này hoạt động bằng cách tạo nội dung độc lập có liên quan đến nội dung chính.
Phần tử <time>
<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>
Phần tử <time> cung cấp cả ý nghĩa và ngữ nghĩa, hỗ trợ hoạt động hiệu quả hơn với các hoạt động như lên lịch hẹn trực tuyến, xuất bản ngày giờ cho bài viết trên blog, tài liệu lưu trữ, v.v. Một số ví dụ về trang web sẽ sử dụng phần tử <time>: sử dụng Lịch Google, xuất bản bài viết trực tiếp trên nền tảng hoặc đọc tài liệu lưu trữ lịch sử trực tuyến từ trang web thư viện.
Phần tử <time> tham chiếu đến thời gian và có thể biểu thị thời gian theo đồng hồ 24 giờ hoặc một ngày cụ thể có thể điều chỉnh theo múi giờ và vị trí. Phần tử này yêu cầu cả thẻ mở và thẻ đóng, <time> và </time>. Bạn có thể thêm thuộc tính datetime để máy có thể đọc ngày ở định dạng có thể đọc được.
Siêu dữ liệu về tài liệu
<title>Sarah's Favorite Food Recipes</title>
Bất cứ khi nào bạn nhập vào URL của trang web, tên <title> đều có thể đọc được trong thanh trình duyệt hoặc thẻ trang web. Đó là tên tiêu đề mà bạn thấy được cung cấp cho một trang web. Phần tử này rất quan trọng và được công cụ tìm kiếm dùng để hiển thị danh sách các trang web có liên quan trong kết quả tìm kiếm. Độ dài tiêu đề có thể khác nhau, từ ngắn và mô tả cho đến dài hơn và mô tả rõ hơn.
Tình huống: bạn có một trang web đang nghĩ đến nhưng không thể nhớ cụ thể URL của trang web. Nhập từ khoá vào một công cụ tìm kiếm. Công cụ tìm kiếm này giúp theo dõi trang web bạn đang tìm, và bạn có thể xem tên <title> xuất hiện trong kết quả tìm kiếm.
Phần tử nội dung được nhúng
Ngoài nội dung văn bản, bạn có thể sử dụng nhiều thành phần nội dung bổ sung.
Phần tử <iframe>
<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>
Khi hoàn tất việc mua sắm các mặt hàng trực tuyến và nhấp vào lựa chọn thanh toán, chẳng hạn như PayPal hoặc Apple Pay, các tính năng này thường được thêm vào một trang web có <iframe>. Xem bản đồ trực tuyến để tìm kiếm doanh nghiệp địa phương là một trải nghiệm phổ biến khác. Bạn có thể thêm các loại trải nghiệm người dùng này trên trang web bằng iframe. Trong ví dụ trên, bạn thấy URL Wikipedia trong một iframe, có tiêu đề là "Wikipedia".
Phần tử <iframe> cho phép bạn chèn nội dung từ một nguồn khác và nhúng một khung trong một trang web. Cửa sổ này tạo một khung hình chữ nhật và hiển thị nội dung trong trình duyệt. Khung cho phép trình bày bố cục hình cửa sổ trong phần tử <iframe>. Đó là một cách hiệu quả để thêm nội dung vào trang web của bạn nhằm nâng cao trải nghiệm.
Phần tử biểu mẫu
<progress max="100" value="30"> 30% </progress>
Khi xem một video dài, bài giảng hoặc điền vào một đơn đăng ký mở rộng, việc có thanh tiến trình bằng hình ảnh có thể hữu ích để theo dõi tiến trình của bạn. Phần tử <progress> rất hữu ích trong những loại tình huống này.
Phần tử này được mô tả dưới dạng thanh hình ảnh có màu nền. Thanh hình ảnh có thể đa dạng về kích thước và màu nền. Với thanh tiến trình, bạn có thể tuỳ ý sử dụng các thuộc tính max và value. Thuộc tính max đặt số dấu phẩy động và thuộc tính value cho biết tiến trình thực hiện một nhiệm vụ.
Lên nội dung
<canvas id="canvas"></canvas>
Để có thể vẽ đồ hoạ và ảnh động theo thời gian thực, hãy dùng phần tử <canvas>. Đặt phần tử <canvas> vào trang web HTML để tạo canvas. Phần tử này yêu cầu mã JavaScript cho chức năng vẽ và tạo đồ hoạ.
Phần tử nội dung bảng
<table>
<thead>
<tr>
<th colspan="2">Grocery List</th>
</tr>
</thead>
<tbody>
<tr>
<td>Broccoli</td>
<td>Quantity: 2</td>
</tr>
</tbody>
</table>
Phần tử <table>
Phần tử <table> sẽ tạo một bảng. Đây là điểm xuất phát để thêm các phần tử bổ sung có hàng và cột. Bảng thường xuất hiện trên các trang web, là một cách hữu ích để sắp xếp và hiển thị thông tin. Có một trường hợp sử dụng phần tử <table> để trình bày thông tin dạng bảng cho người dùng, chẳng hạn như loại thông tin bạn có thể tìm thấy trong bảng tính.
Phần tử <th>
Phần tử <th> là tiêu đề của một nhóm ô.
Phần tử <tr>
Phần tử <tr> xác định một hàng ô trong bảng. Từ đây, bạn có thể thêm dữ liệu ô cụ thể.
Phần tử <td>
Phần tử <td> tạo ô và thêm nội dung cần thiết.
Kết luận
Trong bài viết này, bạn đã khám phá các phần tử HTML bổ sung và được xây dựng dựa trên kỹ năng lập trình của bạn. Bạn đã tìm hiểu thêm về nội dung, văn bản cùng dòng, nội dung được nhúng và các thành phần trong bảng. Giờ đây, bạn đã xây dựng được hiểu biết về các phần tử HTML bổ sung. Hãy tiếp tục phát huy!