Projects on HTML | HTML Projects | HTML Projects with Source Code and Output

TOPIC: Resume

SOURCE CODE

<!DOCTYPE html>

<html>

<head>

<title>My Resume</title>

</head>

<body>

    <h1 align=”center”>RESUME</h1>

    <hr>

    <h2>Personal Information</h2>

<p><b>Name:</b> Roshan Sharma</p>

<p><b>Email:</b>Roshan@gmail.com</p>

<p><b>Phone:</b> +91 9876543210</p>

<p><b>Address:</b> Tinsukia, Assam, India</p>

    <hr>

    <h2>Career Objective</h2>

<p>To obtain a challenging position where I can use my knowledge and skills to contribute to the growth of the organization while continuously improving my professional abilities. </p>

    <hr>

    <h2>Educational Qualification</h2>

<table border=”1″ cellpadding=”8″ cellspacing=”0″ width=”80%”>

        <thead>

        <tr>

            <th>Qualification</th>

            <th>Institution</th>

            <th>Year</th>

            <th>Percentage</th>

        </tr>

        </thead>

        <tbody>

        <tr>

            <td>Graduation</td>

            <td>Tinsukia College</td>

            <td>2025</td>

            <td>80%</td>

        </tr>

        <tr>

            <td>Higher Secondary</td>

            <td>Tinsukia HS School</td>

            <td>2022</td>

            <td>85%</td>

        </tr>

        <tr>

            <td>HSLC</td>

            <td>ABC Public School</td>

            <td>2020</td>

            <td>90%</td>

        </tr>

        </tbody>

    </table>

    <hr>

    <h2>Technical Skills</h2>

    <ul>

        <li>HTML</li>

        <li>CSS</li>

        <li>JavaScript</li>

        <li>Python</li>

        <li>MySQL</li>

    </ul>

    <hr>

    <h2>Strengths</h2>

    <ul>

        <li>Hardworking</li>

        <li>Quick Learner</li>

        <li>Good Communication Skills</li>

        <li>Teamwork</li>

        <li>Time Management</li>

    </ul>

    <hr>

    <h2>Projects</h2>

    <ol>

        <li>Student Management System</li>

        <li>Online Book Store</li>

        <li>To-Do List Application</li>

    </ol>

    <hr>

    <h2>Personal Details</h2>

    <p><b>Date of Birth:</b> 15 March 2003</p>

    <p><b>Gender:</b> Male</p>

    <p><b>Nationality:</b> Indian</p>

    <p><b>Languages Known:</b> English, Hindi, Assamese, Bengali</p>

    <p><b>Hobbies:</b> Reading, Travelling, Listening to Music</p>

    <hr>

    <h2>Declaration</h2>

    <p>I hereby declare that the information given above is true and correct to the best of my knowledge and belief. </p>

    <br>

    <p><b>Date:</b> ____________</p>

    <p><b>Place:</b> ____________</p>

    <br>

    <p align=”right”><b>Signature</b></p>

</body>

</html>

OUTPUT

Teacher Feedback Form

SOURCE CODE

<!DOCTYPE html>

<html>

<head>

<title>Teacher Feedback Form</title>

</head>

<body>

<h1 align=”center”>Teacher Feedback Form</h1>

<p><b>Please share your honest feedback to help us improve our academic quality. </b></p>

<form>

<fieldset>

<legend><h3>Student Information</h3></legend>

<label for=”name”>Student Name:</label>

<input type=”text” id=”name” name=”name” placeholder= “Enter your name” required> <br><br>

<label for=”roll”>Roll Number:</label>

<input type=”text” id=”roll” name=”roll” required><br><br>

<label for=”email”>Email:</label>

<input type=”email” id=”email” name=”email”><br><br>

<label for=”course”>Course:</label>

<select id=”course” name=”course”>

<option value=””>– Select Course –</option>

<option value=”bca”>BCA</option>

<option value=”bba”>BBA</option>

<option value=”bsc”>BSc</option>

<option value=”bcom”>BCom</option>

<option value=”ba”>BA</option>

</select>

</fieldset><br>

<fieldset>

<legend><h3>Teacher Information</h3></legend>

<label for=”teacher”>Select Teacher:</label>

<select id=”teacher” name=”teacher” required>

<option value=””>– Select Teacher –</option>

<option value=”teacher1″>Mr. Sharma</option>

<option value=”teacher2″>Ms. Baruah</option>

<option value=”teacher3″>Mr. Rahman</option>

<option value=”teacher4″>Ms. Das</option>

</select><br><br>

<label for=”subject”>Subject:</label>

<input type=”text” id=”subject” name=”subject”>

</fieldset><br>

