{"id":64,"date":"2023-06-16T20:13:14","date_gmt":"2023-06-16T20:13:14","guid":{"rendered":"https:\/\/test-hcc-press-wp-multisite.pantheonsite.io\/webauthoring\/?post_type=chapter&#038;p=64"},"modified":"2024-05-10T18:07:08","modified_gmt":"2024-05-10T18:07:08","slug":"directory-structure","status":"publish","type":"chapter","link":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/chapter\/directory-structure\/","title":{"raw":"Directory Structure","rendered":"Directory Structure"},"content":{"raw":"<div class=\"textLayer\">\r\n\r\n<span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">The<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">public<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">component<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">of<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">a<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">website<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">is<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">a<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">repository<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">for<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">information<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">files<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">which<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">are<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">delivered<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">to<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">the <\/span><span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">client<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">on<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">demand.<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">The<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">better<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">organized<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">the<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">information<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">is,<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">the<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">easier<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">the<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">site<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">will<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">be<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">to<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">build,<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">manage<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">and <\/span><span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">maintain.<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">The<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">key<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">to<\/span><span style=\"text-align: initial; font-size: 1em;\">\u00a0<\/span><span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">organization<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">is<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">a meaningful<\/span><span style=\"text-align: initial; font-size: 1em;\">\u00a0<\/span><span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">system<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">for<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">filing<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">information.<\/span>\r\n\r\n<\/div>\r\n<div><\/div>\r\n<div class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Let's say we are building a website that helps animals get adopted: Animals for Adoption. <\/span><\/div>\r\n<div class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">We would start by creating a main or root folder named \"a4a\".\u00a0<\/span><\/div>\r\n<div>Note: Folders are known as <strong>directories<\/strong> in computer language.<\/div>\r\n<div><\/div>\r\n<div>On our Animals for Adoption website, there will be <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">3 broad categories of animals:<\/span><\/div>\r\n<ul>\r\n \t<li class=\"textLayer\"><strong><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Dogs<\/span><\/strong>\r\n<ul>\r\n \t<li class=\"textLayer\"><em><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Abby<\/span><\/em><\/li>\r\n \t<li class=\"textLayer\"><em><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Boxer<\/span><\/em><\/li>\r\n \t<li class=\"textLayer\"><em><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Chester<\/span><\/em><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li class=\"textLayer\"><strong><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Cats<\/span><\/strong>\r\n<ul>\r\n \t<li class=\"textLayer\"><em><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Izzy<\/span><\/em><\/li>\r\n \t<li class=\"textLayer\"><em><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Jack<\/span><\/em><\/li>\r\n \t<li class=\"textLayer\"><em><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Lulu<\/span><\/em><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">And within the \"dogs\" and \"cats\" categories are individual animals indicated by name<\/span><\/li>\r\n \t<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\"><strong>Other <\/strong>small mammals is another broad category that contains these subcategories:<\/span>\r\n<ul>\r\n \t<li><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Guinea Pigs<\/span>\r\n<ul>\r\n \t<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Helen<\/span><\/li>\r\n \t<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Humberto<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Hamsters<\/span>\r\n<ul>\r\n \t<li class=\"textLayer\">Tank<\/li>\r\n \t<li class=\"textLayer\">Tiny<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Rabbits<\/span>\r\n<ul>\r\n \t<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Bonbom<\/span><\/li>\r\n \t<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Peaches<\/span><\/li>\r\n \t<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Suzi<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">And within each of these subcategories are individual animals indicated by name<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<h2 class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Directory<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Structure<\/span><\/h2>\r\n<div class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Just<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">as<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">information<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">is<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">filed<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">in<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">folders<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">in<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">a<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">file<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">cabinet<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">drawer<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">for<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">ease<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">of<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">storage<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">and<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">access,<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">information<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">is <\/span><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">stored<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">within<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">a<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">website<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">file<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">directory<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">structure<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">for<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">the<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">same<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">purposes.<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">The<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">directory<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">structure<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">consists<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">of<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">a <\/span><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">system<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">of<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">virtual<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">file<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">folders<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">each<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">containing<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">a<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">portion<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">of<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">the<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">data<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">within<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">the<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">website,<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">see<\/span> example:<\/div>\r\n<div class=\"textLayer\">\r\n\r\n<img class=\" wp-image-83\" src=\"http:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Screenshot-2023-08-19-at-4.43.37-PM-171x300.png\" alt=\"Animals for Adoption Website Directory Structure\" width=\"269\" height=\"472\" \/>\r\n\r\n<em>Sample Website Directory Structore for Animals for Adoption<\/em>\r\n\r\n<\/div>\r\nA tiered website directory structure, like the hypothetical one in the diagram, can be displayed as if it were an organizational chart because files are stored in hierarchically arranged directories. What is not intuitively obvious about hierarchical directory structures is that lower level directories are contained entirely within the upper level directories.\r\n\r\nIn the example there are only these directories are at the root level:\r\n\r\ndogs, cats, other, media\r\n\r\nAll subordinate directories and files are completely contained within these root directories.\r\n\r\nIn this example the entire website \"Animals for Adoption\" is contained within the root (topmost) directory or \"a4a\". A website home page generally resides in the root directory. Lower level web pages, which generally comprise the bulk of the content of a website, reside within the appropriate subdirectories:\r\n<h3>File Paths<\/h3>\r\nThe route that must be taken down through a hierarchical directory structure to locate a file within a subordinate directory is called a <strong>path<\/strong>. An analogy might be useful to demonstrate the concept of a path.\r\n\r\nIf you were in the front foyer (root level) of your house and wanted to get a snack on the second shelf of the refrigerator in the kitchen, the path to the snack might be diagrammed like this:\r\n\r\nfoyer &gt; kitchen &gt; refrigerator &gt; second shelf &gt; snack\r\n\r\nor, in computer language: \/foyer\/kitchen\/refrigerator\/second shelf\/snack\/\r\n\r\nExtending this simple logic, in the example website directory structure shown in the diagram, suppose that there was a media file named <em>abby.png<\/em> stored in directory \"media\". <img class=\"alignleft\" src=\"https:\/\/sl-prod-v2-cdn.shelterluv.com\/sites\/default\/files\/animal_pics\/5937\/2023\/11\/07\/11\/20231107113944.png\" alt=\"Spankie's preview photo\" width=\"199\" height=\"199\" \/>\r\n\r\nabby.png - image of Abby - Dog Available for Adoption\r\n\r\nThe full path to this file would be: \/a4a\/media\/abby.png\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n<strong>Note that spaces, special characters and capitalization count and must match exactly!<\/strong>\r\n\r\nAlmost all file paths are case, character and place sensitive, especially on the Internet. This is common in the Unix\/Linux systems which pervade the Internet.\r\n\r\nNote also that the directory names are separated by a forward slash \/ rather than the back slash.\r\n\r\nWhen the ultimate target of a path is, itself, a directory rather than a file is preferable. As in the example above, it is good form to end the path with a forward slash, as well.\r\n\r\nProper paths to the content of a website are critical because they are lead to the uniform resource locators (URLs) that are used to point users to the right site\/pages. URLs which contain incorrect path information are often referred to as broken or malformed and will lead users into dead ends and the dreaded HTTP 404 error:\r\n\r\nThe HTTP 404 error, also known as '404 Not Found', is\u00a0<b>a standard response code indicating that your browser reached the server, but the requested resource couldn't be located<\/b>. It's often caused by issues with DNS settings, improperly set file permissions, or a problems with the directory structure.\r\n\r\n<img class=\"alignnone wp-image-91\" src=\"http:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/360_F_291425662_IfdvauykF4sL0CAayvBxtgIuHMIzLGZU-300x286.jpg\" alt=\"\" width=\"111\" height=\"106\" \/>\r\n<div class=\"textbox textbox--key-takeaways\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Key Takeaway<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">Have you ever come across a <strong>HTTP 404 error<\/strong>? Do you recall how frustrating it can be? You just want to get to a website and obtain some information, sign up for an event, check a menu or whatever but you've hit a dead end. Let us vow NOT to do this to our users, who in this course is primarily ME (Dr. Stewart)! Yes, that's right, I will be accessing your website as a legitimate digital citizen. The path or URL or link you submit MUST navigate to the correct location or I'll never find your work! Test your URL\/link BEFORE you submit it.<\/div>\r\n<\/div>\r\n&nbsp;\r\n<h3>The Critical Nature of Planning in Web Design<\/h3>\r\n<strong>Most novice web authors make the mistake of allowing their websites to grow by adding page after page without giving thought to sequence, meaning and consistency.<\/strong> They add more and HTML documents as their site grows. They often make the mistake of placing all the HTML documents and files that support them in a single root level directory in a number of files with names that are not particularly meaningful. As time goes by the content of this directory becomes more complex, unorganized, less meaningful and challenging to manage, i.e. chaos!\r\n\r\nIt is far better to organize the site from the outset into a clear directory structure which can accommodate all the content logically. Start by developing an outline of the prospective site content and mirror this in the directory structure.\r\n\r\nIn the examples of website structure shown here (Acceptable) it places all the content in a single root level directory and uses meaningful file names for constituent HTML documents. That is OK for small and uncomplicated websites, but for larger, more complex websites it quickly becomes inadequate and makes maintenance and management more difficult. In the \"Better\" structure, there are directories for each category of information within the website. This does not require that HTML documents receive mnemonic (meaningful) names because each is contained within its own directory.\r\n\r\n<strong>Acceptable: <\/strong>(for small websites)\r\n\r\n\/animalsforadoption.org (root directory)\r\n\r\ndogs.html\r\n\r\n<strong>index.html<\/strong> (home page)\r\n\r\ncats.html\r\n\r\nother.html\r\n\r\nContent of the site resides entirely within the root directory. Content is managed by giving mnemonic names to HTML documents which contain various components of the website. This makes URLs to the content less obvious and makes the organization of the site difficult for a user to follow.\r\n\r\n<strong>Better:<\/strong>\r\n\r\n\/animalsforadoption.org\r\n\r\nindex.html (main home page)\r\n\r\n\/dogs\r\n\r\nindex.html (home page for dogs)\r\n\r\n\/cats\r\n\r\nindex.html (home page for cats)\r\n\r\n\/other\r\n\r\nindex.html (home page for other small mammals)\r\n\r\nContent of the site resides in a directory structure which mirrors the structure of the information. Content is managed by segregating it into a sensible directory structure. This makes URLs to the content plain and the organization of the site easier for users to follow.\r\n<h3>File Naming Conventions<\/h3>\r\nThere are index or default HTML document file names defined on most servers, including the one we use for this course.\r\n<div class=\"textbox textbox--sidebar textbox--key-takeaways\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Key Takeaway<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">The index.html file is the one and only default file name for a home page.<\/div>\r\n<\/div>\r\nGenerally, the file names index.html and index.htm are default names which will load automatically when an URL points to a directory name rather than a discrete file. Using the default file names makes URLs to the content on a website more intelligible to the user and easier to remember. Additionally, the default index file intercepts any user who enters the directory and forces display of the content it contains.\r\n\r\nIn the \u201cAcceptable\u201d example above, note that the default index file name is used in every directory of the website. This means that URLs which address the content need only reference the directory in which information resides.\r\n\r\nShown below are the URLs which would be required to address information on the websites in the examples above:\r\n\r\n<strong>Acceptable:<\/strong> http:\/\/www.animalsforadoption.org\/dogs.html\r\n\r\n<strong>Better:<\/strong> http:\/\/www.animalsforadoption.org\/dogs\/\r\n<div class=\"textbox shaded\">\r\n\r\nOne of the challenges novice web authors have is understanding index files and how they work. How is it that multiple files can have the same name but different content if they reside within different directories on a website?\r\n\r\n<\/div>\r\nAn analogy might be helpful. Consider how many people with the last name \u201cReyes\u201d may live in your neighborhood. They all share the same name but you have no difficulty in telling one Reyes from another. Why? Because they all look different (have different content) and live in different houses (directories). So what's the problem with index files all bearing the same name - index.html - but having different content and residing in different directories on your site? <strong>There is no problem as long as the files, folders and directories stay organized<\/strong>!\r\n\r\n<strong>Now, let's get real..<\/strong>.we are going to begin creating our first web page and transferring it from our local computer to the server which will then display on the world wide wide when called by a browser with a functional URL (uniform resource locator).\r\n\r\n<img class=\"size-full wp-image-100 alignleft\" style=\"font-size: 1em;\" src=\"http:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Picture1.jpg\" alt=\"\" width=\"160\" height=\"106\" \/>\r\n\r\n&nbsp;\r\n\r\nA web designer (you) create (.html) files\/documents on your local computer (recommended code editor: Visual Studio Code)\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-101 alignleft\" src=\"http:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Picture2.jpg\" alt=\"\" width=\"161\" height=\"107\" \/>\r\n\r\nThen you'll use a <strong>file transfer protocol<\/strong> (FTP - recommended: FileZilla) to move the files to our HCC server -\r\n\r\n<strong>hccwebdev.net<\/strong>. The server is named as such because it \"serves up\" web pages to the user who calls for them by a uniform resource locator (URL)\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-103 alignleft\" src=\"http:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Picture3-1.jpg\" alt=\"\" width=\"160\" height=\"106\" \/>\r\n\r\nOnce the files have been transferred, you will determine and test the URL (use a separate browser or send it to your phone) to ensure it is functional, meaning that it does indeed navigates to your webpage. (Browser recommended for testing: DuckDuckGo). Then a user (usually me!) uses the URL to navigate via a browser to the webpage you created and transferred.\r\n\r\nSample URL: <strong>http:\/\/<a href=\"http:\/\/hccwebdev.net\/~sstewart\/helloworld\/index.html\">hccwebdev.net\/~sstewart\/helloworld.index.html<\/a><\/strong>\r\n<p style=\"text-align: center;\">End of Directory Structure Chapter<\/p>\r\n&nbsp;","rendered":"<div class=\"textLayer\">\n<p><span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">The<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">public<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">component<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">of<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">a<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">website<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">is<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">a<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">repository<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">for<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">information<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">files<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">which<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">are<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">delivered<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">to<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">the <\/span><span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">client<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">on<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">demand.<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">The<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">better<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">organized<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">the<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">information<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">is,<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">the<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">easier<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">the<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">site<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">will<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">be<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">to<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">build,<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">manage<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">and <\/span><span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">maintain.<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">The<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">key<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">to<\/span><span style=\"text-align: initial; font-size: 1em;\">\u00a0<\/span><span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">organization<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">is<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">a meaningful<\/span><span style=\"text-align: initial; font-size: 1em;\">\u00a0<\/span><span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">system<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">for<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">filing<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" style=\"text-align: initial; font-size: 1em;\" role=\"presentation\">information.<\/span><\/p>\n<\/div>\n<div><\/div>\n<div class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Let&#8217;s say we are building a website that helps animals get adopted: Animals for Adoption. <\/span><\/div>\n<div class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">We would start by creating a main or root folder named &#8220;a4a&#8221;.\u00a0<\/span><\/div>\n<div>Note: Folders are known as <strong>directories<\/strong> in computer language.<\/div>\n<div><\/div>\n<div>On our Animals for Adoption website, there will be <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">3 broad categories of animals:<\/span><\/div>\n<ul>\n<li class=\"textLayer\"><strong><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Dogs<\/span><\/strong>\n<ul>\n<li class=\"textLayer\"><em><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Abby<\/span><\/em><\/li>\n<li class=\"textLayer\"><em><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Boxer<\/span><\/em><\/li>\n<li class=\"textLayer\"><em><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Chester<\/span><\/em><\/li>\n<\/ul>\n<\/li>\n<li class=\"textLayer\"><strong><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Cats<\/span><\/strong>\n<ul>\n<li class=\"textLayer\"><em><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Izzy<\/span><\/em><\/li>\n<li class=\"textLayer\"><em><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Jack<\/span><\/em><\/li>\n<li class=\"textLayer\"><em><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Lulu<\/span><\/em><\/li>\n<\/ul>\n<\/li>\n<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">And within the &#8220;dogs&#8221; and &#8220;cats&#8221; categories are individual animals indicated by name<\/span><\/li>\n<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\"><strong>Other <\/strong>small mammals is another broad category that contains these subcategories:<\/span>\n<ul>\n<li><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Guinea Pigs<\/span>\n<ul>\n<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Helen<\/span><\/li>\n<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Humberto<\/span><\/li>\n<\/ul>\n<\/li>\n<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Hamsters<\/span>\n<ul>\n<li class=\"textLayer\">Tank<\/li>\n<li class=\"textLayer\">Tiny<\/li>\n<\/ul>\n<\/li>\n<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Rabbits<\/span>\n<ul>\n<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Bonbom<\/span><\/li>\n<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Peaches<\/span><\/li>\n<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Suzi<\/span><\/li>\n<\/ul>\n<\/li>\n<li class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">And within each of these subcategories are individual animals indicated by name<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2 class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Directory<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Structure<\/span><\/h2>\n<div class=\"textLayer\"><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">Just<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">as<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">information<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">is<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">filed<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">in<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">folders<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">in<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">a<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">file<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">cabinet<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">drawer<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">for<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">ease<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">of<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">storage<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">and<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">access,<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">information<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">is <\/span><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">stored<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">within<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">a<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">website<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">file<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">directory<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">structure<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">for<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">the<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">same<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">purposes.<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">The<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">directory<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">structure<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">consists<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">of<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">a <\/span><span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">system<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">of<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">virtual<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">file<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">folders<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">each<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">containing<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">a<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">portion<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">of<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">the<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">data<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">within<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">the<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">website,<\/span> <span class=\"textLayer--absolute\" dir=\"ltr\" role=\"presentation\">see<\/span> example:<\/div>\n<div class=\"textLayer\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83\" src=\"http:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Screenshot-2023-08-19-at-4.43.37-PM-171x300.png\" alt=\"Animals for Adoption Website Directory Structure\" width=\"269\" height=\"472\" srcset=\"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Screenshot-2023-08-19-at-4.43.37-PM-171x300.png 171w, https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Screenshot-2023-08-19-at-4.43.37-PM-65x114.png 65w, https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Screenshot-2023-08-19-at-4.43.37-PM-225x395.png 225w, https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Screenshot-2023-08-19-at-4.43.37-PM.png 305w\" sizes=\"auto, (max-width: 269px) 100vw, 269px\" \/><\/p>\n<p><em>Sample Website Directory Structore for Animals for Adoption<\/em><\/p>\n<\/div>\n<p>A tiered website directory structure, like the hypothetical one in the diagram, can be displayed as if it were an organizational chart because files are stored in hierarchically arranged directories. What is not intuitively obvious about hierarchical directory structures is that lower level directories are contained entirely within the upper level directories.<\/p>\n<p>In the example there are only these directories are at the root level:<\/p>\n<p>dogs, cats, other, media<\/p>\n<p>All subordinate directories and files are completely contained within these root directories.<\/p>\n<p>In this example the entire website &#8220;Animals for Adoption&#8221; is contained within the root (topmost) directory or &#8220;a4a&#8221;. A website home page generally resides in the root directory. Lower level web pages, which generally comprise the bulk of the content of a website, reside within the appropriate subdirectories:<\/p>\n<h3>File Paths<\/h3>\n<p>The route that must be taken down through a hierarchical directory structure to locate a file within a subordinate directory is called a <strong>path<\/strong>. An analogy might be useful to demonstrate the concept of a path.<\/p>\n<p>If you were in the front foyer (root level) of your house and wanted to get a snack on the second shelf of the refrigerator in the kitchen, the path to the snack might be diagrammed like this:<\/p>\n<p>foyer &gt; kitchen &gt; refrigerator &gt; second shelf &gt; snack<\/p>\n<p>or, in computer language: \/foyer\/kitchen\/refrigerator\/second shelf\/snack\/<\/p>\n<p>Extending this simple logic, in the example website directory structure shown in the diagram, suppose that there was a media file named <em>abby.png<\/em> stored in directory &#8220;media&#8221;. <img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/sl-prod-v2-cdn.shelterluv.com\/sites\/default\/files\/animal_pics\/5937\/2023\/11\/07\/11\/20231107113944.png\" alt=\"Spankie's preview photo\" width=\"199\" height=\"199\" \/><\/p>\n<p>abby.png &#8211; image of Abby &#8211; Dog Available for Adoption<\/p>\n<p>The full path to this file would be: \/a4a\/media\/abby.png<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Note that spaces, special characters and capitalization count and must match exactly!<\/strong><\/p>\n<p>Almost all file paths are case, character and place sensitive, especially on the Internet. This is common in the Unix\/Linux systems which pervade the Internet.<\/p>\n<p>Note also that the directory names are separated by a forward slash \/ rather than the back slash.<\/p>\n<p>When the ultimate target of a path is, itself, a directory rather than a file is preferable. As in the example above, it is good form to end the path with a forward slash, as well.<\/p>\n<p>Proper paths to the content of a website are critical because they are lead to the uniform resource locators (URLs) that are used to point users to the right site\/pages. URLs which contain incorrect path information are often referred to as broken or malformed and will lead users into dead ends and the dreaded HTTP 404 error:<\/p>\n<p>The HTTP 404 error, also known as &#8216;404 Not Found&#8217;, is\u00a0<b>a standard response code indicating that your browser reached the server, but the requested resource couldn&#8217;t be located<\/b>. It&#8217;s often caused by issues with DNS settings, improperly set file permissions, or a problems with the directory structure.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-91\" src=\"http:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/360_F_291425662_IfdvauykF4sL0CAayvBxtgIuHMIzLGZU-300x286.jpg\" alt=\"\" width=\"111\" height=\"106\" srcset=\"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/360_F_291425662_IfdvauykF4sL0CAayvBxtgIuHMIzLGZU-300x286.jpg 300w, https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/360_F_291425662_IfdvauykF4sL0CAayvBxtgIuHMIzLGZU-65x62.jpg 65w, https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/360_F_291425662_IfdvauykF4sL0CAayvBxtgIuHMIzLGZU-225x214.jpg 225w, https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/360_F_291425662_IfdvauykF4sL0CAayvBxtgIuHMIzLGZU-350x333.jpg 350w, https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/360_F_291425662_IfdvauykF4sL0CAayvBxtgIuHMIzLGZU.jpg 378w\" sizes=\"auto, (max-width: 111px) 100vw, 111px\" \/><\/p>\n<div class=\"textbox textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Key Takeaway<\/p>\n<\/header>\n<div class=\"textbox__content\">Have you ever come across a <strong>HTTP 404 error<\/strong>? Do you recall how frustrating it can be? You just want to get to a website and obtain some information, sign up for an event, check a menu or whatever but you&#8217;ve hit a dead end. Let us vow NOT to do this to our users, who in this course is primarily ME (Dr. Stewart)! Yes, that&#8217;s right, I will be accessing your website as a legitimate digital citizen. The path or URL or link you submit MUST navigate to the correct location or I&#8217;ll never find your work! Test your URL\/link BEFORE you submit it.<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h3>The Critical Nature of Planning in Web Design<\/h3>\n<p><strong>Most novice web authors make the mistake of allowing their websites to grow by adding page after page without giving thought to sequence, meaning and consistency.<\/strong> They add more and HTML documents as their site grows. They often make the mistake of placing all the HTML documents and files that support them in a single root level directory in a number of files with names that are not particularly meaningful. As time goes by the content of this directory becomes more complex, unorganized, less meaningful and challenging to manage, i.e. chaos!<\/p>\n<p>It is far better to organize the site from the outset into a clear directory structure which can accommodate all the content logically. Start by developing an outline of the prospective site content and mirror this in the directory structure.<\/p>\n<p>In the examples of website structure shown here (Acceptable) it places all the content in a single root level directory and uses meaningful file names for constituent HTML documents. That is OK for small and uncomplicated websites, but for larger, more complex websites it quickly becomes inadequate and makes maintenance and management more difficult. In the &#8220;Better&#8221; structure, there are directories for each category of information within the website. This does not require that HTML documents receive mnemonic (meaningful) names because each is contained within its own directory.<\/p>\n<p><strong>Acceptable: <\/strong>(for small websites)<\/p>\n<p>\/animalsforadoption.org (root directory)<\/p>\n<p>dogs.html<\/p>\n<p><strong>index.html<\/strong> (home page)<\/p>\n<p>cats.html<\/p>\n<p>other.html<\/p>\n<p>Content of the site resides entirely within the root directory. Content is managed by giving mnemonic names to HTML documents which contain various components of the website. This makes URLs to the content less obvious and makes the organization of the site difficult for a user to follow.<\/p>\n<p><strong>Better:<\/strong><\/p>\n<p>\/animalsforadoption.org<\/p>\n<p>index.html (main home page)<\/p>\n<p>\/dogs<\/p>\n<p>index.html (home page for dogs)<\/p>\n<p>\/cats<\/p>\n<p>index.html (home page for cats)<\/p>\n<p>\/other<\/p>\n<p>index.html (home page for other small mammals)<\/p>\n<p>Content of the site resides in a directory structure which mirrors the structure of the information. Content is managed by segregating it into a sensible directory structure. This makes URLs to the content plain and the organization of the site easier for users to follow.<\/p>\n<h3>File Naming Conventions<\/h3>\n<p>There are index or default HTML document file names defined on most servers, including the one we use for this course.<\/p>\n<div class=\"textbox textbox--sidebar textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Key Takeaway<\/p>\n<\/header>\n<div class=\"textbox__content\">The index.html file is the one and only default file name for a home page.<\/div>\n<\/div>\n<p>Generally, the file names index.html and index.htm are default names which will load automatically when an URL points to a directory name rather than a discrete file. Using the default file names makes URLs to the content on a website more intelligible to the user and easier to remember. Additionally, the default index file intercepts any user who enters the directory and forces display of the content it contains.<\/p>\n<p>In the \u201cAcceptable\u201d example above, note that the default index file name is used in every directory of the website. This means that URLs which address the content need only reference the directory in which information resides.<\/p>\n<p>Shown below are the URLs which would be required to address information on the websites in the examples above:<\/p>\n<p><strong>Acceptable:<\/strong> http:\/\/www.animalsforadoption.org\/dogs.html<\/p>\n<p><strong>Better:<\/strong> http:\/\/www.animalsforadoption.org\/dogs\/<\/p>\n<div class=\"textbox shaded\">\n<p>One of the challenges novice web authors have is understanding index files and how they work. How is it that multiple files can have the same name but different content if they reside within different directories on a website?<\/p>\n<\/div>\n<p>An analogy might be helpful. Consider how many people with the last name \u201cReyes\u201d may live in your neighborhood. They all share the same name but you have no difficulty in telling one Reyes from another. Why? Because they all look different (have different content) and live in different houses (directories). So what&#8217;s the problem with index files all bearing the same name &#8211; index.html &#8211; but having different content and residing in different directories on your site? <strong>There is no problem as long as the files, folders and directories stay organized<\/strong>!<\/p>\n<p><strong>Now, let&#8217;s get real..<\/strong>.we are going to begin creating our first web page and transferring it from our local computer to the server which will then display on the world wide wide when called by a browser with a functional URL (uniform resource locator).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-100 alignleft\" style=\"font-size: 1em;\" src=\"http:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Picture1.jpg\" alt=\"\" width=\"160\" height=\"106\" srcset=\"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Picture1.jpg 160w, https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Picture1-65x43.jpg 65w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>A web designer (you) create (.html) files\/documents on your local computer (recommended code editor: Visual Studio Code)<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-101 alignleft\" src=\"http:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Picture2.jpg\" alt=\"\" width=\"161\" height=\"107\" srcset=\"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Picture2.jpg 161w, https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Picture2-65x43.jpg 65w\" sizes=\"auto, (max-width: 161px) 100vw, 161px\" \/><\/p>\n<p>Then you&#8217;ll use a <strong>file transfer protocol<\/strong> (FTP &#8211; recommended: FileZilla) to move the files to our HCC server &#8211;<\/p>\n<p><strong>hccwebdev.net<\/strong>. The server is named as such because it &#8220;serves up&#8221; web pages to the user who calls for them by a uniform resource locator (URL)<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-103 alignleft\" src=\"http:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Picture3-1.jpg\" alt=\"\" width=\"160\" height=\"106\" srcset=\"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Picture3-1.jpg 160w, https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-content\/uploads\/sites\/27\/2023\/06\/Picture3-1-65x43.jpg 65w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/p>\n<p>Once the files have been transferred, you will determine and test the URL (use a separate browser or send it to your phone) to ensure it is functional, meaning that it does indeed navigates to your webpage. (Browser recommended for testing: DuckDuckGo). Then a user (usually me!) uses the URL to navigate via a browser to the webpage you created and transferred.<\/p>\n<p>Sample URL: <strong>http:\/\/<a href=\"http:\/\/hccwebdev.net\/~sstewart\/helloworld\/index.html\">hccwebdev.net\/~sstewart\/helloworld.index.html<\/a><\/strong><\/p>\n<p style=\"text-align: center;\">End of Directory Structure Chapter<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"author":9,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[49],"contributor":[],"license":[],"class_list":["post-64","chapter","type-chapter","status-publish","hentry","chapter-type-numberless"],"part":17,"_links":{"self":[{"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/pressbooks\/v2\/chapters\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/wp\/v2\/users\/9"}],"version-history":[{"count":6,"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/pressbooks\/v2\/chapters\/64\/revisions"}],"predecessor-version":[{"id":125,"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/pressbooks\/v2\/chapters\/64\/revisions\/125"}],"part":[{"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/pressbooks\/v2\/parts\/17"}],"metadata":[{"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/pressbooks\/v2\/chapters\/64\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/wp\/v2\/media?parent=64"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/pressbooks\/v2\/chapter-type?post=64"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/wp\/v2\/contributor?post=64"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/wp\/v2\/license?post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}