Skip to content Skip to sidebar Skip to footer
Home / Uploaded Website Folder Doesnt Want to Display Correctly

Uploaded Website Folder Doesnt Want to Display Correctly

Post a Comment

Dealing with files

  • Previous
  • Overview: Getting started with the web
  • Next

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

Where should your website live on your estimator?

When you are working on a website locally on your computer, yous should keep all the related files in a unmarried folder that mirrors the published website's file structure on the server. This binder can live anywhere yous similar, but you should put it somewhere where y'all can hands find it, maybe on your Desktop, in your Home folder, or at the root of your hard bulldoze.

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

An aside on casing and spacing

Yous'll find that throughout this commodity, we ask y'all to proper name folders and files completely in lowercase with no spaces. This is because:

  1. Many computers, peculiarly web servers, are example-sensitive. So for example, if you put an paradigm on your website at test-site/MyImage.jpg and then in a different file you endeavor to invoke the image as test-site/myimage.jpg, it may non piece of work.
  2. Browsers, spider web servers, and programming languages do non handle spaces consistently. For example, if you employ spaces in your filename, some systems may treat the filename as two filenames. Some servers volition supervene upon the areas in your filenames with "%20" (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 lot should utilize a hyphen for your file names. The Google search engine treats a hyphen as a discussion separator merely 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 yous'll bump into fewer problems later downward the road.

What structure should your website have?

Next, permit'southward expect at what structure our exam site should take. The virtually mutual things we'll have on any website project nosotros create are an index HTML file and folders to comprise images, fashion files, and script files. Let'southward create these now:

  1. index.html : This file volition generally contain your homepage content, that is, the text and images that people see when they beginning go to your site. Using your text editor, create a new file chosen index.html and save information technology just inside your test-site folder.
  2. images folder: This folder will contain all the images that you employ on your site. Create a folder chosen images, inside your test-site folder.
  3. styles folder: This folder volition contain the CSS code used to style your content (for example, setting text and background colors). Create a folder called styles, inside your test-site binder.
  4. scripts folder: This folder volition contain all the JavaScript code used to add together interactive functionality to your site (e.g. buttons that load information when clicked). Create a binder called scripts, inside your examination-site folder.

Notation: On Windows computers, you lot might have trouble seeing the file names, because Windows has an option called Hide extensions for known file types turned on past default. Mostly, you can turn this off by going to Windows Explorer, selecting the Binder options... pick, unchecking the Hide extensions for known file types check box, then clicking OK. For more specific data covering your version of Windows, you lot can search on the web.

File paths

To make files talk to one some other, you lot accept to provide a file path betwixt them — basically a route, and then one file knows where another one is. To demonstrate this, we will insert a little fleck of HTML into our index.html file, and make it brandish the epitome you chose in the article "What will your website look like?" Alternatively, yous tin choose an existing prototype at your disposal, on your computer or from the Web, and use it in the post-obit steps:

  1. Re-create the image you chose before into your images binder.
  2. Open up your index.html file, and insert the post-obit code into the file exactly as shown. Don't worry most what information technology all means for now — we'll look at the structures in more detail later in the series. 
                                                                      <!                        DOCTYPE                        html                        >                                                                                              <html                        >                                                                                              <head                        >                                                                                              <meta                        charset                                                  =                          "utf-8"                                                >                                                                                              <title                        >                      My test folio                                                  </title                        >                                                                                              </head                        >                                                                                              <body                        >                                                                                              <img                        src                                                  =                          "                          "                                                alt                                                  =                          "My test epitome"                                                >                                                                                              </trunk                        >                                                                                              </html                        >
  3. The line <img src="" alt="My test image"> is the HTML lawmaking that inserts an image into the page. We need to tell the HTML where the image is. The image is within the images directory, which is in the same directory as index.html. To walk down the file structure from index.html to our image, the file path we'd demand is images/your-image-filename. For instance, our image is chosen firefox-icon.png, and then the file path is images/firefox-icon.png.
  4. Insert the file path into your HTML code between the double quote marks of the src="" code.
  5. Save your HTML file, then load it in your web browser (double-click the file). You should come across your new webpage displaying your image!

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

Some full general rules for file paths:

  • To link to a target file in the same directory as the invoking HTML file, but use the filename, eastward.g. my-image.jpg.
  • To reference a file in a subdirectory, write the directory proper noun in front of the path, plus a forward slash, e.g. subdirectory/my-epitome.jpg.
  • To link to a target file in the directory higher up the invoking HTML file, write two dots. And so for example, if index.html was inside a subfolder of test-site and my-paradigm.jpg was within test-site, you could reference my-image.jpg from index.html using ../my-image.jpg.
  • Y'all can combine these every bit much equally you similar, for case ../subdirectory/another-subdirectory/my-paradigm.jpg.

For now, this is about all y'all need to know.

Annotation: The Windows file system tends to apply backslashes, not forward slashes, e.g. C:\Windows. This doesn't thing in HTML — fifty-fifty if y'all are developing your website on Windows, you should all the same employ forward slashes in your lawmaking.

What else should be done?

In this module

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

lawrenceoldideady.blogspot.com

Source: https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Dealing_with_files

Post a Comment for "Uploaded Website Folder Doesnt Want to Display Correctly"