<fieldset>

<legend><h3>Feedback</h3></legend>

<p>1. How would you rate the teacher’s teaching? </p>

<input type=”radio” id=”excellent” name=”rating” value=”excellent”>

<label for=”excellent”> Excellent</label>

<input type=”radio” id=”good” name=”rating” value=”good”>

<label for=”good”>Good</label>

<input type=”radio” id=”average” name=”rating” value=”average”>

<label for=”average”>Average</label>

<input type=”radio” id=”poor” name=”rating” value=”poor”>

<label for=”poor”>Poor</label>

<input type=”radio” id=”vpoor” name=”rating” value= “vpoor”>

<label for=”vpoor”>Very Poor</label>

<p>2. How clearly does the teacher explain the subject? </p>

<input type=”radio” id=”vclear” name=”clarity” value=”Very Clear”>

<label for=”vclear”>Very Clear</label>

<input type=”radio” id=”clear” name=”clarity” value=”Clear”>

<label for=”clear”>Clear</label>

<input type=”radio” id=”avg” name=”clarity” value= “Average”>

<label for=”avg”>Average</label>

<input type=”radio” id=”unclear” name=”clarity” value= “Unclear”>

<label for=”unclear”>Unclear</label>

<p>3. Which areas does the teacher perform well in? </p>

<input type=”checkbox” id=”subject” name=”area” value=”subject”>

<label for=”subject”>Subject Knowledge</label>

<input type=”checkbox” id=”communication” name=”area” value=”communication”>

<label for=”communication”> Communication</label>

<input type=”checkbox” id=”clarity” name=”area” value=”clarity”>

<label for=”clarity”>Explanation Clarity</label>

<input type=”checkbox” id=”interaction” name=”area” value=”interaction”>

<label for=”interaction”>Student Interaction</label>

<p>4. Are the classes interesting? </p>

<input type=”radio” id=”yes” name=”interesting” value=”yes”>

<label for=”yes”>Yes</label>

<input type=”radio” id=”no” name=”interesting” value=”no”>

<label for=”no”>No</label>

<input type=”radio” id=”sometimes” name=”interesting” value=”sometimes”>

<label for=”sometimes”> Sometimes</label>

<p>5. Are you satisfied with the teacher’s teaching? </p>

<input type=”radio” id=”yes” name=”satisfaction” value=”Yes”>

<label for=”yes”>Yes</label>

<input type=”radio” id=”no” name=”satisfaction” value=”No”>

<label for=”no”>No</label>

<p>6. Is the teacher approachable and willing to clear doubts outside class? </p>

<input type=”radio” id=”always” name= “approachability_rating” value=”always” required>

<label for=”always”> Always Approachable</label>

<input type=”radio” id=”sometimes” name= “approachability_rating” value=”sometimes”>

<label for=”sometimes”> Sometimes Approachable</label>           

<input type=”radio” id=”rarely” name= “approachability_rating” value=”rarely”>

<label for=”rarely”>Rarely Approachable</label>

<p>7. Overall Rating</p>

<select id=”rating” name=”rating” required>

<option value=”” disabled selected>Select rating</option>

<option value=”5″>5 – Excellent</option>

<option value=”4″>4 – Good</option>

<option value=”3″>3 – Average</option>

<option value=”2″>2 – Poor</option>

<option value=”1″>1 – Very Poor</option>

</select>

<p>8. Which qualities of the teacher do you appreciate? </p>

<input type=”checkbox” id=”knowledge” name=”quality” value=”Knowledge”>

<label for=”knowledge”>Good Subject Knowledge</label><br>

<input type=”checkbox” id=”interaction” name=”quality” value=”Interaction”>

<label for=”interaction”>Good Interaction</label><br>

<input type=”checkbox” id=”punctuality” name=”quality” value=”Punctuality”>

<label for=”punctuality”> Punctuality</label><br>

<input type=”checkbox” id=”explanation” name=”quality” value=”Explanation”>

<label for=”explanation”>Clear Explanation</label>              

<p>9. Additional Comments / Suggestions for Improvement</p>

<textarea id=”comments” name=”comments” rows=”5″ cols=”50″ placeholder=”Share your constructive feedback here…” required></textarea>

</fieldset><br>

<input type=”submit” value=”Submit Feedback”>

<input type=”reset” value=”Reset”>

</form>

<p align=”center”><b>Thank you for your valuable feedback! </b></p>

</body>

</html>

OUTPUT

Job Apply Webpage

SOURCE CODE

<!DOCTYPE html>

<html>

<head>

<title>Job Application Form</title>

</head>

<body>

<h1 align=”center”>Job Application Form</h1>

