treasurejae.blogg.se

File folder structure diagram
File folder structure diagram











file folder structure diagram
  1. #File folder structure diagram how to#
  2. #File folder structure diagram full#
  3. #File folder structure diagram software#
  4. #File folder structure diagram code#

Relative LinkingĪs mentioned above, you can link to other websites with an absolute URL, but if you do that within your own site, it will slow things down in both writing the code and rendering the pages. This is why good file structure is so important, because that is how you instruct the browser to put the page together.

#File folder structure diagram how to#

One of the trickier bits of those recipes is showing how pages are linked together and how to show images and other media files. A lot of what you see on a web is actually in the recipe itself - in the HTML file.īut a lot of the ingredients are in other files.

#File folder structure diagram software#

Think of it as a recipe for how a web page should be put together, written for the browser software (Chrome, Firefox, Safari, etc.). The exception to this is that the front page of each section (or the front page that belongs to that folder) should be called "index.htm".Įssentially, HTML is a set of instructions. This will save you hours of time by not opening the wrong files. Pick a name so that you will be able to recognize what the page is, just from reading the name.

file folder structure diagram

Keep them manageable from the length perspective. Note: files and definitions that start with a numeral can also have problems, so avoid that as well. The safest thing to do is use letters and numbers, the dash and the underscore. Follow them same guidelines for all punctuation, and odd characters. If you must have a space in the name, use the underscore character or dash, so names will look like: adobe_1.html or adobe-1.html. Most put where there is a blank space, but some put in other characters, and these will mess up your links.

file folder structure diagram

Servers have to interpret what that blank space actually means. The easiest way to remember things is to simply create all your file and folder names using lower case letters. Naming files & foldersĪ few things to keep in mind to ensure you don't run into problems:įile structure is case sensitive, so it's important to keep this clean. While we're creating static websites, all our relative pathways are relative to the document we're on. These relative pathways can be relative to the document (or the page that you’re currently viewing), or relative to the site root (which is the main folder holding the whole website). It is also possible to use relative pathways.

#File folder structure diagram full#

The full pathway includes everything needed to find an element this is also called an absolute URL: parts of the full pathway That is what the pathway does - it gives the browser a precise location where it can find the element that needs to be shown (a photograph, a Flash file, a bit of audio, a link to another page, etc.) PathwaysĮssentially, everything on a web page is a series of instructions to the web browser on how to construct the page. That is the essence of the hierarchy we need to use in web design.įiles have a dot (.) in them, and are followed by an extension - this tells the computer what kind of file it is, for example:įolders are usually represented with a slash (/), and don't have an extension. (This is called nesting folders.) Finally, inside a folder you will find the pages. That is where the metaphor breaks down a bit, because on a computer it is quite easy to put a file folder within another file folder - sometimes you can have a large number of folders within folders. The drives are the drawers and inside the drawers you keep your file folders. Imagine your computer as a filing cabinet. Samples Tools Readings Videos File structure and relative links File structureĬomputers organize data in hierarchies, and the metaphor for thinking about that is to think of file folders.













File folder structure diagram