WDD 130: Web Fundamentals

W01 Learning Activity: Working with Files and Folders

Overview

It is critical for Software Developers to understand files, folders, and file paths at a deep level. In this course, you will use many files to create a single website and you need to be comfortable working with them and know the relationship among them.

This activity will review file path essentials and define the file naming conventions that you need to follow in this course.

File Path Essentials

File paths refer to the way we locate a file in a file system and your website uses file paths to link to files such as images and stylesheets. If a referenced asset, such as an image file, does not show up on your page either locally on your computer or when you publish it to GitHub Pages, you should check the file and file path.

Common File Path Examples

Absolute Paths

An absolute path gives the full path to a file and is used for external resources. When using absolute paths on the web, the path should begin with the protocol, such as https:// . Absolute paths for a resource are always the same, regardless of where the source file is located.

The following example uses an absolute path for an image found on an external site:

<img src="https://resource.thesite.com/images/breakfast.svg" alt="Typical breakfast items">

Notice that the file path begins with the protocol (in this case https://) and contains the complete reference to the file.

Relative Paths

A relative file path defines how to find a file relative to the location of the source file. For example, it may be in the same directory or it may be in a parent directory or in a subdirectory compared to the source file.

If the target file is in the same directory, you can list the file name directory, or you can start with a period . which indicates the current directory. You use two periods .. to refer to the parent directory, and you put a forward slash / between directory names.

So to reference a file that is in the current directory, you would use other.html or ./other.html . To reference a file in the parent directory you would use ../other.html . To reference a file that is beneath two sub directories, you would use folder1/folder2/other.html .

Relative Path: File in same folder

This example references a file named about-us.html which is located in the same folder as the referencing HTML file that contains the <a> anchor tag.

<a href="about-us.html">About Us<a>

Notice that the file path does not begin with a protocol which means that the file path is relative to the html that contains the tag. Because the file path does not begin with a period . or a slash /, the computer will expect to find the about-us.html page in the same directory as the file that is referencing it.

Another method that can be used to reference the current directory is to use the ./ notation at the beginning of the path. The following example is equivalent to the earlier one—they both look for the file about-us.html in the current directory.

<a href="./about-us.html">About Us<a>

Relative Path: File in subfolder
The following example references an image named profile.png in a sub-folder named images (where the images folder is in the same main folder as the source html file.).

<img src="images/profile.png" alt="Xavier Rodriguez" width="100" height="200">

Relative Path: A folder that is located at in a parent or higher folder
In this example, a file in the week02 folder references an image named castle.jpg, but this image is in an images folder that is located at the root level (a level higher than the week02 folder).
The ../ notation is used to go up a folder.

<img src="../images/castle.jpg" alt="A hunting lodge castle in Germany." width="300">

File Path Summary

• Starting a path with "/" will go to the root folder and start there.
• Starting a path with "../" will go one folder up and start there.
• Starting a path with "../../" will go two folders up and start there (and so on…).
• Starting a path with "./" indicates to start in the current folder.
• To move forward, or down a sub folder, start with the first sub-folder and include a "/" after each subfolder name.

File and Folder Naming Standards

When working on the web, there are many things that affect the operation of the files, such as the browser, the protocols, the operating system, the language, etc. While many of these are out of your control, you can keep your work consistent and manageable through file and folder naming conventions.

The file and folder naming conventions outlined here will be considered best-practice rules for this course. These rules should be applied to all files and folders created in your assignments and activities in this course.

Naming Convention Rules

• Use all lowercase syntax.

  Some platforms and systems handle case sensitivity differently. Case sensitivity is an important concept to understand when managing files and folders.

  ❌ Invalid example: Products.html
  ✅ Valid example: products.html
• Do NOT use spaces in file and folder names. Instead, use hyphens -.

  Spaces may be handled inconsistently by browsers or other tools so do not use them. The Hypertext Transfer Protocol (HTTP) ignores spaces, except in file names. In file names, it replaces a space with this syntax: "%20" which syntax is confusing. Avoid using spaces and instead, if you want to create visual space, use hyphens.

  ❌ Invalid example: design documents.html
  ✅ Valid example: design-document.html

• Do NOT use special characters. Special characters often mean specific things to computers, so do not use them in the naming of files and folders.

  Special character examples (avoid these): <,>, \, /, #, ?, !, _
• File and folder names should be as short and meaningful (semantic) as possible.

  Short names save you, other developers, and site visitors from having to remember long complicated names for files and folders. When meaningful, names can also help predict the purpose or nature of the file or folder contents.

  ❌ Invalid example: image13-v123523brokenbranchlifeimagery w200x200.png
  ✅ Valid example: winter-scene-small.png
• Use standard names for folders. In this class, the standard folder names for sub-folders are:
  • styles - Folders with this name contain CSS files.
  • images - Folders with this name contain images.

Activity Instructions

Naming Convention Review

Look at each of the following files and folders and determine if they follow the course naming conventions.

1. About.html
   Answer

   ❌ No, this does not follow the standard. It uses a capital "A" which is not allowed.
   It should be about.html instead.

2. company information.html
   Answer

   ❌ No, this does not follow the standard. It uses a a space in the file name which is not allowed.
   It should be company-information.html instead.

3. product-display.jpg
   Answer

   ✅ Yes, this follows the standard. It is all lowercase and uses a hyphen - to separate the words.

4. train_schedule.html
   Answer

   ❌ No, this does not follow the standard. It uses an underscore _ in the file name which is a special character that is not allowed. Using underscores to separate file names is common in some websites, but is not allowed in our guidelines. It should be train-schedule.html instead.

5. product4.png
   Answer

   ✅ Yes, this follows the standard. Numbers are allowed in file names.

6. temple-large (copy).webp
   Answer

   ❌ No, this does not follow the standard. It uses a space and also special characters, in this case parentheses ( ), which are not allowed. If the word "copy" is desired, the file name should be temple-large-copy.webp instead.

Practicing File Paths

This activity will help you practice relative and absolute file paths.

You will open an html file that has three images of temples. The img tags are already there and they have the correct filename, but they are missing the rest of the path information needed to make them appear. You need to update the src attribute of each of these img tags to get them to display on the page.

1. In VS Code, open your wdd130 course repository folder.
2. Browse to the week01 folder and open the file file-paths.html file.
3. Right-click on the file name and open it with Live/Five Server to see it in your browser. Notice that the three temple images are not working:

   

4. Locate and fix the img tag for the following examples:
   • aba-nigeria-temple.jpeg: This file is located in the images subfolder.
     (Hint: You need to add this subfolder to the src attribute to go with the filename that is already there.)
   • salt-lake-temple.jpg: This file is located in the images folder that is at the root level of the repository.
     (Hint: You will need to go up one directory first in the file path.)
   • aba-nigeria-temple.jpeg: This file is located on the web at this location: https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/anchorage-alaska/320x180/anchorage-temple-lds-253274-wallpaper.jpg
     (Hint: You should not download this file, but instead should refer to it directly using this full absolute path.)

When finished, your page should show all three temples as follows:

Submission

You do not need to submit anything yet for this learning activity. You can post questions and discuss with your peers and the instructor in the Week 01 Forum channel in Microsoft Teams.

When you have finished the remaining learning activities for this week, you will return to Canvas to report on your progress.