Organizing files in a Website

1. Organizing files in a Website And adding hyperlinks

2. Let’s begin with Organization Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should be in one main folder MyWebpage That’s called the root folder or the root director Directory is just another fancy name for folder

3. We could have everything simply placed in the folder Notice the file names DO NOT include spaces index.htm aboutus.htm MyWebpage gallery.htm locateUs.htm logo.jpg banner.jpg mainstyle.css

4. Adding the source of images <img src=“logo.jpg” alt=“Logo Image” /> index.htm To find the source of the image you just type in the name of the image aboutus.htm MyWebpage gallery.htm The image is in the root directory along with the xhtml pages locateUs.htm logo.jpg banner.jpg So the path to the image is just the images’ file name mainstyle.css

5. Organizational Problem With so many files in one folder it gets hard to find them and manage them. In this example we only have 4 xhtml files, 2 images, and 1 Cascading Style Sheet! Most web sites include many more pages and many, many, many more images. index.htm aboutus.htm MyWebpage gallery.htm locateUs.htm logo.jpg banner.jpg mainstyle.css

6. Let’s create a folder for each type of file inside our root directory Now we can place all of our images in the images folder, css files in the stylesheets folder, and other documents to download in the downloads folder images MyWebpage stylesheets index.htm aboutus.htm downloads gallery.htm locateUs.htm

7. Now we have changed the path of our images as well. logo.jpg banner.jpg images family.png sidebar.gif MyWebpage stylesheets mainstyle.css index.htm aboutus.htm downloads form.doc gallery.htm locateUs.htm

8. <imgsrc=“images/logo.jpg” alt=“Logo Image” /> logo.jpg banner.jpg images family.png sidebar.gif MyWebpage stylesheets mainstyle.css index.htm aboutus.htm downloads form.doc gallery.htm Notice in the source we added the name of the folder that stores our image we want placed in the page. locateUs.htm

9. <imgsrc=“images/logo.jpg” alt=“Logo Image” /> logo.jpg banner.jpg images family.png sidebar.gif MyWebpage stylesheets mainstyle.css index.htm aboutus.htm downloads form.doc gallery.htm The path from our xhtml documents is into the images folder. We add a forward slash / between the folder name and the image name. locateUs.htm

10. <imgsrc=“images/homeImages/logo.jpg” alt=“Logo Image” /> logo.jpg images MyWebpage homeImages index.htm If we add another folder or directory into the images folder to separate the images for pages they are used, then we include the name of the sub directory in the path. aboutus.htm gallery.htm locateUs.htm

11. Adding hyperlinks (anchors) • <a> and </a> tags create a hyper link • Anything contained in between these tags will be the link • that can include text, images, paragraphs, list items, etc. • An anchor also needs a hyper-text reference • <a href=“pagefilenamehere.htm”> Link content here</a>

12. Adding a link from index.htm to aboutus.htm If this is placed in the body of index.htm logo.jpg banner.jpg <a href=“aboutus.htm”> Click here </a> family.png images sidebar.gif will look like this on your web page: stylesheets MyWebpage mainstyle.css downloads index.htm Click here form.doc aboutus.htm And when they click on it, it will attempt to open aboutus.htm gallery.htm locateUs.htm

13. Default style for anchors • text • Blue • Underline • images • Blue border Gallery Help Form

14. Default style for visited anchors • text • Purple • Underline • images • Purple border Gallery Help Form

15. Linking to different file types • If you add an href to another webpage, the link will navigate to that page when clicked • <a href=“otherpage.htm”>Click here</a> • If you add an href to another file type, the link will download that file when clicked • <a href=“document.doc”>Click here</a>

16. Internal links <a href=“gallery.htm”> <img src=“images/family.png” /> </a> logo.jpg banner.jpg family.png images sidebar.gif stylesheets MyWebpage mainstyle.css downloads index.htm form.doc aboutus.htm gallery.htm <a href=“downloads/form.doc”> Help Form </a> locateUs.htm

17. External links <a href=“http://www.google.com”> Our gallery </a> logo.jpg banner.jpg family.png images sidebar.gif stylesheets MyWebpage mainstyle.css downloads index.htm form.doc aboutus.htm gallery.htm locateUs.htm <a href=“http://www.mury.k12.ut.us/HJH/Teachers/preynolds/index.htm ”> Help Form </a>

18. Anchors can be added inside of paragraphs as well • <p> Here is some text that we want as our paragraph, but we want them to <a href=“otherpage.htm”> click here</a> to go to another page.</p> Here is some text that we want as our paragraph, but we want them to click here to go to another page.

19. Broken links • When a link does not work it most often because either the path to the file is not correct, or the file name is mistyped. • If you are trying to link to a file that they can download, you need to make sure the file is in the folder (directory) that you are trying to link through.