HTML Lesson: File Organisation

There are many files on your computer. They are organdised in different folders/directories at different levels. This gets very complex and confusing quickly so we like to visualize it using a diagram called a tree.

The File Tree

Photo from pngegg.com

The idea is that when in any folder in the terminal, you know your location and the path you took to get there.

• Example:
  1. /
  2. User
  3. Desktop
  4. Website
  5. Index.html

" / " is at the top. Under it, everything on your computer is stored. In " user " there are several folders for stuff stored on your computer.

• This includes:
  • Desktop
  • Documents
  • Downloads
  • Library
  • Movies
  • Music
  • Pictures
  • public_key

The files on your computer can also be organised in list format like the one displayed below.

Layered List File Organisation

• /
  • Desktop
    • Website
    • Screenshots
    • Applications
  • Documents
    • PDF files
    • Docs files

Here is the html syntax for a list like this.

		<ul> 
			<li> / 
				<ul>	
					<li>Desktop
						<ul>
							<li>Website</li>
							<li>Screenshots</li>
						</ul>
					</li>
					<li>Documents
						<ul>
							<li>PDF files</li>
							<li>Docs files</li>
						 </ul>
					</li>
				</ul>
			</li>
		</ul>
	

(When exiting vim, be sure to use esc:wq to ensure your work is saved. If you recieve the error message: E492: Not an editor command, ensure that you typed the correct thing.)