Tutorials, articles and quizzes on Software Development

How to create a basic Webpage

If you want to become a web developer you need to learn how to create a webpage. It might seem intimidating but it’s not hard, it’s as simple as creating a file and opening it up in your browser. Anyone can do it, and you don’t need an expensive laptop or a tech enthusiast’s operating system to get started!

Creating a folder for our document

The first thing we want to do is pick a directory that we want to place our .html file. Most operating systems have a document folder, so I’m going to go into my documents folder and create a new folder named webpage, but you could name it whatever you want.

Creating our webpage files using a code editor

Now we have our folder, but now we need to create our HTML file.

Open up your code editor of choice. I will be using Visual Studio Code

Use your editor to open your newly created webpage folder.

From there you’re going to want to add a new file. In VS Code, I’ll to to the menu and click on File > New File

In VS Code, you’ll see it show a tab named “Untitled-1” and to select a language to get started. For the purpose of making this tutorial easier to those who are not using VS Code, we will ignore this and have the correct language be chosen when we save our file with the “.html” extension.

Lets now go to our menu and go to File > Save As…

You’ll want to save this file as index.html

And click on save.

VS Code now recognizes that our index.html file is an html file, and will have the appropriate syntax highlighting.

Adding markup into our html file

In our HTML, lets start by adding this boilerplate

<!DOCTYPE html>
<html>
<head>
<title>Your first webpage</title>
</head>

<body>

</body>

</html>

This is the basic template of a blank webpage.

<!DOCTYPE html> lets the browser know that this file is an HTML file
The html tag is the start of our html document, also known as the root. We don’t want to add other tags outside this html tag.
The head tag is where we put metadata about our application like the title and description as well as styling and script tags. For the purposes of creating an HTML page, we don’t need style or script tags yet
The body tag is where we can add tags that will display content in the browser. We will be adding another tag with text inside the body tag.
At the very bottom of the boilerplate is a </html> tag, which is called a close tag

You might notice that there is an close tag, for each of our tags, some including </html> </body> and </head>.

In between the start tag < > and the close tag < / > we want to add either other tags or text depending on the tag. For example the title tag has text inside it, but the head and html tags have other tags inside them.

Show some text in the browser with the h1 tag

The “h1” tag defines the most important heading on the page. There are “h” tags from “h1 – h6” but we just need h1 to display our text.

Let’s add an h1 tag inside our body tag and give it the text “This is my first webpage”.

<!DOCTYPE html>
<html>
<head>
<title>Your first webpage</title>
</head>

<body>
  <h1> This is my first webpage </h1>
</body>

</html>

Now save your html file. You can do this by going into the menu and clicking File >> Save or using either CMD + S or Ctrl + S depending on your operating system.

Now go back into your webpage folder. You should now see a file named index.html. Right click on it and open it with your favorite web browser (here I will be opening our index.html file in Chrome)

And when you open it, you should see text displayed on the page like this

And thats how we create a webpage. It’s not live for everyone on the internet to see, but it’s available for you to view locally, even without an internet connection!

We can also run HTML on a code editor on the web. Click here to check out our HTML CSS and Javascript editor. We can use an online editor to run HTML, CSS and Javascript in a container called iframe, which is basically adding a webpage inside a webpage.