WAIT! Are you looking for a quick yet powerful means to create a website using HTML? Indeed you have come to the right place. Because I have the best possible solution for you.

If you think creating a website using HTML is difficult and it requires a skilled mind, then you ought to read this post once. I assure you after reading this post all your ambiguities about the website creation will go away once and for all. With right tools and right guidelines, you can have your website up and running with ease.

HTML and CSS are two basic scripting languages that any developer should learn. And I assume that you have moderate knowledge of these two. I will show you the two reliable methods to create a website using HTML. And you are free to choose whichever entices you more.

But before I take you on the ride to create a website using HTML, you ought to know that how a basic structure of a web page looks like. Here we go…

basic html sturcture

There are 4 sections of a common website.

  • Navigation Menu
  • Slideshow / Header
  • Main Content / Sidebar
  • Footer

I believe all the sections are probably self-evident. But as a reminder, a Navigation Menu is a section where you will have the Menu of your web page.

Slideshow or Header section will contain the slideshows or header of the page.

The Main Content area is where all the content of your web page will be shown including the sidebar.

And Footer is the bottom of your web page which can be used to show the information like Social Icons, About us etc.

Let’s now start with the Manual method first.

1. Manual Method to Create a Website Using HTML

Step 1. Create the Doctype

Let’s start with the HTML doctype. Doctype is the very first thing in an HTML document. Doctype is not an HTML tag, it is used to tell the web browser which version of the HTML the page is written in.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Marin Constructions</title>
</head>
<body>
</body>
</html>

This is the basic html of your web page. It is highly recommended that you create a new folder in your documents which contains the files for your site. Here, I have created the main folder which contains all my page files like index.html etc.

Similarly, we need to create other required pages such as:

about-us.html :- This file contains the information about you, either as a company or as an individual.

services.html :- This file contains the information about the service you offer to your customers.

projects.html :- This file includes the details about the projects you have completed till date and which you want to show to your customers.

contact.html :- This file has the details about your contact information which will be shown on your web page.

Create a folder and name it ‘images’ in your HTML root directory folder. And upload all your website images in this folder, now from here we will fetch the images to our HTML page.

Step 2. Create Menu for the index.html Page

<div id="main">
<!--navigation menu -->
<nav id="menu" class="navbar-default navbar">
<div id="menu_inner_in">
<div id="navigationmenu">
<div class="menu_logo">
<a href="#" target="_self">
<img src="images/menulogo.png" alt="menuimage" />
</a>
</div>
<div class="menu-center collapse navbar-collapse">
<ul class="menu_items nav navbar-nav navbar-right">
<li class="menu_items_parent dropdown active">
<a href="home.html" class="menu_items_parent_link_active">
<span class="menuchildicon"></span>Home</a>
</li> <!-- main menu list closing -->
<li class="menu_items_parent dropdown">
<a href="about-us.html" class="menu_items_parent_link">
<span class="menuchildicon"></span>About Us</a></li> <!-- main menu list closing -->
<li class="menu_items_parent dropdown">
<a href="services.html" class="menu_items_parent_link">
<span class="menuchildicon"></span>Services</a></li> <!-- main menu list closing -->
<li class="menu_items_parent dropdown">
<a href="projects.html" class="menu_items_parent_link">
<span class="menuchildicon"></span>Projects</a></li> <!-- main menu list closing -->
<li class="menu_items_parent dropdown">
<a href="contact.html" class="menu_items_parent_link">
<span class="menuchildicon"></span>Contact</a></li> <!-- main menu list closing -->
</ul>
</div>
</div>
</div>
</nav>

Step 3. Create Header of the Web Page

<header id="header">
<div id="header_inner">
<div class="header-position">
<p>Welcome to</p>
<h2>Marin Construction Company</h2>
<p>A LEADING COMPANY THAT CONSTRUCTS FOR THE FUTURE</p>
</div>
</div>
</header>

 

Step 4. Create Content for the Web Page

<div class="page-content container">
<div class="content-section">
    <div class="ttr_index_html_row1 row">
<div class="section-heading">
<h1>RECENT CONSTRUCTING PROJECTS</h1></div>
<div class="column-row">
<div class="section-column">
<div class="html_content">
<div class="img-content">
<img style="max-height:533px;max-width:800px;" src="images/0.jpg"></div>
<div class="column-content"><h4>RENOVATING IDEAS</h4>
<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.</p></div>
</div>
</div>
<div class="section-column">
<div class="html_content">
<div class="img-content">
<img style="max-height:533px;max-width:800px;" src="images/1.jpg"></div>
<div class="column-content">
<h4>CONSTRUCTING BUILDING</h4>
<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.</p></div>
</div>
</div>