<p align=”center”>Please fill out every field carefully to apply for our current openings.</p>

<hr>

<form>

<h3>Personal Information</h3>

<label for=”name”>Full Name:</label>

<input type=”text” id=”name” name=”name” size=”30″ required>

<br><br>

<label for=”email”>Email Address:</label>

<input type=”email” id=”email” name=”email” size=”25″ required>

<br><br>

<label for=”phone”>Phone Number:</label>

<input type=”tel” id=”phone” name=”phone” pattern=”[0-9]{10}” placeholder=”10-digit number” required>

<br><br>

<label for=”dob”>Date of Birth:</label>

<input type=”date” id=”dob” name=”dob”>

<br><br>

<label>Gender:</label>

<input type=”radio” id=”male” name=”gender” value=”Male”>

<label for=”male”>Male</label>

<input type=”radio” id=”female” name=”gender” value=”Female”>

<label for=”female”>Female</label>

<input type=”radio” id=”other” name=”gender” value=”Other”>

<label for=”other”>Other</label>

<br><br>

<label for=”address”>Address:</label>

<br>

<textarea id=”address” name=”address” rows=”5″ cols=”50″ placeholder=”Enter your address”></textarea>

        <hr>

        <h3>Job Information</h3>

        <label for=”position”>Position Applied For:</label>

        <select id=”position” name=”position” required>

            <option value=””>– Select Position –</option>

            <option value=”web-developer”>Web Developer</option>

            <option value=”software-developer”>Software Developer</option>

            <option value=”data-analyst”>Data Analyst</option>

            <option value=”graphic-designer”>Graphic Designer</option>

            <option value=”accountant”>Accountant</option>

            <option value=”data-entry”>Data Entry Operator</option>

            <option value=”teacher”>Teacher</option>

 </select>

        <br><br>

        <label>Preferred Location:</label>

        <select name=”location”>

            <option>– Select Location –</option>

            <option>Guwahati</option>

            <option>Delhi</option>

            <option>Mumbai</option>

            <option>Bangalore</option>

            <option>Hyderabad</option>

            <option>Kolkata</option>

        </select>

        <br><br>

        <label>Employment Type:</label>

        <input type=”radio” name=”employment” value=”Full Time”>

        <label>Full Time</label>

        <input type=”radio” name=”employment” value=”Part Time”>

        <label>Part Time</label>

        <input type=”radio” name=”employment” value=”Internship”>

        <label>Internship</label>

        <br><br>

         <label>Preferred Work Setup </label> 

<input type=”radio” id=”remote” name=”work_setup” value=”remote” checked>

<label for=”remote”>Remote</label>

<input type=”radio” id=”onsite” name=”work_setup” value=”onsite”>

        <label for=”onsite”>On-site</label>

        <input type=”radio” id=”hybrid” name=”work_setup” value=”hybrid”>

        <label for=”remote”>Hybrid</label>    

        <hr>

        <h3>Educational Qualification</h3>

        <label>Highest Qualification:</label>

        <select name=”qualification”>

            <option>– Select Qualification –</option>

            <option>10th</option>

            <option>12th</option>

            <option>Diploma</option>

            <option>Graduation</option>

            <option>Post Graduation</option>

        </select>

        <br><br>

        <label>College / University:</label>

        <input type=”text” name=”college”>

        <br><br>

        <label>Year of Passing:</label>

        <input type=”number” name=”year” min=”1950″ max=”2030″>

        <hr>

        <h3>Skills</h3>

        <p>Select your skills:</p>

<input type=”checkbox” name=”skill” value=”HTML”>

<label>HTML</label>

<input type=”checkbox” name=”skill” value=”CSS”>

<label>CSS</label>

        <input type=”checkbox” name=”skill” value=”JavaScript”>

        <label>JavaScript</label>

        <input type=”checkbox” name=”skill” value=”Python”>

        <label>Python</label>

        <input type=”checkbox” name=”skill” value=”Java”>

        <label>Java</label>

        <br><br>

        <label>Work Experience:</label>

        <br>

        <textarea name=”experience” rows=”5″ cols=”50″

                  placeholder=”Describe your work experience”></textarea>

        <hr>

        <h3>Upload Resume/CV (PDF or Doc)</h3>

        <label>Resume:</label>

        <input type=”file” name=”resume”>

        <br><br>

        <label for=”message”>Why should we hire you?</label><br>

<textarea id=”message” name=”message” rows=”5″ cols=”50″ placeholder=”Tell us why you are a great fit for this position…”></textarea>

        <br><br>

        <h3>Declaration</h3>

<input type=”checkbox” id=”declartion” name=”declaration” required>

