How Can I Copy A Template Html File From One Directory To Another Html Javascript

Dealing with files

Previous
Overview: Getting started with the web
Next

A website consists of many files: text content, code, stylesheets, media content, and so on. When yous're edifice a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one some other, and get all your content looking right before yous eventually upload them to a server. Dealing with files discusses some issues y'all should be aware of then you can set upwardly a sensible file structure for your website.

Where should your website live on your computer?

When you are working on a website locally on your estimator, you should keep all the related files in a single folder that mirrors the published website's file structure on the server. This folder tin can live anywhere yous like, but yous should put it somewhere where you can easily notice information technology, maybe on your Desktop, in your Home binder, or at the root of your hard bulldoze.

Cull a place to store your website projects. Inside your chosen identify, create a new folder chosen web-projects (or like). This is where all your website projects volition live.
Within this first folder, create some other binder to store your showtime website in. Call it test-site (or something more than imaginative).

An aside on casing and spacing

You'll detect that throughout this article, we ask you to proper name folders and files completely in lowercase with no spaces. This is because:

Many computers, particularly web servers, are case-sensitive. So for example, if you put an paradigm on your website at test-site/MyImage.jpg and then in a different file you try to invoke the paradigm equally test-site/myimage.jpg, it may not work.
Browsers, web servers, and programming languages do non handle spaces consistently. For example, if you utilise spaces in your filename, some systems may treat the filename equally two filenames. Some servers volition replace the areas in your filenames with "%xx" (the character code for spaces in URLs), resulting in all your links being broken. It's amend to separate words with hyphens, rather than underscores: my-file.html vs. my_file.html.

The short answer is that you should use a hyphen for your file names. The Google search engine treats a hyphen as a word separator but does not regard an underscore that way. For these reasons, it is best to get into the habit of writing your folder and file names lowercase with no spaces and with words separated by hyphens, at least until you know what you're doing. That way y'all'll bump into fewer problems later down the road.

What structure should your website have?

Next, let'south wait at what structure our test site should have. The almost common things nosotros'll take on any website project nosotros create are an index HTML file and folders to comprise images, way files, and script files. Let'due south create these at present:

index.html : This file volition more often than not comprise your homepage content, that is, the text and images that people see when they first go to your site. Using your text editor, create a new file called index.html and save information technology simply within your test-site folder.
images folder: This folder will contain all the images that yous use on your site. Create a folder called images, inside your test-site binder.
styles folder: This binder will comprise the CSS code used to style your content (for example, setting text and background colors). Create a folder called styles, within your test-site folder.
scripts folder: This folder will contain all the JavaScript lawmaking used to add interactive functionality to your site (east.g. buttons that load data when clicked). Create a folder called scripts, inside your test-site folder.

Note: On Windows computers, you might take trouble seeing the file names, because Windows has an option chosen Hide extensions for known file types turned on by default. Generally, you can turn this off by going to Windows Explorer, selecting the Binder options... pick, unchecking the Hide extensions for known file types bank check box, and so clicking OK. For more specific data covering your version of Windows, you can search on the web.

File paths

To brand files talk to one some other, you have to provide a file path between them — basically a route, so i file knows where another one is. To demonstrate this, we will insert a little scrap of HTML into our index.html file, and make it display the image you chose in the article "What will your website look like?" Alternatively, you tin choose an existing image at your disposal, on your computer or from the Web, and use it in the following steps:

Copy the image y'all chose before into your images folder.

Open up your index.html file, and insert the following code into the file exactly as shown. Don't worry most what it all means for at present — we'll look at the structures in more detail later in the serial.

                                                                  <!                        DOCTYPE                        html                        >                                                                                              <html                        >                                                                                              <head                        >                                                                                              <meta                        charset                                                  =                          "utf-eight"                                                >                                                                                              <championship                        >                      My test page                                                  </title                        >                                                                                              </head                        >                                                                                              <torso                        >                                                                                              <img                        src                                                  =                          "                          "                                                alt                                                  =                          "My test image"                                                >                                                                                              </body                        >                                                                                              </html                        >

The line <img src="" alt="My test image"> is the HTML code that inserts an prototype into the page. We demand to tell the HTML where the image is. The image is within the images directory, which is in the aforementioned directory as alphabetize.html. To walk down the file construction from index.html to our prototype, the file path we'd need is images/your-image-filename. For example, our image is called firefox-icon.png, and so the file path is images/firefox-icon.png.
Insert the file path into your HTML code between the double quote marks of the src="" code.
Relieve your HTML file, and then load it in your web browser (double-click the file). You should see your new webpage displaying your epitome!

A screenshot of our basic website showing just the Firefox logo - a flaming fox wrapping the world

Some general rules for file paths:

To link to a target file in the same directory as the invoking HTML file, just utilise the filename, east.g. my-prototype.jpg.
To reference a file in a subdirectory, write the directory proper noun in front of the path, plus a forward slash, east.g. subdirectory/my-paradigm.jpg.
To link to a target file in the directory above the invoking HTML file, write two dots. So for instance, if alphabetize.html was inside a subfolder of test-site and my-image.jpg was inside test-site, yous could reference my-prototype.jpg from index.html using ../my-image.jpg.
Y'all can combine these as much as y'all similar, for instance ../subdirectory/another-subdirectory/my-image.jpg.

For at present, this is about all you demand to know.

Notation: The Windows file system tends to use backslashes, not frontwards slashes, east.g. C:\Windows. This doesn't matter in HTML — fifty-fifty if you are developing your website on Windows, you should still employ forward slashes in your code.

What else should exist washed?

In this module

Installing bones software
What will your website look like?
Dealing with files
HTML basics
CSS nuts
JavaScript nuts
Publishing your website
How the web works