<div class="section-column">
<div class="html_content">
<div class="img-content">
<img style="max-height:533px;max-width:800px;" src="images/2.jpg"></div>
<div class="column-content">
<h4>TEAMWORK</h4>
<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.</p></div>
</div>
</div>
</div>
</div></div></div>

Bear in mind !!
If you ever feel that you want to skip this manual part and want some other quick alternative. Simply click here.

Step 5. Create Footer for the Web Page

<footer id="footer">
<div class="footer_html_row0 row">
<div class="container">
<div class="footer-column">
<div class="footer-img">
<img style="max-height:50px;max-width:175px;" src="images/18.png"></div>
<div class="footer-content">
<p>Lorem Ipsum is simply dummy text of the Ipsum 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.</p> </div>
</div>
<div class="footer-column">
<div class="footer-content">
<h4>GET IN TOUCH</h4><p>789, Square Park, Dummy Text, New York City</p>
<p>Call us : +12 - 365 - 7890 - 456</p><p>Email us : info@forexample.com</p></div>
</div>
<div class="footer-column">
<div class="footer-content"><h4>BUSINESS HOURS</h4><p>Monday to Friday : 9 am to 7 pm</p> 
<p>Saturday : 9 am to 2 pm</p><p>Sunday : Closed</p>
<p>Customer Support Hours 24 / 7 Everyday</p></div>
</div>
</div>
</div>
</footer>
</div><!--- page wrapper id close here --->
</body>
</html>

Note to Remember

All four sections i.e. Navigation, Header, Content, and Footer need to be placed under the body tag.

Now after the HTML file, we will create a stylesheet and name it ‘style.css’ and save it to a new folder named ‘css’. And this file style.css will help us to style our web page.

Remember right before closing the head tag </head> add a line that reads…

<link href="css/style.css" rel="stylesheet" type="text/css">

This line of code informs the browser that it needs to look for the stylesheet while it loads the web page.

Step 6. Apply CSS Code to Style Your Web Page

html
 {
 margin: 0;
 padding: 0;
 }
 body
 {
 margin:0;
 padding:0;
 font-family: 'Source Sans Pro', sans-serif;
 }
 #menu
 {
 padding: 30px 0;
 }
 #menu ul
 {
 padding: 0;
 margin: 0;
 }
 #menu_inner_in
 {
 max-width: 1200px;
 margin: auto;
 position: relative;
 }
 .menu_logo
 {
 position: absolute;
 left: 0;
 top: 0;
 }
 .menu-center.collapse.navbar-collapse
 {
 text-align: right;
 padding: 10px 0;
 }
 #menu ul li
 {
 list-style: none;
 display: inline-block;
 }
 #menu ul li a
 {
 padding: 5px;
 margin: 5px;
 color: #333;
 text-decoration: none;
 text-transform: uppercase;
 font-size: 15px;
 }

#header
 {
 min-height: 600px;
 background: url("../images/header-img.jpg");
 background-size:cover;
 background-position: center;
 position: relative;
 }
 .header-position
 {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 height: 200px;
 color: #fff;
 text-align: center;
 }
 .header-position h2
 {
 font-size: 52px;
 text-transform: uppercase;
 margin: 0;
 }
 .container
 {
 max-width: 1200px;
 margin: auto;
 }
 .ttr_index_html_row1.row
 {
 padding: 80px 0;
 text-align: center;
 }
 .section-heading
 {
 padding-bottom: 40px;
 }
 .section-column
 {
 display: inline-block;
 width: calc(100% / 3 - 33px);
 padding: 15px;
 }
 .section-column img
 {
 width: 100%;
 }

#footer
 {
 background: #111;
 }
 .footer_html_row0.row
 {
 padding: 80px 0;
 }
 .footer-column
 {
 width: calc(100% / 3 - 25px);
 display: inline-block;
 padding: 10px;
 color: #FFF;
 vertical-align: top;
 }

Step 7. Folder & File Structure

Save your files and folders this is how our files and folder structure will look like…

html root files and folders

2. Create a Website Using HTML with TemplateToaster (An Automated Method)

This method is quite simple to Create a Website Using HTML because it doesn’t require you to code. You will get an intuitive drag and drop interface to handle every aspect of your web page.  TemplateToaster is really easy to use, just download it and install it with easy steps. The trial version is totally free to use.

Step 1. CMS Selection

The first screen you will see after installation will look like the following one. You will have to choose a CMS. I am going to HTML.

choose html templatetoaster

Once you have made the choice now choose if you wish to customize the sample template or wish to Create a Website Using HTML from scratch. I will choose ‘Start From  Scratch’.

html start from scratch templatetoaster

Time to select the Color and Typography for your web page. Choose a color from the Color Scheme and font to apply to your page from the given font family and click OK.

choose color and typography of html template

As soon as you click on the OK, you will see the main interface of the page.  And from here you will design your page as per your requirements. It provides you the numerous options to craft a unique website.

