Make a Web Page in HTML From Scratch

Are you want to make a web page in HTML from scratch? if yes, you are reading the best tutorial. Here you will learn it by configuring some simple steps. once you read all the given steps. you will definitely make different types of web pages within a few minutes.

As you know that HTML is the short form of Hypertext Markup language. It is not a programming language but it is a markup language. using it you can create a static web page for your website.

An HTML web page is created with various components like header, footer, navigation bar, right-sidebar, left sidebar & more. It is used to display the content like text, images, audio, & video in the web browser.

A website is a combination of multiple web pages. If you want to create a static website then you will have to learn to create a web page.

If are a beginner in HTML and you also don’t know any other languages then you will need not go anywhere. Here, I will explain everything.

Basic Requirement to Make Web Page in HTML

To start HTML coding, You will need the following things

Local Computer
Text Editor
Web Browser

Local Computer

You must have a local computer like a laptop, desktop to start HTML code. Anyone operating system like Windows, Linux & mac must be installed.

Text Editor

You have to install a text editor on your computer to write HTML code.

There are various text editors like notepad++, subline, bracket, the visual studio that are available on the internet. These editors are absolutely free. you can install one of them without paying any charges.

If you are a beginner in HTML, you must start HTML coding with Notepad.

Web Browser

You have to run HTML code on the web browser.

There are various web browsers like google chrome, Mozilla, Oeramini, safari, Internet Explorer & Microsoft Edge that are available on the internet. These web browsers are absolutely free. you can install one of them without paying any charges.

But you should use the Google Chrome browser. It is the most popular & easy to use a browser

Responsive Web Page in HTML

You should always create a responsive web page in HTML. A responsive web page can adjust the content in proper format on all devices screen.

We can’t create a responsive web page only using HTML, we have to use CSS as well. So, I have created it using both languages.

Read Also –

HTML Interview Questions and Answers

Embed PDF File in HTML

Web Page Language

We use the following two popular languages to create a web page
- HTML – Hypertext Markup Language
- CSS – Cascading Style Sheet
We use HTML to create the structure of the web page.
We use CSS to create the design of the web page.

Web Page Structure

A web page structure has a combination of various components like the logo, header, navigation bar, footer, sidebar & main content. you will learn to make web pages with these components.

See the following web page structure

----------------------------------------------------------------------------------
|                  |                                                             |
|   Logo           |                      Header                                 |
|                  |                                                             |
----------------------------------------------------------------------------------
|                              Navigation Bar                                    |
----------------------------------------------------------------------------------
|                                                      |                         |
|                                                      |                         |
|                                                      |                         |
|                                                      |                         |
|                                                      |                         |
|                                                      |                         |
|                  Main Content                        |    Sidebar              |
|                                                      |                         |
|                                                      |                         | 
|                                                      |                         |
|                                                      |                         |
|                                                      |                         |
|                                                      |                         |
----------------------------------------------------------------------------------
|                           |                          |                         |
|   Footer-1                |      footer-2            |        footer-3         |
|                           |                          |                         |
|                           |                          |                         |
----------------------------------------------------------------------------------

Folder Structure for Web Page

To create a web page, you must create a separate folder structure

myproject
  |__images/
  |    |__page-logo.jpg
  |    |__banner.jpg
  |__web-page.html
  |__style.css

web-page.html - You should create this file to write HTML code.

style.html - You should create this file to write CSS code.

How to Make a Web Page in HTML

Before starting to make a web page in HTML, you should configure the following points

Write the following CSS code in style.css. This code is created for the whole web page

/* for whole page */
* {
  box-sizing: border-box;}

body {
  font-family:sans-serif;
  margin: 0px;
  padding: 0px}
p, ul li{
  line-height: 30px;
  font-size: 18px;
    font-family: Verdana,sans-serif;
    text-align: justify!important;
}
html, body{
  overflow-x: hidden;
  overflow-x: hidden;
    word-break: break-word;
}

Also, write the more CSS code in style.css to make a responsive web page

