Home Learning Path LAMP HTML/CSS PHP MySQL JavaScript YouTube Blog PHP Fiddle

Intro to HTML: Link Tag & File Path

Quick Copy Boxes



<link> This is a link tag. It has no ending tag and will link an external file to your document. Your CSS style links are placed in the head tags.

Syntax


<!DOCTYPE html>
<html>
  <head>
    <!-- Link for a CSS file-->
    <link  rel = "stylesheet" type = "text/css" href = "custom.css">
    <title>Title</title>
  </head>
</html>

rel indicates the relationship between the link and your file. For CSS file links, rel will equal "stylesheet".
type indicates the media type. For CSS file links type will equal "text/css".
href indicates a file location or web address. In this example the file is called "custom.CSS".

rel, type and href are the link's attributes You will learn more about attributes later on in this tutorial.

Single vs Double Quotes

Attributes, such as "stylesheet", can be placed in single or double quotes. Some text editors will give error/notice messages if you use single quotes and your file saved as an HTML document (fileName.html). However, the content should still display appropriately. If your file is saved as a PHP document (fileName.php), you usually will not get error messages for using single quotes.

After you learn PHP, you may want to use PHP to build your HTML pages. This is when the single or double quotes start to matter. For now, it doesn't really matter. So for now, I suggest using double quotes in HTML documents. This will make it easier for you to see real errors.


File Paths

The file path indicates the location of a file. The href attribute is set equal to the file's location. The first type of external files we will learn about are CSS files.
Note: You probably won't be using file paths until you get to the CSS Tutorials or start adding media files (such as pictures and music). You may want just glance over this section and come back to it when you are ready to add your first external file. It may be more meaningful to you then.


Same Folder Example

File in the same folder: If the file you are linking is in the same folder as the file you are linking it to, you just have to indicate the name of the file.


Above is a the file explorer view of a project. This project is located in a folder called battleCardGame. Inside this folder is a CSS file called battleCard.css. Let's say we are currently working on the file called home.php. We want to put a link for battleCard.css in home.php. This is how the link would look:



        <link rel= "stylesheet" type= "text/css" href= "battleCard.css">
  

Outside Folder Example #1

File in outside folder: If the file you are linking is in an outside folder, you will use "../"


In the example above we are adding another style link to home.php. home.php is still located in the folder called battleCardGame. However, in this example the CSS file we are linking is located in the outside folder called lessonPlans. The stylesheet in lessonPlans is called 'custom.css'.

In summary, the folder battleCardGame and the file 'custom.css' are both located in a folder called lessonPlans. The file we are working on, 'home.php', is located in the battleCardGame folder. This is how the link would look:



      <link rel= "stylesheet" type= "text/css" href= "../battleCard.css">

Outside Folder Example #2



Let's go outside one more folder. Let's say the folder called 'Projects' contains a CSS file called 'card.css'. We want to link 'card.css' in 'home.php'. This is how that link would look:



      <link rel= "stylesheet" type= "text/css" href= "../../battleCard.css">

Inside Folder Example # 1


File in an inside folder: If the file you are linking is in an inside folder, you will use "folderName/fileName"


In the example above we are putting a stylesheet link in 'index.html'. In the same folder as 'index.html' is a folder called css Inside the css folder is a css file called 'custom.css'. We want to link 'custom.css' in our index.html document. This is how that link would look:



    <link rel= "stylesheet" type= "text/css" href= "css/custom.css">

Inside Folder Example # 1


File in an inside folder: If the file you are linking is in an inside folder, you will use "folderName/fileName"


In the example above we are linking a stylesheet to 'index.html'. In the same folder as 'index.html' is a folder called css.

Inside the css folder is a css file called 'custom.css'. We want to link 'custom.css' in our index.html document. This is how that link would look:



    <link rel= "stylesheet" type= "text/css" href= "css/custom.css">

Inside Folder Example # 2


Now let's say inside the folder called css there is another folder called quizCss. Inside the quizCss folder is a file called 'level1.css'. We want a link to level1.css in index.html. This is how that link would look:



    <link rel= "stylesheet" type= "text/css" href= "css/quizCss/level1.css">

Applied Assignment

Background:
You are creating a web site for a company that sells toys.
Assignment:
You are linking CSS style sheets to the appropriate pages. Read each statement, then write the appropriate link tag. The picture below shows the file/folder layout.

Example:
You want to put a link to toy.css in index.html.


 <link rel="stylesheet" type="text/css" href="css/toy.css">
        

Statements:
1) You want to put a link to custom.css in index.html
2) You and to put a link to custom.css in contact.php
3) You want to put a link for contact.css in index.html.
4) You want to put a link to contact.css in contact.php