And adding hyperlinks
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.