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

<img src=“logo.jpg” alt=“Logo Image” />

To find the sourceof 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 documentsis into the images folder. We add a forward slash / between the foldername and the image name.

MyWebpage

images

index.htm

aboutus.htm

gallery.htm

locateUs.htm

homeImages

logo.jpg

If we add another folder or directory intothe images folder to separate the imagesfor pages they are used, then we includethe name of the sub directory in the path.

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

MyWebpage

images

index.htm

aboutus.htm

gallery.htm

locateUs.htm

stylesheets

downloads

logo.jpg

banner.jpg

mainstyle.css

family.png

form.doc

sidebar.gif

<a href=“aboutus.htm”>Click here

</a>

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◦ <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>

MyWebpage

images

index.htm

aboutus.htm

gallery.htm

locateUs.htm

stylesheets

downloads

logo.jpg

banner.jpg

mainstyle.css

family.png

form.doc

sidebar.gif

<a href=“gallery.htm”><img src=“images/family.png” />

</a>

<a href=“downloads/form.doc”>Help Form

</a>

MyWebpage

images

index.htm

aboutus.htm

gallery.htm

locateUs.htm

stylesheets

downloads

logo.jpg

banner.jpg

mainstyle.css

family.png

form.doc

sidebar.gif

<a href=“http://www.google.com”>Our gallery

</a>

<a href=“http://www.mury.k12.ut.us/HJH/Teachers/preynolds/index.htm ”>Help Form

</a>

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

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.