Hướng dẫn chi tiết cách Clone nội dung Website và tùy biến giao diện để lưu trữ Offline
Trong quá trình học tập và làm việc, việc lưu trữ lại những bài viết kỹ thuật hay để tra cứu khi không có mạng là vô cùng cần thiết. Thay vì chỉ copy văn bản thông thường, bài viết này sẽ hướng dẫn bạn cách “clone” toàn bộ nội dung từ website vohauipr.com về máy tính dưới định dạng HTML. Không chỉ dừng lại ở việc lưu trữ, bạn còn học được cách can thiệp vào mã nguồn bằng Notepad và sử dụng JavaScript Console để tùy biến giao diện theo ý thích cá nhân. Hãy cùng bắt đầu hành trình trở thành một “vọc sĩ” web thực thụ ngay sau đây!
Hướng Dẫn: Cách Sao Chép Và Lưu Bài Viết Từ Website Thành File HTML Offline
Nếu bạn muốn lưu trữ một bài viết kỹ thuật để đọc khi không có mạng hoặc làm tài liệu cá nhân, hãy làm theo các bước hướng dẫn dưới đây.
Bước 1: Truy cập bài viết cần sao chép
Đầu tiên, bạn mở trình duyệt và truy cập vào trang web vohauipr.com. Tìm đến bài viết mà bạn muốn lưu trữ (ví dụ: bài hướng dẫn về Robot 6 trục). Click vào nút Read More để mở toàn bộ nội dung bài viết.
Bước 2: Mở công cụ kiểm tra phần tử (Inspect)
Tại trang bài viết, bạn nhấn chuột phải vào bất kỳ vị trí nào và chọn Inspect (Kiểm tra), hoặc nhấn phím tắt F12 trên bàn phím. Hành động này sẽ mở bảng công cụ dành cho nhà phát triển (Developer Tools) ở phía bên phải hoặc dưới màn hình.
Bước 3: Sao chép toàn bộ mã nguồn bài viết
Trong tab Elements của bảng Inspect, bạn tìm đến thẻ <body>. Chuột phải vào thẻ này, chọn Copy, sau đó chọn tiếp Copy outerHTML. Thao tác này giúp bạn lấy toàn bộ mã nguồn bao gồm cả Header, Footer và nội dung chính.
Bước 4: Dán mã vào Notepad và lưu file HTML
Mở phần mềm Notepad (hoặc bất kỳ trình soạn thảo văn bản nào), dán toàn bộ đoạn mã vừa copy vào. Sau đó, vào File > Save As, đặt tên file có đuôi là .html (ví dụ: Whole Post to html.html) và chọn Encoding là UTF-8 trước khi nhấn Save.
Bước 5: Mở file HTML vừa tạo bằng trình duyệt
Bây giờ, bạn tìm đến thư mục vừa lưu file. Nhấn chuột phải vào file, chọn Open with và chọn trình duyệt bạn đang sử dụng (như Google Chrome, Microsoft Edge).
Bước 6: Cách khác – Xem mã nguồn trực tiếp (View Source)
Một cách nhanh hơn để lấy mã nguồn của toàn bộ trang là nhấn chuột phải vào khoảng trắng trên trang web và chọn View page source (Xem nguồn trang), hoặc nhấn tổ hợp phím Ctrl + U.
Bước 7: Sao chép mã từ trang View Source
Một tab mới sẽ hiện ra chứa toàn bộ mã HTML của trang web. Bạn nhấn Ctrl + A để chọn tất cả, sau đó nhấn chuột phải chọn Copy (hoặc Ctrl + C). Sau đó lặp lại bước 4 để lưu thành file.
Bước 8: Kiểm tra kết quả hiển thị offline
Sau khi lưu, bạn có thể mở file lên. Kết quả là bạn sẽ có một bản sao của trang web hiển thị trên máy tính của mình mà không cần kết nối internet. Lưu ý: Một số hình ảnh hoặc định dạng CSS có thể cần mạng để tải nếu chúng dùng link trực tiếp.
Bước 9: Cách chỉ sao chép phần nội dung chính (Option 1)
Nếu bạn không muốn lấy Header hay Footer mà chỉ muốn phần nội dung, hãy tìm thẻ <div id="content" class="site-content"> trong bảng Inspect. Chuột phải vào thẻ đó và chọn Copy outerHTML.
Bước 10: Cách chỉ sao chép phần bài viết cụ thể (Option 2)
Để lấy phần bài viết “sạch” nhất, bạn hãy rà chuột trong bảng Inspect đến thẻ <main id="site-content"> hoặc thẻ <article>. Khi vùng nội dung bài viết trên màn hình được bôi xanh, hãy thực hiện Copy outerHTML để lấy chính xác phần kiến thức bạn cần.
Mẹo nhỏ: Việc lưu dưới dạng HTML giúp bạn giữ được cấu trúc văn bản tốt hơn so với việc chỉ Copy-Paste thông thường vào Word!
Hướng Dẫn Nâng Cao: Tùy Biến Và Chỉnh Sửa Nội Dung Website Offline
Sau khi đã biết cách lưu toàn bộ trang, các bước dưới đây sẽ giúp bạn “xử lý” file HTML theo ý muốn cá nhân.
Bước 11: Sao chép riêng lẻ phần nội dung bài viết
Nếu bạn chỉ muốn lưu phần chữ và hình ảnh chính của bài viết (bỏ qua menu và thanh bên), hãy mở Inspect, tìm thẻ <div class="post-content">. Chuột phải chọn Copy > Copy outerHTML.
Bước 12: Lưu nội dung riêng lẻ vào file mới
Mở một file Notepad mới, dán mã vừa copy vào. Khi lưu file, hãy đặt tên gợi nhớ như div class=post-content - Done.html. Đừng quên chọn định dạng All Files và Encoding UTF-8.
Bước 13: Mở file nội dung đã lọc bằng trình duyệt
Chuột phải vào file mới tạo, chọn Open with > Google Chrome. Lúc này, trình duyệt chỉ hiển thị duy nhất phần nội dung bài viết bạn đã chọn, giúp việc đọc tập trung và sạch sẽ hơn.
Bước 14: Chỉnh sửa nội dung file HTML bằng Notepad
Để thay đổi bất kỳ nội dung nào trên trang (ví dụ: đổi tiêu đề), bạn chuột phải vào file HTML trên máy tính, chọn Open with > Notepad. Đây là cách bạn can thiệp trực tiếp vào mã nguồn offline.
Bước 15: Tìm và xóa/sửa các thành phần không cần thiết
Trong Notepad, bạn có thể tìm các đoạn văn bản cụ thể. Ví dụ: tìm dòng chữ tiêu đề trang “Dịch vụ điện…” và tiến hành xóa bỏ hoặc thay thế bằng nội dung của riêng bạn.
Bước 16: Lưu đè và kiểm tra kết quả chỉnh sửa
Sau khi sửa trong Notepad, nhấn Ctrl + S để lưu lại. Quay lại trình duyệt và nhấn F5 (Refresh). Bạn sẽ thấy phần tiêu đề hoặc nội dung bạn vừa sửa đã biến mất hoặc thay đổi theo ý muốn.
Bước 17: Sử dụng Console để can thiệp giao diện
Mở file HTML của bạn bằng trình duyệt, nhấn F12 và chuyển sang tab Console. Nếu trình duyệt hiện cảnh báo bảo mật, hãy gõ dòng chữ "allow pasting" và nhấn Enter để kích hoạt quyền dán code.
Bước 18: Thay đổi màu nền bằng JavaScript
Tại cửa sổ Console, bạn nhập đoạn mã sau để đổi màu nền trang web sang màu cam: document.body.style.backgroundColor = "orange"; Sau đó nhấn Enter.
Bước 19: Hoàn tất và xem kết quả tức thì
Ngay lập tức, toàn bộ màu nền của trang web offline sẽ chuyển sang màu cam. Đây là cách tuyệt vời để bạn thực hành làm quen với code JavaScript và tùy biến giao diện đọc tin theo sở thích cá nhân.
Lưu ý: Tất cả các thay đổi này chỉ có tác dụng trên file bạn đã lưu về máy tính (offline) và không làm ảnh hưởng đến website gốc của tác giả đâu nhé!