What is a website?

A website is a series of files that contain the information necessary for the web browser to properly render the website.

These files can include:

• .html pages, wich include the coding for the structure and text of the document, and links to the styling, scripts, images, video, and audio resource files necessary to create the page the designer wants to display.
• resource files
  • .css pages that tell the web page how to style the structure, text and images.
  • images such as .jpg, .gif, .png, and .svg that are going to be used in the site.
  • video and audio files such as .mp4, .WebM, and .mp3 to be used on the site.
  • .js files that contain javascript code that allows your site to be animated, interactive, etc.

In order to work together, these files need to be linked. If any of these files are missing, or the link is written incorrectly, the function they provide will be missing.

Linking the files

These files do not "magically" sense each others' presence. In order for a website page to be able to access other web pages and other resources, they need to link to those other pages and resources.

I realize most people just use their phones now to get from one place to another. But links are like if you don't have your phone and you ask a friend how to get to their house. They'd tell you, "go down this street until you get to the Rt28, turn right, take a right at the exit for 28th Street, and I'm on the left, 4678." If you are missing any of those directions, you won't get there.

A link is written directions to the browser, telling it how to get from the page the link is written on, through the filing system created for the website, to the page or resource you want to connect to.

The symbols we use to write the directions are:

• folder_name/ for "go to this folder and go inside"
• ../ for "go outside the folder you are in".

How / and ../ are used:

• If the file you want to connect to is in the SAME FOLDER as the page that contains the link, you only have to write the file name:<img src="image.jpg">



• If the link is on a page that is next to a folder (images) that CONTAINS the image: <img src="images/image.jpg">



• If the link is on a page that is contained in a folder, and the image is ONE LEVEL OUTSIDE THAT FOLDER: <img src="../image.jpg">



• If the link is on a page that is contained in a folder, and the image is ONE LEVEL OUTSIDE THAT FOLDER and INSIDE ANOTHER FOLDER (images): <img src="../images/image.jpg">
• If you need to get out of several folders and into several folders, you can string these instructions together: <img src="../../images/products/new/image.jpg">

What is important to remember about links is:

• LINKS ARE NOT SMART; they rely on you to be correct. They do not correct themselves.
• Everything must be spelled exactly correctly, including CAPITALIZATION; if the names of the folders and files in the link aren't spelled exactly the same the links won't work.
• Files must stay in the same relative position or the links will break — you can't move a file to another folder without changing ALL links related to that file, the files that it links to and the files that link to it.

Some ways that links break:

• If you rename a file and don't rename all links associated to that file, the links will break,
• If you move the file to another folder and don't change all links associated to that file, the links will break.
• If you create an absolute link to a file on the web and the owner of that page moves or renames or deletes that page, the link will break.
• If you create an absolute link to a file on your desktop (Dreamweaver sometimes creates these automatically — they start with file:///...) and you upload your site to the server, your uploaded site won't be able to access your computer's harddrive (which isn't on the internet, fortunately) and the links will break.

Troubleshooting tip: If an image, video, audio, or function is not working. look first to see if the file is there, and then at the link to make sure it's written correctly.

Why we don't just put all of the files in the same folder

It would be simpler to write links if we just dropped everything in one folder. All links would just be the name of the file.

However, websites can be hundreds and thousands of files. It's easier to find things if they are placed in folders, such as "images" and "video" and "css" to make them easier to find. And once we start organizing resources in folders so we can find them more easily, we have to be able to write more complex links like above.

Some file links

Hyperlinks to other pages (place in code in body element): <a href="amazon.com" target="_blank">Amazon</a>

Email links (place in code in body element): <a href="mailto:yourname@yourname.com">My email</a>

Images (place in code in body element — these are self-closing): <img src="image1.jpg" alt="Description or image suitable for blind person" />

Links to css (place in head element before local styles): <link href="css/styles.css" rel="stylesheet">

Link to javascript file (place in head element before it closes): <script src="myExternalFile.js"></script>

Links to fonts (place in css style sheet):
@font-face {
font-family: myFirstFont;
src: url(fonts/sansation_light.woff);
}

There are also links to images in css attributes such as background images. They are written the same way.