Giáo trình thiết kế web cơ bản

Hoc thiet ke web co ban tu A den Z voi giao trinh chi tiet. Nang cao ky nang lap trinh web, HTML, CSS va JavaScript hieu qua cho nguoi moi bat dau.

Trường đại học

Trường cao đẳng kỹ thuật lý tự trọng thành phố Hồ Chí Minh

Chuyên ngành

Công nghệ thông tin

Người đăng

Ẩn danh

Thể loại

Giáo trình

2006 - 2007

121

2

0

Phí lưu trữ

35 Point

Mục lục chi tiết

1. CHƯƠNG 1: GIỚI THIỆU KHÁI QUÁT VỀ TRANG WEB

1.1. Các khái niệm cơ bản

1.2. Giới thiệu khái quát về Web

1.2.1. HTML là gì?

1.2.2. Tag HTML là gì?

1.2.3. Ta có thể làm gì trên file HTML

1.3. Cấu trúc cơ bản của trang Web

1.4. Các TAG căn bản trong HTML

1.4.1. Phân loại các TAG

1.4.2. </span></h4><h4 class="outline-item outline-lv3"><span class="outline-num">1.4.3. </span><span class="outline-text"><P></span></h4><h4 class="outline-item outline-lv3"><span class="outline-num">1.4.4. </span><span class="outline-text"><BR></span></h4><h4 class="outline-item outline-lv3"><span class="outline-num">1.4.5. </span><span class="outline-text"><HR></span></h4><h4 class="outline-item outline-lv3"><span class="outline-num">1.4.6. </span><span class="outline-text"><FONT></span></h4><h4 class="outline-item outline-lv3"><span class="outline-num">1.4.7. </span><span class="outline-text"><BODY></span></h4><h4 class="outline-item outline-lv3"><span class="outline-num">1.4.8. </span><span class="outline-text"><Img></span></h4><h4 class="outline-item outline-lv3"><span class="outline-num">1.4.9. </span><span class="outline-text"><BgSound></span></h4><h4 class="outline-item outline-lv3"><span class="outline-num">1.4.10. </span><span class="outline-text"><Marquee></span></h4><h4 class="outline-item outline-lv3"><span class="outline-num">1.4.11. </span><span class="outline-text">Thẻ chú thích</span></h4><h4 class="outline-item outline-lv3"><span class="outline-num">1.4.12. </span><span class="outline-text">Một số thẻ mức logic</span></h4><h4 class="outline-item outline-lv3"><span class="outline-num">1.4.13. </span><span class="outline-text">Sử dụng các ký tự đặc biệt</span></h4><h4 class="outline-item outline-lv3"><span class="outline-num">1.4.14. </span><span class="outline-text"><PRE></span></h4><h4 class="outline-item outline-lv3"><span class="outline-num">1.4.15. </span><span class="outline-text"><DIV> <SPAN></span></h4><h3 class="outline-item outline-lv2"><span class="outline-num">1.5. </span><span class="outline-text">Hiển thị trang web</span></h3><h4 class="outline-item outline-lv3"><span class="outline-num">1.5.1. </span><span class="outline-text">Một số thao tác trong cửa sổ trình duyệt</span></h4></div> </div> </article> </div> </div> <div class="doc-section-container"> <div class="doc-section-inner"> <p class="doc-section-title"> Tóm tắt </p> <article class="document-summary-content copy-protected" oncontextmenu="return false;" onselectstart="return false;" ondragstart="return false;"> <div class="content-summary"> <h2 style='font-size: 1rem; line-height: 1.5rem; font-weight: 700;'>I. Hướng dẫn tổng quan về giáo trình thiết kế web cơ bản</h2><div style='padding-left: 10px'><p>Giáo trình thiết kế web cơ bản là tài liệu nền tảng cho bất kỳ ai muốn bước vào lĩnh vực phát triển web. Nội dung này cung cấp một cái nhìn tổng quan, hệ thống hóa kiến thức từ những khái niệm sơ khai đến các kỹ năng thực hành đầu tiên. Việc nắm vững các nguyên tắc cơ bản không chỉ giúp xây dựng những trang web đầu tiên mà còn tạo ra một tiền đề vững chắc để tiếp cận các công nghệ phức tạp hơn. Một <strong>lộ trình học thiết kế web</strong> rõ ràng sẽ bắt đầu bằng việc hiểu rõ các thành phần cấu thành nên một trang web, cách chúng tương tác với nhau và vai trò của người thiết kế. Theo tài liệu gốc, một trang web về cơ bản là "một file văn bản đơn giản được lưu với đuôi .html hoặc .htm" chứa các thẻ (tags) đặc biệt mà trình duyệt có thể thông dịch. Khái niệm này tuy đơn giản nhưng là cốt lõi của toàn bộ World Wide Web. Giáo trình này sẽ đi sâu vào ba trụ cột chính: HTML để xây dựng cấu trúc, CSS để định hình phong cách và JavaScript để tạo ra sự tương tác. Đây là bộ ba công nghệ không thể thiếu trong <strong>lập trình web front-end</strong>. Hơn nữa, việc hiểu đúng về <strong>cấu trúc website</strong> và các <strong>nguyên lý thiết kế web</strong> ngay từ đầu sẽ quyết định đến chất lượng sản phẩm cuối cùng, đảm bảo trang web không chỉ hoạt động tốt mà còn mang lại trải nghiệm tích cực cho người dùng. Bắt đầu với một nền tảng kiến thức vững chắc là chìa khóa để <strong>tự học thiết kế web</strong> thành công.</p> <h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>1.1. Tổng quan về thiết kế web cho người mới bắt đầu</h3><div style='padding-left: 30px'><p>Thiết kế web là quá trình tạo ra giao diện và trải nghiệm người dùng cho một trang web. Đối với <strong>thiết kế web cho người mới bắt đầu</strong>, điều quan trọng là phải hiểu sự khác biệt giữa thiết kế (design) và lập trình (development). Thiết kế tập trung vào giao diện người dùng (UI) và trải nghiệm người dùng (UX), bao gồm việc lên <strong>bố cục website</strong>, chọn lựa <strong>màu sắc trong thiết kế</strong>, và <strong>typography web</strong>. Trong khi đó, lập trình là quá trình biến những thiết kế đó thành một trang web hoạt động bằng mã nguồn. Giáo trình cơ bản sẽ tập trung vào các công nghệ phía client (front-end), nơi người dùng tương tác trực tiếp. Các khái niệm ban đầu như mô hình Client-Server, giao thức TCP/IP, và World Wide Web (WWW) là những kiến thức nền tảng giúp hiểu cách một trang web được truy cập và hiển thị trên toàn cầu. Việc này tạo ra một bối cảnh rộng lớn hơn cho các kỹ năng kỹ thuật sắp được học.</p> </div><h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>1.2. Vai trò của lộ trình học thiết kế web chuyên nghiệp</h3><div style='padding-left: 30px'><p>Một <strong>lộ trình học thiết kế web</strong> có cấu trúc là yếu tố then chốt để tránh bị quá tải thông tin. Thay vì học một cách rời rạc, một lộ trình bài bản giúp người học đi từ dễ đến khó, từ lý thuyết đến thực hành. Lộ trình này thường bắt đầu với <strong>HTML cơ bản</strong> để tạo ra khung sườn, tiếp theo là <strong>CSS cơ bản</strong> để trang trí và làm đẹp, và cuối cùng là <strong>JavaScript cho người mới bắt đầu</strong> để thêm các chức năng động. Việc tuân theo một lộ trình giúp đảm bảo không bỏ sót các kiến thức quan trọng và xây dựng kỹ năng một cách logic. Nó cũng giúp người học tự tin hơn khi đối mặt với các dự án thực tế, vì họ biết mình đã có một nền tảng kiến thức toàn diện và có hệ thống.</p> </div></div><h2 style='font-size: 1rem; line-height: 1.5rem; font-weight: 700;'>II. Thách thức thường gặp khi tự học thiết kế web cơ bản</h2><div style='padding-left: 10px'><p>Việc <strong>tự học thiết kế web</strong> mang lại sự linh hoạt nhưng cũng đi kèm với nhiều thách thức. Một trong những khó khăn lớn nhất là cảm giác bị "ngợp" trước một lượng kiến thức khổng lồ. Internet có vô số tài liệu, hướng dẫn và các <strong>khóa học thiết kế web</strong>, nhưng không phải tất cả đều chất lượng hoặc phù hợp với người mới. Người học dễ bị lạc lối, không biết nên bắt đầu từ đâu và học theo thứ tự nào. Thách thức thứ hai là rào cản kỹ thuật. Việc làm quen với cú pháp của HTML, CSS và JavaScript đòi hỏi sự kiên nhẫn và thực hành liên tục. Theo <em>Giáo trình Thiết kế Web Cơ bản</em> (2007), một lỗi cú pháp nhỏ trong HTML có thể được trình duyệt bỏ qua, nhưng "nếu chúng ta viết một tag sai thì nội dung bên trong tag đó không làm gì cả". Điều này nhấn mạnh tầm quan trọng của việc học đúng ngay từ đầu. Cuối cùng, một thách thức không kém phần quan trọng là cân bằng giữa kỹ thuật và mỹ thuật. Một trang web không chỉ cần hoạt động đúng chức năng mà còn phải có thẩm mỹ và dễ sử dụng. Việc nắm bắt các <strong>nguyên lý thiết kế web</strong>, đặc biệt là các khái niệm về <strong>UI/UX là gì</strong>, thường khó hơn việc học thuộc các thẻ HTML. Vượt qua những rào cản này đòi hỏi một kế hoạch học tập rõ ràng và sự kiên trì.</p> <h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>2.1. Khó khăn trong việc tìm kiếm khóa học thiết kế web uy tín</h3><div style='padding-left: 30px'><p>Thị trường hiện nay có vô vàn <strong>khóa học thiết kế web</strong>, từ miễn phí đến trả phí, khiến người mới bắt đầu bối rối trong việc lựa chọn. Một khóa học không tốt có thể cung cấp kiến thức lỗi thời, thiếu hệ thống hoặc không tập trung vào thực hành. Ngược lại, một khóa học uy tín sẽ cung cấp một <strong>lộ trình học thiết kế web</strong> rõ ràng, tài liệu chất lượng, và sự hỗ trợ từ giảng viên. Khó khăn nằm ở việc đánh giá chất lượng của một khóa học trước khi tham gia. Người học cần nghiên cứu kỹ lưỡng, đọc các bài đánh giá, và tìm hiểu về chương trình giảng dạy để đảm bảo khóa học đó phù hợp với mục tiêu và trình độ của mình.</p> </div><h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>2.2. Rào cản kỹ thuật với HTML cơ bản và CSS cơ bản</h3><div style='padding-left: 30px'><p>Mặc dù <strong>HTML cơ bản</strong> và <strong>CSS cơ bản</strong> được coi là những ngôn ngữ dễ tiếp cận, chúng vẫn có thể gây khó khăn cho người mới. HTML yêu cầu sự chính xác về cấu trúc thẻ lồng nhau, trong khi CSS có thể trở nên phức tạp với các khái niệm như selectors, specificity, và box model. Người học thường gặp vấn đề khi <strong>bố cục website</strong> không hiển thị như mong muốn, hoặc các thuộc tính CSS không được áp dụng đúng cách. Vượt qua rào cản này đòi hỏi việc thực hành thường xuyên, sử dụng các công cụ gỡ lỗi của trình duyệt (Developer Tools) và tìm hiểu sâu hơn về cách trình duyệt diễn giải mã HTML và CSS. Việc xây dựng các dự án nhỏ từ đầu là cách tốt nhất để củng cố kiến thức.</p> </div></div><h2 style='font-size: 1rem; line-height: 1.5rem; font-weight: 700;'>III. Phương pháp xây dựng nền tảng thiết kế web vững chắc</h2><div style='padding-left: 10px'><p>Để xây dựng một nền tảng vững chắc trong <strong>thiết kế web cho người mới bắt đầu</strong>, phương pháp tiếp cận phải có hệ thống và tập trung vào các công nghệ cốt lõi. Bước đầu tiên và quan trọng nhất là làm chủ <strong>HTML cơ bản</strong>. HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, có vai trò định hình <strong>cấu trúc website</strong>. Theo tài liệu tham khảo, cấu trúc cơ bản của một trang web bao gồm hai phần chính: <code><HEAD></code> chứa thông tin của trang và <code><BODY></code> chứa nội dung hiển thị. Toàn bộ được bao bọc bởi thẻ <code><HTML></code>. Việc hiểu và sử dụng thành thạo các thẻ ngữ nghĩa (semantic tags) như <code><header></code>, <code><footer></code>, <code><article></code>, <code><nav></code> sẽ giúp trang web không chỉ có cấu trúc rõ ràng mà còn tốt cho SEO. Sau khi đã có khung sườn, bước tiếp theo là sử dụng <strong>CSS cơ bản</strong> để định dạng và trang trí. CSS (Cascading Style Sheets) cho phép kiểm soát mọi khía cạnh về mặt hình ảnh, từ <strong>màu sắc trong thiết kế</strong>, <strong>typography web</strong>, đến <strong>bố cục website</strong>. Việc học CSS nên bắt đầu từ các selectors cơ bản, các thuộc tính phổ biến, sau đó tiến tới các kỹ thuật bố cục hiện đại như Flexbox và Grid. Cuối cùng, <strong>JavaScript cho người mới bắt đầu</strong> sẽ thổi hồn vào trang web, tạo ra sự tương tác và trải nghiệm động cho người dùng. JavaScript có thể xử lý các sự kiện, thay đổi nội dung trang mà không cần tải lại, và giao tiếp với máy chủ. Nắm vững ba công nghệ này là yêu cầu bắt buộc để trở thành một nhà <strong>lập trình web front-end</strong>.</p> <h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>3.1. Xây dựng cấu trúc website với các thẻ HTML cơ bản</h3><div style='padding-left: 30px'><p><strong>HTML cơ bản</strong> là khởi đầu của mọi trang web. Người học cần nắm vững các thẻ thiết yếu để tạo ra một <strong>cấu trúc website</strong> hợp lý. Các thẻ tiêu đề từ <code><H1></code> đến <code><H6></code> dùng để phân cấp nội dung. Thẻ <code><P></code> dùng cho các đoạn văn bản. Thẻ <code><A></code> tạo siêu liên kết, là nền tảng của World Wide Web. Các thẻ danh sách như <code><UL></code> (không thứ tự) và <code><OL></code> (có thứ tự) kết hợp với <code><LI></code> giúp trình bày thông tin một cách có tổ chức. Ngoài ra, thẻ <code><IMG></code> dùng để chèn hình ảnh, và thẻ <code><TABLE></code> dùng để hiển thị dữ liệu dạng bảng. Việc thực hành xây dựng các trang đơn giản chỉ với HTML sẽ giúp củng cố sự hiểu biết về vai trò của từng thẻ.</p> </div><h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>3.2. Định hình phong cách với CSS cơ bản và typography web</h3><div style='padding-left: 30px'><p><strong>CSS cơ bản</strong> mang lại sức mạnh biến đổi một tài liệu HTML thô sơ thành một tác phẩm có thẩm mỹ. Người học cần làm quen với ba cách nhúng CSS: inline, internal và external. Trong đó, external stylesheet là phương pháp được khuyến khích nhất để quản lý mã nguồn hiệu quả. Các thuộc tính CSS quan trọng cần nắm vững bao gồm <code>color</code> và <code>background-color</code> để quản lý <strong>màu sắc trong thiết kế</strong>, cùng với <code>font-family</code>, <code>font-size</code>, <code>font-weight</code> để kiểm soát <strong>typography web</strong>. Hiểu rõ về Box Model (content, padding, border, margin) là chìa khóa để kiểm soát không gian và <strong>bố cục website</strong>.</p> </div><h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>3.3. Thêm tính tương tác với JavaScript cho người mới bắt đầu</h3><div style='padding-left: 30px'><p><strong>JavaScript cho người mới bắt đầu</strong> mở ra một thế giới hoàn toàn mới về tính tương tác. Khóa học cơ bản sẽ giới thiệu về các khái niệm cốt lõi như biến (variables), kiểu dữ liệu (data types), toán tử (operators), câu lệnh điều kiện (if/else), và vòng lặp (loops). Quan trọng hơn, người học cần hiểu về DOM (Document Object Model), một giao diện lập trình cho phép JavaScript truy cập và thay đổi các phần tử HTML trên trang. Bằng cách thao tác với DOM, lập trình viên có thể tạo ra các hiệu ứng, xác thực biểu mẫu (forms), và cập nhật nội dung trang một cách linh hoạt.</p> </div></div><h2 style='font-size: 1rem; line-height: 1.5rem; font-weight: 700;'>IV. Bí quyết thiết kế web hiệu quả và các công cụ hỗ trợ</h2><div style='padding-left: 10px'><p>Một <strong>giáo trình thiết kế web cơ bản</strong> hoàn chỉnh không chỉ dừng lại ở việc viết mã mà còn phải trang bị các <strong>nguyên lý thiết kế web</strong> và kỹ năng sử dụng <strong>công cụ thiết kế web</strong> hiện đại. Thiết kế hiệu quả là sự kết hợp hài hòa giữa thẩm mỹ và công năng. Nguyên tắc cốt lõi là tập trung vào người dùng, tức là thực hành thiết kế UI/UX. <strong>UI/UX là gì?</strong> UI (User Interface) là giao diện người dùng, bao gồm tất cả các yếu tố hình ảnh như nút bấm, biểu tượng, và <strong>bố cục website</strong>. Một UI tốt phải sạch sẽ, nhất quán và hấp dẫn. UX (User Experience) là trải nghiệm người dùng, đề cập đến cảm nhận tổng thể của người dùng khi tương tác với trang web. Một UX tốt đảm bảo trang web dễ sử dụng, hữu ích và mang lại giá trị. Để hiện thực hóa các ý tưởng thiết kế, các công cụ chuyên dụng đóng vai trò cực kỳ quan trọng. Thay vì chỉ sử dụng các công cụ cũ như Dreamweaver được đề cập trong tài liệu gốc, các nhà thiết kế hiện đại ưa chuộng các phần mềm như <strong>Figma</strong> và <strong>Adobe XD</strong>. Chúng cho phép tạo ra các mẫu thiết kế (mockup) và mẫu thử tương tác (prototype) một cách trực quan trước khi viết mã. Đối với việc lập trình, một trình soạn thảo mã nguồn mạnh mẽ như <strong>Visual Studio Code</strong> là không thể thiếu. Nó cung cấp các tính năng như tô màu cú pháp, gợi ý mã, và tích hợp các tiện ích mở rộng giúp tăng tốc độ và hiệu quả công việc.</p> <h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>4.1. Tìm hiểu các nguyên lý thiết kế web và bố cục website</h3><div style='padding-left: 30px'><p>Các <strong>nguyên lý thiết kế web</strong> là những quy tắc nền tảng giúp tạo ra một giao diện hài hòa và hiệu quả. Các nguyên tắc này bao gồm: hệ thống phân cấp thị giác (visual hierarchy) để hướng sự chú ý của người dùng đến các yếu tố quan trọng; sự cân bằng (balance) để tạo cảm giác ổn định; sự tương phản (contrast) để làm nổi bật các thành phần; và không gian trắng (whitespace) để giao diện thoáng đãng và dễ đọc. Việc áp dụng các nguyên tắc này vào <strong>bố cục website</strong> sẽ tạo ra một cấu trúc logic và dễ điều hướng, giúp người dùng tìm thấy thông tin họ cần một cách nhanh chóng.</p> </div><h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>4.2. Giới thiệu về các công cụ thiết kế web Figma và Adobe XD</h3><div style='padding-left: 30px'><p>Các <strong>công cụ thiết kế web</strong> hiện đại đã thay đổi hoàn toàn quy trình làm việc. <strong>Figma</strong> là một công cụ dựa trên nền tảng web, nổi bật với khả năng cộng tác theo thời gian thực, cho phép nhiều người cùng làm việc trên một tệp thiết kế. <strong>Adobe XD</strong> là một lựa chọn mạnh mẽ khác, tích hợp tốt với hệ sinh thái của Adobe. Cả hai công cụ này đều cho phép nhà thiết kế tạo ra các wireframe, mockup và prototype có độ trung thực cao. Chúng giúp trực quan hóa ý tưởng, thử nghiệm các luồng người dùng và nhận phản hồi sớm trước khi bắt đầu giai đoạn <strong>lập trình web front-end</strong>.</p> </div><h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>4.3. Lựa chọn trình soạn thảo mã nguồn Visual Studio Code</h3><div style='padding-left: 30px'><p><strong>Visual Studio Code</strong> (VS Code) đã trở thành trình soạn thảo mã nguồn tiêu chuẩn trong ngành phát triển web. Đây là một công cụ miễn phí, mạnh mẽ và có khả năng tùy biến cao. VS Code hỗ trợ hàng trăm ngôn ngữ lập trình và cung cấp một hệ sinh thái tiện ích mở rộng (extensions) phong phú. Các tiện ích như Live Server, Prettier, và ESLint giúp tự động hóa các tác vụ lặp đi lặp lại, định dạng mã nguồn nhất quán và phát hiện lỗi sớm, từ đó cải thiện đáng kể năng suất của lập trình viên.</p> </div></div><h2 style='font-size: 1rem; line-height: 1.5rem; font-weight: 700;'>V. Ứng dụng phương pháp thiết kế web responsive hiện đại</h2><div style='padding-left: 10px'><p>Trong bối cảnh người dùng truy cập internet từ vô số thiết bị với kích thước màn hình khác nhau, <strong>thiết kế web responsive</strong> (thiết kế đáp ứng) không còn là một lựa chọn mà đã trở thành một yêu cầu bắt buộc. Đây là phương pháp tiếp cận nhằm đảm bảo trang web hiển thị và hoạt động tốt trên mọi thiết bị, từ máy tính để bàn, máy tính bảng đến điện thoại di động. Một trang web responsive sẽ tự động điều chỉnh <strong>bố cục website</strong>, kích thước hình ảnh và cỡ chữ để phù hợp với không gian hiển thị của thiết bị. Điều này không chỉ cải thiện trải nghiệm người dùng mà còn là một yếu tố quan trọng được các công cụ tìm kiếm như Google đánh giá cao, ảnh hưởng trực tiếp đến thứ hạng SEO. Việc triển khai <strong>thiết kế web responsive</strong> dựa trên ba kỹ thuật chính: lưới linh hoạt (flexible grid), hình ảnh linh hoạt (fluid images), và media queries. Lưới linh hoạt sử dụng các đơn vị tương đối như phần trăm (%) thay vì các đơn vị cố định như pixel (px) để các cột bố cục có thể co giãn theo kích thước màn hình. Hình ảnh linh hoạt đảm bảo hình ảnh không bị tràn ra ngoài vùng chứa của chúng. Cuối cùng, media queries là các quy tắc CSS cho phép áp dụng các kiểu định dạng khác nhau dựa trên các đặc điểm của thiết bị như chiều rộng màn hình. Việc nắm vững kỹ thuật này là một phần không thể thiếu trong bất kỳ <strong>giáo trình thiết kế web cơ bản</strong> nào ngày nay.</p> <h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>5.1. Tầm quan trọng của thiết kế web responsive trong SEO</h3><div style='padding-left: 30px'><p><strong>Thiết kế web responsive</strong> có ảnh hưởng trực tiếp đến hiệu quả SEO. Google ưu tiên các trang web thân thiện với thiết bị di động (mobile-friendly) trong kết quả tìm kiếm của mình thông qua chỉ số Mobile-First Indexing. Một trang web responsive sử dụng cùng một URL và cùng một mã HTML cho tất cả các thiết bị, giúp Google dễ dàng thu thập dữ liệu và lập chỉ mục nội dung. Ngược lại, việc có một trang web riêng cho di động (ví dụ: m.domain.com) có thể tạo ra các vấn đề về nội dung trùng lặp và làm phức tạp quá trình quản lý. Do đó, áp dụng thiết kế đáp ứng là một chiến lược thông minh để cải thiện cả trải nghiệm người dùng và 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. Kỹ thuật Media Queries trong CSS cho người mới bắt đầu</h3><div style='padding-left: 30px'><p>Media Queries là công nghệ cốt lõi của <strong>thiết kế web responsive</strong>. Đây là một tính năng của CSS3 cho phép áp dụng các khối CSS chỉ khi một điều kiện nhất định được đáp ứng. Điều kiện phổ biến nhất là chiều rộng của khung nhìn (viewport). Ví dụ, một nhà thiết kế có thể viết một quy tắc để áp dụng bố cục một cột khi chiều rộng màn hình nhỏ hơn 768px (điện thoại di động), và bố cục hai cột khi chiều rộng lớn hơn 768px (máy tính bảng và máy tính để bàn). Việc sử dụng media queries giúp tạo ra các điểm ngắt (breakpoints) mà tại đó thiết kế sẽ thay đổi để tối ưu hóa cho không gian hiển thị, mang lại một trải nghiệm mượt mà và nhất quán trên mọi thiết bị.</p> </div></div><h2 style='font-size: 1rem; line-height: 1.5rem; font-weight: 700;'>VI. Kết luận và định hướng phát triển sau khóa học web cơ bản</h2><div style='padding-left: 10px'><p>Hoàn thành một <strong>giáo trình thiết kế web cơ bản</strong> là một cột mốc quan trọng, đánh dấu việc người học đã nắm vững những kiến thức nền tảng nhất. Từ việc hiểu <strong>HTML cơ bản</strong> để xây dựng cấu trúc, sử dụng <strong>CSS cơ bản</strong> để tạo phong cách, cho đến việc thêm thắt sự tương tác bằng <strong>JavaScript cho người mới bắt đầu</strong>, người học đã có đủ khả năng để tự mình xây dựng những trang web tĩnh hoàn chỉnh và responsive. Quá trình này không chỉ trang bị kỹ năng kỹ thuật mà còn rèn luyện tư duy logic, khả năng giải quyết vấn đề và óc thẩm mỹ. Tuy nhiên, thế giới công nghệ luôn vận động và phát triển không ngừng. Nền tảng cơ bản chỉ là bước khởi đầu. Để thực sự trở thành một chuyên gia <strong>lập trình web front-end</strong>, người học cần liên tục cập nhật kiến thức và khám phá các công nghệ mới. Con đường phía trước còn rất rộng mở với các thư viện và framework hiện đại, các kỹ thuật tối ưu hóa hiệu suất, và các lĩnh vực chuyên sâu hơn như phát triển back-end hay bảo mật web. Việc không ngừng học hỏi và thực hành qua các dự án thực tế là chìa khóa để tiến xa hơn trên <strong>lộ trình học thiết kế web</strong> chuyên nghiệp.</p> <h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>6.1. Tóm tắt các kỹ năng cốt lõi sau khi hoàn thành khóa học</h3><div style='padding-left: 30px'><p>Sau khi hoàn thành <strong>khóa học thiết kế web</strong> cơ bản, người học sẽ sở hữu một bộ kỹ năng cốt lõi bao gồm: khả năng phân tích yêu cầu và lên <strong>cấu trúc website</strong> logic; sử dụng thành thạo HTML và CSS để chuyển đổi một bản thiết kế (từ <strong>Figma</strong> hoặc <strong>Adobe XD</strong>) thành một trang web tĩnh; áp dụng các <strong>nguyên lý thiết kế web</strong> để tạo ra giao diện thân thiện; triển khai <strong>thiết kế web responsive</strong> để đảm bảo khả năng tương thích đa thiết bị; và viết các đoạn mã JavaScript đơn giản để xử lý sự kiện và tương tác cơ bản. Đây là nền tảng vững chắc để xây dựng portfolio và ứng tuyển các vị trí thực tập sinh hoặc junior front-end.</p> </div><h3 style='padding-left: 20px; font-weight: 700; padding-top: 10px; padding-bottom: 8px;'>6.2. Các bước tiếp theo trong lộ trình học lập trình web front end</h3><div style='padding-left: 30px'><p>Con đường học <strong>lập trình web front-end</strong> không dừng lại ở kiến thức cơ bản. Các bước tiếp theo bao gồm việc tìm hiểu sâu hơn về JavaScript (ES6+), các khái niệm bất đồng bộ (asynchronous programming). Sau đó, người học nên tiếp cận với các thư viện và framework phổ biến như React, Angular, hoặc Vue.js. Những công cụ này giúp xây dựng các ứng dụng web phức tạp, có khả năng mở rộng một cách hiệu quả hơn. Ngoài ra, việc học về các công cụ quản lý phiên bản như Git, các bộ tiền xử lý CSS như SASS, và các công cụ đóng gói module như Webpack cũng là những kỹ năng quan trọng giúp hoàn thiện bộ công cụ của một nhà phát triển web chuyên nghiệp.</p> </div></div> </div> </article> <p class="text-xs text-gray-400 italic mt-3"> Tóm tắt và mô tả trên trang này được tạo với sự hỗ trợ của AI. Nếu bạn thấy nội dung không chính xác hoặc có vấn đề, vui lòng <a href="https://vn-document.net/ve-chung-toi" class="underline hover:text-gray-600">Báo lỗi nội dung</a>. </p> <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> 16/08/2025 </div> </div> </div> <div class="container mx-auto my-6"> <div class="doc-layout-flex">  <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/huong-dan-thiet-ke-3d-voi-creo-parametric/9846555559" title="Hướng Dẫn Thiết Kế 3D Với Creo Parametric" 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 Thiết Kế 3D Với Creo Parametric</span> <span class="related-doc-meta"> 131 trang <span aria-hidden="true">·</span> 42 lượt xem <span aria-hidden="true">·</span> 6 lượt tải </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/giao-trinh-nghe-thuat-chu-thiet-ke-do-hoa/9538448646" title="Giáo Trình Nghệ Thuật Chữ Trong Thiết Kế Đồ Họa" 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 Nghệ Thuật Chữ Trong Thiết Kế Đồ Họa</span> <span class="related-doc-meta"> 211 trang <span aria-hidden="true">·</span> 36 lượt xem <span aria-hidden="true">·</span> 4 lượt tải </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/luan-an-tien-si-thiet-ke-nhan-dien-thuong-hieu-viet-nam/9383566379" title="Luận án tiến sĩ về thiết kế nhận diện thương hiệu 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">Luận án tiến sĩ về thiết kế nhận diện thương hiệu tại</span> <span class="related-doc-meta"> 355 trang <span aria-hidden="true">·</span> 16 lượt xem <span aria-hidden="true">·</span> 3 lượt tải </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/nghien-cuu-thiet-ke-do-hoa-tai-tp-hcm-1986-2019/8936536859" title="Nghiên cứu thiết kế đồ họa tại TP.HCM (1986-2019)" 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 thiết kế đồ họa tại TP.HCM (1986-2019)</span> <span class="related-doc-meta"> 282 trang <span aria-hidden="true">·</span> 10 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-design-thi-giac-kien-thuc-co-ban-cho-nganh-thiet-ke-do-hoa/9336676839" title="Giáo Trình Design Thị Giác: Kiến Thức Cơ Bản Cho Ngành" 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 Design Thị Giác: Kiến Thức Cơ Bản Cho Ngành</span> <span class="related-doc-meta"> 69 trang <span aria-hidden="true">·</span> 15 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-adobe-indesign-huong-dan-thiet-ke-do-hoa/9757587779" title="Giáo Trình Adobe InDesign: Hướng Dẫn Thiết Kế Đồ Họa Cơ Bả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">Giáo Trình Adobe InDesign: Hướng Dẫn Thiết Kế Đồ Họa Cơ Bản</span> <span class="related-doc-meta"> 102 trang <span aria-hidden="true">·</span> 9 lượt xem <span aria-hidden="true">·</span> 1 lượt tải </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/tai-lieu-giang-day-adobe-photoshop-cho-sinh-vien-thiet-ke-do-hoa-2021/9886765835" title="Tài liệu giảng dạy Adobe Photoshop cho sinh viên thiế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 giảng dạy Adobe Photoshop cho sinh viên thiết</span> <span class="related-doc-meta"> 91 trang <span aria-hidden="true">·</span> 8 lượt xem <span aria-hidden="true">·</span> 1 lượt tải </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/doi-moi-thiet-ke-do-hoa-truong-trung-cap-nghe-ha-noi/8936385579" title="Đổi mới thiết kế đồ họa tại trường trung cấp nghề 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">Đổi mới thiết kế đồ họa tại trường trung cấp nghề Hà</span> <span class="related-doc-meta"> 88 trang <span aria-hidden="true">·</span> 2 lượt xem </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/giai-phap-nang-cao-hieu-qua-tu-kiem-dinh-chuong-trinh-dao-tao-thiet-ke-do-hoa/5987556349" title="Giải pháp nâng cao hiệu quả tự kiểm định chương trình" 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ải pháp nâng cao hiệu quả tự kiểm định chương trình</span> <span class="related-doc-meta"> 169 trang <span aria-hidden="true">·</span> 1 lượt xem </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/mo-phong-chuyen-dong-tau-vu-tru-trong-do-hoa-may-tinh/7968668759" title="Mô phỏng chuyển động tàu vũ trụ trong đồ họa máy tính" 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">Mô phỏng chuyển động tàu vũ trụ trong đồ họa máy tính</span> <span class="related-doc-meta"> 51 trang <span aria-hidden="true">·</span> 4 lượt xem </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/quan-ly-mau-hieu-qua-trong-in-ky-thuat-so-tai-hcmute/5984355649" title="Quản lý màu hiệu quả trong in kỹ thuật số tại HCMUTE" 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">Quản lý màu hiệu quả trong in kỹ thuật số tại HCMUTE</span> <span class="related-doc-meta"> 64 trang <span aria-hidden="true">·</span> 12 lượt xem </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/khong-nang-ung-dung-phan-mem-deskpack-bao-bi-nhan-hang/7968378859" title="Khả năng ứng dụng phần mềm Deskpack trong thiết kế bao" 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">Khả năng ứng dụng phần mềm Deskpack trong thiết kế bao</span> <span class="related-doc-meta"> 202 trang <span aria-hidden="true">·</span> 3 lượt xem </span> </span> </a> </li> </ul> </div> </div>  <div class="doc-main-col">  <div class="doc-viewer-container">  <div class="doc-viewer-inner"> <div wire:snapshot="{"data":{"urlPreview":null,"document":[null,{"class":"App\\Models\\Document","key":323144,"s":"mdl"}],"type":"preview"},"memo":{"id":"2zXU6uCv7R9MzCg1rwBg","name":"document.eager-load-document-detail","path":"document\/giao-trinh-thiet-ke-web-co-ban\/9448653843","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"21dd50fa4cf91129a72e237f959635600125b6dec3fdea36371eec693739ae87"}" wire:effects="{"listeners":["eagerLoad"]}" wire:id="2zXU6uCv7R9MzCg1rwBg">   <div class="w-full flex justify-center"> <img width="300px" height="500px" src="https://vn-document.net/thumb/2025_08/16/L_lze1755328871" alt="Giáo trình thiết kế web cơ bản" class="max-w-full object-cover min-w-[320px] w-full"> </div>   </div> </div>  <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">  <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"> Giáo trình thiết kế web cơ bản </p> </div> </div>  <div class="doc-btn-col"> <a rel="nofollow" href="https://vn-document.net/tmp-payment/9448653843" 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>  <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: Trường cao đẳng kỹ thuật lý tự trọng thành phố Hồ Chí Minh </h4> <h4 class="hidden"> Chuyên ngành: Công nghệ thông tin </h4> <h4 class="hidden"> Đề tài: Thiết kế web cơ bản </h4> <h4 class="hidden"> Loại tài liệu: Giáo trình </h4> <h4 class="hidden"> Năm xuất bản: 2006 - 2007 </h4> <h4 class="hidden"> Địa điểm: Hồ Chí Minh </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;">CHƯƠNG 1: GIOI THEEU KHAI QUAT VE TRANG WEB 1.1, Các khái niệm cơ bản: 9 Ínternet là một mạng máy tính toàn câu trong đó các máy truyền thông với nhau theo một ngôn ngữ chung là TCPIP. Ímtranet đó là mạng cục bộ không nôi vào Internet và cách truyền thông của chúng cũng theo ngôn ngữ chung là TCP/IP. ~ MO hinh Client-Server: d6 la m6 hinh khach-chu. Server chira tar nguyên dùng chung cho nhiều máy khác(Client) như các tập tin, tài liệu, máy in.</p> <p style="margin-bottom:0.75rem;">Ưu điểm của mô hình này là tiết kiệm về thời gian, tài chính, đễ quản tri hé théng. “Cách hoạt động của mô hình này là máy Server ở trang thái hoạt động(24/24) và chờ yêu cầu từ phía Client. Khi Client yêu câu thì máy Server đáp ứng yêu câu đó. Internet Server là các Server cung cấp các dịch vụ Internet(Web Server, Mail Server, FTP Server.) Internet Service Provider(ISP): La noi cung cap các dịch vụ Internet cho skhach hàng.</p> <p style="margin-bottom:0.75rem;">Mỗi ISP có nhiều khách hàng và có thể có nhiêu loại địch vụ Internet khác “hau. Internet Protocol : Cac may sw dung trong mạng Internet liên lạc với nhau theo một tiêu chuẩn truyền thông gọi là. IP Address-đia chỉ IP: để việc trao đổi thông tin trọng mạng Internet thực hiện được thì mỗi máy trong mạng cần phải định danh để phân biệt với các máy khác. Theo Internet Protocol moi may tinh trong mang được định danh bằng một nhóm các số được gọi là địa chỉ IP.</p> <p style="margin-bottom:0.75rem;">Địa chỉ IP gồm 4 số thập phân có giá từ 0 đến 255 và được phân cách nhau bởi dấu chấm.1 Địa chỉ IP này có giá trị trong toàn mạng Internet. Uy ban phan phối địa chỉ IP của thế giới sẽ phân chia các nhóm địa chỉ IP cho các quốc gia khác nhau. Thông thường địa chỉ IP của một quốc gia do các cơ quan bưu điện quản lý và phân phối lại cho các ISP. Một máy tính khi thâm nhập vào mạng Internet cân có một dia chi IP.</p> <p style="margin-bottom:0.75rem;">Địa chỉ IP có thể cấp tạp thời hoặc cấp vĩnh viễn. Thông thường các máy Client kết nỗi vao mang Internet thong qua mot ISP bang đường điện thoại. Khi kết nối, ISP sẽ cấp tạm thời một IP cho may Client. Phương thức tr uyén thông tin trong Internet: Khi một máy tính có địa chỉ TP: la _ X(máy X) gửi tin đến máy tính có địa chỉ IP là y (máy “Y) thi phuong thức tru uyễn tin cơ bản diễn ra như sau: Nếu máy X và máy Y cùng năm trên một mạng con thì thông tin sẽ được gửi đi trực tiếp.</p> <p style="margin-bottom:0.75rem;">Còn máy X và Y không cùng nằm trong mạng con thì thông tin sẽ được chuyển tới một máy trung gian có đường thông với các mạng khác rồi mới chuyển tới máy Y, Máy trung gian này gọi la Gateway. World Wide Web(WWW): là một dịch vụ phô biến nhất hiện nay trên Internet. Dịch vu nay đưa ra cách truy xuất các tài liệu của các máy phục vụ dễ dàng thông qua các piao tiếp đồ họa. Để sử dụng dịch vụ này máy Client cân có một chương trình got la Web Browser.</p> <p style="margin-bottom:0.75rem;">Web Browser(trình duyệU: là trình duyệt Web. Dùng để truy xuất các tài liệu trên các Web Server. Cac trình duyệt thông thường hiện nay là Internet Explorer và Netseape Navigator. Home-pagse: là trang web: đầu tiêm trong web site: khi vào một web site nào đớ th TT” “ trang đâu tiên sẽ là trang nay.</p> <p style="margin-bottom:0.75rem;">Trang | - Khoa CNTT Giáo Trình Thiết Kế Web Cơ Bản lên web Hosting provider: là công ty hoặc tế chức đưa các trang của chúng ta Hyperlink : tên khác của hypertextlink l Publish: lam cho trang web chạy được trên mạng nguôn tài URL(Unioform resource locator): một địa chỉ chỉ đến một file cụ thê trong nguyên mạng. a truy xuất tài nguyên từ trình ® Web server là một chương trình đáp ứng lại các yêu cầu dụng cụm từ này để chỉ máy chạy chương trình server `duyệt. Người ta thường sử 712.) Giới Thiệu Khái Quát Về Web thường. Web là một ứng dụng chạy trên mạng(Client-Server), là một ứng dụng thông khắp toàn câu.</p> <p style="margin-bottom:0.75rem;">như bao ứng dụng khác, chỉ có điểm khác biệt là nó được chia sẻ hoặc htm. Trong file Trang web là một file văn bản đơn giản được lưu với đuôi .html trình duyệt web (Web văn bản đó có những tag hoặc những đọan mã đặc biệt mà. browser)có thể hiểu và thông dịch được. Có hai trình duyệt thông dụng là : Internet Explorer va Netscape Navigator Trong chương trình này ta sử dụng trình duyệt IE 1.</p> <p style="margin-bottom:0.75rem;">HTML Là Gì? < - cac - HTML là chữ viết tat cla cum th Hypertext makeup language. No la hang loat đoạn mã chuẩn được quy ước để thiết kế Web và được hiển thị bởi một trình duyệt Web (Web Browser). mà khi ta Hyperfext là từ nói tãt của Hypertext link, là một từ hay một cụm từ biệt trí khác trong click vào đó trình duyệt web sẽ đưa ta đến một trang khác hay một vị trang web Mark up: là cách định dạng văn bản để trình duyệt hiểu vả thông dịch được. Ví dụ ta có thể đánh văn bản trong đó ta có sử dụng những đoan code ø _ Tô đậm,in nghiêng, gạch đưới đòng văn bản.</p> <p style="margin-bottom:0.75rem;">Tạo một danh sách các nút ® 6 Chèn hình ảnh vào trang web. s Chúng ta có thể làm gì với file có đuôi này ' luật dé Language: đây không hẳn là ngôn ngữ lập trình, đây chỉ là tập nhỏ những quy ta định dạng văn ban--”. Trình duyệt(Browser) và trình soạn thao(editor) trang web cài trên Trình đuyệt: là trình dùng để hiển thị trang web. nó là một ứbg dụng dược qua địa chỉ máy người dùng, có có nhiệm vụ tải các trang web từ các web site thông SỐ Các của các trang web và hiển thị chúng.</p> <p style="margin-bottom:0.75rem;">Hiện nay có rất nhiều trình duyệt hai trong trình duyệt khá phổ biến là: Netscape và Internet Explorer. soạn thảo Trình soạn thảo trang web :ø1úp ta tạo, thiết kế các trang, web. Các trình phé bién hién nay la: Notepad. FrontPage va Dreamweaver.</p> <p style="margin-bottom:0.75rem;">Tag HTML 1a gi? Các lệnh HTML được gọi là TAG. nó được dùng đẻ định dang các văn bản trên trang -XvoB. [Dạng chúng của một tap HPML là: <tagName ListProperties> Object </tlagName> ‘Urong do Trang 2 Gido Trinh Thiét Ké Web Co Ban Khoa CNTT ø. <taeName> là tên một thẻ HEMI.</p> <p style="margin-bottom:0.75rem;">ø (Object là đối tượng chúng ta can dinh dang trong trang Web, ° ListPropeties là đanh sách thuộc tính của một Tag. Thuộc tính là những dặc điểm bổ sung vào cho một tag, thứ tự các thuộc tính trong một tag thì không quan trọng: Nếu có từ 2 thuộc tính trở lên thi mỗi thuộc tính ngăn cách nhau bởi khoảng trăng. Chúng ta cần nhớ răng thuộc tính không bao giờ viết ở đầu của một tap khi đó thuộc tính này trở thành tên tag:. <TagName propety1=’valuel’ propety2=’value2’ >Object</TagName> Giá trị của thuộc tính chúng ta có thể bao bọc trong nháy đơn “ hoặc nhảy đôi ` thậm chí ta có thể không bao bọc gi.</p> <p style="margin-bottom:0.75rem;">° <TagName>goi la tag mở và </tagName> gọi là tag đóng. Thông thường thi các tag đều có tag đóng. Nếu nhu tag do khong co tag đóng mà ta viết có tag đóng cũng không sao. Chúng ta cần nhớ rằng trong tag đóng ta dùng ký tự °/.</p> <p style="margin-bottom:0.75rem;">Ký tự này báo cho Web browser biết là hiệu ứng của tag được kết thúc tại đây. Nếu chúng ta quên đi *⁄ thì hiệu ứng của tag này còn ảnh hưởng đến các đối tượng phía sau. Ví dụ I1 <body BGCOLOR="RED”> trong vi du trén BODY la TAGNAME BGCOLOR Ia property RED 1a value. <B> Dong chit in dam</B> khi trinh duyét gap doan ma nay no sé xuat ra trang web Đòng chữ in đậm.</p> <p style="margin-bottom:0.75rem;">Chúng ta có thể lồng các tag vào nhau nhưng có đều phải theo đúng thứ tự chứa nó <Tag1><Tag2>Object</Tag2></Tagl> hoặc <Tagl>Object|<Tag2>Object2 ObJect3</ Tag2></Tagl> Vị dụ 2 _<B><U>In đậm và gạch dưới</U></B> thì trình duyệt sẽ hiện thị In đâm và gạch dưới Lưu ý: một Web browser không quan tâm đến tới việc chúng ta sử dụng chữ hoa hay chữ thường trong việc viét tag Vi du nhu <B>Dong chft in dam </B> thì cũng giéng như .<b>Dong chit in dam </b> hoac <B>Dong chit in dam </b>, Không giống như việc lập trình, nếu như chúng ta có một Idi trong trang HTML. thi trinh duyét sé bo qua va van hién thi noi dung trang Web của chúng tị lên. Một điều cân lưu ý là nếu chúngta v iết một tag sai thì nội dụng bên trong + Tag 10 đó không làm gì cả (nghĩa là trình duyệt không hiểu tag nay do dé nó sẽ không dinh dang). Khi chúng ta viet m ehoano.</p> <p style="margin-bottom:0.75rem;">= ed ROaHTES < B>Dòng chữ1 Trang. 2 Giáo Trình Thiét Ké Web Co Ban — KhoaCNET 1. Ta có thể làm gì trên file HTML e Dinh dang van ban se _ Tạo danh sách øe_ Chèn hình ảnh e Tao link liên kết đến fñile khác _® Tạo, chỉnh sửa bảng # ø Tạo form nhập dữ liệu £ 1. Cấu trúc cơ ban của trang Web Một trang Web thông thường gồm có 2 phần > Phần đầu(<Head></Head>): đây là phần chứa thông tin của trang Web.</p> <p style="margin-bottom:0.75rem;">những gì viết trong phần này sẽ không hiển thị lên trang. _ Web > Phần thân (<Body></Body>): đây là phần chứa nội dung của trang những gì ta muốn thể hiện trên trang thì được viết trong cặp tag này. Ngoài ra để cho các trình duyệt hiểu đây là tài liệu HTML thì phân đầu và phần thân sé bao boc béi cap tag <HTML></HTML> | Nhu vay cấu trúc của một file html được hình thành như sau: <HTML> _ ca <HEAD> </HEAD> <BODY> Nội dung cần hiển thị được trình bảy trong đây </BODY> | : _ ⁄HTMI> 1. Cae TAG can ban trong HTML + †:4:†—Phânloạicác PFAG r2 loại Các phân tử Phần tử mức khối - Đây là các phân tử xuât hiện ở phần thân văn bản.</p> <p style="margin-bottom:0.75rem;">này có thê chứa mức khối được sử dụng để kết câu tài liệu của chúng ta. Khi các phần tử mức khôi bắt đầu ở một hàng moi, chúng ta không cân ghi thẻ kết thúc. Một sô phần tử mức khôi thông thường: Phân tiêu đề (HI đến H6) Đoạn văn bản (P) [Tạng mục danh sach (11) Đường năm ngang (TH) Phan tir mire van ban hay trong dong — Day là những phân tử chứa dữ liệu. Các phần tử này cũng có tế baø gồm các phân từ-trung dòng khác -và-không-dững dau dòng mới.</p> <p style="margin-bottom:0.75rem;">Miột số phần tư riức săn bán thông thường bao ĐÔM: - TS Khoa CNTT Giáo Trình Thiết Kế Web Cơ Bản EM, I,B và FONT (nhắn mạnh ký tự) A (liên kết đa văn bản) BR (ngắt dòng) APPLET (đối tượng được nhúng) [MG (ảnh) 1. <Title> nội-dung hiển thị trên trang Phần tử này được sử dụng để cung cấp tiêu để -cho- phân và kết thúc Web. Tat cả các phần tử tiêu đề phải có thẻ kết thúc.</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/giao-trinh-thiet-ke-web-co-ban/9448653843#download" style="color:var(--color-primary,#1e40af);">Tải xuống đầy đủ</a> </p> </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/lap-trinh-va-phat-trien-web.t56315"> <div class="topic-tag"> Lập trình và phát triển web </div> </a> <a target="_blank" class="!text-black" href="https://vn-document.net/topic/cong-nghe-thong-tin-va-mang-may-tinh.t384514"> <div class="topic-tag"> Công nghệ thông tin và mạng máy tính </div> </a> <a target="_blank" class="!text-black" href="https://vn-document.net/topic/kien-truc-mang-internet.t512146"> <div class="topic-tag"> Kiến trúc mạng Internet </div> </a> </div> </div> </div> <div class="related-docs-container"> <h3 class="related-docs-title"> Có thể bạn quan tâm </h3> <ul class="related-doc-list related-doc-list-cols"> <li> <a href="https://vn-document.net/document/do-an-mon-hoc-trang-bi-dien-trang-bi-dien-cho-mach-chuong-truong-hoc-dung-logo/9387765373" title="Đồ án trang bị điện mạch chuông trường học dùng Logo" 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">Đồ án trang bị điện mạch chuông trường học dùng Logo</span> <span class="related-doc-meta"> 53 trang <span aria-hidden="true">·</span> 1 lượt xem </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/giao-trinh-he-thong-dien-va-dien-tu-oto-phan-1/9646734566" title="Giáo trình Hệ thống điện và điện tử ô tô (Toàn tập P1)" 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 Hệ thống điện và điện tử ô tô (Toàn tập P1)</span> <span class="related-doc-meta"> 59 trang <span aria-hidden="true">·</span> 3 lượt xem </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/giao-trinh-an-toan-dien-cho-sinh-vien-ky-thuat/9886453368" title="Giáo trình an toàn điện cho sinh viên 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">Giáo trình an toàn điện cho sinh viên kỹ thuật</span> <span class="related-doc-meta"> 89 trang <span aria-hidden="true">·</span> 1 lượt xem </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/giao-trinh-an-toan-lao-dong-dien-cong-nghiep-va-dan-dung/9448653388" title="Giáo trình an toàn lao động điện công nghiệp và dân dụng" 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 an toàn lao động điện công nghiệp và dân dụng</span> <span class="related-doc-meta"> 73 trang <span aria-hidden="true">·</span> 2 lượt xem </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/giao-trinh-an-toan-va-moi-truong-cong-nghiep/9764378633" title="Giáo trình An toàn và Môi trường Công nghiệp" 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 An toàn và Môi trường Công nghiệp</span> <span class="related-doc-meta"> 67 trang <span aria-hidden="true">·</span> 13 lượt xem </span> </span> </a> </li> <li> <a href="https://vn-document.net/document/giao-trinh-audio-video-so-ky-thuat-dien-tu/9385467843" title="Giáo trình Audio Video Số cho Kỹ Thuật Điện 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">Giáo trình Audio Video Số cho Kỹ Thuật Điện Tử</span> <span class="related-doc-meta"> 157 trang <span aria-hidden="true">·</span> 1 lượt xem </span> </span> </a> </li> </ul> </div> <div class="detail-page-footer"> <div class="inline-block"> <a rel="nofollow" href="https://vn-document.net/tmp-payment/9448653843" 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 (121 Trang - 7.44 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":"p2DqpBCuVdjpaMDrRWaR","name":"livewire-ui-modal","path":"document\/giao-trinh-thiet-ke-web-co-ban\/9448653843","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"b8f8b71e13bf4f76fc2c14ba882a6b1e09e4df8fc1f3a77b32a55b6b9e23a76c"}" wire:effects="{"listeners":["openModal","destroyComponent"]}" wire:id="p2DqpBCuVdjpaMDrRWaR">  <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-[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">  <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>  <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">  <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>  <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>  <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> <li> <a href="https://vn-document.net/thong-ke/xep-hang-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>Xếp hạng trường </a> </li> <li> <a href="https://vn-document.net/thong-ke/xep-hang-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>Xếp hạng ngành </a> </li> <li> <a href="https://vn-document.net/thong-ke/xu-huong-tai-lieu-theo-nam" 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>Xu hướng theo năm </a> </li> </ul> </nav>  <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>  <div class="border-t border-gray-200 mt-6 lg:mt-8 pt-4 lg:pt-6">  <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>  <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-AVXKIkRg.js" /><link rel="modulepreload" href="https://vn-document.net/build/assets/vendor-BCn5QfZZ.js" /><script type="module" src="https://vn-document.net/build/assets/app-AVXKIkRg.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="NeRhEDdKe5viGJJGTeLHAclgu4bT0omtXOWx8TN4" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>