Connect with us

Blogging

HTML Project: Create a Website using HTML with code

Published

on

Create Website using HTML

Create a website using HTML for School/College projects for students, teaching or any other purpose.

How it started: Create a website using HTML

Before two years, when I was in the college, I was given a project/practical to create a website using HTML and submit it in 2 days to the teacher. So, I worked on it and created a website. The conditions for creating the website were as follows:

  • The website should look attractive and the color combinations should be good (Color Combination like Dark Blue text in the Black background makes it difficult to read the text).
  • There must be at least 4 pages like About Us, Contact Us, Image Gallery and the Homepage itself.
  • The website should be created using HTML only (No CSS/JavaScript or any other language).

Also, we had to create two types of websites:

  1. College Profile (Like a website of a School/College/University)
  2. Business Profile (Like a website of Apple/Microsoft like company)

In this post, you’ll find both the types of websites in a single code. You just have to interchange the position of some elements.

A Note for Students

If you are a student and you’re using this ready-made template for your own school/college work, then you’re doing wrong. Copy-pasting this code will get you good marks in the project/practical but it’ll make you a loser in future (because people will ask you questions and you won’t be able to answer them). You know, practical knowledge and imagination are very important than theoretical knowledge.

Imagining things make it easier to understand. When you copy the code from here, try reading the code bit-by-bit and understand it. If you need any help, comment below. I wrote this whole code by myself and suggest you not to use it directly. Just read, understand and create a website using HTML by your own.

Code and Explanation

Homepage Image:

HTML Website code create

HTML Website code create

Homepage Code: (home.html)

<html>

<head>
<title>Informer Fox HTML website</title>

<title>Informer Fox HTML website</title>
</head>

<body bgcolor=#FEE5E5>
<img src=”images/LOGO.png” alt=”Informer Fox Logo” width=600 height=100 align=left>
<br><br><br><br><br><br>
<hr size=6 color=blue>
<marquee bgcolor=”yellow” behavior=”alternate” scrollamount=15><font size=4 face=arial color=red>
*****<u>Informer Fox – Tech News, Blogging Tips and Reviews</u>***** </font></marquee>
<hr size=5 color=red>
<center>
<font size=4 color=red>
1. <a href=”images.htm”>IMAGE SECTION</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
2. <a href=”about.html”>ABOUT US</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
3. <a href=”disclaimer.html”>DISCLAIMER</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
4. <a href=”contact.html”>CONTACT US</a>
</font>
</center>
<hr size=6 color=green>
<img src=”images/img2.jpg” alt=”Header Image” height=400 width=100% align=center></img>
<center> <font color=red size=5 face=”Algerian”><u>PLACE ANY IMAGE HERE</u></font></center>
<hr size=5 color=green>
<center>
<marquee bgcolor=skyblue scrollamount=13 behavior=alternate>
<a href=”images.htm”>
<table>
<tr>
<td><img src=”images/img1.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img3.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img4.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img2.jpg” align=left width=250 height=250></img>
</td>
<td><img src=”images/img5.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img1.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img3.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img4.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img2.jpg” align=left width=250 height=250></img>
</td>
<td><img src=”images/img5.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img1.png” align=left width=250 height=250></img>
</td>
</table>
</a>
</marquee>
</center>
<hr size=4 color=green>
<font color=purple size=4> This Webpage is designed by,
<font color=red><a href=”http://www.thawale.com”>Rushikesh Thawale</a><br></font>
<hr color=blue>
</font>
<marquee bgcolor=”grey”><font size=5 face=arial color=white>
<u>BEFORE LEAVING THE WEBSITE, PLEASE READ THE DISCLAIMER (put any message here)<u></font></marquee>
</body>

</html>

 

The Homepage

In the homepage, there is a logo on the top-right corner. Be sure to adjust the width and height of the image. You can align the image to center by adding the attribute align=”center” to the <img> tag.