@media screen and (max-width: 600px) {
  .row {   
    flex-direction: column;
  }
  .header .logo img{
    width: 100%;
  }
  .main h1{
    font-size: 30px;
  }
  .main h2 {
    font-size: 25px;
}
p, ul li {
   font-size: 16px;
    }

}

Now, follow the next steps to create a user & mobile-friendly web page

1. Create a Basic Page Structure

First of all, you must write a basic HTML code to create a basic page structure.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="web page is created by html. a web page also used to create a website. a web page may contain content like images, text, video, audio">
    <meta name="keywords" content="html page, web page, html web page, web page in html, how to make html web page, make web page in html">
<link rel='shortcut icon' href="images/icon.jpg" />
</head>
<body>

<!-- ========header start===========-->
<!-- ========header end============= -->

<!--======== navigation bar start=============-->
<!--======== navigation bar end ==============-->

<!--===========main content start==========---->
<!--===========main content end =============-->

 <!--===========sidebar start ================-->
<!--============sidebar end===================-->


<!--===============footer section================-->
<!--==============foooter section end============-->

</body>
</html>

Let’s understand the above code –

<!DOCTYPE html> tells the browser, the web page is created in HTML5 version.
<Head> contains the invisible information of the web page.
<meta> is declared with charset=”UTF-8″ to tell the browser that the web page is used UTF-8 character set.
<meta> is declared with name=”viewport” to display a web page & its content in a proper format on the all different devices & screen sizes.
<body> contains the visible information of the web page

HTML web page has the main two sections

Head Section
Body Section

Head Section

Head section always contains the invisible information of the web pages
It is represented by <head></head> head element.
The head element is always used within <html></html> HTML element & just above the <body></body>
A single web page contains only one <head></head> head element.

Head section may contain various HTML tag & script. But here we will discuss the following some tags that are more necessary for creating a web page.

Page Title
Meta Charset
Shortcut Icon
Meta Keyword
Meta Description
Page Stylesheet

Page Title

The Page Title contains the main title to give information about the web page
This title always displays in the browser tab.
The page title is represented <title></title> title element
The title element is always used within <head></head> head element

Meta Charset

Meta charset notifies the browser that the web page has the UTF-8 character set.
It is represented by <meta charset="UTF-8">

Meta Keyword

A meta keyword contains the keyword of the web pages.
It is the part of SEO
Using the Meta keyword, the visitors can easily search the web page.
Meta keyword is represented by <meta name=”keyword” content=”page keyword here”>

Meta Description

A meta description contains the some intro of the web page
It is the part of SEO
Using the Meta description, the visitors can easily search the web page.
A meta description is represented by <meta name=”description” content=”page description here”>

Body Section

The body section contains visible information/content of the web page.
It is represented by <body></body> body Element.
The body element always used within <html></html> body element and just below the <head></head> head element.
You should declare only one body element on the single web page.

Page Stylesheet

The page stylesheet contains internal CSS code to design the web page.
It is represented by <link rel="stylesheet" href="file-path.css">

Shortcut Icon –

Shortcut Icon shows the icon of the web page in the browser tab.
It is represented by <link rel='shortcut icon' href="icon.jpg" />

2. Create Header

You have to create a header that contains a page logo.

Use the following HTML code to create a header

<!-- ============header start============-->
<div class="header">
  <div class="logo">
  	<img src="images/logo.jpg">
  </div>
</div>
<!--=============header end============= -->

Use the following CSS code to design header

/* for header */
.header{
      padding: 5px 53px;
}
.header .logo img{
  width: 25%;
}

3. Create Navbar

You have to create a navbar that may contain some menu list. The menu list is a page link.

A Navbar is the short form of the Navigation bar.

Use the following HTML code to create a Navbar

<!-- =============navigation bar start==============-->
<div class="navbar">
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu-1</a></li>
  <li><a href="#">Menu-2</a></li>
  <li><a href="#">Menu-3</a></li>
  <li><a href="#">Menu-4</a></li>
  <li><a href="#">Menu-5</a></li>  
</ul>
</div>
<!-- ===========navigation bar end ==============->

Use the following CSS code to design a Navigation bar

