{"id":614,"date":"2020-01-02T18:24:29","date_gmt":"2020-01-02T23:24:29","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=614"},"modified":"2022-02-01T20:43:40","modified_gmt":"2022-02-01T20:43:40","slug":"files-folders","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/files-folders\/","title":{"rendered":"Files and Folders"},"content":{"rendered":"\n
\"Concrete
Photo by Mirko Blicke<\/a>.<\/figcaption><\/figure>\n\n\n\n

This lesson is of utmost importance <\/strong>(or as they say in New Girl, upmost <\/em>importance). <\/strong>It is the building block upon which all other lessons in this course are based, so read carefully.<\/strong><\/p>\n\n\n\n

Concept 1: Webpages are just files<\/h2>\n\n\n\n

Although they may look like large impressive documents, webpages are nothing more than files.<\/strong> The result is the webpage that appears in your web browser.<\/p>\n\n\n\n

In addition to the text that you read when you view a webpage, the hidden text that actually makes the web page function is known as source code<\/strong>. Source code tells your web browser (Chrome in our case) how to display the page and where to find pictures, video, and other media files that may make up the webpage. <\/p>\n\n\n\n

The pictures and media files are totally separate from the web page itself and are stored in folders<\/strong>. <\/p>\n\n\n\n

This concept can feel a little strange at first but for you to become a competent web developer you must understand and come to terms with it. You may need to come back and reread this lesson a few times when we start working with files. <\/p>\n\n\n\n

Right click on the empty space on the side of this website. Select View Page Source<\/strong>. We\u2019ll learn how to navigate and write some of that code later in this class. <\/p>\n\n\n\n

For now, understand that source code is just illustrating the principle that all webpages are files of text.<\/strong><\/p>\n\n\n\n

Concept 2: Folders<\/h2>\n\n\n\n

Since each webpage is just a fancy file, and all images and media are also other files, a website can easily consist of hundreds of files: webpages, pictures, videos, products for sale\u2014you get the idea. <\/p>\n\n\n\n

The way we organize all these numerous files? Folders. <\/strong><\/p>\n\n\n\n

Here’s a common folder structure: <\/p>\n\n\n\n

\"\"
The basic folder structure of a website, consisting of a JavaScript folder, an image folders, and a Cascading Style Sheets folder.<\/figcaption><\/figure>\n\n\n\n

Concept 3: Naming files and folder<\/h2>\n\n\n\n

We’ve learned webpages are nothing more than files, and these files are stored in organizational folders. However, these files and folders must be named <\/strong>in a very specific way. <\/p>\n\n\n\n

Capitalization<\/strong> and spaces<\/strong> matter to web servers and programming languages. A file named Ana.html<\/strong> is not the same as ana.html<\/strong>. Likewise, a folder name “CSS<\/strong>” is not the same as a folder named “css<\/strong>.” Notice the casing? While it may be tempting, resist those urges from your English classes to capitalize the first letter. <\/p>\n\n\n\n

Additionally, something called Corgi Dog.jpg is not the same as CorgiDog.jpg. Do not use spaces when naming your files<\/strong>. <\/p>\n\n\n\n

If you\u2019re naming a file two words, and you can\u2019t use a space, how could you make those words easier to tell apart? <\/p>\n\n\n\n

Which one is easier to read:
A) cordidog.jpg
B) corgiDog.jpg <\/p>\n\n\n\n

If you guessed B, you\u2019re right! Usually, to name a file multiple words, you capitalize the first letter of the second word, the third word, etc. <\/p>\n\n\n\n

Fun fact: this naming convention is called camelCase<\/a>. <\/p>\n\n\n\n

In some cases, you might want to add a hyphen or underscore between words. That’s acceptable as well. <\/p>\n\n\n\n

Pro Tip:<\/strong> If you’re working on a project and you’ve uploaded your files to your server, but they aren’t showing up, it’s a great idea to double check that your files and folders are named using the best practices outlined above. Consistency is key here: the file and folder names must appear exactly the same<\/strong> in Dropbox, in your HTML, and on your server. <\/p>\n\n\n\n

Concept 4: File paths<\/h2>\n\n\n\n

To link files together, to display images, to have files communicating with each other, you have to use file paths<\/strong>.<\/p>\n\n\n\n

To make files talk to one another, you have to provide a file path between them \u2014 basically a route, so one file knows where another one is.<\/p>Dealing with files<\/a>, via MDN web docs<\/a><\/cite><\/blockquote>\n\n\n\n

While you may be used to searching <\/strong>for files, this is essentially the opposite. We have to provide the server with exact instructions <\/strong>on where to find the file.<\/p>\n\n\n\n

\n\n\n\n

