We use cookies to ensure that we give you the best experience on our website.

Create an HTML page using notepad and visual studio code

How to Create an HTML Page: A Step-by-Step Guide

Creating an HTML (Hypertext Markup Language) page is the first step in web development. HTML is the standard markup language used to structure content on the web. Whether you’re a beginner or looking for a refresher, this step-by-step guide will help you create your first HTML page.

Setting Up Your Development Environment:

To create an HTML page, you’ll need a basic text editor like Notepad (Windows), TextEdit (macOS), or Visual Studio Code (cross-platform). Make sure you have one of these editors installed on your computer.

1. Create an HTML Page using Notepad

  1. Creating the Basic HTML Structure:

    Open your Notepad and Write the HTML Code written in the following image.

    Basic HTML code written in Notepad

    Read this – Explanation of basic html code structure to understand the html code written in the above image.

  2. Save the HTML Document:

    Now save this HTML Document on your Desktop or anywhere.

    save html code written in notepad
  3. Choose the Appropriate File Extension:

    Here I have named the HTML Document index.html. It is not mandatory to give the same name, you can choose any name. But the file extension must be .html. Like – example.html, mywebsite.html, test.html.

    notepad save as index.html
  4. Run the HTML Page on a Web Browser:

    After saving the HTML File, just double-click on it to open this HTML Page on the browser, or open your browser and drag the file to it.

    run the index html file on browser

2. Create an HTML page using Visual Studio Code

  1. Create a New Folder on Your Desktop:

    First, create a new folder on your desktop or anywhere and name it as you wish.

  2. Open the Folder in Your VS code:

    Open your Visual Studio Code editor » Click on the File » Click on the Open Folder.

    Open a folder on Visual Studio Code
  3. Create a New HTML File:

    On the left of your VS Code, you can see the Folder Explorer. Click on the create new file Icon (see the following image) to create a new HTML file (index.html).

    VS code create a new file
  4. Write and Save the HTML Code:

    Write the HTML Code written in the following image and save it.

    Write and save HTML Code on VS Code
  5. Run the HTML file:

    To run an file, you can simply open the HTML file (index.html) on your web browser. But, there is a wonderful VS Code extension that you can use to run HTML files. The Extension name is Live Server.

    Go to the VS Code extension section and install the Live Server Extension.

    Install VS Code Live Server Extension
  6. Run the index.html file using the live server:

    After installing the live server extension, make sure that the index.html file tab is selected, then click on the “Go Live” button.

    Click VS Code Go Live button to launch live server

Creating an HTML page is the first step in web development. As you become more proficient, you can explore advanced HTML features and learn about CSS (Cascading Style Sheets) and JavaScript to enhance your web pages further. With practice and continuous learning, you’ll be on your way to becoming a skilled web developer.

Related Posts