Below the logo, there is a Horizontal line <hr> with different attributes like size and color. I have used <hr> tag many times. Between two <hr> tags, you can write the tagline of your site.

After that, you can add an image. Save the names properly. While using the <img> tag in the code, use the extension as .jpg only. Do not use .jpeg. Sometimes .jpeg extension shows the broken image.

Next is the most important part of this homepage. As we are creating the website just using HTML, we cannot use CSS/JavaScript effects here. Suddenly a thought came in my mind that, I should add rotating images on the front page. To do this, I used a table, added images to it and then added the <marquee> tag to the table. So the table started rotating and the images too started rotating.

Contact Us Page

Contact us page image:

HTML Website contact us

HTML Website contact us

Contact us page code: (contact.html)

<html>

<head>
<title>Contact Us</title>
</head>

<body bgcolor=yellow>
<h1> See the Contact Details below : </h1>
<hr color=blue>
<center>
<font size=5 color=red>Rushikesh Thawale<br>
Founder-Owner and CEO<br>
Thawale InfoTech<br>
Tel: +91 ##########,<br>
Fax: +91 ##########.<br>
Email: [email protected]<br>
Website: www.thawale.com<br>
</font>
<hr color=blue>
<img src=”images/img6.jpg” width=50% height=300>
<br>
<hr color=blue><a href=”home.html”><font size=5 face=”arial black”> <—- Back To Home </font></a>
</center>
</body>

</html>

Here, you can use the form tag too to create a form.

Image section Page

Image page screenshot:

HTML Website Image page

HTML Website Image page

Image page Code: (images.htm)

<html>

<head>
<title>Photo Gallery</title>
</head>

<body bgcolor=#F8E0EC>
<center>
<h1>Photo Gallery</h1></center>
<hr size=5 color=pink>
<center>
<marquee bgcolor=skyblue scrollamount=13 behavior=alternate>
<table>
<tr>
<td><img src=”images/img1.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img3.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img4.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img2.jpg” align=left width=250 height=250></img>
</td>
<td><img src=”images/img5.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img1.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img3.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img4.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img2.jpg” align=left width=250 height=250></img>
</td>
<td><img src=”images/img5.png” align=left width=250 height=250></img>
</td>
<td><img src=”images/img1.png” align=left width=250 height=250></img>
</td>
</table>
</marquee>
<br>
<hr color=pink size=5>
<table>
<tr>
<td><img src=”images/img1.png” align=left height=90%></img>
</td>
<td><img src=”images/img3.png” align=right></img>
</td>
</table>
<br>
<table>
<tr>
<td><img src=”images/img2.jpg” align=center></img>
</td>
</table>
<br>
<table>
<tr>
<td><img src=”images/img4.png” align=left width=100% height=100%></img>
</td>
<td><img src=”images/img5.png” align=right></img>
</td>
</table>
<br>
<br>
<hr color=black>
<a href=”home.html”><font size=5 face=”arial black”> <—- Back To Home </font></a>
<hr color=black>
</center>
</body>

</html>

Similarly, You can create the About Us page and the Disclaimer/Privacy or any other page.

I have listed the important pages and tags to create a website using HTML. If you need any help or having a problem while using this code, comment below.

Rushikesh Thawale is the pioneer of InformerFox.com and loves to write about Android, Technology, Mobile Phones, News and other such stuff. Apart from websites, he has interest in Music Production and Singing. Connect on Facebook and Twitter

4 Comments

4 Comments

  1. Amanda

    October 7, 2017 at 2:32 am

    Nice template for Kids, but you should display the script/code nicely.

    • Rushikesh Thawale

      October 7, 2017 at 2:34 am

      Yes, will improve it and update the post! Thanks for the suggestion!

  2. ANAND

    May 29, 2018 at 9:16 pm

    I know HTML. I want to learn Javascript. Please suggest me some websites list for learning Java script.

Leave a Reply

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

Trending