{"id":20,"date":"2018-02-08T16:13:36","date_gmt":"2018-02-08T16:13:36","guid":{"rendered":"https:\/\/test-hcc-press-wp-multisite.pantheonsite.io\/webauthoring\/chapter\/chapter-2-files-and-links\/"},"modified":"2024-04-01T19:09:12","modified_gmt":"2024-04-01T19:09:12","slug":"chapter-2-files-and-links","status":"publish","type":"chapter","link":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/chapter\/chapter-2-files-and-links\/","title":{"raw":"Chapter 2 \u2013 Files and Links","rendered":"Chapter 2 \u2013 Files and Links"},"content":{"raw":"Since a web page may have numerous linked files, like images and hyperlinks to other pages, file organization is very important.\r\n\r\nA basic website will reside in a folder both on the web developers computer and on a server that users access through a universal resource locator (URL)\u2014 the web address that they type on their browsers. To load without being specifically named, the first page, or home page, on your site must reside in the main, or root, folder, and be called \u201cindex.htm\u201d or \u201cindex.html\u201d so the site defaults to this page.\r\n<h2><strong>File Organization<\/strong><\/h2>\r\nA convenient way to organize a basic site is to make folders to hold the other web pages, images, style sheets, and JavaScript\u00a0if present (<span style=\"color: #ff0000\"><strong>Figure 2-1<\/strong><\/span>). Links (<strong><span style=\"color: #ff0000\">Figure 2-2<\/span><\/strong>) to these other elements need to be specified using the directory path on the server. For example:\r\n<ul>\r\n \t<li>Going down: If you place an image, \u201cimage.jpg,\u201d that resides in a folder, \u201cimages,\u201d then you must specify &lt;img src=\u201cimages\/image.jpg\u201d&gt;, including the folder followed by a forward slash in the file specification.<\/li>\r\n \t<li>Going up: If in another page of your site, that\u2019s contained in a folder, \u201cHTML,\u201d you want to use the same image, you must first specify an upward path from the \u201cHTML\u201d folder into the root folder, &lt;img src=\u201c..\/images\/image.jpg\u201d&gt;. The two periods and slash tell the browser to go up one folder and then down into the \u201cimages\u201d folder.<\/li>\r\n<\/ul>\r\n[caption id=\"attachment_693\" align=\"aligncenter\" width=\"517\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure.png\"><img class=\"wp-image-693 \" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure.png\" alt=\"Screenshot of a directory listing.\" width=\"517\" height=\"267\" \/><\/a> <strong>Figure 2-1.<\/strong> File organization of a simple web site into a root folder with an index.html file and folders for style sheets (css), other pages (html), and JavaScript (js).\u00a0<span class=\"il\">Adobe\u00a0<\/span>Dreamweaver\u00ae\u00a0screenshot(s) reprinted with permission from\u00a0<span class=\"il\">Adobe<\/span>\u00a0Systems Incorporated.[\/caption]\r\n\r\n<strong style=\"font-family: Roboto, Helvetica, Arial, sans-serif;font-size: 1.2em\">Hyperlinks<\/strong>\r\n\r\nOther pages can be linked using hyperlinks of two types:\r\n<ul>\r\n \t<li>Relative hyperlinks are to pages on the same server, such as \u201cpage2.html\u201d in <strong><span style=\"color: #ff0000\">Figure 2-2<\/span><\/strong>. Example of a relative link: &lt;a href=\u201chtml\/page2.html\u201d&gt;Page 2&lt;\/a&gt;.<\/li>\r\n \t<li>Absolute hyperlinks go to a link on a different server, usually someone else\u2019s page on the web. An absolute link: &lt;a href=\u201chttp:\/\/www.ryerson.ca\u201d&gt;Ryerson University&lt;\/a&gt;.<\/li>\r\n<\/ul>\r\n<h2><strong>Site Maps<\/strong><\/h2>\r\nA site map (<span style=\"color: #ff0000\"><strong>Figure 2-4<\/strong><\/span>) is a diagram of the pages and hyperlinks in your site. It shows how readers will be able to navigate from one page to another by clicking on hyperlinks. A site map is useful in planning your site and determining the arrangement of files.\r\n\r\n[caption id=\"attachment_250\" align=\"aligncenter\" width=\"600\"]<img class=\"wp-image-250\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/SiteMap-1024x512.png\" alt=\"An organizational diagram displaying hyperlinks that the reader is able to navigate to from the Home Page. \" width=\"600\" height=\"300\" \/> <strong>Figure 2-4.\u00a0<\/strong>A simple example of a site map. Hyperlinks will enable the reader to navigate from the Home Page to pages 1, 2, and 3, and to an external website, by clicking links. Created by Richard Adams. Licensed CC BY 4.0.[\/caption]\r\n\r\n&nbsp;","rendered":"<p>Since a web page may have numerous linked files, like images and hyperlinks to other pages, file organization is very important.<\/p>\n<p>A basic website will reside in a folder both on the web developers computer and on a server that users access through a universal resource locator (URL)\u2014 the web address that they type on their browsers. To load without being specifically named, the first page, or home page, on your site must reside in the main, or root, folder, and be called \u201cindex.htm\u201d or \u201cindex.html\u201d so the site defaults to this page.<\/p>\n<h2><strong>File Organization<\/strong><\/h2>\n<p>A convenient way to organize a basic site is to make folders to hold the other web pages, images, style sheets, and JavaScript\u00a0if present (<span style=\"color: #ff0000\"><strong>Figure 2-1<\/strong><\/span>). Links (<strong><span style=\"color: #ff0000\">Figure 2-2<\/span><\/strong>) to these other elements need to be specified using the directory path on the server. For example:<\/p>\n<ul>\n<li>Going down: If you place an image, \u201cimage.jpg,\u201d that resides in a folder, \u201cimages,\u201d then you must specify &lt;img src=\u201cimages\/image.jpg\u201d&gt;, including the folder followed by a forward slash in the file specification.<\/li>\n<li>Going up: If in another page of your site, that\u2019s contained in a folder, \u201cHTML,\u201d you want to use the same image, you must first specify an upward path from the \u201cHTML\u201d folder into the root folder, &lt;img src=\u201c..\/images\/image.jpg\u201d&gt;. The two periods and slash tell the browser to go up one folder and then down into the \u201cimages\u201d folder.<\/li>\n<\/ul>\n<figure id=\"attachment_693\" aria-describedby=\"caption-attachment-693\" style=\"width: 517px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-693\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure.png\" alt=\"Screenshot of a directory listing.\" width=\"517\" height=\"267\" \/><\/a><figcaption id=\"caption-attachment-693\" class=\"wp-caption-text\"><strong>Figure 2-1.<\/strong> File organization of a simple web site into a root folder with an index.html file and folders for style sheets (css), other pages (html), and JavaScript (js).\u00a0<span class=\"il\">Adobe\u00a0<\/span>Dreamweaver\u00ae\u00a0screenshot(s) reprinted with permission from\u00a0<span class=\"il\">Adobe<\/span>\u00a0Systems Incorporated.<\/figcaption><\/figure>\n<p><strong style=\"font-family: Roboto, Helvetica, Arial, sans-serif;font-size: 1.2em\">Hyperlinks<\/strong><\/p>\n<p>Other pages can be linked using hyperlinks of two types:<\/p>\n<ul>\n<li>Relative hyperlinks are to pages on the same server, such as \u201cpage2.html\u201d in <strong><span style=\"color: #ff0000\">Figure 2-2<\/span><\/strong>. Example of a relative link: &lt;a href=\u201chtml\/page2.html\u201d&gt;Page 2&lt;\/a&gt;.<\/li>\n<li>Absolute hyperlinks go to a link on a different server, usually someone else\u2019s page on the web. An absolute link: &lt;a href=\u201chttp:\/\/www.ryerson.ca\u201d&gt;Ryerson University&lt;\/a&gt;.<\/li>\n<\/ul>\n<h2><strong>Site Maps<\/strong><\/h2>\n<p>A site map (<span style=\"color: #ff0000\"><strong>Figure 2-4<\/strong><\/span>) is a diagram of the pages and hyperlinks in your site. It shows how readers will be able to navigate from one page to another by clicking on hyperlinks. A site map is useful in planning your site and determining the arrangement of files.<\/p>\n<figure id=\"attachment_250\" aria-describedby=\"caption-attachment-250\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-250\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/SiteMap-1024x512.png\" alt=\"An organizational diagram displaying hyperlinks that the reader is able to navigate to from the Home Page.\" width=\"600\" height=\"300\" \/><figcaption id=\"caption-attachment-250\" class=\"wp-caption-text\"><strong>Figure 2-4.\u00a0<\/strong>A simple example of a site map. Hyperlinks will enable the reader to navigate from the Home Page to pages 1, 2, and 3, and to an external website, by clicking links. Created by Richard Adams. Licensed CC BY 4.0.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n","protected":false},"author":2,"menu_order":3,"template":"","meta":{"pb_show_title":"","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-20","chapter","type-chapter","status-publish","hentry"],"part":17,"_links":{"self":[{"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/pressbooks\/v2\/chapters\/20","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\/2"}],"version-history":[{"count":5,"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/pressbooks\/v2\/chapters\/20\/revisions"}],"predecessor-version":[{"id":111,"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/pressbooks\/v2\/chapters\/20\/revisions\/111"}],"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\/20\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/pressbooks\/v2\/chapter-type?post=20"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/wp\/v2\/contributor?post=20"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/webauthoring\/wp-json\/wp\/v2\/license?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}