For this example, imagine we are our editing a file, index.html<\/strong>, and we want to insert a picture of a Dalmatian.<\/p>\n\n\n\n

<!DOCTYPE html> <\/code>\n<head>        <\/code>\n<title>Learning About File Paths<\/title>   <\/code>\n<\/head>   <\/code>\n  <body>     <\/code>\n    <img src=\"\" alt=\"<\/strong><\/code>dalmatian<\/strong>\">  <\/strong> <\/code>\n  <\/body> <\/code>\n<\/html> <\/code><\/pre>\n\n\n\n
The line  <img src=\"\" alt=\"dalmatian\"><\/strong><\/code> is inserting an image  (img) into a page. Between the quotes, we need to provide instructions on exactly<\/strong> where the image is located. In this case, dalmatian.jpg is in the images folder\u2014see image below. Therefore, we specify the folder name<\/strong> followed <\/strong>by the file name: images\/dalmatian.jpg<\/strong>.<\/p>\n\n\n\n
\"Folder
Folder structure highlighting the file path to dalmatian.jpg. You’ll be downloading this file structure for the course (minus dalmatian.jpg) in an upcoming lesson.<\/figcaption><\/figure>\n\n\n\n
The file path images\/dalmatian.jpg<\/strong> is instructing the server to go down <\/strong>into the images folder<\/strong> and find the file titled dalmatian.jpg. <\/p>\n\n\n\n
\n\n\n\n
\"Folder<\/figure>\n\n\n\n
If we wanted to link two files in the same folder level, for instance, add a link about.html on index.html<\/strong>, we don’t need to include a folder name. They’re already in the same folder. <\/p>\n\n\n\n
The file path would simply say the file name: about.html<\/strong> <\/p>\n\n\n\n
<!DOCTYPE html> <\/code>\n<head>        <\/code>\n<title>Learning About File Paths<\/title>   <\/code>\n<\/head>   <\/code>\n  <body>     <\/code>\n    <a href=\"about.html\">About<\/a>  <\/strong> <\/code>\n  <\/body> <\/code>\n<\/html> <\/code><\/pre>\n\n\n\n
Again, don’t worry if the code around the file path is a little confusing\u2014for now, just focus on the relationships between files.<\/p>\n\n\n\n
\n\n\n\n
Things get a little tricker when you need to go UP <\/strong>a folder level.<\/p>\n\n\n\n
\"File
Folder structure\u2014view switched only so you can see in multiple folders at once.<\/figcaption><\/figure>\n\n\n\n
If we are working on project-one.html<\/strong>, located in the project-one folder, and we wanted to insert an image called dalmatian.jpg<\/strong>, we would need to:<\/p>\n\n\n\n
  1. Go UP<\/strong> a folder. This is depicted by: ..\/<\/strong><\/li>
  2. Go DOWN <\/strong>into the images folder: \/images<\/strong><\/li>
  3. Add the file name: dalmatian.jpg<\/strong><\/li>
  4. The final file path: ..\/images\/dalmatian.jpg<\/strong><\/li><\/ol>\n\n\n\n
    \n\n\n\n
    To reinforce these concepts, read: <\/strong>
    Dealing with files<\/a>, via MDN web docs
    HTML file paths<\/a>, via W3Schools

    And ask for help if you need it.<\/p>\n\n\n\n
    \n\n\n\n
    Your turn<\/strong>:<\/p>\n\n\n\n
    1. What is the file path to insert dalmatian.jpg<\/strong> on project-one.html<\/strong>?<\/li>
    2. What is the file path to link project-one.html <\/strong>on index.html<\/strong>?<\/li>
    3. If you wanted to link index.html <\/strong>on your project-one.html<\/strong>, what would that file path look like?<\/li>
    4. How would you name a webpage about Baby Yoda, paying close attention to casing<\/strong> and spacing<\/strong>?<\/li>
    5. How would you name an image of Yoda<\/strong>?<\/li><\/ol>\n\n\n\n
      For answers, navigate to page 2.<\/em><\/p>\n\n\n\n\n\n\n\n
      \n\n\n\n
      Answers<\/strong>:\n1. ..\/images\/dalmatian.jpg\n2. project-one\/project-one.html\n3. ..\/index.html\n4. babyYoda.html\n5. yoda.jpg\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
      This lesson is of utmost importance (or as they say in New Girl, upmost importance). It is the building block upon which all other lessons in this course are based, so read carefully. Concept 1: Webpages are just files Although they may look like large impressive documents, webpages are nothing more than files. The result … Continue reading Files and Folders<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-614","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":3,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/614\/revisions"}],"predecessor-version":[{"id":3765,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/614\/revisions\/3765"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/media?parent=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}