Introduction
In this tutorial, you will set up the folders and files necessary for building a website with HTML and CSS. You will also prepare an index.html
file so that it is ready to receive HTML content in the tutorials ahead.
Prerequisites
If you have been following along with this tutorial series, you can continue using the css-practice
project directory, index.html
file, images
folder, css
folder, and styles.css
file that you created earlier in the series. If you have not been following along this tutorial series and need instructions for setting up these folders and files, please see our earlier tutorial in this series How To Set Up Your CSS and HTML Practice Project.
Note: If you decide to create your own names for the folders or files, make sure to avoid character spaces, special characters (such as !, #, %, or others), and capital letters, as these can cause problems later on. Be aware also that you will need to modify your file paths in some of the steps throughout the remainder of this tutorial series to ensure that they correspond with the names of your files.
You should have a project folder named css-practice
that contains the following folders and files that are necessary to explore CSS in this tutorial series:
- A folder named
css
that contains the filestyles.css
- An empty folder named
images
- A file named
index.html
In the first step of this tutorial, you will prepare the index.html
file so that it is ready to receive content in the tutorials ahead.
How To Prepare Your index.html
File For HTML Content
To prepare your index.html
file to serve as your website’s homepage, we’ll need to add a few important lines of HTML. These lines of HTML will serve as instructions for the browser and will not be displayed on the webpage itself. Make sure that your index.html
file is empty (if you have content from previous tutorials) and add the following code snippet to the document:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Sammy the Shark</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> </body> </html>
Make sure to change the highlighted site title with a title of your own choosing. Then save the index.html
file. Before continuing, let’s briefly review the code that you just added to understand its purpose:
- The
<!DOCTYPE html>
declaration tells the browser which type of HTML is being used in this document. It is important to declare this value as there are multiple versions of the HTML standard, and browsers need to know which to use. In this declaration,html
specifies the current web standard of HTML, which is HTML5. - The opening and closing
<html>
tags tell the browser that all content inserted between these two tags should be interpreted as HTML. Inside this tag, you also added thelang
attribute, which specifies the language of the webpage. In this example, the language is set to English using theen
language tag. For a full list of language tags, visit the IANA Language Subtag Registry. - The opening and closing
<head>
tags creates a section in the HTML document that typically contains information about the page, rather than page content itself. Browsers do not display the information in a<head>
section. - The
<meta charset="utf-8">
tag specifies the document’s character set should be UTF-8, a unicode format that supports a majority of characters from a wide variety of written languages. - The
<title>
tag tells the browser the name of the webpage. This title appears on the browser tab and when the site is listed in search results but it does not show up on the web page itself. Make sure to replace “Sammy the Shark” with your name or a title of your choosing if you want to personalize the site. - The
<link rel="stylesheet" href="css/styles.css">
tells the browser where to find the stylesheet that contains the style rules. If you followed the instructions earlier in this series How To Set Up Your CSS and HTML Practice Project, your stylesheet should be located at this file path. - The opening and closing
<body>
tags will contain the main content of the webpage. You’ll add the HTML content between these tags in the tutorials ahead.
Conclusion
You have now created all of the folders and files necessary for creating a website with HTML and CSS. You should also have an index.html
file prepared with the necessary HTML content for serving as your website’s homepage. In the next tutorial, you’ll explore how the demonstration site is constructed and the steps you will take to recreate it.