90 likes | 230 Views
WDV101 Intro HTML and CSS. PATHNAMES- Definition and Structure. Understanding Pathnames!. Pathnames are used to locate a desired file within the web site structure It is a function of the directory/folder organization of your web site Required when using the <img> tag
E N D
WDV101Intro HTML and CSS PATHNAMES- Definition and Structure
Understanding Pathnames! • Pathnames are used to locate a desired file within the web site structure • It is a function of the directory/folder organization of your web site • Required when using the <img> tag • Required for all ‘src’ Attributes • Also affects the use of the <a> tag
Sample Web Site Structure • Top level directory root IBSWeb • Web Site Folder Departments Images Documents • Main Level Folders Manual.docFlyer.pub Sales Catalog Promo.htmProduct.htmCompany.gif Company Images Product Images • Sub Folders Logo.gifMap.jpg Machine.jpgbook.jpg
Pathname Concept! • The current location of a file • Used to correctly locate a desired file • Pathnames differ from machine to machine • Any HTML element that accesses another page, image, or document requires a pathname to locate the requested file • Websites should be organized so that the pathname on the client will work on the server
Pathname Types • Default Pathname • No pathname is specified • Assumes the target page and current page are in the same folder • Absolute Pathname • Exact pathname is provided • Relative Pathname • Implied pathname based upon website structure
Default Pathname • No specific path is defined • Assumes that you are looking in the current directory/folder for the requested file • Current directory is defined as the same directory/folder as the active HTML page • Example: • <img src=“company.gif”> • Will only work on Promo.htm and Product.htm
Absolute Pathname • Pathname is defined from root directory • Root directory is the top level directory of the web site • Uses ‘/’ or a drive letter to start all pathnames. • Examples: • <img src=“/IBSWeb/Images/CompanyImages/logo.gif”> • <img src=“/IBSWeb/Documents/Manual.doc”> • <img src=“c:/IBSWeb/Documents/Flyer.Pub”>
Relative Pathname • Traces pathname from current directory • Indicates how to get to desired file from the directory of the active page • Uses ‘../’ to move up to previous directory • Implies some/all of the directories/folders used in the pathname • Examples from Promo.htm: • <IMG SRC=“../../Images/CompanyImages/logo.gif”> • <IMG SRC=“../../Documents/Flyer.pub”>
General Tips • Know the structure of your web site • Know the purpose of each directory/folder • Know the names of all directories/folders • Use short folder and file names • Treat all pathnames as case sensitive • Do not use spaces or symbols in names • Design your web site for efficient and logical use of pathnames • Good Planning will be rewarded!