College website project in html download

What is HTML?

HTML is the heart of the entire web. Whatever content we see online is based on HTML. If you simply right-click on any web page and click on View Source, you will be able to see loads of tags, the first one being <html> which means the document is an HTML file. 
The basic structure of HTML:
<!DOCTYPE HTML>
<html>
<head>
   <title>Title of the page</title>
</head>
<body>
   <form action="some_action" method="POST">
   </form>
</body>
</html>
  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.

Example Explained

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
  • The <body> element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

Why HTML projects?

Projects are the most practical way to learn any language, and HTML is no exception. To build any website, you need a basic understanding of HTML and if you want interactive custom websites, just knowing the cheat sheet is not enough – you should be able to implement your knowledge practically.

5 Best HTML Projects for Beginners

1) survey form

Websites often include forms as a part of their customer data collection strategy. A well-made survey form can help you acquire relevant information about your target audiences like their demographic age, job, location, taste and preference, and pain points. This HTML project is a great way to test your skills and knowledge of designing forms and structuring a webpage. 
Building a survey form is no rocket science. You need to acquaint yourself with the basic tags/input fields in HTML required to design forms. Then you can use the tags to create a text field, checkbox, radio button, date, and other vital elements contained in a form. Again, you can always use CSS to impart a better look and feel to your form and webpage. 
<!DOCTYPE HTML>
<!-- This is how HTML comments look like -->
<html>
<!-- the title will appear on the page-->
<head>
<title>Employee Interests Survey</title>
</head>
<body>
<!-- as it is a survey form, we will need to submit the details, hence we use form -->
<!-- We can give absolute url, or relative url like /nextpage.jsp, and specify POST or GET method -->
<form action="http://google.co.in">
<!-- If we remove this, every thing will move to the left of the page-->
<div align="center">
<!--Adds a heading to the form-->
<h1>Employee Interests Survey form</h1>
Enter your name:
<!-- Input type text for small texts, specify size -->
<input type="text" name="UserName" size=35 maxlength=35 value="">
<!--Adds spaces - remove and see what happens -->
</br></br>
Enter your department:
<input type="text" name="Deptt" size=35 maxlength=35 value=""> </br> </br>
Tell us a little about yourself:
<!-- For writing lot of text like descriptions with text wrapping,
if you dont want text wrapping, you can add wrap = "off" (horizontal scrollbar -->
<textarea name="Comments" cols=30 rows=4></textarea> </br> </br>
Do you exercise at home?
<!-- Radio buttons help you choose one out of the many values -->
<input type="radio" name="exe" value=1>Yes
<input type="radio" name="exe" value=2>No
</p>
How do you like to read about your favorite topics?
<p>
<!--Checkbox lets you select multiple options -->
<input type="checkbox" name="Books">Books
<input type="checkbox" name="Web">Online resources
<input type="checkbox" name="Phone">Phone apps
<input type="checkbox" name="Magazines">Magazines
</p>
What genre of movies do you like?
<!--Select box lets you choose one of the multiple dropdown options-->
<select name="moviepref" ><option>
<option value=1 selected = "true">comedy
<option value=2 >romance
<option value=3 >thriller
<option value=4 >horror
<option value=5 >biopic
</select>
</br></br>
<!--submits the information entered in the form by the user -->
<input type=submit value="Submit form">
</div>
</form>
</body>
</html>

output : 
survey form

Download another source code of Survey Form in HTML :


2) Landing page

This project requires a strong knowledge of HTML and CSS. Since a landing page includes numerous vital elements, you will have to combine your HTML knowledge with your creative skills. 
For the landing page, you will have to create columns and margins, align the items in the columns, boxes, add footer and header, create separate sections for content/site elements, and edit images (crop and resize). Apart from this, you will have to choose the right colors for the page. The color combinations should be such that they complement each other – each section can have a different color. When you use CSS for styling and layout, make sure that the page elements do not clash anywhere. 
Download source  code here

3) Event page

This is another easy project that you can experiment with! It will involve creating a static page displaying the details of an event (conference, webinar, product launch, etc.). You will need both HTML and CSS for this project.
The layout of the event page will be simple. The header section will contain the names and images of the different speakers with links, the event venue, and the schedule. You must also include a section that describes the purpose of the event – what the event is for and which category of audience it aims to target. Section the page into smaller chunks to make it look neat. Choose the right font style, font color, and background color for individual sections on the page. Also, make sure to add a registration button so that interested people can register for the event.

4) Technical Documentation Page

