File Management

HTMLCSSAssetsLink TagsAnchor TagImg ElementStructural Elements

Introduction

In this lesson, we look at how to manage and organise files to make development as easy as possible.

Organising files

Using a clear folder structure and proper naming conventions are key to making development as easy as possible. Create a folder on your computer for each project you are working on. We can add files and additional folders to this empty folder. The base folder for your project is called the ‘root’ folder. We can keep our HTML files for smaller sites in the root folder. Additional files, such as images, CSS files, and JavaScript files, can all be placed into separate folders so that they are easier to manage.

Here is an example.

Files

Naming

Naming is one of the most difficult aspects of programming. When we name files and other things like CSS classes, it is up to us to choose a word or short phrase that will make sense to us and other developers. In many cases, there is no right or wrong answer, however there are some important conventions.

Casing

When we write HTML it is generally better to use lowercase letters. Whether or not a server is case sensitive is dependent on the settings on that server. Since this is a variable that is out of our control, it is best to be consistent in order to reduce the chance of errors.

txt 
	<!-- Cased incorrectly -->
	/CONTACT.HTML
	/Contact.html
	/contact.HTML
	
	<!-- Cased correctly -->
	/contact.html

Spacing

When using HTML, it is important to avoid using spaces in file names. Spaces are not allowed within a URL, and will cause issues on web servers and in browsers. Instead of using spaces, we can use hyphens to indicate a space:

txt 
	<!-- Spaced incorrectly -->
	/contact us.html
	
	<!-- Spaced correctly -->
	/contact-us.html

Index

In programming, index is a special word that has an important meaning. Just like the index of a book, an index file in any programming language is a file used to point towards other files in the same folder.

If we consider a folder on your computer or phone, there may be a large variety of different types of file within. For example, the camera reel or downloads folder would contain hundreds or even thousands of files. In order to understand, manage and make use of these files - we must view an index. In the case of a phone or computer, we do this using a file explorer. In the case of a website, we do this using an index.html file.

Web servers are configured to use index.html files as the default entry point for a folder. This means that we can safely exclude the name of the file and simply reference the name of the parent folder in order to view an index file. In effect, these two URLs are the same:

txt 
	/example/index.html
	/example/

If we think about the homepages of major websites such as google.com or amazon.com, it is not common to see this written as google.com/index.html or amazon.com/index.html. This convention allows us to exclude the name of the file itself when that file represents the contents of a folder.

When working with your first website, it might make sense to use names such as about.html or contact.html for your pages. This is a useful way to practice file naming, however this is not common in the industry.

Compare these file structures:

txt 
	/example/index.html
	/example/about.html
	/example/contact.html
	/example/contact-thank-you.html
txt 
	/example/index.html
	/example/about/index.html
	/example/contact/index.html
	/example/contact/thank-you.html

Both are valid, however they produce different results when viewed on a web server. If our domain name is example.com we would have these outcomes:

txt 
	example.com/about.html
	example.com/contact.html
	example.com/contact-thank-you.html
txt 
	example.com/about/
	example.com/contact/
	example.com/contact/thank-you.html

Although only subtly different, the second structure is cleaner and more extensible. This means that we can continue to nest files and folders inside our about or contact folders to provide a storyline within the URL. Consider this final, extreme example:

txt 
	https://game.com/profile/JohnDoe/character/FEDStudent/level1/quest1/completed/

This URL tells us that player John Doe is using the FEDStudent character and has completed the first quest of the first level in the game. This is a lot of information to be passed to the user, simply by using a clever file and folder structure.

Linking pages together

A website is a ‘web’ of connected or ‘hyperlinked’ files. An anchor tag is used to link one file to another – it looks like this: <a href="about.html">About</a>

It’s important to note the use of the HTML attribute href to set where the link is supposed to go to. It’s also important to see how the text is hyperlinked and enclosed inside the anchor tags.

File paths

In order to understand how file pathing works, it helps to imagine a model project:

txt 
	project/index.html
	project/css/styles.css
	project/images/logo.jpg
	project/contact/index.html
	project/contact/thank-you.html

Relative Paths

When we reference a file, we must think about the relative position of the file we are working on, and the file we want to link to. For example, linking from the project/index file to the project/contact file would look like this:

txt 
	<a href="contact/index.html">Contact</a>

Or, by excluding index.html:

txt 
	<a href="contact/">Contact</a>

Now, if we want to make the same link to the contact page from project/contact/thank-you.html we run into a problem. If we use the same link as above, the browser will look for a file called project/contact/contact/index.html which does not exist and we will see a 404 Not Found error. This is because we are creating links using relative paths, which use the current filepath and add to the end of it.

