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:

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:

How / and ../ are used:

What is important to remember about links is:

Some ways that links 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.