And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders,...
-
Upload
marjorie-crawford -
Category
Documents
-
view
217 -
download
0
Transcript of And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders,...
![Page 1: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/1.jpg)
And adding hyperlinks
![Page 2: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/2.jpg)
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
![Page 3: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/3.jpg)
MyWebpage
index.htm
aboutus.htm
gallery.htm
locateUs.htm
logo.jpg
banner.jpg
mainstyle.css
Notice the file names DO NOT include spaces
![Page 4: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/4.jpg)
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
![Page 5: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/5.jpg)
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.
![Page 6: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/6.jpg)
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
![Page 7: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/7.jpg)
MyWebpage
images
index.htm
aboutus.htm
gallery.htm
locateUs.htm
stylesheets
downloads
logo.jpg
banner.jpg
mainstyle.css
family.png
form.doc
sidebar.gif
![Page 8: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/8.jpg)
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.
![Page 9: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/9.jpg)
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.
![Page 10: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/10.jpg)
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.
![Page 11: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/11.jpg)
<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>
![Page 12: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/12.jpg)
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
![Page 13: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/13.jpg)
text◦ Blue◦ Underline
images◦ Blue border
Gallery
Help Form
![Page 14: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/14.jpg)
text◦ Purple◦ Underline
images◦ Purple border
Gallery
Help Form
![Page 15: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/15.jpg)
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>
![Page 16: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/16.jpg)
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>
![Page 17: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/17.jpg)
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>
![Page 18: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/18.jpg)
<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.
![Page 19: And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.](https://reader035.fdocuments.in/reader035/viewer/2022070401/56649f215503460f94c39985/html5/thumbnails/19.jpg)
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.