/* for navigation bar */
.navbar {
  overflow: hidden;
  background-color: #0d75b4;
 position: sticky;
 top: 0px;}

.navbar ul{
  margin: 0px;
    list-style-type: none;
}
.navbar ul li {
      display: inline-grid;
    padding: 12px 20px;
 }


.navbar ul li a {
  color: white;
  text-align: center;
  text-decoration: none;}

.navbar ul li:hover {
  background-color: #464444;
  }

4. Create Sidebar

You should create a sidebar to display some important content for all the pages of the website. Here I have created the right sidebar. Once you learn it. you will be able to create another left sidebar as well.

This sidebar contains three content like about us, latest post & popular post

Use the following HTML code to create a sidebar

<!-- about section start -->
   	<div class="about">
    <h3>About Us</h3>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts</p>
</div>
<!-- about section end-->

<!-- Latest post start-->
    <div class="latest-post">
    <h3>Latest Post</h3>
    <ul>
    	<li>It is dummy text used in laying out print</li>
  <li>The passage is attributed to an unknown</li>
  <li>Malorum for use in a type specimen book</li>
  <li>Finibus Bonorum et Malorum for use</li>
    <li>It is dummy text used in laying out print</li>
  <li>The passage is attributed to an unknown</li>
  <li>Malorum for use in a type specimen book</li>
  <li>Finibus Bonorum et Malorum for use</li>
</ul>
</div>
<!-- latest post end-->

<!-- popular post start-->
<div class="popular-post">
<h3>Popular Post</h3>
    <ul>
    	<li>It is dummy text used in laying out print</li>
  <li>The passage is attributed to an unknown</li>
  <li>Malorum for use in a type specimen book</li>
  <li>Finibus Bonorum et Malorum for use</li>
    <li>It is dummy text used in laying out print</li>
  <li>The passage is attributed to an unknown</li>
  <li>Malorum for use in a type specimen book</li>
  <li>Finibus Bonorum et Malorum for use</li>
</ul>
    </div>
 <!--popular post end-->

  </div>

<!--===============sidebar end================-->

Use the following CSS code to design a sidebar

.sidebar {
  -ms-flex: 30%; 
  flex: 30%;
  
  padding: 20px;}

 .about, .latest-post, .popular-post{
  border: 1px solid lightgray;
    padding: 10px 20px;
    margin-top: 30px;
 }

5. Create Main Content

You can create the main content to display content like images, videos, audio, & text. You can display the content according to your project requirement.

Here I have created the main content like primary content, secondary content, page table, page list, page form

Use the following HTML code to create the main content

<!--==========main content start=======-->
<div class="row">
<div class="main">
<!--  main content start-->
<div class="main-content">
<h1>HTML Web Page</h1>
<img src="images/banner.jpg" width="100%">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<!-- main content end-->
<!--- secondary content start-->
<div class="secondary-content">
<h2>Second Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</div>
<!--secondary content end-->
<!-- page list start-->
<h3>Web Page List</h3>
<ul>
<li>It is dummy text used in laying out print</li>
<li>The passage is attributed to an unknown</li>
<li>Malorum for use in a type specimen book</li>
<li>Finibus Bonorum et Malorum for use</li>
<li>This is dummy text list</li>
</ul>
<!--page list end-->
<!-- page table start-->
<div class="page-table">
<h2>Web Page Table</h2>
<table border="1" cellspacing="0" cellpadding="5" width="100%">
<thead>
<tr>
<th>Table Heading - 1</th>
<th>Table Heading - 2</th>
<th>Table Heading - 3</th>
<th>Table Heading - 5</th>
<th>Table Heading - 5</th>
</tr>
<tr>
<td>Row-1 Column-1 </td>
<td>Row-1 Column-2 </td>
<td>Row-1 Column-3</td>
<td>Row-1 Column-4 </td>
<td>Row-1 Column-5 </td>
</tr>
<tr>
<td>Row-2 Column-1 </td>
<td>Row-2 Column-2 </td>
<td>Row-2 Column-3</td>
<td>Row-2 Column-4 </td>
<td>Row-2 Column-5 </td>
</tr>
<tr>
<td>Row-3 Column-1 </td>
<td>Row-3 Column-2 </td>
<td>Row-3 Column-3</td>
<td>Row-3 Column-4 </td>
<td>Row-3 Column-5 </td>
</tr>
<tr>
<td>Row-4 Column-1 </td>
<td>Row-4 Column-2 </td>
<td>Row-4 Column-3</td>
<td>Row-4 Column-4 </td>
<td>Row-4 Column-5 </td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- page table end-->
<!--- page form start-->
<div class="page-form">
<h2>Contact Form</h2>
<form>
<div class="row">
<div class="form-col">
<label>Full Name</label>
<input type="text" name="fullName" placeholder="Enter Full Name">
</div>
<div class="form-col">
<label>Mobile Number</label>
<input type="email" name="email" placeholder="Enter Email">
</div>
</div>
<div class="row">
<div class="form-col">
<label>Email</label>
<input type="email" name="email" placeholder="Enter Email">
</div>
<div class="form-col">
<label>Subject</label>
<input type="text" name="subject" placeholder="Enter Subject">
</div>
</div>
<label>Message</label>
<textarea name="message" placeholder="Write Something.." rows="10">
</textarea>
<button type="submit" >Send</button>
</form>
</div>
<!---page form end-->
</div>
<!--===============main content end=============-->

