business website with HTML only

How to create Business website using HTML only.

How to create a Business website using HTML only.

  • Create a Navigation bar at the top of the screen.
  • Create Four Sections (Home, About, Services, Contact).

Source Code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Project</title>
</head>
<body>
    <!--start header-->
    <table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#e2071b">
        <tr>
            <td>
                <table border="0" width="90%" cellspacing="0" cellpadding="10" align="center">
                    <tr>
                        <td>
                            <font face="arial" size="5">
                                Spanking solutions
                            </font>
                            <td >
                                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                            </td>
                        </td>
                        <td>
                            <a href="#home">
                                <font face="arial" size="5" color="#ffffff">
                                    Home
                                </font>
                            </a>
                        </td>
                        <td>
                            <a href="#about">
                                <font face="arial" size="5" color="#ffffff">
                                    About
                                </font>
                            </a>
                        </td>
                        <td>
                            <a href="#services">
                                <font face="arial" size="5" color="#ffffff">
                                    Services
                                </font>
                            </a>
                        </td>
                        <td>
                            <a href="#contact">
                                <font face="arial" size="5" color="#ffffff">
                                    contact
                                </font>
                            </a>
                        </td>

                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!--end header-->
    <!--Home starts-->
    <table id="home" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#000">
        <tr>
            <td>
                <table border="0" width="90%" cellspacing="0" cellpadding="10" align="center">
                    <tr>
                        <td align="center" valing="middle" >
                            <h2>
                                <font face="arial" size="7" color="#eee" >
                                   Hi, Welcome to Spanking solutions
                                </font>
                            </h2>
                            <h2 >
                               <font face="arial" size="5" color="#a2071b">
                                 You can hire us for 
                                 <li>Graphics designing</li>
                                 <li>Web-Development</li>
                                 <li>Mobile App-Development</li>
                               </font>
                            </h2>
                        </td>
            
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!--Home Ends-->
    <!--About Starts-->
    <table id="about" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#000">
        <tr>
            <td>
                <table height="180" border="0" width="90%"  cellspacing="0" cellpadding="10" align="center">
                    <tr>
                        <td align="center" valing="middle" colspan="2">
                                <font face="arial" size="7" color="#eee" >
                                  
                                    About Us
                                </font>
                                <hr width="20" color="#a2071b">

                        </td>
                        
                    </tr>
                    <tr>
                        <td width="40%">
                            <img src="us.jpg" alt="Spanking solutions Team" width="100%">
                        </td>
                        <td >
                            <font color="white" size="6">
                               Spanking solutions is a web development company in Pakistan.
                                We are registered with the Pakistan software export board
                                as a software development firm.
                                Spanking solutions is one of the most trusted web development 
                                companies in Pakistan.
                            </font>
                             
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!--About Ends-->
    
    <!--Services starts-->
    <table id="services" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#c2c0c3">
        
        <tr>
            <td>
                <table height="180" border="0" width="90%"  cellspacing="0" cellpadding="10" align="center">
                    <tr>
                        <td align="center" valing="middle">
                                <font face="arial" size="7" color="#292929" >
                                    <br><br>
                                    Services
                                </font>
                                <hr width="20" color="#292929">

                        </td>
                        
                    </tr>
                    <tr>
                        <td> 
                            
                            <a href="">
                                <img src="Graphics Design.jpg" alt="Graphics designing apps image" width="33%">
                            </a>
                            <a href="">
                                <img src="web-development.jpg" alt="Spanking solutions Team" width="33%"></a>
                            <a href=""><img src="Mobile App-Development.jpg" alt="Spanking solutions Team" width="33%"></a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!--Services ends-->
    <!--Contact starts-->
    <table  id="contact" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#353535">
        
        <tr>
            <td>
                <table height="180" border="0" width="90%"  cellspacing="0" cellpadding="10" align="center">
                    <tr>
                        <td align="center" valing="middle">
                                <font face="arial" size="7" color="#f3971b" >
                                    <br>
                                    Contact
                                </font>
                                <hr width="20" color="#f3971b">

                        </td>
                        
                    </tr>
                    <tr>
                        <td align="center" valign="top"> 
                            <table>
                                <tr>
                                    <td width="30%">
                                        <font face="arial" size="4" color="#ffffff">
                                            Name
                                        </font>
                                        
                                    </td>       
                                    <td width="70%">                             
                                        <font face="arial" size="4" color="#ffffff">
                                            <input type="text" size="45">
                                        </font>
                                        <br>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="30%">
                                        <font face="arial" size="4" color="#ffffff">
                                            Email
                                        </font>
                                        
                                    </td>       
                                    <td width="70%">                             
                                        <font face="arial" size="4" color="#ffffff">
                                            <input type="email" size="45">
                                        </font>
                                        <br>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="30%">
                                        <font face="arial" size="4" color="#ffffff">
                                            Message
                                        </font>     
                                        
                                    </td>       
                                    <td width="70%">                             
                                        <font face="arial" size="4" color="#ffffff">
                    
                                            <textarea name="" id="" cols="43" rows="5"></textarea>
                                        </font>
                                        <br>
                                    </td>
                                    
                                </tr>
                                <tr>
                                    <td width="30%">
                                        <font face="arial" size="4" color="#ffffff">
                                            
                                        </font>
                                        
                                    </td>       
                                    <td width="70%">                             
                                       <button>
                                        <font face="arial" size="4" color="#292929">
                                            Submit
                                        </font>
                                        
                                       </button>
                                        <br><br><br>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                
                </table>
            </td>
        </tr>
    </table>
    <!--Contact ends-->
</body>
</html>

How to create Business website using HTML only

Explanation

1. Setting the Stage:

The code starts with <!DOCTYPE html> to declare it as an HTML document.
It sets the language to English with <html lang=”en”>.
Inside the <head> section, it sets character encoding to UTF-8 for compatibility and makes the website adjust to different screen sizes.
The title of the website is set as “HTML Project”.

2. Building the Structure:

The website’s content is placed within the <body> section.
It uses tables extensively to organize the content into sections and create the layout.

3. Creating the Header:


The first table forms the header with a red background.
It displays the company name “Spanking Solutions” and links for navigation: Home, About, Services, and Contact.

4. Home Section:

The second table creates the Home section with a black background.
It has a welcoming message and a list of services offered by the company.

5. About Section:

The third table creates the About section, also with a black background.
It includes information about the company, its services, and a team photo.

6. Services Section:

The fourth table creates the Services section with a gray background.
It showcases images representing different services, likely linked to more details.

7. Contact Section:

The final table creates the Contact section with a dark gray background.
It provides a form for site visitors to post their name, email, and message to the company.
The form has input fields for text and a button to submit the info.

Key Points:

The code typically uses HTML tables to structure the website’s layout, which was not an unusual practice in the past but is less desired in current web development.
It adheres to the primary structure of an HTML document with a head and a body section.
Headings, text formatting, links, images, and a form are essential elements for this page.
It effectively creates a simple website with multiple sections and a contact form.

Thanks for reading this article.

How to create Business website using HTML only

Leave a Comment

Your email address will not be published. Required fields are marked *