HTML Quick Setup Guide

HTML is a markup language that creates a web page. Web browsers follow html tags to display any content in front of a user.

However, before going to learn html tags you must setup an environment for writing code. Don’t worry this is not hard or complicated process.

In this tutorial, you will learn HTML quick setup. Here we will create html file and know about text editors that will convert you code to a visual form.

HTML Quick Setup Guide

In our first step, we will create a folder to give a separate section for any project. This is not compulsory. It is optional. However, it is a good habit.

Therefore, you create separate folder for different projects. This will help you in future.

HTML file: we all know a web page is a collection of html elements where we use different tags and our useful content like text, image, video etc.

Therefore, we must write all those code inside a file. There are different types of files with different extensions for example .txt, .pdf, .png etc.

To write html code you need to create an html file. This file must have an .htm or .html extension. This extension will tell any web browser that it is an html file.

If you don’t use this extension then browser will not understand the code. You can use any of those two extension. However, in most case, people use .html extension. I will suggest this one.

Create an .html File

As I told you, you can create a folder anywhere you want. Now, inside this folder, right click and create a text document with .txt extension.

Rename this .txt file to index.html with the extension name. This will show you a popup. Don’t worry click on “yes” button. This will convert the .txt file to .html file.

Show html file in browser

This is it. That is how you can create an .html file for writing code. Now I will tell you why you should name your file as index.

When you type any URL in your web browser then how a browser knows which file is necessary to show.

Browser always gives priority to index file. When we search any URL, first this index file shows up. Therefore, every website must have an index.html file.

Write HTML Using Text Editor

A text editor is a computer program that allows user to create and edit programming language files. Like HTML, CSS, JavaScript, Python, PHP, Ruby, and so forth.

After creating you html file, you need to open this file to write some code. For that, you will need a text editor. There are many text editors to use.

However, as a beginner, I will suggest you to use notepad++. You can also use VS code, Atom, and Sublime text. You should not use auto completion feature while using those editors.

Download notepad++ editor – Click to download

Download this editor and install it on your computer. Now you are ready to go.

Right click on your index.html file and select “Edit with Notepad++” to open the file on editor. Now you can start writing your code.

Html text editor-html quick setup guide
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>

   <h1>This is a Heading</h1>
   <p>This is a paragraph.</p>

</body>
</html>

Now copy and paste this code in your index.html file and then press Ctrl+S. It will save your file.

If you don’t know about this code then you should read our first HTML tutorial – HTML Introduction

To open your html file on any browser just right click on your file and go to “Open with” option then select your favorite browser.

File will open on that browser and you can see the result.

Show html file in browser

WorldTechis Text Editor

You can also use our online editor to write and edit HTML code and view result on browser. You can use it from anywhere with any device.

This will increase your learning speed. Write or edit code and press “Run Code” button. You will see result in the output section.

OUTPUT

Congratulations, you have successfully completed the html quick setup. Now you are ready to go. We will learn HTML basic tags in our next tutorial.