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).
The source code for this project is available for download by clicking ‘Download Now’ or cloning the GitHub repository.
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">
Sparkify solutions
</font>
<td >
</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 Sparkify 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">
Sparkify Solutions is a web development company in Pakistan.
We are registered with the Pakistan software export board
as a software development firm.
Sparkify 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>
<tdalign="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">
</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
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.