And adding hyperlinks

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

MyWebpage index.htm aboutus.htm gallery.htm locateUs.htm logo.jpg banner.jpg mainstyle.css Notice the file names DO NOT include spaces

MyWebpage index.htm aboutus.htm gallery.htm locateUs.htm logo.jpg banner.jpg mainstyle.css To find the source of the image you just type in the name of the image The image is in the root directory along with the xhtml pages So the path to the image is just the images’ file name

MyWebpage index.htm aboutus.htm gallery.htm locateUs.htm logo.jpg banner.jpg mainstyle.css 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.

MyWebpage images stylesheets downloads index.htm aboutus.htm gallery.htm locateUs.htm 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

MyWebpage images index.htm aboutus.htm gallery.htm locateUs.htm stylesheets downloads logo.jpg banner.jpg mainstyle.css family.png form.doc sidebar.gif

MyWebpage images index.htm aboutus.htm gallery.htm locateUs.htm stylesheets downloads logo.jpg banner.jpg mainstyle.css family.png form.doc sidebar.gif Notice in the source we added the name of the folder that stores our image we want placed in the page.

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

MyWebpage images index.htm aboutus.htm gallery.htm locateUs.htm homeImages logo.jpg 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.

 and 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  Link content here

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

 text ◦ Blue ◦ Underline  images ◦ Blue border Gallery Help Form

 text ◦ Purple ◦ Underline  images ◦ Purple border Gallery Help Form

 If you add an href to another webpage, the link will navigate to that page when clicked ◦ Click here  If you add an href to another file type, the link will download that file when clicked ◦ Click here

MyWebpage images index.htm aboutus.htm gallery.htm locateUs.htm stylesheets downloads logo.jpg banner.jpg mainstyle.css family.png form.doc sidebar.gif Help Form

MyWebpage images index.htm aboutus.htm gallery.htm locateUs.htm stylesheets downloads logo.jpg banner.jpg mainstyle.css family.png form.doc sidebar.gif Our gallery Help Form

 Here is some text that we want as our paragraph, but we want them to click here to go to another page. Here is some text that we want as our paragraph, but we want them to click here to go to another page.

 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.