An HTML file holds the basic structure of your website. It tells the browser what needs to be there for content. For example, what to show as the title for your website in the browser tab. In the case of this post, the browser tag should read “HTML Files: How to Create & Use”, as I’ve set this in the title tag of the HTML when I wrote this blog.
In other words, it defines the structure and content of your page. If you compare your website to a house, the HTML is bricks and mortar, the walls and ceilings, and your house’s roof. It won’t tell you anything about the colour of the wallpaper – that’s what CSS is for.
How to Open an HTML File
In your browser
By default, as computers are generally set up so non-developers can work with them, an HTML file is also set to open in the browser. However, as a developer, it’s less handy to use this option as it doesn’t actually allow you to look at or change the code easily.
In your IDE of choice
The way we as developers would open HTML files most often is in our IDE of choice. On Code Institute’s Full Stack Software Development programme, the recommended IDE at the time of writing this is Gitpod. So, if you want to upload an HTML file, for example, from downloaded starter code from the course or an outside tutorial, you can drag and drop this into the workspace where you want to see this. Then, open the preview as you would normally with the command python3 -m http.server to see the rendered file in the preview window or the browser.
How to Create an HTML File
- In your IDE of choice, create a new file. This must have the extension .HTML for the next steps to work. Ideally, for easy viewing, name the first HTML file in your project “index.HTML”, as your browser will know to render that one as the project’s main page.
- In most modern IDEs, emmet is automatically enabled. This gives you access to many shorthands. The most important one of these for starting up an HTML file is ! followed by TAB. This will generate a default starter code for your HTML file, including the mandatory <HTML>, <head> and <body> tags. For more information about emmet shorthand, have a look at this Cheat Sheet from the docs.
- Congratulations! You’ve made an HTML file.
- Of course, if you run this now, you’ll notice that it renders an empty page, so you’ll need to give it some content. To make sure it’s up and running, add in an h1 (type h1 followed by the tab key to generate <h1></h1> with emmet as above) with the text: “Hello world!”
- Run the file as described in the previous section. Are you seeing your new text? Congratulations! Continue building your website, and move to the next step when you’re ready to show it off!
How to Publish an HTML File
Awesome, you’ve created your first website! Now it’s time to show it off to the world, so let’s go through the steps for publishing your newly written HTML. You may already have heard about hosting and know that it’s often paid for, but we don’t want to have to pay for a practice website, do we?
Luckily for us, there’s Github! Github is a great place to store your code, but did you know it also has an option to host your projects so you can show them off? Here’s how:
- Open your repository. If you’ve been working on Gitpod, you’ll already have this from when you started your project.
- Check that the latest version of your code is on it. The easiest way to do this is to check that the last commit message on Github matches the last commit message in your workspace.
- Go to the Settings tab.
- In the left sidebar, select Page (make sure your repository is public, or this will not work).
- Select your branch. In most cases, this will be main, but you might want to show another branch if you have multiple.
- Click the Save button.
- A new message will appear, saying “Your site is ready to be published at” followed by the url Github generates for you. This url is built up as follows:
- https://yourGithubUsername.github.io/yourRepositoryName/
- Give your website a few minutes to build, then simply click on this url to go to your website.
Important notice about linked files in Github Pages
If you’re using files (such as images or PDFs) within your project, as most websites do, you must make sure the paths used are relative.
The reason why absolute paths don’t work on Github Pages is to do with the way GitHub Pages URLs are built:
https://yourGithubUsername.github.io/yourRepositoryName/
An absolute path (those that start with / ) will always go to the root of the URL, which in this case would be:
https://yourGithubUsername.github.io/
Your files don’t exist at that level. It’s attempting to go one level up, which is technically outside of your repository itself.
With relative links, the browser will start looking at the level it’s on, which in this case is https://yourGithubUsername.github.io/yourRepositoryName/, meaning it looks at the files in your repo for that particular project. So that’s why you need relative links on GitHub, so it knows where to look.
Why it’s working locally
Because that link doesn’t have the extra bit, an absolute link to the root of the project is the same as a relative link from a file in the root of the project.
Since you’re working in an environment (such as a Gitpod workspace), there is no level higher, so it looks at the root-level automatically, but this isn’t the case on the deployed environment on GitHub Pages, so it fails there.
How to fix
As your HTML files are, or should be, in the root of the project, try removing the slash ( / ) from your HTML files pointing to asset files such as CSS or images. Then push the changes, and have another look to see if that sorts your issues.
(It might take a few minutes for the GitHub Pages build to recognize your changes, so allow some time for the build to complete after those updated changes are pushed to your repository)
Joke Heyndels, Code Institute Graduate
Learn some HTML for free
If you want to learn some of the basics of HTML, then try our free 5 Day Coding Challenge. Other than HTML, you will also learn some basics of CSS and JavaScript. After one hour a day, over five days, you will have built your first web page. Register now through the form below.
Try our Free 5 Day Coding Challenge 
Take our full stack course 
