How to create a Full Flash website using HTML only is easy but needs focused while making the website. You can make a website using HTML only on any software such as notepad, sublime and vscode etc. If you want to create a Full website then you need to follow the steps give below and understand each and every aspect of it. We will teach you how to create a webpage step-by-step. We will create a table in HTML to make layout adjustments so that we can design the website through our desired output.
We will create nested tables to make layout good structured and attractive.
Let’s create a file through the steps
Step 1: Creating the HTML file
Open up your computer’s plain text editor (Notepad) and create a new file. We suggest you to use Notepad (on Windows), TextEdit (on Mac) or some other simple text editor to do this such as Notepad++, VS Code etc.
Don’t use WordPad or word to do it.
Step 2: Make Header
Use nested table to make header for your HTML website and keep in mind that how much columns you have to make in header. Example in this blog we have taken 7 column in Nested table and justify it to look good.
Step 3: Create Section
Using nested table make two columns, one for image and other for writing text. In left section you will have to make buttons as well to download your Resume or contact you on WhatsApp.
Step 4: Create Services Section
Make 2 rowed nested table for services section. In first row you have to write “Services” and below it use “hr” tag to draw a line. Then after write a single statement about services in the first row itself. Don’t forget to colspan first row by 3. In second row make 3 columns and describe your services using icons / images and some text. Add background color #f3f3f3 in the row to look website attractive.
Step 5: Create Skills Section
Make 3 rowed nested table for skill section. In first row you have to write “Skills” and below it use “hr” tag to draw a line and make it colspan by 2. In second row make 2 columns and use progress tag to represent the skills parameters. In third row repeat the second row.
Step 6: Create Meet The Team Section
Make 2 rowed nested table for meet the team section. In first row you have to write “Meet the team” and make it colspan by 3. In second row make 3 or 4 columns (depends upon your team members). Add image and their name with designation
Step 7: Create Contact Form Section
Create a contact form for contact us purpose or any query. Use input type tags and submit button.
Step 8: Create Footer Section
Create a footer using nested table according to your need. Means what things you want to show in your website and how. Don’t forget to add copyright text in the bottom of the footer.
Here we create html website code document
<html>
<head>
<title> Techno Brainz </title>
</head>
<body>
<!---header--->
<table border="0" width="100%" cellspacing="0" bgcolor="#673de6">
<tr><td>
<table border="0" width="85%" align="center" cellpadding="15">
<tr>
<td> <font face="Open Sans" size="5" color="black"> <b> Techno Brainz </b></font></td>
<td width="20%"></td>
<td> <a href="#"> <font color="#fff">Home </font> </a></td>
<td> <a href="#"><font color="#fff">Services </font></a></td>
<td> <a href="#"><font color="#fff">Skills </font></a></td>
<td> <a href="#"><font color="#fff">Team </font> </a></td>
<td> <a href="#"><font color="#fff">Contact Us </font> </a></td>
</tr>
</table>
</td></tr>
</table>
<!---End header--->
<!---Home---->
<table>
<tr><td>
<table width="85%" border="0" align="center" cellpadding="15px">
<tr>
<td>
<h1> <font face="Open Sans" size="7"> Hi, </font></h1>
<h1> <font face="Open Sans" size="6"> I'm Awesome </font></h1>
<font size="3">I am an IT Trainer, Web Developer by Profession & YouTuber by Passion. I have been educating Web Development, Digital Marketing and Languages to students since 2014.</font>
<hr>
<a href="FaizCV.pdf"><button> Download CV</button> </a>
<a href="https://wa.link/673"><button> Hire Me</button> </a>
</td>
<td>
<img src="img/me.png" height="600px">
</td>
</tr>
</table>
</td></tr>
</table>
<!---End Home---->
<!--- Services--->
<table width="100%" bgcolor="#fafbff">
<tr><td>
<br><br><br><br>
<table width="85%" border="0" align="center" cellpadding="15px">
<tr align="center">
<td colspan="3">
<font size="6" face="Open sans"> Services </font> <br>
<hr align="center" width="10%">
<font size="2" face="Open sans"> These are our Services </font> <br>
</td>
</tr>
<tr align="center">
<td>
<img src="img/appd.png" width="15%"> <br><br>
<font size="5"> App Development </font> <br>
<font size="3"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form </font>
</td>
<td>
<img src="img/promotion.png" width="15%"> <br><br>
<font size="5"> Digital Marketing </font> <br>
<font size="3"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form </font>
</td>
<td>
<img src="img/webd.png" width="15%"> <br><br>
<font size="5"> Web Development </font> <br>
<font size="3"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form </font>
</td>
</tr>
</table>
<br><br><br><br>
</td></tr>
<table>
<!--- End Services--->
<!--- Skills--->
<table width="100%" bgcolor="#25282f">
<tr>
<td> <br><br><br><br>
<table border="0" width="85%" align="center" cellpadding="15px">
<tr align="center"> <td colspan="2"> <font face="Open Sans" size="6" color="#fff"> Skills </font>
<hr align="center" width="7%"> </td></tr>
<tr>
<td> <label> <font size="5" color="#fff"> HTML5 </font></label> <br><progress value="95" max="100">95% </progress> </td>
<td> <label> <font size="5" color="#fff"> CSS3 </font></label> <br><progress value="85" max="100">85% </progress> </td>
</tr>
<tr>
<td> <label> <font size="5" color="#fff"> JS </font></label> <br><progress value="65" max="100">65% </progress></td>
<td> <label> <font size="5" color="#fff"> php </font></label> <br><progress value="50" max="100">50% </progress></td>
</tr>
</table>
<br><br><br><br>
</td>
</tr>
</table>
<!--- End Skills--->
<!--- Team--->
<table width="100%">
<tr><td>
<br><br><br><br>
<table border="0" width="85%" align="center" cellpadding="15">
<tr align="center"> <td colspan="3"> <font color="" size="6"> MEET THE TEAM </font></td>
</tr>
<tr align="center">
<td> <img src="img/male.png" width="30%"> <br> <font size="6"> Faiz </font> <br> <font size="4"> Web Developer </font></td>
<td> <img src="img/female.svg" width="30%"> <br> <font size="6"> Princey </font> <br> <font size="4"> App Developer </font></td>
<td> <img src="img/male.png" width="30%"> <br> <font size="6"> Faizal </font> <br> <font size="4"> Digital Markter </font></td>
</tr>
</table> <br><br><br><br>
</td></tr>
</table>
<!--- End Team--->
<!--- Contact--->
<form>
<table width="100%" bgcolor="#673de6">
<tr><td>
<br><br><br><br>
<table border="0" width="30%" align="center" cellpadding="15">
<tr align="center">
<td colspan="2"> <font color="" size="6"> Contact Us </font> <br> <hr align="center" width="10%"> </td>
</tr>
<tr>
<td> <font color="#fff">Name : </font> </td>
<td> <input type="text"> </td>
</tr>
<tr>
<td> <font color="#fff">Mobile : </font> </td>
<td> <input type="number"> </td>
</tr>
<tr>
<td> <font color="#fff"> Message : </font> </td>
<td> <textarea cols="20" rows="4"> </textarea> </td>
</tr>
<tr align="center">
<td colspan="2"> <input type="submit"> </td>
</tr>
</table><br><br><br><br>
</td></tr>
</table>
</form>
<!--- End Contact--->
<!--- Footer--->
<table width="100%">
<tr><td>
<table border="0" width="85%" align="center" cellpadding="15">
<tr align="center">
<td>
<img src="img/telephone.png" width="25%"> <br>
<font size="6" >Phone No.</font> <br>
<font size="5">999999999.</font>
</td>
<td>
<img src="img/gmail.png" width="25%"> <br>
<font size="6" >Email us</font> <br>
<font size="5" >technobrainzofficial@gmail.com</font>
</td>
<td>
<img src="img/maps.png" width="25%"> <br>
<font size="6" >Location</font> <br>
<font size="5" >Delhi</font>
</td>
</tr>
<tr bgcolor="black" align="center">
<td colspan="3"> <font color="#fff"> copyright @ 2022 | Techno Brainz </font></td>
</tr>
</table>
</td></tr>
</table>
<!--- End Footer--->
</body>
</html>Note :-
Nested Marquee – Click here
How to Add YouTube video in HTML – Click here
Download file
Join Telegram channel to get files and software.