html main interface of templatetoaster

Step 2. Choose the Layout

Go to CONTAINER ➡ Layout ➡ Fluid.  There is one more option for the layout to choose i.e. Fixed. You can choose accordingly. I will choose Fluid.

html fluid layout container templatetoaster

Step 3. Menu Design

Designing a Menu is really easy. You are free to choose where you want to place your menu i.e. Above Header, Below Header, Inside Header or No Menu at all. Menu ➡ Menu Position ➡ Above Header

html menu position above header

You can also adjust the width of the menu. Go to the Menu Tab and select the width option and then select the size you want to set for your menu. MENU ➡ Width ➡ Full Width.

html menu full width

It also lets you select a background color for your menu. You can even select an image for the menu background. I am choosing the color here. MENU ➡ Background ➡ More Color

html-menu background color

It is very easy to select the height of your menu from the given options. It is totally adjustable. Go to MENU ➡ Height ➡ More

set height of menu

Choosing an appropriate Logo for the website is really important. And from the image-rich gallery, you can easily choose the one for your website. And if you wish to apply your own custom logo then go to Browse option and select the one of your choices. MENU ➡ Logo ➡ Browse

choose menu logo

There are various other options available to style your menu. Set typography for the menu. MENU ➡ Typography

html menu typography

Step 4. Header Design

Go to the Header tab and select the appropriate width for the header. HEADER ➡ Width ➡ Full Width

html header full width

Adjust the header height according to your specifications. From given options to custom height, choose any. HEADER ➡ Height ➡ More

set header height

Make your header more lively by placing a header background image. HEADER ➡ Background ➡ More Images

html header background

Choose the text area for the header. You want to add the text to your header then go to the HEADER ➡ Text Area

html header textarea

Step 5. Adding Content

It’s time to add content to your website. You can choose how many columns you want for your website from the given options. Single column, two columns, three columns or four columns. CONTENT ➡ Columns ➡ 3

set columns

If you wish to increase the width of any column then simply go to CONTENT ➡ Width ➡ (Select any width from 1 to 12).  I am choosing 12 here for the first column because I want to emphasis on my heading here.

first column full width

This is how it will look.

design html column layout

You can add multiple rows and columns to your page. Like I did to mine. CONTENT ➡ + (click on the plus icon and add as many rows and columns as you want).

add more rows and columns

Step 6. Footer Design

You can easily create a powerful footer with TemplateToaster. It’s quite simple actually. Go to Footer tab and adjust the width of the footer according to your design. FOOTER ➡ Width ➡ Full Width

html footer full width

You are free to add background color or image to your footer. Simply go to the footer tab background and choose the color. And if you want to add some custom color then click on the more color option. FOOTER ➡ Background ➡ More Color

set footer background

Set the height of your footer. You can set any custom height of your footer. FOOTER ➡ Height

set height of footer

Set padding for the footer elements and give the look of your choice. FOOTER ➡ Padding ➡ Right / Left / Bottom / Top / More

set margin padding footer

To add the content to your footer you need to double click on the content to edit it. EDITOR ➡ Select Required Option. Take a look at the below screenshot:

footer content editor tab

You are free to add social icons to your web page in the footer section. FOOTER ➡ Social Icons

add footer social icons

Step 7. Add Pages

It facilitates you to add the pages to your menu. Like here, initially, we had three pages ie. Home, About us, and Contact page. But I have added two more pages here i.e. Services and Projects. You can achieve this simply by clicking on the ⍄ icon and you will a list of pages which are already there in your menu. After clicking on the ⊕ (plus icon) at the top a dialog box will appear where you have to choose the Name, Title, File Name, and need to add the meta description of the respective page which you want to add to your menu. And click on the Save button to finally add it. Take a look at the screenshot below.

add more pages

Step 8. Export Your HTML

In order to export your HTML go to FILE ➡ Export

html export option

After you click on the Export, a dialog box will appear and there you’ll have to choose the name of your file and then click Export.

html export dialogue

One thing is notable here that your folder (here my folder name is marin-construction) will appear to that destination whose path you have specified in the dialog box. The folder will contain all the files which you can preview by clicking on the respective file.

html folder structure after export

I am previewing index page here.

html preview export from templatetoaster

That’s all! Your beautiful HTML website is ready now.

Wrapping things up…

Creating a website using HTML is quite interesting no matter which method you choose. Isn’t it? The manual method has its own good and bad (bad only in terms of time and effort). Whereas, TemplateToaster a powerful HTML Website Builder software is a complete package in itself. And it provides the best results as it promises. So, why to struggle when you can have a beautiful site running in no time that too without any coding.

Hope you find this post helpful and you’ll stick around to chat in the comments below. Keep reading and exploring this space for more posts in the future.