Websites are basically a collection of files, linked to each other in various ways. Learn about naming conventions and review file management to ensure your projects run smoothly.
- [Instructor] The final project's HTML file was named index.html for a reason. For a website to be seen on the Web, you need to upload your files to a Web server. This server will automatically look for an index file to show as the default page. For example, to go to any website, you only type websitename.com to land to the homepage. Not website.com/index.html, because it already knows to automatically navigate to that page.
You can have multiple HTML pages, and name it whatever you want. Just make sure the homepage is named index.html. Let's go over some more tips to keep in mind, when naming your files. Number one, use lowercase letters. Some servers are case-sensitive, so this can result in an error if it's not consistent. Don't use spaces or symbols, and use an underscore or dash to separate words. I prefer to use dashes, and as it turns out dashes are also better for search engine optimization.
Use concise and descriptive names, which will also help with SEO and general organization. These naming conventions aren't just for HTML files. This applies to your folders, images, CSS files, and pretty much any other file within your projects. A website is basically a variety of files linked together. Understanding the folder structure combined with proper file-naming techniques will help reduce errors when linking files together.
Here's a sample folder directory. Usually folders are created to group file types together for organization. A CSS folder is created for CSS files, and an image folder is created for image files. In this course, we'll be building a basic one-page website with one HTML file, and one CSS file. So it's not necessary to have as many subdirectories that a larger project would need. But even for small projects, it's good to be organized from the start, so that you can focus on the coding, not hunting down files and broken links.
So let's go back into our project files, and create a CSS folder, just to practice using subdirectories. In your Finder if you're on a Mac, or in your Windows Explorer if you're on a PC, let's add a CSS folder in your project, and then move your CSS file into it. Now that I've changed the structure, this CSS file will no longer load. If you reload your page in the browser, you're background color disappears.
But that's because we need to update the link to the CSS file in our HTML page, so let's go back to the Editor. Since we added a CSS folder, the directory has changed. So now, the value of the href attribute must be updated to reflect this change. In the href value, add CSS/ to the value, just to indicate that the file is now contained within a folder called CSS, and don't forget to Save the file.
Check it again in your browser, and refresh the page, and you should be able to see the background color again. We've been using Relative Paths, to link to the CSS file. Relative Paths points to files located within your same project folder. This path is determined by where the file is located within the directory. In the previous example, we didn't have any folders, so we could link directly to the styles.css file.
If there are subdirectories, we need to add the folder name separated with a forward slash, before the file name, just to indicate the new directory structure. We should do the same for the profile image. So let's go back into our Finder, and add a folder just for the images. And move your image into this folder. Just like the CSS file, if you refresh the page, you're going to get a broken link, because we've just changed the directory.
So let's go back into the Editor and update that. Here's my image tag. I'm going to add in my images folder, and forward slash to separate the two values, Save it, Refresh the browser, double check that you're image appears. This may feel a little cumbersome at first. Moving, creating, renaming, and updating files, but it's one of those things that will help keep you organized. The second way to link to Web resources, is to use an Absolute Path.
Absolute Paths refer to resources located on a server, including the domain name. It's usually used when linking to pages outside of your website. When using Absolute Paths, only link to web pages, not specific files such as images. If you want to refer to another website, or a specific page on a website, that's perfectly fine. Let's say I was doing a search for pizza. I can copy this entire URL, and use it to create a link to the whole pizza search results.
Or I can just link to any one of these restaurant's websites. What I can't do, is take the URL of one of these random images, and add it to my own web page, and use it as a source of my image files. When files are hosted on a Web server, it's using bandwidth. Bandwidth is the amount of data being transferred from the server to the user's computer to display the files, and this is a paid service, so if you're directly linking to someone else's hosted file, you're using their bandwidth that they are paying for.
There are some exceptions to the rule. Earlier, I mentioned the service Unsplash. This service is created specifically for people to use placeholder images, and it is hosted. Since these images are hosted specifically for letting people link to the images, this is one of those instances when it's okay. So to summarize, you can link to a website, or a specific web page, or use one of these third-party services, but avoid linking directly to any files.
Think of it this way. Imagine if someone was accessing your WiFi without your knowledge, and using up all your data, and you end up paying for the extra usage. So to recap, link to files within your own folder, using Relative Paths, and use Absolute Paths to link to external websites.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property