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,<h1> đế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ừ<h1> đến<h6> được sử dụng để xác định độ quan trọng của tiêu đề. Thẻ<h1> 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>/*<![CDATA[*/, 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="flex flex-col lg:flex-row lg:gap-8">
<!-- Sidebar for desktop - Left column -->
<div class="hidden lg:block lg:w-1/4">
<div class="related-docs-container">
<h3 class="related-docs-title">
TÀI LIỆU LIÊN QUAN
</h3>
<div class="mt-4 space-y-4">
<div class="doc-grid-short">
<div class="col-span-1 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="inline w-5 h-5 ml-2 mb-2"><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>
</div>
<div class="col-span-8 space-y-2">
<p class="doc-title-short">
<a href="https://vn-document.net/document/luan-van-khoa-hoc-may-tinh-nhan-dien-cam-xuc-giong-noi/7893857796">
Luận văn tốt nghiệp khoa học máy tính phát triển hệ thống nhận diện cảm xúc qua giọng nói
</a>
</p>
<div class="flex gap-4 text-xs lg:text-sm">
<div class="inline-flex items-center md:items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"/>
</svg>
<span class="font-bold">91</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"/>
</svg>
<span class="font-bold">87</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none" class="h-4 w-4"><path d="m8 12 4 4 4-4" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16V4M19 17v.6c0 1.33-1.07 2.4-2.4 2.4H7.4C6.07 20 5 18.93 5 17.6V17" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>
<span class="font-bold">1</span>
</div>
</div>
</div>
</div>
<div class="doc-grid-short">
<div class="col-span-1 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="inline w-5 h-5 ml-2 mb-2"><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>
</div>
<div class="col-span-8 space-y-2">
<p class="doc-title-short">
<a href="https://vn-document.net/document/tai-lieu-on-tap-olympic-tin-hoc-quoc-te-hkico-2023-scratch/4394335797">
Tài liệu ôn tập olympic tin học quốc tế hkico 2023 scratch
</a>
</p>
<div class="flex gap-4 text-xs lg:text-sm">
<div class="inline-flex items-center md:items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"/>
</svg>
<span class="font-bold">85</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"/>
</svg>
<span class="font-bold">92</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none" class="h-4 w-4"><path d="m8 12 4 4 4-4" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16V4M19 17v.6c0 1.33-1.07 2.4-2.4 2.4H7.4C6.07 20 5 18.93 5 17.6V17" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>
<span class="font-bold">6</span>
</div>
</div>
</div>
</div>
<div class="doc-grid-short">
<div class="col-span-1 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="inline w-5 h-5 ml-2 mb-2"><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>
</div>
<div class="col-span-8 space-y-2">
<p class="doc-title-short">
<a href="https://vn-document.net/document/tai-lieu-on-tap-olympic-tin-hoc-quoc-te-hkico-2023-blockly/4394337797">
Tài liệu ôn tập olympic tin học quốc tế hkico 2023 blockly
</a>
</p>
<div class="flex gap-4 text-xs lg:text-sm">
<div class="inline-flex items-center md:items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"/>
</svg>
<span class="font-bold">76</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"/>
</svg>
<span class="font-bold">61</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none" class="h-4 w-4"><path d="m8 12 4 4 4-4" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16V4M19 17v.6c0 1.33-1.07 2.4-2.4 2.4H7.4C6.07 20 5 18.93 5 17.6V17" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>
<span class="font-bold">0</span>
</div>
</div>
</div>
</div>
<div class="doc-grid-short">
<div class="col-span-1 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="inline w-5 h-5 ml-2 mb-2"><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>
</div>
<div class="col-span-8 space-y-2">
<p class="doc-title-short">
<a href="https://vn-document.net/document/do-an-tot-nghiep-mo-hinh-phan-loai-san-pham-bang-ma-qr-code/7893735796">
Đồ án tốt nghiệp mô hình phân loại sản phẩm bằng mã qr code
</a>
</p>
<div class="flex gap-4 text-xs lg:text-sm">
<div class="inline-flex items-center md:items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"/>
</svg>
<span class="font-bold">130</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"/>
</svg>
<span class="font-bold">133</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none" class="h-4 w-4"><path d="m8 12 4 4 4-4" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16V4M19 17v.6c0 1.33-1.07 2.4-2.4 2.4H7.4C6.07 20 5 18.93 5 17.6V17" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>
<span class="font-bold">4</span>
</div>
</div>
</div>
</div>
<div class="doc-grid-short">
<div class="col-span-1 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="inline w-5 h-5 ml-2 mb-2"><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>
</div>
<div class="col-span-8 space-y-2">
<p class="doc-title-short">
<a href="https://vn-document.net/document/nghien-cuu-kiem-thu-phan-mem-postman-test-api-website/7893734596">
Nghiên cứu kiểm thử phần mềm và sử dụng công cụ postman để test api cho website
</a>
</p>
<div class="flex gap-4 text-xs lg:text-sm">
<div class="inline-flex items-center md:items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"/>
</svg>
<span class="font-bold">70</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"/>
</svg>
<span class="font-bold">32</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none" class="h-4 w-4"><path d="m8 12 4 4 4-4" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16V4M19 17v.6c0 1.33-1.07 2.4-2.4 2.4H7.4C6.07 20 5 18.93 5 17.6V17" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>
<span class="font-bold">0</span>
</div>
</div>
</div>
</div>
<div class="doc-grid-short">
<div class="col-span-1 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="inline w-5 h-5 ml-2 mb-2"><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>
</div>
<div class="col-span-8 space-y-2">
<p class="doc-title-short">
<a href="https://vn-document.net/document/he-thong-goi-y-ho-tro-lap-trinh-thac-si-khoa-hoc-may-tinh/5988857849">
Luận văn thạc sĩ khoa học máy tính hệ thống gợi ý hỗ trợ thực hành lập trình
</a>
</p>
<div class="flex gap-4 text-xs lg:text-sm">
<div class="inline-flex items-center md:items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"/>
</svg>
<span class="font-bold">61</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"/>
</svg>
<span class="font-bold">0</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none" class="h-4 w-4"><path d="m8 12 4 4 4-4" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16V4M19 17v.6c0 1.33-1.07 2.4-2.4 2.4H7.4C6.07 20 5 18.93 5 17.6V17" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>
<span class="font-bold">0</span>
</div>
</div>
</div>
</div>
<div class="doc-grid-short">
<div class="col-span-1 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="inline w-5 h-5 ml-2 mb-2"><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>
</div>
<div class="col-span-8 space-y-2">
<p class="doc-title-short">
<a href="https://vn-document.net/document/thu-vien-lap-trinh-toi-uu-to-hop-cho-tinh-toan-song-parallel-va-phan-bo/5988745559">
Báo cáo nghiệm thu đề tài xây dựng thư viện lập trình hỗ trợ tối ưu tổ hợp trên môi trường tính toán song song và phân bố báo cáo tổng kết cấp thành phố
</a>
</p>
<div class="flex gap-4 text-xs lg:text-sm">
<div class="inline-flex items-center md:items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"/>
</svg>
<span class="font-bold">142</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"/>
</svg>
<span class="font-bold">0</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none" class="h-4 w-4"><path d="m8 12 4 4 4-4" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16V4M19 17v.6c0 1.33-1.07 2.4-2.4 2.4H7.4C6.07 20 5 18.93 5 17.6V17" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>
<span class="font-bold">0</span>
</div>
</div>
</div>
</div>
<div class="doc-grid-short">
<div class="col-span-1 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="inline w-5 h-5 ml-2 mb-2"><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>
</div>
<div class="col-span-8 space-y-2">
<p class="doc-title-short">
<a href="https://vn-document.net/document/tai-lieu-lap-trinh-huong-doi-tuong-nguyen-van-tho-tran-duy-thanh/3944654879">
Tài liệu tham khảo lập trình hướng đối tượng nguyễn văn thọ trần duy thanh phó hải đăng
</a>
</p>
<div class="flex gap-4 text-xs lg:text-sm">
<div class="inline-flex items-center md:items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"/>
</svg>
<span class="font-bold">212</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"/>
</svg>
<span class="font-bold">0</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none" class="h-4 w-4"><path d="m8 12 4 4 4-4" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16V4M19 17v.6c0 1.33-1.07 2.4-2.4 2.4H7.4C6.07 20 5 18.93 5 17.6V17" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>
<span class="font-bold">0</span>
</div>
</div>
</div>
</div>
<div class="doc-grid-short">
<div class="col-span-1 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="inline w-5 h-5 ml-2 mb-2"><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>
</div>
<div class="col-span-8 space-y-2">
<p class="doc-title-short">
<a href="https://vn-document.net/document/ung-dung-giai-thuat-trong-kinh-doanh-voi-python/8938466759">
Giải thuật ứng dụng trong kinh doanh cài đặt bằng ngôn ngữ lập trình python nguyễn văn thọ phó hải đăng nguyễn văn kiên
</a>
</p>
<div class="flex gap-4 text-xs lg:text-sm">
<div class="inline-flex items-center md:items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"/>
</svg>
<span class="font-bold">238</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"/>
</svg>
<span class="font-bold">22</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none" class="h-4 w-4"><path d="m8 12 4 4 4-4" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16V4M19 17v.6c0 1.33-1.07 2.4-2.4 2.4H7.4C6.07 20 5 18.93 5 17.6V17" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>
<span class="font-bold">2</span>
</div>
</div>
</div>
</div>
<div class="doc-grid-short">
<div class="col-span-1 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="inline w-5 h-5 ml-2 mb-2"><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>
</div>
<div class="col-span-8 space-y-2">
<p class="doc-title-short">
<a href="https://vn-document.net/document/nang-cao-hieu-qua-kinh-doanh-phan-mem-may-tinh-giai-phap-cho-evolus/5955353839">
Luận văn giải pháp nâng cao hiệu quả kinh doanh phần mềm máy tính tại công ty tnhh tin học giải pháp tiến hóa evolus
</a>
</p>
<div class="flex gap-4 text-xs lg:text-sm">
<div class="inline-flex items-center md:items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"/>
</svg>
<span class="font-bold">76</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="h-4 w-4">
<path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"/>
</svg>
<span class="font-bold">0</span>
</div>
<div class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none" class="h-4 w-4"><path d="m8 12 4 4 4-4" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16V4M19 17v.6c0 1.33-1.07 2.4-2.4 2.4H7.4C6.07 20 5 18.93 5 17.6V17" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>
<span class="font-bold">0</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main content - Center/Right area -->
<div class="w-full lg:w-3/4">
<!-- Document preview container -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
<!-- Document viewer -->
<div class="bg-gray-50">
<div wire:snapshot="{"data":{"urlPreview":null,"document":[null,{"class":"App\\Models\\Document","key":215709,"s":"mdl"}],"type":"preview"},"memo":{"id":"pTXis5uv7mxG2dfjL2lg","name":"document.eager-load-document-detail","path":"document\/huong-dan-co-ban-ve-html-kien-thuc-va-thuc-hanh\/9875735459","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"26dcbffb660ed52130c0e21d81c776bf10900f8a511e7dd4214b6db13ecb84fa"}" wire:effects="{"listeners":["eagerLoad"]}" wire:id="pTXis5uv7mxG2dfjL2lg">
<div class="w-full flex justify-center">
<img width="300px" height="500px" src="https://cdns.vn-document.net/thumbnail/2025_07/10/L_dkf1752135188.webp" alt="Bài 2 cơ bản về html"
class="max-w-full object-cover min-w-[320px] w-full">
</div>
</div>
</div>
<!-- Document footer -->
<div class="bottom-0 left-0 right-0 z-30">
<div class="bg-gradient-to-t from-white via-white to-transparent h-6"></div>
<div class="bg-white border-t border-gray-200 shadow-md">
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 px-4 py-4 md:py-5">
<!-- Document preview info -->
<div class="md:col-span-9 flex items-center">
<div class="flex-shrink-0 mr-3 hidden sm:block">
<div class="bg-amber-100 rounded-full p-2">
<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 text-amber-600">
<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-sm text-gray-600 mb-1">Bạn đang xem trước tài liệu:</p>
<p class="font-semibold text-gray-900 text-base">
Bài 2 cơ bản về html
</p>
</div>
</div>
<!-- Download button -->
<div class="md:col-span-3 flex items-center justify-start md:justify-end">
<a rel="nofollow" href="https://vn-document.net/tmp-payment/9875735459"
class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-3
bg-primary text-white hover:bg-primary-darker font-medium rounded-lg
transition-all duration-200 shadow-md hover:shadow-lg">
<span class="flex items-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="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>
Tải đầy đủ
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile related documents (shown only on mobile) -->
<div class="lg:hidden mb-6">
</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="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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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>
</div>
<div><div wire:snapshot="{"data":{"activeComponent":null,"components":[[],{"s":"arr"}]},"memo":{"id":"ia8XbueNpt3BoEvybmH4","name":"livewire-ui-modal","path":"document\/huong-dan-co-ban-ve-html-kien-thuc-va-thuc-hanh\/9875735459","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"10a5e92ba9c9c5154584b6d714f09d7062f00984361046271847f38815e1372e"}" wire:effects="{"listeners":["openModal","destroyComponent"]}" wire:id="ia8XbueNpt3BoEvybmH4">
<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> <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"
></div></div></div></div></div><footer
class="mt-auto bg-white shadow-md"><div
class="container mx-auto max-w-screen-xl px-4 py-4 lg:py-6"><div
class="mobile-bottom-sheet">
<button
id="footerToggle" class="mobile-sheet-trigger"><div
class="flex items-center justify-between"><div
class="flex items-center space-x-3"><div
class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
<svg
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-primary">
<path
d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9.5a2.5 2.5 0 00-2.5-2.5H15"/>
</svg></div><div
class="text-left"><p
class="text-sm font-medium text-gray-800">Liên kết & Thông tin</p><p
class="text-xs text-gray-500">Danh mục, liên hệ, mạng xã hội</p></div></div><div
class="flex flex-col items-center space-y-1"><div
class="w-6 h-1 bg-gray-300 rounded-full group-hover:bg-primary/50 transition-colors"></div><div
class="w-4 h-1 bg-gray-200 rounded-full"></div></div></div>
</button></div><div
id="footerBackdrop"
class="fixed inset-0 bg-black/20 backdrop-blur-sm z-30 opacity-0 pointer-events-none transition-opacity duration-300 lg:hidden"></div><div
id="footerContent"
class="fixed bottom-0 left-0 right-0 lg:relative lg:block bg-white lg:bg-transparent rounded-t-3xl lg:rounded-none shadow-2xl lg:shadow-none transform translate-y-full lg:translate-y-0 transition-transform duration-300 z-40 lg:z-auto max-h-[80vh] lg:max-h-none overflow-y-auto lg:overflow-visible"><div
class="flex justify-center py-3 lg:hidden"><div
class="w-10 h-1 bg-gray-300 rounded-full"></div></div><div
class="px-6 pb-8 lg:p-0"><div
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8"><div
class="text-center lg:text-left space-y-3 lg:space-y-4 lg:col-span-1">
<a
href="https://vn-document.net" class="hover:cursor-pointer inline-block" 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-12 w-20 lg:h-16 lg: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-sm lg:text-base font-semibold lg:font-bold text-gray-800">Tổng hợp tài liệu chất
lượng</p><p
class="text-xs lg:text-sm text-gray-600 lg: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><div
class="text-center lg:text-left space-y-3 lg:space-y-4"><h3 class="footer-section-header">
<span
class="bg-gray-50 lg:bg-transparent px-3 lg:px-0 relative z-10">Liên kết nhanh</span><div
class="gradient-divider"></div></h3><ul
class="grid grid-cols-2 lg:block gap-3 lg:gap-0 space-y-0 lg:space-y-2"><li>
<a
href="https://vn-document.net" class="footer-nav-item">
<span
class="hidden lg:inline mr-1.5">•</span>
Trang chủ
</a></li><li>
<a
href="https://vn-document.net/ve-chung-toi" class="footer-nav-item">
<span
class="hidden lg:inline mr-1.5">•</span>
Về chúng tôi
</a></li><li>
<a
href="https://vn-document.net/chinh-sach" class="footer-nav-item">
<span
class="hidden lg:inline mr-1.5">•</span>
Chính sách
</a></li><li><p
onclick="Livewire.dispatch('openModal', { component: 'popup.login' })"
class="footer-nav-item cursor-pointer">
<span
class="hidden lg:inline mr-1.5">•</span>
Đăng nhập</p></li></ul></div><div
class="text-center lg:text-left space-y-3 lg:space-y-4"><h3 class="footer-section-header">
<span
class="bg-gray-50 lg:bg-transparent px-3 lg:px-0 relative z-10">Danh mục nổi
bật</span><div
class="gradient-divider"></div></h3><ul
class="block space-y-3 lg:space-y-2"><li>
<a
href="/category/kinh-te-quan-ly.c1" class="footer-nav-item">
<span
class="hidden lg:inline mr-1.5">•</span>
Kinh Tế - Quản Lý
</a></li><li>
<a
href="/tag/luan-van-thac-si.t33" class="footer-nav-item">
<span
class="hidden lg:inline mr-1.5">•</span>
Luận văn Thạc sĩ
</a></li><li>
<a
href="/topic/tro-choi-trong-giao-duc.t785" class="footer-nav-item">
<span
class="hidden lg:inline mr-1.5">•</span>
Trò chơi trong giáo dục
</a></li></ul></div><div
class="text-center lg:text-left space-y-3 lg:space-y-4"><h3 class="footer-section-header">
<span
class="bg-gray-50 lg:bg-transparent px-3 lg:px-0 relative z-10">Liên hệ hỗ trợ</span><div
class="gradient-divider"></div></h3><ul
class="space-y-2 lg:space-y-3"><li
class="footer-contact-item">
<svg
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden lg:inline w-4 h-4 text-primary mr-3 mt-0.5 min-w-8">
<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-sm text-gray-700 lg:text-gray-600 font-medium">0559 297 239</span></li><li
class="footer-contact-item">
<svg
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden lg:inline w-4 h-4 text-primary mr-3 mt-0.5 min-w-8">
<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-sm text-gray-700 lg:text-gray-600 font-medium">admin@vn-document.net</span></li><li><div
class="flex justify-center lg:justify-start">
<a
href="https://chat.zalo.me/?phone=0559297239"
target="_blank" rel="nofollow"
class="inline-flex items-center justify-center py-2.5 px-4 lg:px-4 lg:py-2 bg-secondary text-white rounded-lg text-sm font-medium transition-all duration-300 hover:bg-secondary-darker">
<svg
viewBox="0 0 24 24" fill="currentColor" class="hidden lg:inline w-4 h-4 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></div></li></ul></div></div></div></div><div
class="border-t border-gray-200 mt-6 lg:mt-8 pt-4"><div
class="flex justify-center lg:justify-end mb-4 lg:mb-2"><div
class="flex space-x-4">
<a
href="#" class="text-gray-500 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-500 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-500 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><p
class="text-xs lg:text-sm text-center text-gray-500">
Copyright © 2025
<a
href="https://vn-document.net/" class="hover:underline text-gray-700 font-medium">
vn-document.net
</a>
- Tất cả quyền được bảo lưu</p></div></div><div
class="h-24 lg:hidden"></div></footer> <script>/*<![CDATA[*/document.addEventListener('DOMContentLoaded', function() {
const footerToggle = document.getElementById('footerToggle');
const footerContent = document.getElementById('footerContent');
const footerBackdrop = document.getElementById('footerBackdrop');
if (footerToggle && footerContent && footerBackdrop) {
function showFooter() {
footerContent.classList.remove('translate-y-full');
footerContent.classList.add('translate-y-0');
footerBackdrop.classList.remove('opacity-0', 'pointer-events-none');
footerBackdrop.classList.add('opacity-100');
document.body.classList.add('overflow-hidden', 'lg:overflow-visible');
}
function hideFooter() {
footerContent.classList.add('translate-y-full');
footerContent.classList.remove('translate-y-0');
footerBackdrop.classList.add('opacity-0', 'pointer-events-none');
footerBackdrop.classList.remove('opacity-100');
document.body.classList.remove('overflow-hidden');
}
// Toggle button click
footerToggle.addEventListener('click', function() {
const isHidden = footerContent.classList.contains('translate-y-full');
if (isHidden) {
showFooter();
} else {
hideFooter();
}
});
// Backdrop click to close
footerBackdrop.addEventListener('click', hideFooter);
// Close on escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
hideFooter();
}
});
// Handle swipe down to close (optional)
let startY = 0;
let isDragging = false;
footerContent.addEventListener('touchstart', function(e) {
startY = e.touches[0].clientY;
isDragging = true;
});
footerContent.addEventListener('touchmove', function(e) {
if (!isDragging) return;
const currentY = e.touches[0].clientY;
const diff = currentY - startY;
// Only close if scrolled to top and swiping down
if (diff > 50 && footerContent.scrollTop === 0) {
hideFooter();
isDragging = false;
}
});
footerContent.addEventListener('touchend', function() {
isDragging = false;
});
}
});/*]]>*/</script> <link
rel="modulepreload" href="https://vn-document.net/build/assets/app-C0G0cght.js" /><script type="module" src="https://vn-document.net/build/assets/app-C0G0cght.js" data-navigate-track="reload"></script> <script>/*<![CDATA[*/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, F12
if (e.ctrlKey && (e.key === 'a' || e.key === 'c' || e.key === 'v' || e.key ===
'x' || e.key === 's')) {
e.preventDefault();
return false;
}
// Prevent F12 (Developer Tools)
if (e.key === 'F12') {
e.preventDefault();
return false;
}
// Prevent Ctrl+Shift+I (Developer Tools)
if (e.ctrlKey && e.shiftKey && e.key === 'I') {
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">let init = false;
const handleEagerLoad = () => {
if (!init) {
init = true;
Livewire.dispatch('eagerLoad');
}
};
window.addEventListener("scroll", handleEagerLoad);
window.addEventListener("mousemove", handleEagerLoad);</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="/livewire/livewire.min.js?id=fcf8c2ad" data-csrf="yDeCjBdeWNeZlkpaYFMGjx5RVjY7kECpQrIsxlad" data-update-uri="/livewire/update" data-navigate-once="true" defer></script> </body></html>