<label for=”declaration”>

            I declare that the information provided by me is true

            and correct to the best of my knowledge.

        </label>

        <br><br>

        <input type=”submit” value=”Apply Now”>

        <input type=”reset” value=”Reset”>

    </form>

    <hr>

    <p align=”center”>

        <b>Thank you for applying!</b>

    </p>

</body>

</html>

OUTPUT

Cyber Crime Complaint Form

SOURCE CODE

<!DOCTYPE html>

<head>

    <title>Cyber Crime Complaint Form</title>

</head>

<body>

<h1 align=”center”>Cyber Crime Complaint Form</h1>

<p>Please fill out this form accurately to report a cyber crime incident. Fields marked with an asterisk (*) are required.</p>

<form action=”#” method=”post”>

<!– Complainant Information Section –>

<fieldset><legend><h3>1. Complainant Information</h3></legend>

<label for=”full-name”>Full Name *:</label>

<input type=”text” id=”full-name” name=”full_name” required><br><br>

<label for=”age”>Age *:</label>

<input type=”number” id=”age” name=”age” min=”1″ max=”100″ required><br><br>

<label for=”email”>Email Address *:</label>

<input type=”email” id=”email” name=”email” required><br><br>

<label for=”phone”>Phone Number *:</label>

<input type=”tel” id=”phone” name=”phone” pattern=”[0-9]{10}” placeholder=”10-digit number” required><br><br>

<label for=”address”>Address:</label><br>

<textarea id=”address” name=”address” rows=”4″ cols=”40″></textarea>

</fieldset><br>

<fieldset>

<legend><h3>2. Complaint Details</h3></legend>

<label for=”crime-type”>Type of Cyber Crime *:</label>

<select id=”crime-category” name=”crime_type” required>

<option value=””>– Select Crime Type –</option>

<option value=”identity-theft”>Identity Theft</option>

<option value=”phishing”>Phishing / Email Scam</option>

<option value=”cyber-bullying”>Cyber Bullying / Harassment</option>

<option value=”online-fraud”>Online Financial Fraud</option>

<option value=”hacking”>Hacking / Unauthorized Access</option>

<option value=”social-media”>Social Media Crime</option>

<option value=”other”>Other</option>

</select><br><br>

<label for=”incident-date”>Date of Incident *:</label>

<input type=”date” id=”incident-date” name=”incident_date” required><br><br>

<label>Website / Social Media Platform:</label>

<input type=”text” name=”platform”><br><br>

<label>Amount of Money Lost:</label>

<input type=”number” name=”amount” min=”0″ placeholder=”Enter amount”><br><br>

<label>Complaint Description *:</label><br>

<textarea id=”incident-description” name=”incident_description” rows=”6″ cols=”50″ placeholder=”Please describe the problem or incident. Provide a detailed timeline of events, websites visited, or accounts involved” required></textarea>

</fieldset><br>

<!– Evidence & Suspect Details Section –>

<fieldset>

<legend><h3>3. Evidence & Suspect Information</h3></legend>

<label for=”suspect-details”>Suspect Details (if known): </label> <br>

<p><small>Include names, usernames, email addresses, phone numbers, or IP addresses if available.</small></p>

<textarea id=”suspect-details” name=”suspect_details” rows=”5″ cols=”50″></textarea><br><br>

<p>What type of evidence do you have?</p>

<input type=”checkbox” id=”screenshot” name=”evidence” value=”Screenshot”>

<label for=”screenshot”>Screenshots</label><br>

<input type=”checkbox” id=”email” name=”evidence” value=”Email”>

<label for=”email”>Emails</label><br>

<input type=”checkbox” id=”messages”   name=”evidence” value=”Messages”>

<label for=”messages”>Messages / Chats</label><br>

<input type=”checkbox” id=”transaction” name=”evidence” value=”Transaction”>

<label for=”transaction”>Transaction Details</label><br>

<input type=”checkbox” id=”other” name=”evidence” value=”Other”>

<label for=”other”>Other Evidence</label><br><br>

<label for=”evidence-file”>Upload Evidence (Screenshots, Chat Logs, Receipt PDFs):</label><br><br>

<input type=”file” id=”evidence-file” name=”evidence_file” multiple>

</fieldset><br>

<fieldset>

<legend><h3>4. Declaration</h3></legend>

<input type=”checkbox” id=”declaration” name=”declaration” required>

<label for=”declaration”>I hereby declare that the information provided above is true and accurate to the best of my knowledge. *</label>

</fieldset><br>

<input type=”submit” value=”Submit Complaint”>

<input type=”reset” value=”Clear Form”>

</form>

</body>

</html>

OUTPUT

Leave a Comment