You have already learned that when you install web server software, you must designate a folder to be the doc root directory. All of your web pages must be placed in this folder in order for them to be visible on the web. Note that unless your web server has a security problem, it should be impossible for a browser/client to view a page that is not in the doc root dir. The doc root directory is the starting point for navigating a website. If you type a server name into the url bar of your browser and press enter, the web server will look at the request and respond by sending the index.html (or .php) file that is inside the doc root dir Note that server name, domain name, and host name all mean the same thing. So, for example, if you entered www.acme.com into the url bar of your browser and press enter, a request would be sent to the web server that is known as www.acme.com. That server would then look directly inside its doc root dir for the default web page (which is often named index.html, or index.php).
In our case, the server name for our Apache web server (running on XAMPP) is localhost, but when you transfer your web pages over to your live server, the server name will be the domain name that you registered when you set up your web hosting plan with QTH.com.
It's extremely important to understand that the root directory on a computer is not the same as the document root directory of the web server running on that computer. If your computer runs Windows, the root directory is often something like C:\. If you are familiar with Linux, the root directory is simply /. So the path to your desktop on Windows, starting from the root directory might be something like C:\Users\Bob\Desktop. On a Linux machine, the path to your desktop might look like this /home/Bob/Desktop. Remember that we configured the doc root directory on our Apache server to be the public_html directory that we created on our desktop.
Why is all of this important? Because it's helpful to understand the difference between the root dir of a computer vs. the doc root dir of a web server before we talk about doc root relative links. You should already know about relative links when it comes to linking web pages. You should know that the starting point for a relative link depends on where your web page is located within the file structure of your site. So if you wanted to add an a tag in the contact page that links to the default page in the blog folder, it would look like this: blog/index.php. Likewise, if you wanted to add an a tag in the blog home page that links to the contact page, it would look like this ../contact.php. The starting point for the path is relative to the location of the file that has the a tag.
There is another type of relative link that you can use in your web pages. It is known as a doc root relative link. The starting point for a doc root relative link is always the doc root directory of the web server (hence the name 'doc root relative'). Doc root relative links always start with a forward slash. So if we were to use a doc root relative link to link the contact page to the blog page, it would look like this: /adv-web-dev/my-new-site/blog/index.php.
The nice thing about doc root relative links is that the starting point is always the same (unlike regular relative links, where the starting point depends on the location of the file that is linking to another file).
Finally, it's important to note that doc root relative links only apply to client-side links (that is, links in our HTML, CSS, and JavaScript code). Since PHP runs on the server, if you tried to use a link a PHP file to an include file with a path that looked like this: /adv-web-dev/my-new-site/blog/index.php it could cause problems. If PHP is running on a Linux server it would start the path from the computer's root directory. If PHP is running on a Windows server it's not a valid path (remember that the root dir on a Windows computer is often C:\).
You can use relative links in your PHP code, but you can't use doc root relative links in your PHP code
Let's go ahead and address some problems in our blog home page.
We'll change the client side links in the header and footer include files to be doc root relative
