CREATE A 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" color="#ffffff">
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>
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 “Sparkify 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 on how to create a business website with HTML only by Sparkify Solutions.