Files on the Web

476 views

Published on

Presentation for SUU Web Development course.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

Files on the Web

  1. 1. Files on the Web<br />Presented by Brett Millett<br />
  2. 2. Web Servers & File Systems<br />IIS<br />Windows<br />We generally understand “Drives.”<br />Path Separator: back-slash. C:Inetpubwwwroot<br />Apache<br />Unix-type file systems. Linux, FreeBSD, etc.<br />Single hierarchy: Unix file systems are “virtual.”<br />Path Separator: forward slash. /var/www<br />The “root” of the file system indicated by /<br />
  3. 3. Unix File Paths<br />Example<br />/var/www/widgets/pub_html<br /><imgsrc=“images/mypic.png” /><br />.myimages{ background: #fffurl(../images/img.gif) repeat-x fixed;}<br />All web servers ,including IIS (Windows,) use same path convention to indicate path to resource.<br />
  4. 4. Virtual Roots & Websites<br />Websites begin in a “virtual” root.<br />File system “real” path<br />/var/www/widgets/pub_html/index.html<br />Website “virtual” path<br />http://www.widgets.com/index.html<br />When referring to resources in our HTML, we can specify “root” using a forward slash, just like Unix file systems. <br />
  5. 5. File Path Syntax & Meanings<br />/images/pic.jpg<br />Look for images directory in the root of file system.<br />../images/pic.jpg<br />Go “up” one directory from current.<br />images/pic.jpg<br />images folder in current directory.<br />
  6. 6. Website File Hierarchy<br />
  7. 7. Absolute vs. Relative Paths<br />Absolute path is the entire path from the website root.<br /><imgsrc=“http://www.widgets.com/images/pic.jpg” /><br /><imgsrc=“/images/pic.jpg” /><br />Relative path is the partial path relative to the current directory.<br /><imgsrc=“images/pic.jpg” /><br /><imgsrc=“../images/pic.jpg” /><br />
  8. 8. Relative Path Pitfalls<br />Relative paths change when file’s context in a directory changes.<br /><imgsrc=“images/sm_harts.gif” /> in index.htmlis not equivalent to <imgsrc=“images/sm_harts.gif” /> in subdirectory/thankyou.htm.<br />
  9. 9. Relative Path Pitfalls<br />The problem in the previous example can be solved by using the absolute path.<br /><imgsrc=“/images/sm_harts.gif” /> in index.htmlis equivalent to <imgsrc=“/images/sm_harts.gif” /> in subdirectory/thankyou.htm.<br />
  10. 10. Why to use Absolute Paths<br />Server side includes<br />Include files must work in any sub directory html document.<br />Web application frameworks<br />Apache rewrites & segment based URL emulate file structure only.<br />
  11. 11. Questions & Answers<br />

×