Use the following CSS code to design the main content

/* for main content */
.row {  
display: -ms-flexbox; 
display: flex;
-ms-flex-wrap: wrap; 
flex-wrap: wrap;}
.main {   
-ms-flex: 70%; 
flex: 70%;
background-color: white;
padding: 20px;}
.main h1{
text-align: center;
font-size: 50px;
color: #2d2d2d;
border-bottom: 5px dashed #0d75b4;
padding-bottom: 8px;
}
.main h2{
font-size: 35px;
color: #0d75b4;
}
.main .page-table{
overflow-x: auto;
}
.page-form{
padding: 5px 10px;
}
.page-form input, .page-form textarea{
width: 100%;
border: none;
margin-top: 10px;
}
.page-form{
background: #f1f1f1;
padding: 10px 30px;
margin: 30px 0px;
}
.page-form input{
width: 100%;
height: 35px;
font-size: 16px;
padding: 0px 5px;
}
.page-form button{
border: none;
background: #0d75b4;
padding: 7px 20px;
color: white;
font-size: 20px;
margin: 20px 0px;
}
.form-col{
-ms-flex: 48%; 
flex: 48%;
padding: 10px;
}

6. Create Footer

You should create a footer. A footer may contain some page links, website intro & contact form. I have created three sections of the footer.

Use the following HTML code to create a footer

<!--===============footer section============-->
<div class="footer row">
<div class="footer-col">
<h3>first footer section</h3>
<ul>
<li>First footer Text</li>
<li>Second footer Text</li>
<li>Third footer Text</li>
<li>Fourth footer Text</li>
<li>Fifth footer Text</li>
</ul>
</div>
<div class="footer-col">
<h3>Second footer section</h3>
<ul>
<li>First footer Text</li>
<li>Second footer Text</li>
<li>Third footer Text</li>
<li>Fourth footer Text</li>
<li>Fifth footer Text</li>
</ul>
</div>
<div class="footer-col">
<h3>Third footer section</h3>
<ul>
<li>First footer Text</li>
<li>Second footer Text</li>
<li>Third footer Text</li>
<li>Fourth footer Text</li>
<li>Fifth footer Text</li>
</ul>
</div>
</div>
<!--===================foooter section end==============-->

Use the following CSS code to design footer

/* for footer */
.footer-col{
-ms-flex: 30%; 
flex: 30%;
padding: 20px;
}
.footer{
background: #3f4b52;
width: 100%;
}
.footer h3{
color: white;
padding-left: 40px;
border-bottom: 2px dotted #537284;
padding-bottom: 10px;
text-transform: capitalize;
}
.footer ul{
list-style-type: none;
}
.footer ul li{
color: lightgray
}