How to Copy a Website

How to Copy a Website

Learning how to code websites in HTML and CSS can be a long and arduous process, especially if you are trying to teach yourself from scratch. While you can buy books that will walk you through the process of HTML coding, sometimes there are concepts you need to see in action in order to fully comprehend them. Being able to copy a website so you can dissect it can be extremely helpful. Here's how to copy a website so you can take it apart, bit by bit, and learn more about how HTML coding works.

1= Browse to a website that features the elements you would like to learn.

You can do this in Microsoft Internet Explorer, Firefox, Chrome, Safari or any other browser of your choice.

2=Right-click on any part of the webpage and choose "Save as" from the options menu .

The page's HTML title will be the default file name. You can change this to something more concise or descriptive when you save the website HTML.

Make sure to keep the file's extension (.htm, .html or .xml), otherwise it will not open properly. Browse to a location within the Save window where you want to save the file, then click the Save button.

3=Launch the Notepad application in your Windows computer or TextEdit if working on a Mac.

4= Choose "File," then "Open" from the drop- down list.

5= Locate the website HTML file you saved to your computer and click "Open ." You may need to change the options to "*.* All files" from the Open window in order for your .html, .htm or .xml file to show up. The default is typically set to show only files with a .txt extension.

6=Identify the elements used in your website .

For example, the website may link to an external CSS file that provides all of t​he CSS rules for the website design. In order to view this CSS file, right-click the website page from within your browser, choose "View source" and then click the linked website CSS file.

The layout of the website will probably have it split into divisions, signified in the HTML coding as < DIV >.

Remember that each element needs an opening and closing tag. Any notes the coder placed in the website HTML coding for his own or future webmaster use will be placed within "< !--" and "-- >" tags. Look for other files that are linked to this main HTML file, such as images (.jpg or .png) or sound files (.wav).

test