PS PageSection Try It Now

How To Copy, Save And Download Any Website (Webpage) As An HTML Template

author_image
By PageSection
Updated 18 October 2021

As a web creative, you may pick a special interest in a specific website for different reasons. Maybe you like the design, maybe it is for a study or research purpose, or maybe you actually feel inspired and want to create or edit something similar. Web browsers come with a handy set of saving features, but for this post, we will cover the save as HTML feature which lets you save a website and some of its resources as used by the web browser.

Disclaimer: This post is not intended to promote copyright violations across the web, but rather to help users of the HTML Editor by PageSection when creating HTML website templates to upload and edit for various creative, and hopefully legal, reasons.

Steps taken to save an HTML webpage

Picture of a browser's right-click options

1. Visit the website or webpage using your PC's web browser

Navigate to the target website or webpage by inserting a valid URL in your web browser's URL search bar. You can also use a search engine to find the URL if you are not sure.

Note: You are advised to use a Personal Computer (desktop or laptop) as mobile devices tend to have limited web browsers which may not have the "Save Page As HTML" functionality.

2. Wait for the page to finish loading

Cascading Style Sheets (CSS) files, images, JavaScript scripts and many other resources are automatically downloaded by the browser when rendering a webpage. You need to wait for them to finish loading to get a usable preview of the HTML content. In some cases, resources may never load and will return "Not Found" (HTTP 404) errors when the browser fails to access them. In other scenarios, a website may be too dynamic to actually ever finish loading which is honestly a bad experience. This is common when a lot of JavaScript plugins and frameworks are used, for example when you see the comments section always loading but never completing. In such cases, it is pointless to keep waiting therefore feel free to ignore and move on to the next step.

3. Close any open popups or modals

Many websites automatically open popups and modals after loading. The most common case being that about accepting terms, cookies and other policies of the website. In many cases, this is rather annoying to users, but it is also required by law especially due to recent issues arising in regards to user privacy concerns. But enough about that.

You do NOT want to save a page with a popup open, as that popup may not be easy to remove/hide/cancel after being saved in an unexpected state. The JavaScript logic on the page may also prevent certain interactions if the page does not meet certain conditions such as if the page is not online.

Therefore simply close any non-required popups and menus as a precaution. But please note that this may not always work as the JavaScript loaded by the page may still open popups and perform other unforeseen changes even after being saved locally.

4. Save the page as HTML (complete)

Right-click and select "Save As" HTML to save any webpage using your web browser. You can also use Ctrl+S on Windows or ⌘+S on MacOS to access the save menu. Be sure to save using the HTML file option (or even HTML Complete in some cases) so as to save both the html page and the various resources that can be saved by the browser.

5. (Optional) Possible issues and solutions

In some cases, certain CSS files may not be saved. Be sure to manually identify what resources fail to load, as in return "404 not found" errors, when your html page is loading a web browser. This may not be a huge problem however so feel free to ignore it as the missing files may be due to offline loading and will therefore be resolved with online internet access.

Lastly, one big issue is pages that are more of JavaScript than HTML. For example those that use JavaScript-heavy frameworks that dynamically change entire pages. Such pages tend to never work offline as they may need to communicate with servers and other dependencies so as to load the dynamic data accessed from other sources. These external dependencies cannot be downloaded by basic browser saving functionality, you will need a more powerful tool such as a web-cloning or web-ripper tool but that is for extreme use cases.

PageSection

PageSection provides web services. This includes a service that lets users upload files and create URL web links, or even upload an entire HTML website or template. All you need to do is place the website/webpage files in a single zip file, and upload them into your registered user account. Simple.

How To Upload And Link A Website
Website Templates ~ Client Websites ~ Personal Websites

Get HTML Project

Guide

This could be a website for a client, or for personal use. Get the necessary project files of the website to upload

Create Zip File

Guide

Put the website (project) files in a single zipped (.zip) file. Put them at the "top" and not within another folder

Upload Zip File

Guide

Upload the zip file using our service to create a project and receive a link. Later you can edit or delete the project

Receive Web Link

Guide

After any successful project upload, you will receive a web URL link which can be used to visit or share the website

In addition, we provide an advanced HTML Editor that lets you edit any HTML website or template (with valid markup) that you upload to our platform. This includes full content editing and a DOM interface that provides value to a variety of users including copywriters, frontend designers, students and many more. Visit our homepage for more information.

Feel free to ask any questions using our support email, support@pagesection.com, in regards to any of our products or services. You can also use the support email to make a request for a special template in case you aren't able to get one by yourself. Until next time. Cheers.