Every language, software, hardware, etc. has technical documentation for information and help. Here is how you can create a simple documentation page, with internal linking from the left navigation to the content on the right of the page. You can check out the documentation for PythonJavaArduino, etc. for reference on how these pages look. Most technical documentation has multiple hierarchies and pages; however, for simplicity, we have created a simple project to start. You can expand it further and add it as per your wish. Technical documentation could be a beneficial HTML project if you are just starting with your HTML career.
<html>
<!--This example uses the default bootstrap stylesheet-->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--provides a full-width container that can expand or collapse based on the size of viewport-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-sm-12 col-xs-12">
            <nav id="navbar">
                <h3>Technical Documentation</h3>
                <!--content stacking for smaller screens-->
                <ul class="nav nav-pills nav-stacked">
                 <!--internal linking to the respective sections-->
                    <a class="nav-link" href="#Introduction" rel="internal">
                        <li>Introduction</li>
                    </a>
                    <a class="nav-link" href="#What_you_should_already_know" rel="internal">
                        <li>What you should already know</li>
                    </a>
                    <a class="nav-link" href="#About_Topic" rel="internal">
                        <li>About the topic</li>
                    </a>
                    <a class="nav-link" href="#Topic_1" rel="internal">
                        <li>Topic 1</li>
                    </a>
                    <a class="nav-link" href="#Topic_2" rel="internal">
                        <li>Topic 2</li>
                    </a>
                 </ul>
            </nav>
        </div>
        <div class="col-md-10 col-sm-12 col-xs-12">
            <main id="main-doc">
                <section class="main-section" id="Introduction" >
                 <!--basic styling for the headings, better practice to do the same in a css file as the styling is same for all headers-->
                    <h3 style = "background: black; color: white">Introduction</h3>
                    <article>
                    <p>Some content about the main topic, for example Java documentation introduction about the language
                        </article>
                </section>
                <section class="main-section" id="What_you_should_already_know">
                    <h3 style = "background: black; color: white">What you should already know</h3>
                    <article>
                        <p>Background information before getting into the topic:</p>
<!--creating list using html-->
                        <li>Some list content</li>
                        <li>Prerequisites.</li>
                        <li>Workings and assumptions</li>
                        <p>Any other content to be covered before learning this topic</p>
                        </artice>
                </section>
                <section class="main-section" id="About_Topic">
                    <h3 style = "background: black; color: white">About topic</h3>
                    <article>
                        <p>More lines about the topic. For example, how the basic functionality works, features etc...</p>
                        <p>
                        Technical documentation should be thorough and to the point
                        </p>
                        <p>
                        Write about features, comparisons with other languages etc
                        </p>
                    </article>
                </section>
                <section class="main-section" id="Topic_1">
                    <h3 style = "background: black; color: white">Topic 1</h3>
                    <article>
                        Getting started with the actual documentation content
                        <code>This would come in a different color and font indicating lines of code
                        </code>
                    </article>
                </section>
                <section class="main-section" id="Topic_2">
                    <h3 style = "background: black; color: white">Topic 2</h3>
                    <p>
Another topic about the main topic, for example, if the topic is Java, this could be variables or data types in Java
                    </p>
                </section>
            </main>
        </div>
    </div>
</div>
</html>

output: 
Technical Documentation Page

5) Animated Website Home Page

In this project, we will create a homepage that will display a logo and some menu items. You can also have some fun with the keyframes tag for animations. Note how the navigation menu and the rest of the page are separated using the height property. You can apply a background image, and change the height to 85vh or 100vh and see the difference it makes.
<html>
<head>
<title></title>
<!-- Apply styles to html elements -->
<style>
*{
margin:0; padding:0; boxsizing:border-box;
}
header{
width: 100%; height: 100vh;
background-color: white;
background-repeat: no-repeat;
background-size: cover;
}
nav{
width: 100%; height: 15vh;
background: black;
display: flex; justify-content: space-between;
align-items: center;
}
nav .mainmenu{
width: 40%;
display: flex; justify-content: space-around;
}
main{
width: 100%; height: 85vh;
display: flex; justify-content: center;
align-items: center;
text-align: center;
}
section h3{
letter-spacing: 3px; font-weight: 200;
}
section h1{
text-transform: uppercase;
}
section div{
animation:changeborder 10s infinite linear;
border: 7px solid red;
}
@keyframes changeborder{
0%
20%
40%
}
</style>
</head>
<body>
<!--Let us create a simple menu using the navigation tags-->
<!--Use header to indicate that manu will be a part of header -->
<header>
<nav>
<div class = "logo" <h3 style="color:white;">MYLOGO</h3></div>
<!--Lets define the menu items now-->
<div class = "mainmenu">
<a href="https://hackr.io/tutorials/learn-html-5">Home</a>
<a href="https://hackr.io/tutorials/learn-html-5">About Us</a>
<a href="https://hackr.io/tutorials/learn-html-5">Contact Us</a>
</div>
</nav>
<!--Let us create the main section now, if you are not using html5, use div tags-->
<main>
<section>
<!--Check out the styling elements for this div class - change_text -->
<div class = "change_text"><b>WELCOME TO XXX ELECTRONICS</b></div>
<!--make text italic-->
<p><i>All your electronics needs in one place</i></p><br>
<!--create a button, if there is a form, you can specify an action on click-->
<input type = button value = "view more">
</section>
</main>
</header>
</body>
</html>

output:
Animated Website Home Page

1 thought on “College website project in html download”

  1. Do you mind if I quote a few of your posts as long as I provide credit and sources back to your site? My blog is in the exact same niche as yours and my visitors would really benefit from a lot of the information you provide here. Please let me know if this okay with you. Appreciate it!

Leave a Comment

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