How to create a web page in HTML

programming
How to create a web page in HTML

To create a web page in HTML first you should know what is a web page?

A web page is generally a hypertext document that makes up the World Wide Web and can contain data such as text, sound, video, graphics, etc.

Softwares required for creating a web page

  1. A plain text editor e.g Notepad, Notepad++, VsCode(IDE) etc.
  2. A web browser e.g Google Chrome, Firefox, Opera, Internet Explorer or Safari

Don't use a word processor(e.g Microsoft Word) as your text editor for creating a web page, we need an only plain text editor(mentioned in point number one).

Once we have above both software, we are good to go.

Step 1: Open up your plain text editor

I am using Notepad just for simplicity, you can use Notepad++, VsCode or any plain text editor of your choice.

Notepad text editor

Step 2: Writing code for the web page

For creating a web page HTML is used, HTML stands for HyperText Markup Language.

Wikipedia defines HTML as

Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.

Now writing HTML code for our simple and basic web page.

<html>
    <head>
        <title>Title of the web page</title>
    </head>
    <body>
        <h1>This is a heading in the web page :)</h1>
    </body>
</html>

Copy the above HTML code and paste it in your plain text editor.

HTML code for the web page

Explanation of the above HTML code

Content of any web page goes between <html> and </html> HTML tags. Every web page has two sections:

  1. Head(content between <head> and </head> tags)
  2. Body(content between <body> and </body> tags)

In the head section we specify information about our web page like title, description, charset, links of CSS and JavaScript files etc. here we have just specified the title for our web page which will appear on the web browser tab.

Body section generally consists of web page Header, Main body, Footer, Sidebar, etc. in our case it consists of h1 tag containing some text.

Step 3: Saving the HTML code

Basic HTML code for our web page is ready, now to create our web page we need to save this HTML code on our computer and for that follow below steps:

  1. In your text editor click on the File option(at top-left corner) then from dropdown click on Save, you will see a window like this(on Windows)

    Saving HTML file on computer

  2. From the left panel of the opened window navigate to the folder where you want to save the HTML code(I will be saving it in the Documents folder).
  3. Now type the name which you want to give to your file in the File name input box. Here we can name our file to my_web_page.html, my-web-page.html, web_page.html, etc. You should name your file based on its content e.g if the web page contains the about data then name it about.html, if it shows user profile then name it profile.html and so on. Use a combination of alphabets, numbers, underscore and hyphen for your file name, you can use other characters also but some characters like *, ?, " are not allowed in the file name in computers using Windows operating system and similarly, / is not allowed in the file name in Linux based systems. You can use .html and .htm as file extension for your HTML files both of them are valid but you should use .html extension, .htm was in use very long time ago because at that time using four-letter extension(e.g .html) was not supported in many operating systems but now this is not a problem anymore so we can use four-letter extension.
  4. After you have typed the file name(e.g my_web_page.html) then click on the Save button now you can close your text editor if you want.

Step 4: Opening the web page

Navigate to the folder where you saved the HTML file, right-click on the file(web page) and open it using any web browser.

Opening a web page in web browser

This is how your web page will look like in the web browser(Google Chrome).

Web page opened in web browser

The text written between <title> and </title> tags is displayed on the browser tab(refer to above image).

In this article we created a very basic and simple web page but you can add many elements to your web page like audio, video, images, many paragraphs, etc. and make it pretty by using CSS, you can make it interactive using JavaScript, there is a lot more which you can do on a web page, the web page we created here is just the beginning of your amazing journey to the web development world.

Share this article with others.