Linking pages & Working with media Copy
Introduction to links
Links are an essential part of the web development since they are responsible for holding the web together. Therefore it is essential to know how to properly link to external websites and internal files.
Learning Objectives
Understand the difference between internal links (/somepage) and external links (http://www.somesite.com/somepage)
Explain when we should use the full URL (with the
http://yoursite.com/somepath) and when we should use the relative path (/somepath) on a web page.Explain how to navigate the document tree with links (../../someotherpage).
Explain how to open links in external windows.
Understand all the possible pseudo-states (e.g.
:hover) of a link and when they are actually activated.Explain how to change styles of a link based on the pseudo-states.
What is a server path?
Study
Now let’s start by watching this recorded session presented by Halim Boussada:
Server Paths Explained
(This is an article found at this link that is included here due to an outdated HTTP hosting provider.)
What is a server path?
A server path is the path through the server’s directory structure between two files. In order to link two files together, such as placing an image on a web a page, you need to know the path through the computer from the web page to the image in order to tell the browser where to find it.
When you are building your web site on your computer, the "server path" is the same thing in principle, it’s the path from one file to another on your computer. If you set up your web site on your computer as it will be on your hosting company’s server space you’ll be able to check all your internal links before uploading your site.
Two Types of Paths
In regards to the Internet, there are two kinds of paths, relative and absolute. An absolute path is the full URL to a file. If you had a link on your index page to your picture page, the absolute path might look like this:
<a href="http://www.YourDomain.com/pictures.html">Pics</a>
A relative path points to the location of the file you want to link to in relation to the page being viewed, all within your server space. If the page you’re linking to is in the same directory as the page being viewed, then the relative path is simply the page name. Using the relative path for the same page above, you’d code it:
<a href="pictures.html">Pics</a>
So which is best?
Both links take you to the same page, but there’s a big difference in the way they perform. By using a relative path, the browser knows to just look within your own web site’s server space for the linked file. However, if you use the absolute path, the browser goes back out onto the Internet and finds your site all over again, then finds the file within your directory. So, if you’re linking to pages on your own site, using a relative path will make your site respond quicker. It’s all about speed! If you’re linking to something off your site, then you must use the absolute path because there is no relative path to use.
What if my file isn’t in the same directory?
Good question, Gleeblefumber! You can still use relative paths as long as the file is within your own server space. Look at the table below to see how some relative path variables would work.
Server Path… What it means…
<a href="page.html">
page.html is located in the current directory.
<a href="tips/page.html">
page.html is located in a folder (directory) called tips. The "tips" folder is located in the current directory.
<a href="tips/other/page.html">
page.html is located in a folder called other that is located in a folder called tips that is located in the current directory.
<a href="../page.html">
page.html is located in a folder one level up from the current directory.
<a href="../../page.html">
page.html is located in a folder two levels up from the current directory.
If you link to a page that is in another folder (directory) on your site, then you can see how to do that in the first three examples. To have a link on a page in one of the other folders go back to the main directory, you can see how that is done in the last two examples.
../ represents one level up to the browser.
Clear as mud now? Well go take a shower, for goodness sakes.
Source: Server Paths Explained Author: Dennis Gaskill
Additional Resources
In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.
Introduction to Media
Images and other media are an essential part of providing a good user experience. However they can become a really headache since they can ruin the page load times if we are not careful. So when our site is slow the easiest way to make it run faster is to optimize the images and filetypes.
In addition there is a big difference between each of the image filetypes. The trade-offs are usually image size vs quality. Therefore it is important to understand the differences between gif , jpg ,bmp , png and svg.
Learning Objectives
- The common attributes of the image tag.
- How to load a smaller version of an image.
- How to get an image to fill up an element.
- How to save load times by using appropriately sized images.
- When we should store images externally vs on our server.
- The main types of image files and their differences.
- Which file types let us use animation.
- Which file types let us use transparent colors
- Which file types are best for photos and/or Graphics
- Which file type lets us scale an image as big as we want without affecting file size.
- The difference between raster and vector images.
- How to add video to our page (please don’t autoplay…)
- How to add audio to our page (please don’t autoplay…)
Study
Read about the Differences between image types (see first answer) from SO
Watch this YouTube video about adding video to your page:
- Glance over Raster vs Vector images explained simply by YouTheDesigner.com. The pictures are broken in the article, but here is a short YouTube video illustrating the difference:
Don’t worry if you don’t absorb it all — you’ll have time to pick it up later.
- Read and learn all about File Paths in HTML.
Additional Resources
In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.
You can always use a web service like TinyPNG to compress your images and improve your web site’s loading speeds.