1 / 7

Relative Paths

Relative Paths. Relative Paths:. Until now, we have placed all our files in the same folder. As a website becomes larger and more complicated, a single folder gets to be too cluttered to manage effectively. Some organization of files is required.

garin
Download Presentation

Relative Paths

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Relative Paths

  2. Relative Paths: • Until now, we have placed all our files in the same folder. • As a website becomes larger and more complicated, a single folder gets to be too cluttered to manage effectively. Some organization of files is required. • We can group similar files, such as images, into separate folders, but we need a way to tell the browser how to locate these files.

  3. Separate Folders: A well-organized site will group like files - such as CSS and images - in their own dedicated folders.

  4. Example of Relative Paths: <head> <link rel="stylesheet" type="text/css" href="css/mycss.css" > </head> <body> <img src="images/flowers.jpg" /> <img src="images/orange.jpg" /> <img src="images/pink.jpg" /> </body> The path is always "relative" to the file making the reference. In this case, the path is relative to the location of index.html.

  5. Example of Relative Paths: <head> <link rel="stylesheet" type="text/css" href="css/mycss.css" > </head> <body> <img src="images/flowers.jpg" /> <img src="images/orange.jpg" /> <img src="images/pink.jpg" /> </body>

  6. Example of Relative Paths: body { background-image:url('../images/orange.jpg'); } This is the mycss.css file. Remember, the path is always "relative" to the file making the reference. In this case, that file is the CSS file in its own subfolder. The solution is to use ../to tell the browser to "go up one folder" first.

  7. A Common Mistake with Paths: <head> <link rel="stylesheet" type="text/css" href="css/mycss.css" > </head> <body> <img src="C:\Users\me\Desktop\Website\images\orange.jpg" /> <img src="images/orange.jpg" /> <img src="images/pink.jpg" /> </body> Never list a file path like this. It is called an "absolute" path and might work when we view our site locally but won't work when we move our site to a web server online.

More Related