In the previous document, we have briefly shown you how to create an HTML document, but that was just an introduction. Now we want to get serious since we have set up our development environment.
If you have not yet set up your development environment, please do so because we are now going to make use of the environment.
HTML File Extension
An HTML file ends with the extension: .html
or .htm
both of these files can be read by the web browser. Usually, the first page on the web server is named index.html
or index.htm
Choosing an HTML file name
An HTML file name can be anything you like. The first HTML file on the server is usually named index.html
. The rest of the web pages can be named anything else.
It is important to name your HTML files appropriately depending on what your page is doing or showing. For example, if your page is about users of your website. You can name it users.html
.
Creating the HTML File.
The file can be created normally just like how you would create any other file in VS code, that is file>new command
, however, many developers prefer to use terminal commands to create various types of file, and that is what we will be teaching you here. You wanna get used to doing this as it is the fastest way of creating almost any file.
Using Terminal create an HTML file
Some advanced developers use terminals to interact with their computers. They issue commands to the computer. You can also learn to do this. The commands are very simple usually they can be as simple as touch index.html.
The terminal program is always present in your computer and is located in your utility folder, however, for this exercise, we are going to use the terminal that is built into VS code - the integrated terminal.
How to open up the VS Code integrated terminal.
On you click on the New Terminal command, you should see the terminal opened up.
Keyboard shortcut ctrl + `
In the terminal window now enter the following command.
You should see the file index.html
created in your editor. This process in the beginning would appear tedious but trust me, it is the fastest way to interact with your computer. If you want to learn more about this, please check out this section of the website to learn more about shell scripting.
For now, if you find that difficult, it is perfectly fine, move on with the rest of the lesson and you will learn this some other time.
Next, add the following code snippet to your html file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting serious writing web pages</title>
</head>
<body>
<h1>Now I am getting serious to learn HTML</h1>
<p>This is my first paragraph in HTML document</p>
<h2>Learn to run your this html document in a browser</h2>
<p>
Let's move to next section where we will show you a better way of running
the html file locally on your computer to make developing website
enjoyable.
</p>
</body>
</html>
Running the HTML file.
You can actually open or drag and drop this file on your favorite web browser and you should see the result right away, however, as programmers, we need a better way of reading html files, and luckily for us there couple of ways how we can do this.
Let's move on to the next section where we will show you a better way of running the html file locally on your computer to make developing a website enjoyable.