I. Tổng Quan Về HTML Hướng Dẫn Cơ Bản Cho Người Mới Bắt Đầu
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, được sử dụng để tạo ra các trang web. HTML cho phép người dùng định dạng nội dung bằng cách sử dụng các thẻ (tags). Mỗi thẻ có một chức năng riêng, giúp trình duyệt hiểu và hiển thị nội dung một cách chính xác. Việc nắm vững kiến thức về HTML cơ bản là rất quan trọng cho bất kỳ ai muốn tham gia vào lĩnh vực phát triển web.
1.1. HTML Là Gì Khái Niệm Cơ Bản Về Ngôn Ngữ Đánh Dấu
HTML là ngôn ngữ chính để xây dựng các trang web. Nó sử dụng các thẻ để định dạng văn bản, hình ảnh và các thành phần khác. Các thẻ HTML không phân biệt chữ hoa chữ thường, và trình duyệt sẽ không báo lỗi cú pháp nếu có sai sót nhỏ.
1.2. Lịch Sử Phát Triển Của HTML Từ Khởi Đầu Đến Nay
HTML được phát minh bởi Tim Berners-Lee vào năm 1991 và được W3C chuẩn hóa vào năm 1994. Qua nhiều năm, HTML đã trải qua nhiều phiên bản, trong đó HTML5 là phiên bản mới nhất, cung cấp nhiều tính năng mạnh mẽ cho việc phát triển web.
II. Cấu Trúc Tổng Quát Của Một Trang HTML Hướng Dẫn Chi Tiết
Cấu trúc của một trang HTML bao gồm các phần chính: phần đầu (head) và phần thân (body). Phần đầu chứa thông tin về trang như tiêu đề, trong khi phần thân chứa nội dung chính mà người dùng sẽ thấy. Việc hiểu rõ cấu trúc này giúp người dùng dễ dàng tạo ra các trang web hiệu quả.
2.1. Phần Đầu Trang Các Thẻ Quan Trọng Trong HTML
Phần đầu trang được bắt đầu bằng thẻ
và kết thúc bằng thẻ . Trong phần này, các thẻ như
và <meta> được sử dụng để cung cấp thông tin về trang web, giúp tối ưu hóa SEO.</p>
</div><h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>2.2. Phần Thân Trang Nội Dung Chính Của Trang Web</h3><div style='padding-left: 30px'><p>Phần thân trang được bắt đầu bằng thẻ <body> và chứa tất cả nội dung mà người dùng sẽ thấy. Nội dung này có thể bao gồm văn bản, hình ảnh, liên kết và các thành phần khác.</p>
</div></div><h2 style='font-size: 1rem; line-height: 1.5rem; font-weight: 700;'>III. Các Thẻ HTML Thông Dụng Hướng Dẫn Sử Dụng Hiệu Quả</h2><div style='padding-left: 10px'><p>Các thẻ HTML là các thành phần cơ bản để xây dựng nội dung trên trang web. Một số thẻ thông dụng bao gồm thẻ <p> cho đoạn văn, <h2> đến <h6> cho tiêu đề, và <a> cho liên kết. Việc sử dụng đúng các thẻ này sẽ giúp cải thiện khả năng hiển thị và trải nghiệm người dùng.</p>
<h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>3.1. Thẻ Đoạn Văn Cách Sử Dụng Thẻ p </h3><div style='padding-left: 30px'><p>Thẻ <p> được sử dụng để định dạng đoạn văn. Mỗi thẻ <p> sẽ tạo ra một khoảng cách giữa các đoạn văn, giúp nội dung trở nên dễ đọc hơn.</p>
</div><h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>3.2. Thẻ Tiêu Đề Tầm Quan Trọng Của Các Thẻ h1 Đến h6 </h3><div style='padding-left: 30px'><p>Các thẻ tiêu đề từ <h2> đến <h6> được sử dụng để xác định độ quan trọng của tiêu đề. Thẻ <h2> là tiêu đề chính, trong khi <h2> đến <h6> được sử dụng cho các tiêu đề phụ.</p>
</div></div><h2 style='font-size: 1rem; line-height: 1.5rem; font-weight: 700;'>IV. Các Thẻ Tạo Biểu Mẫu Trong HTML Hướng Dẫn Chi Tiết</h2><div style='padding-left: 10px'><p>Biểu mẫu là một phần quan trọng trong việc thu thập dữ liệu từ người dùng. HTML cung cấp nhiều thẻ để tạo biểu mẫu, bao gồm <form>, <input>, <textarea>, và <select>. Việc hiểu cách sử dụng các thẻ này sẽ giúp tạo ra các biểu mẫu hiệu quả.</p>
<h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>4.1. Thẻ form Cách Tạo Biểu Mẫu Trong HTML</h3><div style='padding-left: 30px'><p>Thẻ <form> được sử dụng để bắt đầu một biểu mẫu. Các thuộc tính như action và method giúp xác định cách thức gửi dữ liệu từ biểu mẫu đến máy chủ.</p>
</div><h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>4.2. Các Thẻ Nhập Dữ Liệu input textarea select </h3><div style='padding-left: 30px'><p>Các thẻ <input>, <textarea>, và <select> cho phép người dùng nhập dữ liệu. Mỗi thẻ có các thuộc tính riêng để tùy chỉnh kiểu nhập liệu.</p>
</div></div><h2 style='font-size: 1rem; line-height: 1.5rem; font-weight: 700;'>V. Một Số Thẻ HTML Đặc Biệt Tính Năng Nâng Cao</h2><div style='padding-left: 10px'><p>Ngoài các thẻ cơ bản, HTML còn có nhiều thẻ đặc biệt như <meta>, <script>, và <marquee>. Những thẻ này cung cấp các tính năng nâng cao cho trang web, giúp cải thiện trải nghiệm người dùng và tối ưu hóa SEO.</p>
<h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>5.1. Thẻ meta Tối Ưu Hóa SEO Cho Trang Web</h3><div style='padding-left: 30px'><p>Thẻ <meta> được sử dụng để cung cấp thông tin về trang web cho các công cụ tìm kiếm. Việc sử dụng từ khóa đúng cách trong thẻ <meta> có thể giúp cải thiện thứ hạng tìm kiếm.</p>
</div><h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>5.2. Thẻ script Tích Hợp JavaScript Vào HTML</h3><div style='padding-left: 30px'><p>Thẻ <script> cho phép nhúng mã JavaScript vào trang HTML, giúp tạo ra các tính năng tương tác cho người dùng. Việc sử dụng JavaScript có thể làm cho trang web trở nên sống động hơn.</p>
</div></div><h2 style='font-size: 1rem; line-height: 1.5rem; font-weight: 700;'>VI. Kết Luận Tương Lai Của HTML Trong Phát Triển Web</h2><div style='padding-left: 10px'><p>HTML là nền tảng cơ bản cho mọi trang web. Với sự phát triển không ngừng của công nghệ, HTML cũng đang được cải tiến để đáp ứng nhu cầu ngày càng cao của người dùng. Việc nắm vững HTML sẽ giúp các nhà phát triển web tạo ra những sản phẩm chất lượng hơn.</p>
<h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>6.1. Tương Lai Của HTML5 Những Tính Năng Mới</h3><div style='padding-left: 30px'><p>HTML5 mang đến nhiều tính năng mới như hỗ trợ video, âm thanh và các API mạnh mẽ. Điều này mở ra nhiều cơ hội cho các nhà phát triển trong việc tạo ra các ứng dụng web phong phú.</p>
</div><h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>6.2. Tầm Quan Trọng Của HTML Trong Thế Giới Số</h3><div style='padding-left: 30px'><p>HTML không chỉ là ngôn ngữ đánh dấu, mà còn là công cụ quan trọng trong việc xây dựng các ứng dụng web hiện đại. Sự phát triển của HTML sẽ tiếp tục ảnh hưởng đến cách thức mà người dùng tương tác với thông tin trên mạng.</p>
</div></div>
</div>
</article>
<div class="flex justify-end text-xs mt-4">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" version="1.1" id="Layer_1" viewBox="0 0 459 459" xml:space="preserve" class="h-4 w-4 inline mx-1 mt-[2px] md:mt-0">
<g id="XMLID_843_">
<g>
<g>
<path d="M229.501,178.662c-3.233,0-6.391,0.316-9.458,0.896L160.757,67.524c-3.875-7.322-12.952-10.118-20.273-6.242 c-7.322,3.874-10.117,12.951-6.242,20.273l59.277,112.02c-8.938,8.939-14.164,20.867-14.791,33.342 c-0.236,4.699,0.211,9.418,1.142,13.585l-50.816,28.94c-7.198,4.1-9.71,13.259-5.61,20.457c2.766,4.857,7.833,7.58,13.048,7.58 c2.517,0,5.067-0.635,7.409-1.969l50.846-28.957c9.098,8.538,21.321,13.784,34.753,13.784c28.031,0,50.837-22.806,50.837-50.837 C280.337,201.468,257.532,178.662,229.501,178.662z M229.501,250.337c-11.517,0-20.838-9.397-20.838-20.837 c0-11.633,9.495-20.838,20.838-20.838c11.489,0,20.837,9.348,20.837,20.838C250.337,240.99,240.99,250.337,229.501,250.337z"/>
<path d="M229.5,0C102.751,0,0,102.751,0,229.5S102.751,459,229.5,459S459,356.249,459,229.5S356.249,0,229.5,0z M370.568,370.568 c-34.123,34.123-78.43,54.362-126.068,57.879l0.001-23.175c0-8.284-6.715-15-15-15c-8.283,0-15,6.716-15,15l-0.001,23.175 c-47.637-3.518-91.945-23.756-126.067-57.879c-34.124-34.123-54.362-78.431-57.88-126.068h23.174c8.284,0,15-6.716,15-15 s-6.716-15-15-15H30.553c3.518-47.638,23.756-91.945,57.879-126.068S166.863,34.07,214.5,30.552v23.174c0,8.284,6.716,15,15,15 s15-6.716,15-15V30.553c47.637,3.517,91.944,23.756,126.067,57.879s54.362,78.43,57.879,126.068h-23.174c-8.284,0-15,6.716-15,15 s6.716,15,15,15h23.174C424.93,292.137,404.691,336.445,370.568,370.568z"/>
</g>
</g>
</g>
</svg>
10/07/2025
</div>
</div>
</div>
<div class="container mx-auto my-6">
<div class="doc-layout-flex">
<!-- Sidebar for desktop - Left column -->
<div class="doc-sidebar">
<div class="related-docs-container">
<h3 class="related-docs-title">
Tài liệu liên quan
</h3>
<ul class="related-doc-list">
<li>
<a href="https://vn-document.net/document/do-an-tot-nghiep-mo-hinh-phan-loai-san-pham-bang-ma-qr-code/7893735796" title="Phân loại sản phẩm hiệu quả với mã QR code"
class="related-doc-link group">
<span class="related-doc-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="h-5 w-5"><path d="M2 7h20v10H2V7Z" fill="#fff"/><path d="M21.333 0H2.667A2.675 2.675 0 0 0 0 2.667v18.666C0 22.8 1.2 24 2.667 24h18.666C22.8 24 24 22.8 24 21.333V2.667C24 1.2 22.8 0 21.333 0ZM8.667 11.333c0 1.067-.934 2-2 2H5.333V16h-2V8h3.334c1.066 0 2 .933 2 2v1.333ZM15.333 14c0 1.067-.933 2-2 2H10V8h3.333c1.067 0 2 .933 2 2v4Zm5.334-4h-2v1.333h2v2h-2V16h-2V8h4v2ZM12 10h1.333v4H12v-4Zm-6.667 0h1.334v1.333H5.333V10Z" fill="#E2574C"/></svg>
</span>
<span class="min-w-0 flex-1">
<span class="related-doc-name">Phân loại sản phẩm hiệu quả với mã QR code</span>
<span class="related-doc-meta">
130 trang
<span aria-hidden="true">·</span>
267 lượt xem
<span aria-hidden="true">·</span>
18 lượt tải
</span>
</span>
</a>
</li>
<li>
<a href="https://vn-document.net/document/phan-doan-anh-cac-phuong-phap-va-ky-thuat/9388658367" title="Phân đoạn ảnh: Các phương pháp và kỹ thuật"
class="related-doc-link group">
<span class="related-doc-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="h-5 w-5"><path d="M2 7h20v10H2V7Z" fill="#fff"/><path d="M21.333 0H2.667A2.675 2.675 0 0 0 0 2.667v18.666C0 22.8 1.2 24 2.667 24h18.666C22.8 24 24 22.8 24 21.333V2.667C24 1.2 22.8 0 21.333 0ZM8.667 11.333c0 1.067-.934 2-2 2H5.333V16h-2V8h3.334c1.066 0 2 .933 2 2v1.333ZM15.333 14c0 1.067-.933 2-2 2H10V8h3.333c1.067 0 2 .933 2 2v4Zm5.334-4h-2v1.333h2v2h-2V16h-2V8h4v2ZM12 10h1.333v4H12v-4Zm-6.667 0h1.334v1.333H5.333V10Z" fill="#E2574C"/></svg>
</span>
<span class="min-w-0 flex-1">
<span class="related-doc-name">Phân đoạn ảnh: Các phương pháp và kỹ thuật</span>
<span class="related-doc-meta">
64 trang
<span aria-hidden="true">·</span>
11 lượt xem
<span aria-hidden="true">·</span>
14 lượt tải
</span>
</span>
</a>
</li>
<li>
<a href="https://vn-document.net/document/tai-lieu-on-tap-olympic-tin-hoc-quoc-te-hkico-2023-scratch/4394335797" title="Tài liệu ôn tập Scratch cho Olympic Tin học Quốc tế"
class="related-doc-link group">
<span class="related-doc-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="h-5 w-5"><path d="M2 7h20v10H2V7Z" fill="#fff"/><path d="M21.333 0H2.667A2.675 2.675 0 0 0 0 2.667v18.666C0 22.8 1.2 24 2.667 24h18.666C22.8 24 24 22.8 24 21.333V2.667C24 1.2 22.8 0 21.333 0ZM8.667 11.333c0 1.067-.934 2-2 2H5.333V16h-2V8h3.334c1.066 0 2 .933 2 2v1.333ZM15.333 14c0 1.067-.933 2-2 2H10V8h3.333c1.067 0 2 .933 2 2v4Zm5.334-4h-2v1.333h2v2h-2V16h-2V8h4v2ZM12 10h1.333v4H12v-4Zm-6.667 0h1.334v1.333H5.333V10Z" fill="#E2574C"/></svg>
</span>
<span class="min-w-0 flex-1">
<span class="related-doc-name">Tài liệu ôn tập Scratch cho Olympic Tin học Quốc tế</span>
<span class="related-doc-meta">
85 trang
<span aria-hidden="true">·</span>
139 lượt xem
<span aria-hidden="true">·</span>
9 lượt tải
</span>
</span>
</a>
</li>
<li>
<a href="https://vn-document.net/document/ung-dung-giai-thuat-trong-kinh-doanh-voi-python/8938466759" title="Ứng dụng giải thuật trong kinh doanh với Python"
class="related-doc-link group">
<span class="related-doc-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="h-5 w-5"><path d="M2 7h20v10H2V7Z" fill="#fff"/><path d="M21.333 0H2.667A2.675 2.675 0 0 0 0 2.667v18.666C0 22.8 1.2 24 2.667 24h18.666C22.8 24 24 22.8 24 21.333V2.667C24 1.2 22.8 0 21.333 0ZM8.667 11.333c0 1.067-.934 2-2 2H5.333V16h-2V8h3.334c1.066 0 2 .933 2 2v1.333ZM15.333 14c0 1.067-.933 2-2 2H10V8h3.333c1.067 0 2 .933 2 2v4Zm5.334-4h-2v1.333h2v2h-2V16h-2V8h4v2ZM12 10h1.333v4H12v-4Zm-6.667 0h1.334v1.333H5.333V10Z" fill="#E2574C"/></svg>
</span>
<span class="min-w-0 flex-1">
<span class="related-doc-name">Ứng dụng giải thuật trong kinh doanh với Python</span>
<span class="related-doc-meta">
238 trang
<span aria-hidden="true">·</span>
31 lượt xem
<span aria-hidden="true">·</span>
2 lượt tải
</span>
</span>
</a>
</li>
<li>
<a href="https://vn-document.net/document/tieu-luan-do-an-mon-hoc-de-tai-thiet-ke-he-thong-phan-loai-san-pham-theo-chieu-cao-2/5984485659" title="Thiết Kế Hệ Thống Phân Loại Sản Phẩm Theo Chiều Cao"
class="related-doc-link group">
<span class="related-doc-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="h-5 w-5"><path d="M2 7h20v10H2V7Z" fill="#fff"/><path d="M21.333 0H2.667A2.675 2.675 0 0 0 0 2.667v18.666C0 22.8 1.2 24 2.667 24h18.666C22.8 24 24 22.8 24 21.333V2.667C24 1.2 22.8 0 21.333 0ZM8.667 11.333c0 1.067-.934 2-2 2H5.333V16h-2V8h3.334c1.066 0 2 .933 2 2v1.333ZM15.333 14c0 1.067-.933 2-2 2H10V8h3.333c1.067 0 2 .933 2 2v4Zm5.334-4h-2v1.333h2v2h-2V16h-2V8h4v2ZM12 10h1.333v4H12v-4Zm-6.667 0h1.334v1.333H5.333V10Z" fill="#E2574C"/></svg>
</span>
<span class="min-w-0 flex-1">
<span class="related-doc-name">Thiết Kế Hệ Thống Phân Loại Sản Phẩm Theo Chiều Cao</span>
<span class="related-doc-meta">
78 trang
<span aria-hidden="true">·</span>
96 lượt xem
<span aria-hidden="true">·</span>
2 lượt tải
</span>
</span>
</a>
</li>
<li>
<a href="https://vn-document.net/document/giao-trinh-nhap-mon-thuat-toan-huong-dan-chi-tiet/9535677769" title="Giáo Trình Nhập Môn Thuật Toán: Hướng Dẫn Chi Tiết Cho"
class="related-doc-link group">
<span class="related-doc-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="h-5 w-5"><path d="M2 7h20v10H2V7Z" fill="#fff"/><path d="M21.333 0H2.667A2.675 2.675 0 0 0 0 2.667v18.666C0 22.8 1.2 24 2.667 24h18.666C22.8 24 24 22.8 24 21.333V2.667C24 1.2 22.8 0 21.333 0ZM8.667 11.333c0 1.067-.934 2-2 2H5.333V16h-2V8h3.334c1.066 0 2 .933 2 2v1.333ZM15.333 14c0 1.067-.933 2-2 2H10V8h3.333c1.067 0 2 .933 2 2v4Zm5.334-4h-2v1.333h2v2h-2V16h-2V8h4v2ZM12 10h1.333v4H12v-4Zm-6.667 0h1.334v1.333H5.333V10Z" fill="#E2574C"/></svg>
</span>
<span class="min-w-0 flex-1">
<span class="related-doc-name">Giáo Trình Nhập Môn Thuật Toán: Hướng Dẫn Chi Tiết Cho</span>
<span class="related-doc-meta">
248 trang
<span aria-hidden="true">·</span>
47 lượt xem
<span aria-hidden="true">·</span>
2 lượt tải
</span>
</span>
</a>
</li>
<li>
<a href="https://vn-document.net/document/thiet-ke-va-hien-thuc-loi-vi-xu-ly-risc-v-rv64im-kien-truc-superscalar-voi-4-way-set-associative-cache-va-branch-prediction-tren-fpga/9535756639" title="Thiết kế và hiện thực lõi vi xử lý RISC-V RV64IM kiến"
class="related-doc-link group">
<span class="related-doc-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="h-5 w-5"><path d="M2 7h20v10H2V7Z" fill="#fff"/><path d="M21.333 0H2.667A2.675 2.675 0 0 0 0 2.667v18.666C0 22.8 1.2 24 2.667 24h18.666C22.8 24 24 22.8 24 21.333V2.667C24 1.2 22.8 0 21.333 0ZM8.667 11.333c0 1.067-.934 2-2 2H5.333V16h-2V8h3.334c1.066 0 2 .933 2 2v1.333ZM15.333 14c0 1.067-.933 2-2 2H10V8h3.333c1.067 0 2 .933 2 2v4Zm5.334-4h-2v1.333h2v2h-2V16h-2V8h4v2ZM12 10h1.333v4H12v-4Zm-6.667 0h1.334v1.333H5.333V10Z" fill="#E2574C"/></svg>
</span>
<span class="min-w-0 flex-1">
<span class="related-doc-name">Thiết kế và hiện thực lõi vi xử lý RISC-V RV64IM kiến</span>
<span class="related-doc-meta">
101 trang
<span aria-hidden="true">·</span>
41 lượt xem
<span aria-hidden="true">·</span>
2 lượt tải
</span>
</span>
</a>
</li>
<li>
<a href="https://vn-document.net/document/thiet-khe-bo-xu-ly-kien-truc-risc-v-ho-tro-che-do-giam-sat-khoa-luan-tot-nghiep-ky-thuat-may-tinh/9883435749" title="Thiết kế bộ xử lý kiến trúc RISC-V hỗ trợ chế độ giám"
class="related-doc-link group">
<span class="related-doc-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="h-5 w-5"><path d="M2 7h20v10H2V7Z" fill="#fff"/><path d="M21.333 0H2.667A2.675 2.675 0 0 0 0 2.667v18.666C0 22.8 1.2 24 2.667 24h18.666C22.8 24 24 22.8 24 21.333V2.667C24 1.2 22.8 0 21.333 0ZM8.667 11.333c0 1.067-.934 2-2 2H5.333V16h-2V8h3.334c1.066 0 2 .933 2 2v1.333ZM15.333 14c0 1.067-.933 2-2 2H10V8h3.333c1.067 0 2 .933 2 2v4Zm5.334-4h-2v1.333h2v2h-2V16h-2V8h4v2ZM12 10h1.333v4H12v-4Zm-6.667 0h1.334v1.333H5.333V10Z" fill="#E2574C"/></svg>
</span>
<span class="min-w-0 flex-1">
<span class="related-doc-name">Thiết kế bộ xử lý kiến trúc RISC-V hỗ trợ chế độ giám</span>
<span class="related-doc-meta">
110 trang
<span aria-hidden="true">·</span>
30 lượt xem
<span aria-hidden="true">·</span>
2 lượt tải
</span>
</span>
</a>
</li>
<li>
<a href="https://vn-document.net/document/huong-dan-chi-tiet-khai-thac-phan-mem-hyperworks/9885544489" title="Hướng dẫn chi tiết khai thác phần mềm HyperWorks - Tài"
class="related-doc-link group">
<span class="related-doc-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="h-5 w-5"><path d="M2 7h20v10H2V7Z" fill="#fff"/><path d="M21.333 0H2.667A2.675 2.675 0 0 0 0 2.667v18.666C0 22.8 1.2 24 2.667 24h18.666C22.8 24 24 22.8 24 21.333V2.667C24 1.2 22.8 0 21.333 0ZM8.667 11.333c0 1.067-.934 2-2 2H5.333V16h-2V8h3.334c1.066 0 2 .933 2 2v1.333ZM15.333 14c0 1.067-.933 2-2 2H10V8h3.333c1.067 0 2 .933 2 2v4Zm5.334-4h-2v1.333h2v2h-2V16h-2V8h4v2ZM12 10h1.333v4H12v-4Zm-6.667 0h1.334v1.333H5.333V10Z" fill="#E2574C"/></svg>
</span>
<span class="min-w-0 flex-1">
<span class="related-doc-name">Hướng dẫn chi tiết khai thác phần mềm HyperWorks - Tài</span>
<span class="related-doc-meta">
663 trang
<span aria-hidden="true">·</span>
25 lượt xem
<span aria-hidden="true">·</span>
2 lượt tải
</span>
</span>
</a>
</li>
<li>
<a href="https://vn-document.net/document/nghien-cuu-ket-hop-anh-nhiet-va-anh-mau-trong-phat-hien-va-theo-vet-doi-tuong-nguoi/9787753869" title="Nghiên Cứu Kết Hợp Ảnh Nhiệt và Ảnh Màu trong Phát Hiện"
class="related-doc-link group">
<span class="related-doc-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="h-5 w-5"><path d="M2 7h20v10H2V7Z" fill="#fff"/><path d="M21.333 0H2.667A2.675 2.675 0 0 0 0 2.667v18.666C0 22.8 1.2 24 2.667 24h18.666C22.8 24 24 22.8 24 21.333V2.667C24 1.2 22.8 0 21.333 0ZM8.667 11.333c0 1.067-.934 2-2 2H5.333V16h-2V8h3.334c1.066 0 2 .933 2 2v1.333ZM15.333 14c0 1.067-.933 2-2 2H10V8h3.333c1.067 0 2 .933 2 2v4Zm5.334-4h-2v1.333h2v2h-2V16h-2V8h4v2ZM12 10h1.333v4H12v-4Zm-6.667 0h1.334v1.333H5.333V10Z" fill="#E2574C"/></svg>
</span>
<span class="min-w-0 flex-1">
<span class="related-doc-name">Nghiên Cứu Kết Hợp Ảnh Nhiệt và Ảnh Màu trong Phát Hiện</span>
<span class="related-doc-meta">
136 trang
<span aria-hidden="true">·</span>
6 lượt xem
<span aria-hidden="true">·</span>
2 lượt tải
</span>
</span>
</a>
</li>
<li>
<a href="https://vn-document.net/document/giao-trinh-hoc-altium/9875688549" title="Hướng Dẫn Toàn Diện Về Altium Designer: Vẽ Mạch Nguyên"
class="related-doc-link group">
<span class="related-doc-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="h-5 w-5"><g clip-path="url(#a)"><path d="M3 5h18v14H3V5Z" fill="#fff"/><mask id="clip0_2431_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" rx="4" fill="#fff"/><path d="m7 8 2 8 3-6.5 3 6.5 2-8" stroke="#000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></mask><g mask="url(#clip0_2431_2)"><path d="M-1.267-1.267h26.535v26.535H-1.267V-1.267Z" fill="#086ECA" stroke="#000" stroke-width=".143" stroke-linejoin="round"/></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>
</span>
<span class="min-w-0 flex-1">
<span class="related-doc-name">Hướng Dẫn Toàn Diện Về Altium Designer: Vẽ Mạch Nguyên</span>
<span class="related-doc-meta">
113 trang
<span aria-hidden="true">·</span>
108 lượt xem
<span aria-hidden="true">·</span>
2 lượt tải
</span>
</span>
</a>
</li>
<li>
<a href="https://vn-document.net/document/nghien-cuu-ung-dung-cong-nghe-digital-twins-trong-he-thong-mps-phan-loai-san-pham/9475773739" title="Nghiên Cứu Ứng Dụng Công Nghệ Digital Twins Trong Hệ"
class="related-doc-link group">
<span class="related-doc-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="h-5 w-5"><path d="M2 7h20v10H2V7Z" fill="#fff"/><path d="M21.333 0H2.667A2.675 2.675 0 0 0 0 2.667v18.666C0 22.8 1.2 24 2.667 24h18.666C22.8 24 24 22.8 24 21.333V2.667C24 1.2 22.8 0 21.333 0ZM8.667 11.333c0 1.067-.934 2-2 2H5.333V16h-2V8h3.334c1.066 0 2 .933 2 2v1.333ZM15.333 14c0 1.067-.933 2-2 2H10V8h3.333c1.067 0 2 .933 2 2v4Zm5.334-4h-2v1.333h2v2h-2V16h-2V8h4v2ZM12 10h1.333v4H12v-4Zm-6.667 0h1.334v1.333H5.333V10Z" fill="#E2574C"/></svg>
</span>
<span class="min-w-0 flex-1">
<span class="related-doc-name">Nghiên Cứu Ứng Dụng Công Nghệ Digital Twins Trong Hệ</span>
<span class="related-doc-meta">
73 trang
<span aria-hidden="true">·</span>
9 lượt xem
<span aria-hidden="true">·</span>
2 lượt tải
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Main content - Center/Right area -->
<div class="doc-main-col">
<!-- Document preview container -->
<div class="doc-viewer-container">
<!-- Document viewer -->
<div class="doc-viewer-inner">
<div wire:snapshot="{"data":{"urlPreview":null,"document":[null,{"class":"App\\Models\\Document","key":215709,"s":"mdl"}],"type":"preview"},"memo":{"id":"z5lA3QQT0us0ceiZa0ze","name":"document.eager-load-document-detail","path":"document\/huong-dan-co-ban-ve-html-kien-thuc-va-thuc-hanh\/9875735459","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"a535bdb80dd92abb087306b62dc02b885a02e18d20d3f8be05f33214b2aa4260"}" wire:effects="{"listeners":["eagerLoad"]}" wire:id="z5lA3QQT0us0ceiZa0ze">
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <div class="w-full flex justify-center">
<img width="300px" height="500px" src="https://vn-document.net/thumb/2025_07/10/L_dkf1752135188" alt="Bài 2 cơ bản về html"
class="max-w-full object-cover min-w-[320px] w-full">
</div>
<!--[if ENDBLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!-- Document footer -->
<div class="doc-footer-sticky">
<div class="doc-footer-gradient"></div>
<div class="doc-footer-bar">
<div class="container mx-auto">
<div class="doc-footer-grid">
<!-- Document preview info -->
<div class="doc-preview-info">
<div class="doc-preview-icon">
<div class="doc-preview-icon-bg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-amber">
<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
</div>
<div>
<p class="text-preview-label">Bạn đang xem trước tài liệu:</p>
<p class="text-preview-title">
Bài 2 cơ bản về html
</p>
</div>
</div>
<!-- Download button -->
<div class="doc-btn-col">
<a rel="nofollow" href="https://vn-document.net/tmp-payment/9875735459"
class="btn-download-full">
<span class="btn-download-text">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-sm mr-2">
<path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
</svg>
Tải đầy đủ
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile related documents (shown only on mobile) -->
<div class="doc-mobile-section">
</div>
</div>
</div>
</div>
<h3 class="hidden">
THÔNG TIN CHI TIẾT
</h3>
<h4 class="hidden">
Trường học: Viện CNTT&TT - ĐHBKHN
</h4>
<h4 class="hidden">
Đề tài: Hướng Dẫn Cơ Bản Về HTML: Kiến Thức Và Thực Hành
</h4>
<div class="doc-section-container">
<div class="doc-section-inner">
<p class="doc-section-title">Trích đoạn nội dung tài liệu</p>
<div class="document-fulltext-preview copy-protected relative" style="user-select:none;max-height:52rem;overflow:hidden;"
oncontextmenu="return false;" onselectstart="return false;" ondragstart="return false;">
<div style="font-size:0.875rem;line-height:1.6;">
<p style="margin-bottom:0.75rem;">Cơ bản về HTML Viện CNTT&TT - ĐHBKHN 1 Mục đích • Nắm được những kiến thức về các thẻ HTML từ đó thiết kế ra một trang Web 2 Mục đích 3 Mục đích 4 Nội dung • 1. Tổng quan về ngôn ngữ HTML • 2. Cấu trúc tổng quát trang HTML • 3. Các thẻ HTML thông dụng • 4.</p>
<p style="margin-bottom:0.75rem;">Các thẻ tạo biểu mẫu • 5. Một số thẻ HTML đặc biệt • 6. Tổng quan về HTML • HTML (HyperText Markup Language) - Ngôn ngữ đánh dấu siêu văn bản. Là ngôn ngữ để viết các trang web.</p>
<p style="margin-bottom:0.75rem;">• Do Tim Berner Lee phát minh và được W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994. Tổng quan về HTML • HTML sử dụng các thẻ (tags) để định dạng dữ liệu • HTML không phân biệt chữ hoa, chữ thường • Các trình duyệt thường không báo lỗi cú pháp HTML. Nếu viết sai cú pháp chỉ dẫn đến kết quả hiển thị không đúng với dự định 7 1. Tổng quan về HTML • Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa khác nhau.</p>
<p style="margin-bottom:0.75rem;">• Cách viết thẻ <tên_thẻ> Dữ liệu </tên_thẻ> Ví dụ: <B>Học về HTML</B> Chú ý: - Tên thẻ bắt nguồn từ một từ tiếng Anh: B ~ Bold, I ~ Italic - Luôn có thẻ mở nhưng có thể không có thẻ đóng tương ứng: <img> , <br>… 8 1. Tổng quan về HTML • Một thẻ có thể có các thuộc tính nhằm bổ sung tác dụng cho thẻ • Viết thẻ có thuộc tính: <tên_thẻ tên_TT1=“giá_trị1”tên_TT2=“giá_trị2”…> <Dữ liệu></tên_thẻ> Ví dụ: <font color=“black” size=“5”>Học về HTML</font> • Chú ý: có thể thay đổi thứ tự, số lượng các thuộc tính mà không gây ra lỗi cú pháp 9 1. Tổng quan về HTML • File (trang) HTML có đuôi là html hoặc htm • Có thể tạo ra từ trình soạn thảo văn bản bất kì: – Notepad – Word… • WYSIWYG editors: – FrontPage – Macromedia DreamWeaver 10 1. Tổng quan về HTML • Trang web đầu tiên: Chao.htm <HTML> <HEAD> <TITLE>Xin chào</TITLE> </HEAD> <BODY> Chào mừng đến với HTML! </BODY> </HTML> 11 2.</p>
<p style="margin-bottom:0.75rem;">Cấu trúc tổng quát trang HTML <HTML> <HEAD> <TITLE> Phạm Phần đầu trang vi </TITLE> trang </HEAD> <BODY> Phần thân trang </BODY> </HTML> 12 2. Cấu trúc tổng quát trang HTML • Phần HTML: thông báo cho trình duyệt biết nội dung giữa hai thẻ là một tài liệu HTML • Phần đầu trang: chứa các mô tả về trang: tiêu đề trang… • Phần thân văn bản: nội dung trang như văn bản, hình ảnh, liên kết muốn hiển thị trên trang Web. Các thẻ HMTL thông dụng • 3. Các thẻ xử lý văn bản • 3.</p>
<p style="margin-bottom:0.75rem;">Các thẻ tạo bảng • 3. Thẻ liên kết • 3. Các thẻ đa phương tiện • 3. Các thẻ tạo khung 14 3.</p>
<p style="margin-bottom:0.75rem;">Các thẻ xử lý văn bản 3. Các thẻ định dạng khối văn bản • Thẻ <DIV>…</DIV> – Cho phép định dạng một đoạn văn bản bằng các thuộc tính của chúng – Thuộc tính: align căn lề (center, jusify.) • Thẻ <P>…</P> – Tương tự như thẻ <DIV> – Sau thẻ </P> dữ liệu tự động xuống hàng 15 3. Các thẻ định dạng khối văn bản • Ví dụ <HTML> <HEAD> <TITLE>Khối văn bản</TITLE> </HEAD> <BODY> <DIV>Khối 1 <P>Thẻ DIV được sử dụng để tạo các đoạn văn bản <P>Sau thẻ P dữ liệu xuống dòng </DIV> <DIV align=“right”>Khối 2 <P>Đoạn văn bản căn lề bên phải </DIV> </BODY> </HTML> 16 3. Các thẻ định dạng khối văn bản 17 3.</p>
<p style="margin-bottom:0.75rem;">Các thẻ định dạng khối văn bản • Thẻ <HR> – Tạo đường kẻ ngang, không có thẻ đóng – align: left, right, center – width: 100% là toàn bộ bề ngang của tài liệu – size: độ dày – noshade: không có bóng • Thẻ <BR> – Xuống dòng, không có thẻ đóng 18 3. Các thẻ định dạng khối văn bản <HTML> <HEAD> <TITLE>Horizontal Tag</TITLE> </HEAD> <BODY> <P>The HR</P> <HR noshade size="5" align="center” width="50%" /> <HR size="15" align="left“ width="80%”/> <HR> <P>The duong ke ngang</P> </BODY> </HTML> 19 3. Các thẻ định dạng khối văn bản 20 3. Các thẻ định dạng kí tự • Thẻ <FONT>…</FONT> – Định dạng một chuỗi với kiểu chữ, cỡ chữ, màu chữ – Thuộc tính • face: kiểu chữ như Arial, Tahoma… • color: màu chữ được xác định từ 3 màu cơ bản R, G, B.</p>
<p style="margin-bottom:0.75rem;">Giá trị biểu diễn: #RRGGBB từ 00-FF • size: kích thước như 1, 2, 3…7 21 3. Các thẻ định dạng kí tự <HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY> <P align=“justify”> <FONT face="Times New Roman" size="4” color="red">Môn học Thiết kế Web </FONT> Cung cấp cho sinh viên kiến thức về: cơ chế hoạt động của trang web, Cấu trúc trang web, Các công cụ tạo lập các trang web, Sử dụng công cụ để tạo Web</P> </BODY> 22 </HTML> 3. Các thẻ định dạng kí tự 23 3. Các thẻ định dạng kí tự • Thuộc tính color • Được sử dụng trong thẻ FONT và BODY <HTML> <HEAD> <TITLE>Color Attribute</TITLE> </HEAD> <BODY bgcolor="lavender"> <H1><FONT color="red">Welcome to HTML's World</FONT></H1> </BODY> </HTML> 24 3.</p>
<p style="margin-bottom:0.75rem;">Các thẻ định dạng kí tự 25 3. Các thẻ định dạng kí tự • Đầu mục (Heading) – Được sử dụng với các thẻ từ <H1> đến <H6> – Thuộc tính: align 26 3. Các thẻ định dạng kí tự <HTML> <HEAD> <TITLE>Heading Tags</TITLE> </HEAD> <BODY> <H1>This is a heading 1</H1> <H2>This is a heading 2</H2> <H3>This is a heading 3</H3> <H4>This is a heading 4</H4> <H5>This is a heading 5</H5> <H6>This is a heading 6</H6> </BODY> </HTML> 27 3. Các thẻ định dạng kí tự 28 3.</p>
<p style="margin-bottom:0.75rem;">Các thẻ định dạng kí tự • <B>, <U>, <I> • <S>: dòng chữ bị gạch ngang • <BIG>: hiển thị với kích thước font lớn hơn phần còn lại của văn bản • <SMALL>: hiển thị với kích thước font nhỏ hơn phần còn lại của văn bản • <SUP>, <SUB>: chỉ số trên/dưới 29 3. Các thẻ định dạng kí tự <HTML> <HEAD> <TITLE>Các thẻ xử lý văn bản</TITLE> </HEAD> <BODY> <B>Đoạn văn bản được in đậm</B><BR> <I>Đoạn văn bản được in nghiêng</I><BR> <U>Đoạn văn bản được gạch chân</U><BR> <S>Đoạn văn bản được gạch ngang</S><BR> <BIG>Dòng chữ </BIG>kích thước lớn hơn phần còn lại<BR> <SMALL>Dòng chữ </SMALL>kích thước nhỏ hơn phần còn lại<BR> Pi*R<SUP>2</SUP><BR> H<SUB>2</SUB>0 </BODY> 30 </HTML> 3. Các thẻ định dạng kí tự 31 3. Các thẻ tạo danh sách 3.</p>
<p style="margin-bottom:0.75rem;">Danh sách không được sắp xếp <UL> 3. Danh sách được sắp xếp <OL> 32 3. Danh sách không được sắp xếp • Nằm trong cặp thẻ <UL>…</UL> • Thẻ mở <LI>, thẻ đóng </LI> không bắt buộc <HTML> <BODY> <UL>Các môn HK5 <LI>Chuyên đề 1 <LI>Thiết kế Web <LI>Lập trình Java </UL> </BODY> </HTML> 33 3. Danh sách không được sắp xếp 34 3.</p>
<p style="margin-bottom:0.75rem;">Danh sách không được sắp xếp • Sử dụng thuộc tính type để định dạng bullet – <LI type=“square”> : bullet vuông – <LI type=“disc”>: bullet hình cầu – <LI type=“circle”>: bullet hình tròn 35 3. Danh sách không được sắp xếp <HTML> <BODY> <UL>Các môn HK5 – V2 <LI type=“square”>Chuyên đề 1 <LI type=“disc”>Thiết kế Web <LI type=“circle”>Lập trình Java </UL> </BODY> </HTML> 36 3. Danh sách không được sắp xếp 37 3. Danh sách được sắp xếp • Nằm trong thẻ <OL>…</OL> <H1>Các môn HK5</H1> <OL> <LI>Chuyên đề 1 <LI>Thiết kế Web <LI>Java </OL> 38 3.</p>
<p style="margin-bottom:0.75rem;">Danh sách được sắp xếp 39 3. Các thẻ tạo bảng • HTML coi một bảng gồm nhiều dòng, một dòng gồm nhiều ô, và chỉ có ô mới chứa dữ liệu của bảng. • Các thẻ – Tạo bảng: <TABLE>…</TABLE> – Tạo dòng: <TR>…</TR> – Tạo ô: • Ô tiêu đề của bảng: <TH>…</TH> • Ô dữ liệu: <TD>…</TD> • Chú ý: Để có được một ô trống trong bảng (ô không có dữ liệu) thì cần đặt nội dung ô là: 40 3. Các thẻ tạo bảng <TABLE> <TR> <TD>Cell 1</TD> <TD>Cell 2</TD> <TD>Cell 3</TD> </TR> <TR> <TD>Cell 4</TD> <TD>Cell 5</TD> <TD>Cell 6</TD> </TR> </TABLE> 41 3.</p>
<p style="margin-bottom:0.75rem;">Các thẻ tạo bảng 42 3. Các thẻ tạo bảng • Thuộc tính – Border=“số”: đường viền bảng. Mặc định 0 – Width=“độ rộng”; Height=“độ cao” • n%: so với độ rộng, độ cao của bảng • n: số pixels – Cellspacing=“số”: khoảng cách giữa 2 ô liên tiếp – Cellpadding=“số”: khoảng cách từ cạnh ô tới nội dung ô – Bgcolor=“màu nền” – Backgournd=“địa chỉ ảnh nền” 43 3. Các thẻ tạo bảng <TABLE width="400" height="200" border="1" bgcolor="#CCCCCC" cellspacing="10” cellpadding="40"> <TR> <TD>Cell 1</TD> <TD>Cell 2</TD> <TD>Cell 3</TD> </TR> <TR> <TD>Cell 4</TD> <TD>Cell 5</TD> <TD>Cell 6</TD> </TR> </TABLE> 44 3.</p>
<p style="margin-bottom:0.75rem;">Các thẻ tạo bảng 45 3. Các thẻ tạo bảng • Thuộc tính – Colspan=“số”: gộp các ô lại với nhau – Rowspan=“số”: gộp các hàng lại với nhau – Align: căn theo chiều ngang (left, center, right) – Valign: căn theo chiều dọc (top, middle, bottom) • Để loại bỏ bớt ô trong cột, đơn giản loại bỏ đi thẻ khai báo ô đó 46 3. Các thẻ tạo bảng • Ví dụ: Tạo bảng sau 47 3. Các thẻ tạo bảng • Cách thực hiện – Xác định kích thước các ô: n% – Hàng 1: • Ô 1 và ô 2 có rowspan=2; ô 3 có colspan=3 • Align=“center” • Valign=“top” – Hàng 2, 3: • Align=“center” • Valign=“middle” 48 3.</p>
<p style="margin-bottom:0.75rem;">Thẻ liên kết • Siêu liên kết (hyperlink) cho phép bạn chuyển từ trang này sang trang khác, tải tập tin về máy… • Tạo liên kết đến – Một phần khác của cùng tài liệu – Một tài liệu khác – Một phần của tài liệu khác 49 3. Thẻ liên kết 50</p>
</div>
<div style="position:absolute;bottom:0;left:0;right:0;height:8rem;background:linear-gradient(to top,white,transparent);pointer-events:none;"></div>
</div>
<p style="margin-top:0.75rem;font-size:0.75rem;color:#9ca3af;text-align:center;">
Nội dung được bảo vệ bản quyền —
<a href="https://vn-document.net/document/huong-dan-co-ban-ve-html-kien-thuc-va-thuc-hanh/9875735459#download" style="color:var(--color-primary,#1e40af);">Tải xuống đầy đủ</a>
</p>
</div>
</div>
<div class="topical-content copy-protected" oncontextmenu="return false;" onselectstart="return false;"
ondragstart="return false;">
<p>Tài liệu <strong>"Hướng Dẫn Cơ Bản Về HTML: Kiến Thức Và Thực Hành"</strong> cung cấp cho người đọc những kiến thức nền tảng về HTML, ngôn ngữ đánh dấu cơ bản dùng để xây dựng trang web. Tài liệu này không chỉ giải thích các thẻ HTML cơ bản mà còn hướng dẫn cách áp dụng chúng trong thực tế, giúp người đọc có thể tự tay thiết kế và phát triển trang web của riêng mình.</p>
<p>Một trong những lợi ích lớn nhất của tài liệu này là nó giúp người mới bắt đầu hiểu rõ cấu trúc của một trang web và cách mà HTML hoạt động. Bên cạnh đó, tài liệu còn cung cấp các ví dụ thực tiễn, giúp người đọc dễ dàng hình dung và áp dụng kiến thức vào công việc của mình.</p>
<p>Nếu bạn muốn mở rộng thêm kiến thức về thiết kế web, hãy tham khảo tài liệu <strong><a href="https://vn-document.net/document/huong-dan-thiet-ke-web-co-ban-voi-html/9755667869">Thiết kế trang web với html</a></strong>. Tài liệu này sẽ giúp bạn nắm vững hơn về quy trình thiết kế và các kỹ thuật nâng cao trong việc sử dụng HTML. Mỗi liên kết là một cơ hội để bạn khám phá sâu hơn về chủ đề này và phát triển kỹ năng của mình.</p>
<div class="topical-tag-grid">
<div class="topical-tag-item">
<a class="!text-black" href="https://vn-document.net/tag/cac-the-html-thong-dung.t546966">#Các thẻ HTML thông dụng</a>
</div>
<div class="topical-tag-item">
<a class="!text-black" href="https://vn-document.net/tag/huong-dan-su-dung-the-html.t558717">#Hướng dẫn sử dụng thẻ HTML</a>
</div>
<div class="topical-tag-item">
<a class="!text-black" href="https://vn-document.net/tag/cau-truc-trang-html-co-ban.t558718">#Cấu trúc trang HTML cơ bản</a>
</div>
<div class="topical-tag-item">
<a class="!text-black" href="https://vn-document.net/tag/tao-bieu-mau-trong-html.t558719">#Tạo biểu mẫu trong HTML</a>
</div>
<div class="topical-tag-item">
<a class="!text-black" href="https://vn-document.net/tag/dinh-dang-van-ban-bang-html.t558720">#Định dạng văn bản bằng HTML</a>
</div>
<div class="topical-tag-item">
<a class="!text-black" href="https://vn-document.net/tag/cac-the-da-phuong-tien-trong-html.t558721">#Các thẻ đa phương tiện trong HTML</a>
</div>
</div>
</div>
<div class="topic-container">
<div class="topic-content">
<p class="topic-title">
Chủ đề
</p>
<div class="topic-grid">
<a target="_blank" class="!text-black" href="https://vn-document.net/topic/kien-thuc-co-ban-ve-html.t370295">
<div class="topic-tag">
Kiến thức cơ bản về HTML
</div>
</a>
<a target="_blank" class="!text-black" href="https://vn-document.net/topic/cach-thiet-ke-trang-web-voi-html.t378062">
<div class="topic-tag">
Cách thiết kế trang web với HTML
</div>
</a>
<a target="_blank" class="!text-black" href="https://vn-document.net/topic/thuc-hanh-voi-cac-the-html.t378063">
<div class="topic-tag">
Thực hành với các thẻ HTML
</div>
</a>
<a target="_blank" class="!text-black" href="https://vn-document.net/topic/huong-dan-tao-bieu-mau-va-bang.t378064">
<div class="topic-tag">
Hướng dẫn tạo biểu mẫu và bảng
</div>
</a>
</div>
</div>
</div>
<div class="detail-page-footer">
<div class="inline-block">
<a rel="nofollow" href="https://vn-document.net/tmp-payment/9875735459" class="detail-page-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 mr-2">
<path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
</svg>
<span>
Tải xuống
(96 Trang -
1.23 MB)
</span>
</a>
</div>
</div>
<div id="to-top" class="back-to-top-btn" onclick="window.scrollTo({top: 0,behavior: 'smooth'})"
style="box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25)" title="To the top">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512" class="fill-white">
<path d="M318 177.5c3.8-8.8 2-19-4.6-26l-136-144C172.9 2.7 166.6 0 160 0s-12.9 2.7-17.4 7.5l-136 144c-6.6 7-8.4 17.2-4.6 26S14.4 192 24 192H96l0 288c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32l0-288h72c9.6 0 18.2-5.7 22-14.5z">
</path>
</svg>
</div>
</main>
<div><div wire:snapshot="{"data":{"activeComponent":null,"components":[[],{"s":"arr"}]},"memo":{"id":"kAXwmAzZfX4daAVyVOCg","name":"livewire-ui-modal","path":"document\/huong-dan-co-ban-ve-html-kien-thuc-va-thuc-hanh\/9875735459","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"35967c065774184425eab06f08e05b6b3286fe67b516c0556fa530629fe31191"}" wire:effects="{"listeners":["openModal","destroyComponent"]}" wire:id="kAXwmAzZfX4daAVyVOCg">
<!--[if BLOCK]><![endif]--> <script>(()=>{var t,e={646:()=>{function t(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,o){if(t){if("string"==typeof t)return e(t,o);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(t,o):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,n=Array(e);o<e;o++)n[o]=t[o];return n}window.LivewireUIModal=function(){return{show:!1,showActiveComponent:!0,activeComponent:!1,componentHistory:[],modalWidth:null,listeners:[],getActiveComponentModalAttribute:function(t){if(void 0!==this.$wire.get("components")[this.activeComponent])return this.$wire.get("components")[this.activeComponent].modalAttributes[t]},closeModalOnEscape:function(t){if(!1!==this.getActiveComponentModalAttribute("closeOnEscape")&&this.closingModal("closingModalOnEscape")){var e=!0===this.getActiveComponentModalAttribute("closeOnEscapeIsForceful");this.closeModal(e)}},closeModalOnClickAway:function(t){!1!==this.getActiveComponentModalAttribute("closeOnClickAway")&&this.closingModal("closingModalOnClickAway")&&this.closeModal(!0)},closingModal:function(t){var e=this.$wire.get("components")[this.activeComponent].name,o={id:this.activeComponent,closing:!0};return Livewire.dispatchTo(e,t,o),o.closing},closeModal:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(!1!==this.show){if(!0===this.getActiveComponentModalAttribute("dispatchCloseEvent")){var n=this.$wire.get("components")[this.activeComponent].name;Livewire.dispatch("modalClosed",{name:n})}if(!0===this.getActiveComponentModalAttribute("destroyOnClose")&&Livewire.dispatch("destroyComponent",{id:this.activeComponent}),e>0)for(var i=0;i<e;i++){if(o){var s=this.componentHistory[this.componentHistory.length-1];Livewire.dispatch("destroyComponent",{id:s})}this.componentHistory.pop()}var r=this.componentHistory.pop();r&&!t&&r?this.setActiveModalComponent(r,!0):this.setShowPropertyTo(!1)}},setActiveModalComponent:function(t){var e=this,o=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(this.setShowPropertyTo(!0),this.activeComponent!==t){!1!==this.activeComponent&&!1===o&&this.componentHistory.push(this.activeComponent);var n=50;!1===this.activeComponent?(this.activeComponent=t,this.showActiveComponent=!0,this.modalWidth=this.getActiveComponentModalAttribute("maxWidthClass")):(this.showActiveComponent=!1,n=400,setTimeout((function(){e.activeComponent=t,e.showActiveComponent=!0,e.modalWidth=e.getActiveComponentModalAttribute("maxWidthClass")}),300)),this.$nextTick((function(){var o,i=null===(o=e.$refs[t])||void 0===o?void 0:o.querySelector("[autofocus]");i&&setTimeout((function(){i.focus()}),n)}))}},focusables:function(){return t(this.$el.querySelectorAll("a, button, input:not([type='hidden']), textarea, select, details, [tabindex]:not([tabindex='-1'])")).filter((function(t){return!t.hasAttribute("disabled")}))},firstFocusable:function(){return this.focusables()[0]},lastFocusable:function(){return this.focusables().slice(-1)[0]},nextFocusable:function(){return this.focusables()[this.nextFocusableIndex()]||this.firstFocusable()},prevFocusable:function(){return this.focusables()[this.prevFocusableIndex()]||this.lastFocusable()},nextFocusableIndex:function(){return(this.focusables().indexOf(document.activeElement)+1)%(this.focusables().length+1)},prevFocusableIndex:function(){return Math.max(0,this.focusables().indexOf(document.activeElement))-1},setShowPropertyTo:function(t){var e=this;this.show=t,t?document.body.classList.add("overflow-y-hidden"):(document.body.classList.remove("overflow-y-hidden"),setTimeout((function(){e.activeComponent=!1,e.$wire.resetState()}),300))},init:function(){var t=this;this.modalWidth=this.getActiveComponentModalAttribute("maxWidthClass"),this.listeners.push(Livewire.on("closeModal",(function(e){var o,n,i;t.closeModal(null!==(o=null==e?void 0:e.force)&&void 0!==o&&o,null!==(n=null==e?void 0:e.skipPreviousModals)&&void 0!==n?n:0,null!==(i=null==e?void 0:e.destroySkipped)&&void 0!==i&&i)}))),this.listeners.push(Livewire.on("activeModalComponentChanged",(function(e){var o=e.id;t.setActiveModalComponent(o)})))},destroy:function(){this.listeners.forEach((function(t){t()}))}}}},761:()=>{}},o={};function n(t){var i=o[t];if(void 0!==i)return i.exports;var s=o[t]={exports:{}};return e[t](s,s.exports,n),s.exports}n.m=e,t=[],n.O=(e,o,i,s)=>{if(!o){var r=1/0;for(u=0;u<t.length;u++){for(var[o,i,s]=t[u],a=!0,c=0;c<o.length;c++)(!1&s||r>=s)&&Object.keys(n.O).every((t=>n.O[t](o[c])))?o.splice(c--,1):(a=!1,s<r&&(r=s));if(a){t.splice(u--,1);var l=i();void 0!==l&&(e=l)}}return e}s=s||0;for(var u=t.length;u>0&&t[u-1][2]>s;u--)t[u]=t[u-1];t[u]=[o,i,s]},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{var t={931:0,994:0};n.O.j=e=>0===t[e];var e=(e,o)=>{var i,s,[r,a,c]=o,l=0;if(r.some((e=>0!==t[e]))){for(i in a)n.o(a,i)&&(n.m[i]=a[i]);if(c)var u=c(n)}for(e&&e(o);l<r.length;l++)s=r[l],n.o(t,s)&&t[s]&&t[s][0](),t[s]=0;return n.O(u)},o=self.webpackChunk=self.webpackChunk||[];o.forEach(e.bind(null,0)),o.push=e.bind(null,o.push.bind(o))})(),n.O(void 0,[994],(()=>n(646)));var i=n.O(void 0,[994],(()=>n(761)));i=n.O(i)})();</script>
<!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div
x-data="LivewireUIModal()"
x-init="init()"
x-on:close.stop="setShowPropertyTo(false)"
x-on:keydown.escape.window="closeModalOnEscape()"
x-show="show"
class="fixed inset-0 overflow-y-auto z-[100]"
style="display: none;"
>
<div class="flex min-h-screen items-center justify-center px-2 pt-4 pb-10 text-center lg:p-0">
<div
x-show="show"
x-on:click="closeModalOnClickAway()"
x-transition:enter="ease-out duration-100"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 transform transition-all"
>
<div class="absolute inset-0 bg-black opacity-50"></div>
</div>
<div
x-show="show && showActiveComponent"
x-transition:enter="ease-out duration-100"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="inline-block transform overflow-hidden rounded-lg text-left align-middle transition-all sm:my-8 w-full md:w-auto lg:max-w-5xl"
id="modal-container"
x-trap.noscroll.inert="show && showActiveComponent"
aria-modal="true"
>
<!--[if BLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]--> </div>
</div>
</div>
</div>
</div>
<footer class="mt-auto bg-white shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1),0_-2px_4px_-1px_rgba(0,0,0,0.06)]">
<div class="container mx-auto max-w-screen-xl px-4 py-4 lg:py-6">
<!-- Mobile Accordion Toggle -->
<div class="lg:hidden">
<button id="footerAccordionToggle"
class="w-full bg-white border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all duration-300 flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-primary">
<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<div class="text-left">
<p class="text-sm font-semibold text-gray-800">Thông tin & Liên hệ</p>
<p class="text-xs text-gray-500">Nhấn để xem chi tiết</p>
</div>
</div>
<div id="accordionIcon" class="transition-transform duration-300">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-gray-600">
<polyline points="6,9 12,15 18,9"/>
</svg>
</div>
</button>
</div>
<!-- Main Footer Content - Accordion Style -->
<div id="footerContent" class="overflow-hidden transition-all duration-300 max-h-0 lg:max-h-none lg:block">
<div class="pt-3 pb-2 lg:pt-0">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-x-3 gap-y-4 lg:gap-8">
<!-- Logo & About Section -->
<div class="hidden lg:block lg:col-span-1">
<a href="https://vn-document.net" class="hover:cursor-pointer inline-block mb-4" aria-label="Trang chủ">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="200" viewBox="0 0 400 200" xml:space="preserve" class="h-16 w-28">
<desc>Created with Fabric.js 5.2.4</desc>
<defs>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="transparent"/>
<g transform="matrix(1 0 0 1 200 100)" id="896fa488-ba7d-450a-ac77-bb66646345a5">
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke" x="-200" y="-100" rx="0" ry="0" width="400" height="200"/>
</g>
<g transform="matrix(4.32 0 0 2.57 200 123.39)">
<path style="stroke: rgb(155,89,182); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(231,76,60); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-24, -40.94)" d="M 47.9943556 35.9463529 L 47.9943556 35.9435294 C 47.971778 35.4437647 47.8673567 35.0625882 47.658514 34.7463529 L 47.6359364 34.7152941 L 47.6105366 34.6842353 C 47.3988717 34.4527059 47.1956734 34.3651765 46.9755419 34.2691765 C 46.3179696 34.0150588 45.3612442 33.8795294 44.2097872 33.8767059 C 43.382883 33.8767059 42.4713128 33.9557647 41.5540982 34.1562353 L 41.551276 34.0941176 L 40.6284171 34.4018824 L 40.6114839 34.4103529 L 40.0893771 34.5797647 L 40.0893771 34.6023529 C 39.47696 34.8564706 38.9209869 35.1727059 38.4045245 35.5482353 C 38.0827939 35.7882353 37.8175072 36.1072941 37.8033962 36.5957647 C 37.7949296 36.8611765 37.9303952 37.1661176 38.1533489 37.3468235 C 38.3763025 37.5275294 38.6359448 37.5896471 38.8645429 37.5896471 C 38.9181647 37.5896471 38.9689643 37.5868235 39.0141194 37.5783529 L 39.0592746 37.5755294 L 39.093141 37.5698824 C 39.5446928 37.4738824 40.2022651 37.4089412 40.9727253 37.3016471 C 41.6331198 37.2282353 42.3330251 37.1745882 42.9397978 37.1745882 C 43.368772 37.1717647 43.7554132 37.2028235 44.0206999 37.2592941 C 44.1533432 37.2875294 44.2521202 37.3214118 44.3057419 37.3496471 C 44.3254973 37.3552941 44.3396083 37.3637647 44.3480749 37.3694118 C 44.3593637 37.4061176 44.3762969 37.5021176 44.3734747 37.6348235 C 44.3791191 38.1430588 44.164632 39.0861176 43.8683012 40.0065882 C 43.5804369 40.9270588 43.2304843 41.8503529 42.999064 42.4630588 C 42.94262 42.6042353 42.9059314 42.7595294 42.9059314 42.9289412 C 42.900287 43.1745882 43.0018862 43.4738824 43.2163733 43.6715294 C 43.425216 43.8691765 43.696147 43.9482353 43.9219229 43.9482353 L 43.9332117 43.9482353 C 44.2718756 43.9454118 44.5597398 43.8098824 44.8080933 43.6150588 C 47.1505182 41.5087059 47.9661336 38.1430588 48 36.2484706 L 47.9943556 35.9463529 Z M 41.0489247 38.8658824 C 40.8090378 38.8630588 40.5635065 38.9195294 40.3349084 39.0268235 C 40.0780883 39.1284706 39.8156239 39.2470588 39.5672704 39.3515294 L 39.2032068 39.504 L 38.7290774 39.6931765 L 38.7290774 39.6988235 C 33.5785648 41.7882353 28.16841 43.0136471 23.1618295 43.1209412 C 22.9783866 43.1265882 22.7921215 43.1265882 22.614323 43.1265882 C 14.7403887 43.1322353 8.31706456 39.4785882 1.83729642 35.8785882 C 1.61152053 35.76 1.37727804 35.6978824 1.15150215 35.6978824 C 0.860815683 35.6978824 0.561662624 35.808 0.344353327 36.0112941 C 0.12704403 36.2174118 -0.00277710907 36.5138824 0.0000450895989 36.816 C -0.00277710907 37.2084706 0.208887791 37.5698824 0.505218651 37.8042353 C 6.58705678 43.0870588 13.25309 47.9943529 22.2192152 48 C 22.3941915 48 22.57199 47.9943529 22.7497885 47.9915294 C 28.453452 47.8644706 34.902176 45.936 39.9087564 42.7905882 L 39.9398006 42.7708235 C 40.5945507 42.3783529 41.2493008 41.9322353 41.8673623 41.4381176 C 42.2511813 41.1529412 42.516468 40.7068235 42.516468 40.2437647 C 42.4995348 39.4221176 41.8024517 38.8658824 41.0489247 38.8658824 Z" stroke-linecap="round"/>
</g>
<g transform="matrix(2.48 0 0 3.36 200 74.71)" style="filter: url(#SVGID_1030);" id="f184ac65-f7f1-436e-a620-aa5020447f68">
<filter id="SVGID_1030" y="-29%" height="158%" x="-21%" width="142%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
<feOffset dx="0" dy="0" result="oBlur"/>
<feFlood flood-color="rgb(0,0,0)" flood-opacity="1"/>
<feComposite in2="oBlur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<text xml:space="preserve" font-family="Raleway" font-size="20" font-style="normal" font-weight="900" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(155,89,182); fill-rule: nonzero; opacity: 1; white-space: pre;"><tspan x="-75.08" y="6.28">V</tspan><tspan x="-60" y="6.28">n</tspan><tspan x="-45.18" y="6.28">D</tspan><tspan x="-28.36" y="6.28">o</tspan><tspan x="-13.58" y="6.28">c</tspan><tspan x="0.46" y="6.28">u</tspan><tspan x="15.72" y="6.28">m</tspan><tspan x="37.02" y="6.28">e</tspan><tspan x="51.7" y="6.28">n</tspan><tspan x="66.62" y="6.28">t</tspan></text>
</g>
<g transform="matrix(0 0 0 0 806.77 327.75)">
<g style="">
</g>
</g>
<g transform="matrix(0 0 0 0 806.77 327.75)">
<g style="">
</g>
</g>
<g transform="matrix(0 0 0 0 806.77 312.15)">
<g style="">
</g>
</g>
<g transform="matrix(0 0 0 0 806.77 312.15)">
<g style="">
</g>
</g>
</svg>
</a>
<p class="text-base font-bold text-gray-800 mb-3">Tổng hợp tài liệu chất lượng</p>
<p class="text-sm text-gray-600 leading-relaxed pr-4">Kho tài liệu đa dạng, uy tín đáp ứng nhu cầu học tập và nghiên cứu của bạn.</p>
</div>
<!-- Quick Links Section -->
<nav aria-label="Liên kết nhanh">
<h3 class="text-xs font-bold text-gray-800 mb-2 lg:text-lg lg:font-bold lg:text-gray-800 lg:mb-4 lg:pb-2 lg:border-b lg:border-gray-200">
<span class="lg:hidden">Liên kết</span>
<span class="hidden lg:inline">Liên kết nhanh</span>
</h3>
<ul class="space-y-1 lg:space-y-2.5">
<li>
<a href="https://vn-document.net" class="text-xs text-gray-700 hover:text-primary transition-colors block lg:text-sm lg:text-gray-600">
<span class="hidden lg:inline mr-2">•</span>Trang chủ
</a>
</li>
<li>
<a href="https://vn-document.net/ve-chung-toi" class="text-xs text-gray-700 hover:text-primary transition-colors block lg:text-sm lg:text-gray-600">
<span class="hidden lg:inline mr-2">•</span>Về chúng tôi
</a>
</li>
<li>
<a href="https://vn-document.net/chinh-sach" class="text-xs text-gray-700 hover:text-primary transition-colors block lg:text-sm lg:text-gray-600">
<span class="hidden lg:inline mr-2">•</span>Chính sách
</a>
</li>
<li>
<p onclick="Livewire.dispatch('openModal', { component: 'popup.login' })"
class="text-xs text-gray-700 hover:text-primary transition-colors cursor-pointer block lg:text-sm lg:text-gray-600">
<span class="hidden lg:inline mr-2">•</span>Đăng nhập
</p>
</li>
</ul>
</nav>
<!-- Categories Section -->
<nav aria-label="Danh mục nổi bật">
<h3 class="text-xs font-bold text-gray-800 mb-2 lg:text-lg lg:font-bold lg:text-gray-800 lg:mb-4 lg:pb-2 lg:border-b lg:border-gray-200">
<span class="lg:hidden">Danh mục</span>
<span class="hidden lg:inline">Danh mục nổi bật</span>
</h3>
<ul class="space-y-1 lg:space-y-2.5">
<li>
<a href="/category/kinh-te-quan-ly.c1" class="text-xs text-gray-700 hover:text-primary transition-colors block lg:text-sm lg:text-gray-600">
<span class="hidden lg:inline mr-2">•</span>Kinh Tế - Quản Lý
</a>
</li>
<li>
<a href="/tag/luan-van-thac-si.t33" class="text-xs text-gray-700 hover:text-primary transition-colors block lg:text-sm lg:text-gray-600">
<span class="hidden lg:inline mr-2">•</span>Luận văn Thạc sĩ
</a>
</li>
<li>
<a href="/topic/tro-choi-trong-giao-duc.t785" class="text-xs text-gray-700 hover:text-primary transition-colors block lg:text-sm lg:text-gray-600">
<span class="hidden lg:inline mr-2">•</span>Trò chơi trong giáo dục
</a>
</li>
<li>
<a href="https://vn-document.net/truong" class="text-xs text-gray-700 hover:text-primary transition-colors block lg:text-sm lg:text-gray-600">
<span class="hidden lg:inline mr-2">•</span>Trường đại học
</a>
</li>
<li>
<a href="https://vn-document.net/chuyen-nganh" class="text-xs text-gray-700 hover:text-primary transition-colors block lg:text-sm lg:text-gray-600">
<span class="hidden lg:inline mr-2">•</span>Chuyên ngành
</a>
</li>
</ul>
</nav>
<!-- Contact Section -->
<div class="col-span-2 lg:col-span-1">
<h3 class="text-xs font-bold text-gray-800 mb-2 lg:text-lg lg:font-bold lg:text-gray-800 lg:mb-4 lg:pb-2 lg:border-b lg:border-gray-200">
<span class="lg:hidden">Liên hệ</span>
<span class="hidden lg:inline">Liên hệ hỗ trợ</span>
</h3>
<ul class="space-y-1.5 lg:space-y-3 lg:space-y-3">
<li class="flex items-center gap-1.5 lg:gap-2">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-primary flex-shrink-0 lg:w-4 lg:h-4">
<path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
</svg>
<span class="text-xs text-gray-700 font-medium lg:text-sm lg:text-gray-600">0559 297 239</span>
</li>
<li class="flex items-center gap-1.5 lg:gap-2">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-primary flex-shrink-0 lg:w-4 lg:h-4">
<path d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<span class="text-xs text-gray-700 font-medium lg:text-sm lg:text-gray-600">admin@vn-document.net</span>
</li>
<li class="mt-2 lg:mt-3">
<a href="https://chat.zalo.me/?phone=0559297239"
target="_blank" rel="nofollow"
class="inline-flex items-center justify-center w-full py-1.5 px-3 bg-secondary text-white rounded-lg text-xs font-medium transition-all duration-300 hover:bg-secondary-darker lg:text-sm lg:w-auto lg:px-6 lg:py-2">
<svg viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3 mr-1.5 lg:w-4 lg:h-4 lg:mr-2">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM16 13H13V16C13 16.55 12.55 17 12 17C11.45 17 11 16.55 11 16V13H8C7.45 13 7 12.55 7 12C7 11.45 7.45 11 8 11H11V8C11 7.45 11.45 7 12 7C12.55 7 13 7.45 13 8V11H16C16.55 11 17 11.45 17 12C17 12.55 16.55 13 16 13Z"/>
</svg>
Chat Zalo
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Bottom Section -->
<div class="border-t border-gray-200 mt-6 lg:mt-8 pt-4 lg:pt-6">
<!-- Social Media -->
<div class="flex justify-center lg:justify-end mb-4 lg:mb-4">
<div class="flex space-x-5">
<a href="#" class="text-gray-400 hover:text-primary transition-colors" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512" class="w-5 h-5"><path d="M288 192v-38.1c0-17.2 3.8-25.9 30.5-25.9H352V64h-55.9c-68.5 0-91.1 31.4-91.1 85.3V192h-45v64h45v192h83V256h56.4l7.6-64h-64z" fill="currentColor"/></svg>
</a>
<a href="#" class="text-gray-400 hover:text-primary transition-colors" aria-label="Twitter">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="w-5 h-5">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-primary transition-colors" aria-label="Instagram">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="w-5 h-5">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
<!-- Copyright -->
<p class="text-xs text-center text-gray-500 lg:text-sm">
Copyright © 2026
<a href="https://vn-document.net/" class="hover:underline text-gray-700 font-medium hover:text-primary transition-colors">
vn-document.net
</a>
- Tất cả quyền được bảo lưu
</p>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const accordionToggle = document.getElementById('footerAccordionToggle');
const footerContent = document.getElementById('footerContent');
const accordionIcon = document.getElementById('accordionIcon');
if (accordionToggle && footerContent && accordionIcon) {
let isOpen = false;
accordionToggle.addEventListener('click', function() {
isOpen = !isOpen;
if (isOpen) {
// Mở accordion
footerContent.style.maxHeight = footerContent.scrollHeight + 'px';
accordionIcon.style.transform = 'rotate(180deg)';
} else {
// Đóng accordion
footerContent.style.maxHeight = '0';
accordionIcon.style.transform = 'rotate(0deg)';
}
});
}
});
</script>
<link rel="modulepreload" href="https://vn-document.net/build/assets/app-B_liCJ-N.js" /><link rel="modulepreload" href="https://vn-document.net/build/assets/vendor-DhXgJQ-f.js" /><script type="module" src="https://vn-document.net/build/assets/app-B_liCJ-N.js" data-navigate-track="reload"></script> <script>
document.querySelectorAll('div.topical a').forEach(function(link) {
link.setAttribute('target', '_blank');
});
// Copy protection for summary and ai_topical sections
document.addEventListener('DOMContentLoaded', function() {
const protectedSections = document.querySelectorAll('.copy-protected');
protectedSections.forEach(function(section) {
// Prevent keyboard shortcuts
section.addEventListener('keydown', function(e) {
// Prevent Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X, Ctrl+S
if (e.ctrlKey && (e.key === 'a' || e.key === 'c' || e.key === 'v' || e.key ===
'x' || e.key === 's')) {
e.preventDefault();
return false;
}
});
// Disable right-click context menu
section.addEventListener('contextmenu', function(e) {
e.preventDefault();
return false;
});
// Prevent text selection with mouse
section.addEventListener('selectstart', function(e) {
e.preventDefault();
return false;
});
// Prevent drag and drop
section.addEventListener('dragstart', function(e) {
e.preventDefault();
return false;
});
});
});
</script>
<script type="module">
const handleEagerLoad = () => {
window.removeEventListener("scroll", handleEagerLoad);
window.removeEventListener("mousemove", handleEagerLoad);
Livewire.dispatch('eagerLoad');
};
window.addEventListener("scroll", handleEagerLoad, { passive: true });
window.addEventListener("mousemove", handleEagerLoad, { passive: true });
</script>
<script type="application/javascript">
document.addEventListener("DOMContentLoaded", function () {
window.addEventListener("scroll", function () {
if (this.scrollY > 500) {
document.getElementById('to-top').classList.remove('hidden');
} else {
document.getElementById('to-top').classList.add('hidden');
}
});
});
</script>
<script src="https://vn-document.net/vendor/livewire/livewire.min.js?id=61e33937" data-csrf="5W8heppzLsckmyFOAyu9rTzp41zN008JE3Vuya1H" data-update-uri="/livewire/update" data-navigate-once="true"></script>
</body>
</html>