Relative paths allow us to go “deeper” into a folder structure, but never back from where we came!

Absolute Paths

One way to resolve this issue is to use an absolute path. This means that we can reference the file from the root of the project, rather than from the current file. This is done by adding a / to the start of the file path:

txt 
	<a href="/contact/">Contact</a>

Using this approach, our contact link will work anywhere in the project, regardless of the current file path. This can be very useful for links that are used in multiple places, such as a navigation menu or logo image.

Parent Paths

There are situations where we will need to use a relative path that refers to the parent directory. This is done using ../ which means “go up one level”. For example, if we are on the project/contact/thank-you.html page and we want to link to the project/index.html page, we can use this:

txt 
	<a href="../index.html">Home</a>

Or:

txt 
	<a href="../">Home</a>

We can chain these together to go up multiple levels. For example, if we are on the project/contact/thank-you.html page and we want to link to the project/css/styles.css file, we can use this:

txt 
	<link rel="stylesheet" href="../../css/styles.css" />

This would mean “go up two levels, then go into the css folder and find the styles.css file”. The more complex our projects become, the more we will rely on these techniques to link files together.

Linking to Sections on an HTML page

Sometimes we don’t want to link to a different HTML page on our site but rather a different section on the HTML page the user is on.

To do this, we set an ID on the HTML element we want the user to go to

html 
	<article id="article"></article>

And we add a link to the article.

html 
	<a href="#article">View article</a>

The following video shows how to link to sections on an HTML page and use the scroll-behavior: smooth CSS property to scroll the user to the section they’ve clicked on.

Linking to External Content From an HTML page

We can also use the anchor elment to link to content that directs to external content. We control how the linked content opens once clicked by setting the target attribute on our anchor element.

By default, the linked content will open in the same browser window or tab wherein it was clicked without us needing to specify the target attribute value.

However, if we wish to be explicit, we set target to _self:

html 
	<a href="https://www.example.com" target="_self">Visit Example.com</a>

To open the link in a new browser tab, we can set target to _blank:

html 
	<a href="https://www.example.com" target="_blank">Visit Example.com</a>

Here are the remaining target attribure calues and their roles;

  • parent: opens the link in the parent frame of a frameset (if frames are being used).

  • top: opens the linke in the full body of the same window replacing any frames (if frames are being used).

Images

Images are added to HTML files using the <img> tag. One important thing to note about the <img> tag is that it is self-closing. Most HTML tags have an opening tag and a closing tag, but the tag is self-closing for elements where content cannot be nested inside.

html 
	<img src="images/picnic.jpg" alt="A family having a picnic in a park" />

Alt text

  • Alt text is added to an image tag to describe the image’s content to non-visual users.
  • It is vital for people who use assistive technologies to know what the image displays. For example, if you are visually impaired, your assistive technology will read out the alt text.
  • Because the alt text is so important, it should be descriptive and clear.
  • Alt text is also important for SEO (Search Engine Optimisation), which uses non-visual bots to read website content and rank this in search results.

Images as content

  • Images added into the HTML should be added because they are part of the content.
  • If the image is for styling, then it should be added using CSS. We will get onto adding images with CSS later in the course, but for now, it’s important to understand that the images you add to HTML should add to or support the content.

Image sizing

  • Image sizing should be handled using CSS rather than inline HTML.
  • If HTML is purely used for content, and CSS for styling, then their sizing is best kept separate. We will get onto image sizing later in the CSS Course.

Image file sizes

  • Page load times should be as short as possible to avoid users getting annoyed and leaving.
  • One area that can make a big difference to page load times are the size of the images on the page (3.1mb versus 200kb for example). The smaller the images, the faster the load time should be. On this programme, we recommend that decorative image sizes should be no more than 200kb.
  • To keep image sizes down, you can use a format like JPG, which has good compression. PNG is useful for things like logos, but if you’re adding a picture, then JPG is usually best.
  • You can also reduce the dimensions of the image. See how big the image needs to be on the page. If the largest image is 500px (pixels) wide, then resize your image to be 500px wide. If you need the image to be full width, you should be able to resize the image to around 1600px; adjust the quality, and still keep it under 200kb.
  • Photoshop has excellent image compression and should be used if possible. An alternative to Photoshop is a free application such as Paint.NET.
  • For bulk resizing, consider using a tool called Faststone Photo Resizer.

Activities

📖 READ

Illegal File Name Characters

Lesson Task

Brief

There are practice questions in the master branch of this repo.

Attempt the answers before checking them against the answers in the answers branch of the repo.